/* //////////////////////////////////////////////////////////////////////////////////////////////////////// Bug Text */

.bug-container {
  max-width: 90%;
  margin: 0 auto;
  padding: 6vw 5vw;
  margin-top: 3em; /* Abstand unter Header */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Zentrale Überschrift */
.bug-title {
  color: #ff8800;
  text-align: center;
  font-size: 2.8em;
  font-weight: 550;
  margin-bottom: 1.5vw;
  letter-spacing: 0.05em;
}

/* Linker Infobereich */
.bug-info {
  align-self: flex-start;
  max-width: 45%;
  text-align: left;
}

.bug-info-title {
  font-size: 1.6em;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.6em;
}

.bug-info-text {
  color: #222;
  font-size: 1.05em;
  line-height: 1.6;
}

/* //////////////////////////////////////////////////////////////////////////////////////// Strich */

.vertical-line {
  position: absolute;
  top: 14em;
  bottom: 21em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.15vw;
  background-color: #222; /* dein Orange */
  border-radius: 1em;
  z-index: 0;
}

body {
  position: relative;
  min-height: 100vh;
}

/* //////////////////////////////////////////////////////////////////////////////////////// Footer Platz */

.footer-spacer-bug {
  height: 2vw; /* oder z. B. 200px – je nach gewünschtem Abstand */
}

/* //////////////////////////////////////////////////////////////////////////////////////// BUG MELDEN (rechte Seite) */

.bug-report {
  position: absolute;
  right: 8vw;
  top: 15.5em;         /* bündig mit Beginn der Linie */
  max-width: 35%;
  text-align: left;
  color: #222;
  z-index: 1;        /* über der Linie */
}

/* Titel und Beschreibung */
.bug-report-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.6em;
}

.bug-report-text {
  font-size: 1.05em;
  line-height: 1.6;
  margin-bottom: 1.2em;
}

/* Formular */
.bug-form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* Zwei Felder nebeneinander */
.bug-row {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap; /* sorgt für Umbruch auf kleineren Bildschirmen */
}

.bug-field {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
}

.bug-label {
  font-weight: 600;
  color: #444;
  margin-bottom: 0.4em;
}

.bug-input,
.bug-textarea,
.bug-file {
  width: 100%;
  font-size: 1em;
  border: 0.1em solid #ccc;
  border-radius: 0.6em;
  padding: 0.8em;
  font-family: inherit;       
  color: #222;                
  transition: border-color 0.3s ease;
  background-color: #fff;
}

.bug-textarea {
  height: 10em;
  resize: vertical;
}

.bug-input:focus,
.bug-textarea:focus {
  border-color: #de800e;
  outline: none;
}

.bug-file {
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
}

.bug-submit {
  position: relative;      /* NEU → nötig für z-index */
  z-index: 10;             /* NEU → liegt über Upload-Bereich */
  align-self: flex-end;
  background-color: #555;
  color: #fff;
  border: none;
  border-radius: 0.6em;
  padding: 0.85em 1.5em;
  cursor: pointer;
  font-weight: 500;
   margin-top: -0.4vw;
   font-size: 0.9em;
  transition: background-color 0.3s ease;
}

.bug-submit:hover {
  background-color: #747475;
}

/* Pflichtfeld-Markierung */
.bug-label.required::after {
  content: "*";
  color: red;
  font-weight: 500;
}

/* Pflichtfeld-Markierung */
.bug-label.required::after {
  content: " *";
  color: red;
  font-weight: 700;
  margin-left: 0.2em;
}

/* Info unter dem Formular */
.bug-note {
  font-size: 0.95em;
  color: #555;
  margin-top: 0.2em;
  font-style: italic;
}

.required-symbol {
  color: red;
  font-weight: 700;
}

/* Etwas geringeren Abstand zwischen Feldern */
.bug-form {
  display: flex;
  flex-direction: column;
  gap: 0.8em; /* vorher 1em */
}

.bug-textarea {
  height: 8em;
  resize: none; /* 👈 verhindert das Vergrößern/Verkleinern */
}

/* Optional: etwas Abstand zwischen Beschreibung und Upload */
#bug-description {
  margin-bottom: 0.5em;
}

.bug-upload {
  margin-top: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8em;
}

.bug-upload-title {
  font-weight: 600;
  color: #555;
  font-size: 1em;
  margin-bottom: 0.3em;
  margin-top: -1.5em;
}

.bug-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background-color: #555;     /* Grau */
  color: #fff;
  padding: 0.55em 1em;           /* etwas kleiner */
  border-radius: 0.5em;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95em;             /* etwas kleiner */
  margin-top: -2.85vw;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

.bug-upload-label:hover {
  background-color: #747475;     /* dunkleres Grau beim Hover */
}

.bug-upload-label:active {
  transform: scale(0.98);
}

/* Versteckt das Standard-Input */
.bug-file {
  display: none;
}

/* Drag-and-Drop Bereich */
.bug-upload-hint {
  font-size: 0.9em;
  color: #666;
  margin-top: -0.2em;
}

/* Dateianzeige */
.file-count {
  font-size: 0.9em;
  color: #333;
  margin-top: -4em;
  font-style: italic;
}

/* Dropzone Style beim Drag */
.bug-upload.dragover .bug-upload-label {
  background-color: #ff8800;
  box-shadow: 0 0 10px rgba(255,136,0,0.4);
}

/* Damit absolut positionierte Kinder sich an .bug-upload ausrichten */
.bug-upload { position: relative; }

/* EIN fester Ort (oben rechts) für ALLE Upload-Messages (inkl. Lösch-Hinweis) */
.file-error {
  position: absolute;
  top: -12em;        /* statt 5em */
  right: 12em;          /* statt 25em */
  background-color: #f44336;
  color: #fff;
  font-weight: 600;
  font-size: 0.9em;
  padding: 0.6em 1.2em;
  border-radius: 0.6em;
  box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(-0.6em);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
}

/* sichtbar */
.file-error.show {
  opacity: 1;
  transform: translateY(0);
}


/* Damit das Overlay über dem Upload-Container positioniert wird */
.bug-upload {
  position: relative;
}

.file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
  margin-top: 2em;
}

.file-remove-btn {
  position: absolute;
  top: -0.4em;
  right: -0.4em;
  width: 1.8em;              /* statt 24px */
  height: 1.8em;
  border: none;
  border-radius: 50%;
  background: #ff4d4f;
  color: #fff;
  font-size: 0.9em;          /* statt 16px */
  line-height: 1.8em;
  cursor: pointer;
  box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, transform 0.15s ease;
  z-index: 3;
}

.file-remove-btn:hover {
  background: #e63e40;
  transform: scale(1.05);
}

.bug-note {
  margin-top: -1em;
  margin-bottom: 2em;
  font-size: 0.85em;
  color: #444;
  font-style: italic;
  line-height: 1.5;
}

.required-symbol {
  color: #e53935;
  font-weight: 700;
}

/* Loader / Spinner Animation */
.file-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5em;
  height: 2.5em;
  border: 0.3em solid rgba(0,0,0,0.1);
  border-top-color: #de800e;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spin 0.9s linear infinite;
  z-index: 2;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Der einzelne Preview-Kasten */
.file-preview-item {
  position: relative;
  display: inline-block;
  margin: 0vw;
  width: 6vw;
  height: 6vw;
  border-radius: 0.6em;
  background: #f3f3f3;
  box-shadow: 0 0.2em 0.6em rgba(0,0,0,.15);
  /* WICHTIG: Button darf „überstehen“ */
  overflow: visible; 
  z-index: 0; /* kein neuer Stacking-Context */
  right: 0vw;
  bottom: 0vw;
}

/* Bild bleibt drin */
.file-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.file-preview-item img:not(.loading) {
  opacity: 1;
}

/* Fehlerzustand am Feld */
.is-invalid {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,.12);
}

/* Animierte Fehlermeldung direkt unter dem Feld */
.field-error {
  margin-top: 0.35em;
  font-size: 0.85em;
  color: #e53935;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  transition: opacity .25s ease, transform .25s ease, max-height .25s ease;
}

.field-error.on {
  opacity: 1;
  transform: translateY(0);
  max-height: 4em; /* genug für 2 Zeilen */
}

/* Success Toast (grüne Bestätigung) */
.toast {
  position: fixed;
  top: 38em;
  right: 20em;
  background-color: #2e7d32; /* grün */
  color: #fff;
  font-weight: 600;
  font-size: 0.95em;
  padding: 0.8em 1.1em;
  border-radius: 0.6em;
  box-shadow: 0 0.3em 0.8em rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease;
  z-index: 9999;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}/* ===================== TIMELINE ===================== */
.bug-timeline {
  position: relative;
  width: 100%;
  margin-top: 22em;
  display: flex;
  justify-content: center;
}

/* Mittellinie */
.vertical-line {
  position: absolute;
  top: -40em;
  bottom: -8em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.1vw; /* dünner Strich */
  background-color: #222;
  border-radius: 1em;
  z-index: 0;
}

/* Bug-Liste */
.bug-list {
  position: relative;
  width: 100%;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 5em;
}

/* Zeilen */
.bug-row {
  display: flex;
  width: 100%;
  position: relative;
}

.bug-row.left {
  justify-content: flex-end;
}

.bug-row.right {
  justify-content: flex-start;
}

/* Kästchen */
.bug-box {
  position: relative;
  background: #fff;
  border-radius: 0.8em;
  border: 0.12vw solid rgba(0, 0, 0, 0.15); /* 👈 dezenter grauer Rand */
  padding: 1.4em 2em;
  width: 22vw;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 1;
}

/* 🔥 Abstand zur Mittellinie – das ist der Hebel! */
.bug-row.left .bug-box {
  margin-right: 13vw; /* kleiner Abstand links */
}

.bug-row.right .bug-box {
  margin-left: 13vw; /* kleiner Abstand rechts */
}

/* Hover-Effekt */
.bug-box:hover {
  transform: translateY(-0.3em);
  box-shadow: 0 0.6em 1.6em rgba(0, 0, 0, 0.12);
}

/* Farbränder */
.bug-box::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.4vw;
}

/* ====================== STATUS-RAND (leicht um die Ecke) ====================== */

.status-inbearbeitung::before,
.status-abgeschlossen::before {
  content: "";
  position: absolute;
  top: 0em;
  bottom: 0em;
  width: 0.4vw; /* Randdicke */
  border-radius: 0.8em;
  z-index: 2;
  pointer-events: none;
}

/* LINKS – Orange, leicht um die Ecke */
.bug-row.left .status-inbearbeitung::before {
  left: -0.1em;
  background: linear-gradient(
    to right,
    rgba(255, 136, 0, 0.9) 0%,   /* kräftig an der Kante */
    rgba(255, 136, 0, 0.6) 40%,  /* leicht über die Ecke */
    rgba(255, 136, 0, 0) 100%    /* schnell auslaufend */
  );
}

/* RECHTS – Orange, leicht um die Ecke */
.bug-row.right .status-inbearbeitung::before {
  right: -0.1em;
  background: linear-gradient(
    to left,
    rgba(255, 136, 0, 0.9) 0%,
    rgba(255, 136, 0, 0.6) 40%,
    rgba(255, 136, 0, 0) 100%
  );
}

/* LINKS – Grün, leicht um die Ecke */
.bug-row.left .status-abgeschlossen::before {
  left: -0.1em;
  background: linear-gradient(
    to right,
    rgba(76, 175, 80, 0.9) 0%,
    rgba(76, 175, 80, 0.6) 40%,
    rgba(76, 175, 80, 0) 100%
  );
}

/* RECHTS – Grün, leicht um die Ecke */
.bug-row.right .status-abgeschlossen::before {
  right: -0.1em;
  background: linear-gradient(
    to left,
    rgba(76, 175, 80, 0.9) 0%,
    rgba(76, 175, 80, 0.6) 40%,
    rgba(76, 175, 80, 0) 100%
  );
}



/* Textinhalte */
.bug-box-title {
  font-size: 1.2em;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.3em;
}

.bug-box-sub {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 0.95em;
  margin-bottom: 0.5em;
}

.bug-id {
  color: #777;
  font-weight: 600;
}

.bug-status {
  font-weight: 700;
  text-transform: capitalize;
}

.status-inbearbeitung .bug-status {
  color: #ff8800;
}

.status-abgeschlossen .bug-status {
  color: #4CAF50;
}

.bug-box-reporter {
  font-size: 0.9em;
  color: #444;
  margin-bottom: 0.8em;
}

.bug-box-desc {
  font-size: 0.95em;
  line-height: 1.45;
  color: #222;
  margin-bottom: 0.8em;
}

.bug-box-date {
  font-size: 0.8em;
  color: #666;
  text-align: right;
}

/* Responsive */
@media (max-width: 70em) {
  .vertical-line {
    left: 50%;
    width: 0.25vw;
  }
  .bug-box {
    width: 80vw;
    margin: 0 auto;
  }
  .bug-row {
    justify-content: center;
  }
}

/* Beschreibung kürzen */
.bug-box-desc {
  font-size: 1em;
  line-height: 1.5;
  color: #222;
  margin-bottom: 0.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal;
  transition: max-height 0.3s ease;
}

/* Gekürzt-Ansicht */
.bug-box-desc.collapsed {
  max-height: 5em; /* ca. 3 Zeilen sichtbar */
}

/* Pfeil für Mehr/Weniger */
.toggle-desc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.4em;
  font-size: 1.1em;
  color: #777;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
}

.toggle-desc:hover {
  color: #ff8800;
}

.toggle-arrow {
  display: inline-block;
  font-size: 1.2em;
  transition: transform 0.25s ease;
}

.toggle-arrow.open {
  transform: rotate(180deg);
}


/* ====================== LEUCHTENDER ORANGER KREIS ====================== */
.bug-glow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2vw;
  height: 2vw;
  background: radial-gradient(circle, rgba(255,136,0,1) 0%, rgba(255,136,0,0.4) 40%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 2vw rgba(255,136,0,0.8);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

/* Bewegung entlang der Linie – jetzt richtig langsam und smooth */
@keyframes glowMove {
  0% {
    opacity: 1;
    top: -5em;
    transform: translateX(-50%) scale(0.6);
    box-shadow: 0 0 1vw rgba(255,136,0,0.6);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 2vw rgba(255,136,0,0.8);
  }
  100% {
    top: var(--targetY);
    opacity: 0.9;
    transform: translateX(-50%) scale(1.4);
    box-shadow: 0 0 3vw rgba(255,136,0,0.4);
  }
}

/* Sanfteres Pop-In mit etwas mehr Eleganz */
@keyframes popIn {
  0% {
    transform: scale(0.5) translateY(2em);
    opacity: 0;
  }
  60% {
    transform: scale(1.05) translateY(-0.3em);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.bug-row.pop-in {
  animation: popIn 0.8s cubic-bezier(0.25, 1.2, 0.35, 1) forwards;
}

/* ================= ADMIN LABEL ================= */
.admin-label {
  position: absolute;
  right: 0.5vw;
  bottom: 14.5vw; /* etwas über dem Footer */
  color: #555;
  font-weight: 600;
  font-size: 0.95em;
  padding: 0.6em 1.2em;
  border-radius: 0.6em;
  opacity: 0.9;
  z-index: 10;
}