/* ================================
   Base / Reset (nur lokal)
   ================================ */
.kcc-wrap * { box-sizing: border-box; border-color: #212121;}
.kcc-wrap { --gap: 18px; }

/* ================================
   Wrapper mit zwei separaten Karten
   ================================ */
.kcc-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);

  /* MOBILE FIX: Inhalt im Handy-Rahmen halten */
  overflow-x: clip;
  overflow-x: hidden;
  max-width: 100%;
}

/* Karten */
.kcc-card {
  background: linear-gradient(145deg, #2E2E2E, #505050) padding-box,
              linear-gradient(145deg, #2E2E2E, #505050) border-box;
  border: 2px solid transparent;
  border-radius: 12px;
  color: #f5f5f5;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  max-width: 100%;
  overflow: hidden; /* verhindert Ausfransen durch Inhalte */
}

/* WICHTIG: Steuerungskarte darf Overlays zeigen (Dropdown-Triggerbereich) */
.kcc-card-controls { overflow: visible; }


/* Breite pro Spalte (Reihenfolge wie im <thead>) */
.kcc-table th:nth-child(1),
.kcc-table td:nth-child(1) { width: 15%; }  /* Veranstaltung */
.kcc-table th:nth-child(2),
.kcc-table td:nth-child(2) { width: 12%; }  /* Datum */
.kcc-table th:nth-child(3),
.kcc-table td:nth-child(3) { width: 12%; }  /* Treffpunkt */
.kcc-table th:nth-child(4),
.kcc-table td:nth-child(4) { width: 15%; }  /* Anmeldefrist */
.kcc-table th:nth-child(5),
.kcc-table td:nth-child(5) { width: 25%; }  /* Info (größer) */
.kcc-table th:nth-child(6),
.kcc-table td:nth-child(6) { width: 20%; }  /* Teilnehmer */


.kcc-card-controls {}
.kcc-card-table    {}

/* ================================
   Formularfelder (in Box 1)
   ================================ */
.form-section { margin-bottom: 16px; }

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 1.00rem;
  font-weight: 700;
  color: #ffffff;
}

.form-select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #fff !important;
  background: #212121 !important;
  color: #ffffff !important;
  font-size: 1rem;
  line-height: 42px;
}

/* ================================
   Aktionen (Buttons in Box 1)
   ================================ */
.kcc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 14px 0 4px;
}

.btn {
  padding: 10px 22px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  min-width: 220px;
  text-align: center;
}

.btn-green { background-color: #4caf50; color: #fff; }
.btn-green:hover:enabled { background-color: #45d267; transform: translateY(-1px); }

.btn-red { background-color: #EB443F; color: #fff; }
.btn-red:hover:enabled { background-color: #f65b55; transform: translateY(-1px); }

.btn:disabled { opacity: .6; cursor: not-allowed; }
.hint { width: 100%; text-align: center; font-size: .9rem; color: #aaa; }

/* ================================
   Tabelle (in Box 2)
   ================================ */

/* Scroll-Hülle, damit die Karte nicht bricht */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  display: flow-root; /* eigener BFC – verbreitert die Seite nicht */
}

/* Tabellenkörper */
.kcc-table {
  min-width: 760px;
  width: max(760px, 100%);
  border-collapse: separate;
  border-spacing: 0;
  border: 3px solid #2E2E2E;
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.95rem;
  box-shadow: 0 20px 15px rgba(0, 0, 0, 0.2);
}

/* Kopf / Zellen */
.kcc-table thead th {
  background-color: #434343;
  color: #ffffff;
  font-weight: 700;
  padding: 12px;
  text-align: center;
  white-space: nowrap;
}

.kcc-table tbody td {
  padding: 12px;
  text-align: center;
  border: 1px solid #2E2E2E;
  transition: background 0.3s ease;
  vertical-align: top;
  word-break: break-word;
  max-width: 0;
  Font-size: 12px;	
}

.kcc-table tbody tr:nth-child(odd) { background-color: #4C4C4C; }
.kcc-table tbody tr:nth-child(even){ background-color: #434343; }
.kcc-table tbody tr:hover { background-color: #242424; }

/* Deadline-Badge */
.deadline-open {
  background: #4caf50;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
}
.deadline-closed {
  background: #EB443F;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
}

/* Konsolidierte Info-Liste (optional) */
.info-list {
  text-align: left;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
}
.info-list li { margin: 2px 0; }

/* ================================
   Footer-Buttons (außerhalb der Boxen)
   ================================ */
.kcc-footer-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 6px 16px 24px;
  overflow-x: clip;
  overflow-x: hidden;
  max-width: 100%;
}

/* gleiche Breite für Link und Form */
.kcc-footer-actions > a,
.kcc-footer-actions > form {
  flex: 0 1 240px;
  max-width: 240px;
}

/* Formular neutralisieren, aber Layout behalten */
.kcc-footer-actions > form {
  all: unset;
  display: inline-flex;
  flex: 0 1 240px;
  max-width: 240px;
}

/* Buttons gleich groß + Text mittig */
.kcc-footer-actions .footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  background-color: #0A0A1B !important;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1.2;
  transition: background-color .2s ease, transform .1s ease;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
}
.kcc-footer-actions .footer-btn:hover { background-color: #010614 !important; transform: translateY(-1px); }
.kcc-footer-actions .footer-btn:active,
.kcc-footer-actions .footer-btn:focus { background-color: #010614 !important; outline: none; }

/* ================================
   Toast / Popup
   ================================ */
.kcc-toast-wrap {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.kcc-toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 92vw;
  background: #1f1f1f;
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.4);
  border: 1px solid #2e2e2e;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 14px/1.3 "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  opacity: 0;
  transform: translateY(8px);
  animation: toast-in .18s ease-out forwards;
}
.kcc-toast.success { border-color: #2e7d32; background: #18351b; }
.kcc-toast.error   { border-color: #b71c1c; background: #341a1a; }
.kcc-toast .toast-msg  { flex: 1; }
.kcc-toast .toast-close{
  background: transparent; border: none; color: #fff; opacity: .7;
  cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px;
}
.kcc-toast .toast-close:hover { opacity: 1; }

@keyframes toast-in { to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out{ to { opacity: 0; transform: translateY(8px); } }
.kcc-toast.leaving { animation: toast-out .18s ease-in forwards; }

/* ================================
   Responsive Breakpoints
   ================================ */

/* Tablets */
@media (max-width: 1024px) {
  .btn         { min-width: 200px; padding: 10px 18px; font-size: 0.95rem; }
  .form-label  { font-size: 1rem; }
  .form-select { font-size: 0.95rem; }
}

/* Mobile */
@media (max-width: 768px) {
  .kcc-wrap     { padding: 0 12px 10px; gap: 14px; }
  .kcc-card     { padding: 16px; border-radius: 10px; }
  .form-section { margin-bottom: 14px; }
  .form-label   { font-size: 0.95rem; }
  .form-select  { height: 40px; line-height: 40px; font-size: 0.95rem; }

  .kcc-actions  { gap: 10px; }
  .btn          { width: 100%; min-width: 0; }

  .kcc-table          { font-size: .9rem; }
  .kcc-table thead th,
  .kcc-table tbody td { padding: 10px; }

  .kcc-footer-actions { padding: 8px 12px 20px; gap: 10px; }
  .kcc-footer-actions > a,
  .kcc-footer-actions > form { flex: 1 1 100%; max-width: none; }
  .kcc-footer-actions .footer-btn { width: 100%; font-size: 15px; padding: 12px 16px; }
}

/* Sehr kleine Devices */
@media (max-width: 400px) {
  .kcc-table          { min-width: 640px; } /* früher scrollen */
  .kcc-table thead th,
  .kcc-table tbody td { padding: 8px; font-size: .85rem; }
}

/* Motion-Preference respektieren */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .kcc-table tbody tr,
  .kcc-toast { transition: none !important; animation: none !important; }
}


/* --- Fix: Deadline-Badge darf umbrechen --- */
.kcc-table td:nth-child(4) .deadline-open,
.kcc-table td:nth-child(4) .deadline-closed {
  white-space: normal;       /* statt nowrap */
  display: inline-block;     /* Block erlaubt weichen Zeilenumbruch */
  max-width: 100%;
  overflow-wrap: anywhere;   /* bricht zur Not "Uhr" oder Datum */
}

/* Mobile-Feinschliff */
@media (max-width: 768px) {
  /* Spalte etwas begrenzen, Badge kompakter */
  .kcc-table td:nth-child(4) { max-width: 120px; }
  .kcc-table td:nth-child(4) .deadline-open,
  .kcc-table td:nth-child(4) .deadline-closed {
    font-size: .85rem;
    padding: 3px 6px;
    line-height: 1.2;
  }
}