
/* ========== Formularrahmen ========== */
form.eingabe-formular {
    /* Einheitliches Layout für ALLE Formulare */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px 12px;                  /* Zeilen- / Spaltenabstand */
    background: #f9f9f9;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid transparent;
    align-items: end;                /* Labels + Felder schön bündig */
}

/* Optionaler Bearbeitungsmodus-Rahmen */
form.eingabe-formular.edit-mode {
    border-color: #ff9800;
    background: #fff3e0;
}

/* ========== Form-Felder ========== */
form.eingabe-formular .form-field {
    display: flex;
    flex-direction: column;          /* Label über Input */
    margin-bottom: 0;                /* Abstand wird über grid-gap geregelt */
    min-width: 0;                    /* verhindert Überlaufen in Grid-Spalten */
}

/* Labels */
form.eingabe-formular label {
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
}

/* Inputs, Selects, Buttons – volle Spaltenbreite */
form.eingabe-formular input,
form.eingabe-formular select,
form.eingabe-formular button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.3;
    background: #fff;
}

/* Fokuszustand */
form.eingabe-formular input:focus,
form.eingabe-formular select:focus,
form.eingabe-formular button:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0,115,170,0.15);
}

/* Buttons im Formular */
form.eingabe-formular button {
    background: #0073aa;
    color: #fff;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease-in-out;
}
form.eingabe-formular button:hover {
    background: #005f8a;
}

/* Utility: Elemente über ganze Zeile ziehen (falls benötigt) */
form.eingabe-formular .full-row {
    grid-column: 1 / -1;
}

/* Kleinere Bildschirme: minimal schmalere Spalten zulassen */
@media (max-width: 600px) {
    form.eingabe-formular {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px;
        padding: 14px;
    }
}

/* Speziell: Login-Formular (optional, sorgt für extra saubere Linie) */
form.eingabe-formular.login-form {
    /* nutzt dasselbe Grid, nur etwas mehr „Bündigkeit“ */
    align-items: end;
}

/* ========== Tabellen-Styling ========== */
table.formular-tabelle {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

table.formular-tabelle th,
table.formular-tabelle td {
    border: 1px solid #ddd;
    padding: 10px 8px;
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.3;
}

table.formular-tabelle th {
    background: #f1f1f1;
    font-weight: 600;
    white-space: nowrap;
}

table.formular-tabelle tr:nth-child(even) {
    background: #fafafa;
}

table.formular-tabelle a {
    color: #0073aa;
    text-decoration: none;
}
table.formular-tabelle a:hover {
    text-decoration: underline;
}

/* Sort-Indikator (optional, wenn du Klassen setzt) */
table.formular-tabelle th.sorted-asc,
table.formular-tabelle th.sorted-desc {
    background: #e9ecef;
}

/* Aktionen-Spalte kompakt */
table.formular-tabelle td.actions,
table.formular-tabelle th.actions {
    white-space: nowrap;
    width: 1%;
}
table.formular-tabelle td.actions .btn + .btn {
    margin-left: 6px;
}

/* ========== Buttons (Allgemein / Tabellen-Aktionen / Pagination) ========== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    background: #e9ecef;
    color: #111;
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.btn:hover {
    background: #dde2e6;
}
.btn-sm {
    padding: 6px 10px;
    font-size: 12.5px;
}
.btn .icon {
    font-size: 14px;
    line-height: 1;
}

.btn-primary {
    background: #0073aa;
    color: #fff;
    border-color: #006093;
}
.btn-primary:hover {
    background: #005f8a;
}

.btn-danger {
    background: #d32f2f;
    color: #fff;
    border-color: #b71c1c;
}
.btn-danger:hover {
    background: #b71c1c;
}

/* Pagination-Container (falls benutzt) */
.pagination {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ========== Feinheiten & Kompatibilität ========== */
/* Verhindert super-schmale Eingabefelder, falls Container sehr eng ist */
form.eingabe-formular input[type="email"],
form.eingabe-formular input[type="text"],
form.eingabe-formular input[type="date"],
form.eingabe-formular select {
    min-width: 0;  /* wichtig innerhalb von CSS-Grid */
}

/* Safari/Firefox: Buttons nicht strecken, wenn in Grid */
form.eingabe-formular > button,
form.eingabe-formular .btn {
    width: auto;   /* Buttons bleiben kompakt */
    justify-self: start;
}

/* Links in Tabellen-Headern neutraler (Sortier-Links) */
table.formular-tabelle th a {
    color: inherit;
    text-decoration: none;
}
table.formular-tabelle th a:hover {
    text-decoration: underline;
}

/* Optional: Disable-State */
button[disabled],
.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}
a.btn-danger {
    background: #d9534f;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
}
a.btn-danger:hover {
    background: #c9302c;
}
/* Halbbreite Felder (zwei nebeneinander) */
form.eingabe-formular .form-field.half {
    grid-column: span 1;
}
/* Sortier-Indikatoren im Tabellenkopf */
table.formular-tabelle th.sorted-asc::after {
    content: " ▲";
    font-size: 11px;
    color: #0073aa;
}
table.formular-tabelle th.sorted-desc::after {
    content: " ▼";
    font-size: 11px;
    color: #0073aa;
}



/* =================== Trainingsplan-Design (aus trainingsplan-formular) =================== */
@media(min-width: 768px){ .tp-grid-2 { grid-template-columns: 1fr 1fr; } }



table.tp-table { text-align: center; width:100%; border-collapse: collapse; margin-top: 8px; }
table.tp-table th, table.tp-table td { border:1px solid #e5e7eb; padding:8px; vertical-align: top; }
table.tp-table th { text-align:left; background:#f9fafb; }

.tp-actions form { margin:0; padding:0; }                /* Formular-Rand entfernen */
.tp-actions button.tp-btn,
.tp-actions a.tp-btn { line-height:1; padding:.4rem .7rem; } /* gleiche Innenabstände */
button.tp-btn { appearance:none; -webkit-appearance:none; }  /* Submit/UA-Styles neutralisieren */


.tp-section { margin: .75rem 0; }
.tp-section h3 { margin: .25rem 0; }
.tp-note { font-size:.9rem; color:#374151; }
.tp-inline { display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.tp-inline .tp-field { min-width: 240px; }
.tp-small { font-size:.9rem; }

/* Status-Badges */
.tp-badge.warn { background:#fffbeb; border-color:#f59e0b; color:#92400e; }
.tp-badge.ok   { background:#ecfdf5; border-color:#10b981; color:#065f46; }

/* Zustände für Zeilen */
.tp-row-disabled { background: #f3f4f6; } /* grau: bereits dieser Plan */
/* .tp-conflict bewusst neutral gehalten – ggf. Theme-Override später setzen */
.tp-conflict { background: transparent; }

/* härtere Regeln, um Theme-Resets in Tabellen zu übersteuern */
table .tp-input,
table .tp-textarea {
  padding: 10px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-sizing: border-box;
}

/* Datum/Zeit auf Chrome/Safari nicht “klein” darstellen */
.tp-input[type="date"],
.tp-input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 42px;
  line-height: 1.25;
}
/* noch spezifischer, falls nötig */
.tp-wrap table .tp-input,
.tp-wrap table .tp-textarea {
  padding: 10px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  background: #fff !important;
}
/* Bemerkung-Box für Veranstaltungen */

.tp-bemerkung-box{
  width:100%;
  border:2px solid #d1d5db;
  border-radius:10px;
  background:#f9fafb;
  padding:12px 16px;
  margin:.75rem 0;
}
.tp-bemerkung-box strong{display:block;margin-bottom:.25rem;font-size:1.15rem;}
.tp-bemerkung-box .text{font-size:1.05rem;line-height:1.5;color:#111827;}

/* ===== Utilities für rückmeldung ===== */
.muted-bar { margin: .25rem 0 .75rem 0; }
.center    { text-align: center; }
.flex-center { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; }
.max-w-260 { max-width:260px; margin:12px auto 0; }
.max-w-420 { max-width:420px; margin:12px auto 0; }

/* ===== Wochenansicht / Sportler-Ansicht ===== */
.tp-wrap-week { max-width: 1920px; padding: 0.85rem; }

/* Kopf/Navi */
.tp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; gap:.75rem; flex-wrap:wrap; }
.tp-id { font-size:1rem; }
.tp-nav { display:flex; align-items:center; justify-content:space-between; margin:.25rem 0; }
.tp-nav a { display:inline-block; text-decoration:none; border:1px solid #d1d5db; padding:.45rem .7rem; border-radius:8px; }
.tp-nav a:hover { background:#f9fafb; }
.text-center { text-align:center; }
.text-right { text-align:right; }

/* Tabelle Woche */
.tp-week-scroll { overflow-x:auto; }
.tp-week-table { width:100%; border-collapse:collapse; table-layout:fixed; min-width:1540px; text-align:center; }
.tp-week-table th, .tp-week-table td { border:1px solid #ddd; padding:10px; text-align:center; vertical-align:top; min-width:220px; }
.tp-week-table th { background:#f9fafb; font-weight:600; }
.tp-week-table .tp-label-col { min-width:120px; width:120px; text-align:left; background:#f3f4f6; }

/* Einträge */
.tp-free { opacity:.7; font-style:italic; }
.tp-plan { text-align:left; border:1px solid #d1d5db; border-radius:10px; padding:.6rem; background:#fff; cursor:pointer; position:relative; }
.tp-plan + .tp-plan { margin-top:.6rem; }
.tp-plan.tp-done { border-color:#22c55e; }
.tp-plan.tp-due  { border-color:#3b82f6; }
/* Klick-Hinweis für Plan/Event-Boxen */
.tp-plan, .tp-event { cursor: pointer; }
.tp-parts { list-style:none; padding-left:0; margin:.35rem 0 0 0; }

/* Events im Plan */
.tp-event  { border:1px solid #f97316; border-radius:10px; padding:.6rem; background:#fff; cursor:pointer; }
.tp-event-box { border:1px solid #f59e0b; border-radius:10px; padding:.6rem; background:#fff; margin:.5rem 0; }
.tp-event-box.tp-done { border-color:#22c55e; }
.tp-event-title { font-weight:600; margin-bottom:.2rem; }
.tp-pillbar { margin-top:.5rem; text-align:center; }
.tp-pill-form { display:inline-block; margin:0; }
.tp-pill-btn { display:inline-block; padding:.38rem .72rem; border-radius:9999px; font-weight:600; font-size:.85rem; cursor:pointer; border:1px solid transparent; }
.tp-pill-btn.blue { background:#e0f2fe; border-color:#93c5fd; color:#1e40af; }
.tp-pill-btn.blue:hover  { background:#dbeafe; border-color:#60a5fa; }
.tp-pill-btn.green { background:#dcfce7; border-color:#86efac; color:#065f46; }
.tp-pill-btn.green:hover { background:#bbf7d0; border-color:#34d399; }

/* Modale Rückmeldung */

/* Utilities erweitert */
.text-left { text-align:left; }
.w-100 { width:100%; }
.gap-8 { gap:8px; }      /* existiert bereits, hier nur bestätigt */
.gap-14 { gap:14px; }    /* existiert bereits, hier nur bestätigt */
.mt-6 { margin-top:6px; }/* existiert bereits, hier nur bestätigt */
.mt-12 { margin-top:12px;}/* existiert bereits, hier nur bestätigt */

/* ===== Wochenansicht: Navigation nebeneinander, zentrierte KW ===== */
.tp-nav.tp-nav--3col {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
}
.tp-nav__prev { justify-self: start; }
.tp-nav__next { justify-self: end; }

/* ===== Wochen-Plan-Karten: Rahmen + Zustände eindeutig ===== */
.tp-week-table .tp-plan {
  border: 2px solid #d1d5db;   /* stärker, gut sichtbar */
  background: #fff;
  border-radius: 10px;
  padding: .6rem;
  position: relative;
  text-align: left;
}
.tp-week-table .tp-plan + .tp-plan { margin-top: .6rem; }
.tp-week-table .tp-plan.tp-done { border-color: #22c55e; } /* grün */
.tp-week-table .tp-plan.tp-due  { border-color: #3b82f6; } /* blau */
.tp-plan .tp-smiley { position:absolute; top:.4rem; right:.5rem; font-size:1.1rem; line-height:1; }

/* ===== Teileliste: keine Aufzählungspunkte, sauberer Abstand ===== */

/* ===== Events im Plan ===== */
.tp-events { margin-top:.5rem; border-top:1px dashed #e5e7eb; padding-top:.5rem; }
.tp-event.tp-done { border-color:#22c55e; }
.tp-event + .tp-event { margin-top:.5rem; }

/* ===== Modal: sichtbar, wenn .show gesetzt ===== */
.tp-modal-root { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); z-index:99999; }
.tp-modal-root.show { display:flex; }
.tp-modal-card { width:min(980px,95vw); max-height:90vh; overflow:auto; background:#fff; border:1px solid #d1d5db; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.tp-modal-head { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border-bottom:1px solid #e5e7eb; }
.tp-modal-body { padding:1rem; }



/* ===== Hinweisleiste ===== */
.tp-alert-compact { margin:.5rem 0; }
.tp-hint { margin-top:.85rem; color:#6b7280; text-align:center; }

/* Nav: Buttons nicht vollbreit (falls Theme das tut) */
.tp-nav .tp-btn,
.tp-nav button.tp-btn { width: auto; }

/* Teileliste: Theme-Bullets sicher ausschalten */
.tp-week-table .tp-plan ul.tp-parts{
  list-style: none !important;
  padding-left: 0 !important;
  margin: .35rem 0 0 0 !important;
}

/* kleiner Utility-Abstand, der oben referenziert wird */
.mt-4 { margin-top: .25rem; }

/* kompaktere Tabellen-Inputs im Feedback-Formular */
.tp-table.compact th,
.tp-table.compact td { padding: 6px 6px; }

.tp-table.compact .tp-input {
  padding: 6px !important;
  font-size: 13px;
  line-height: 1.2;
}

/* ===== Generic Cards (Rahmen) ===== */
.tp-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: .75rem;
  background: #f9fafb;
  margin-bottom: .75rem;
}

/* ===== Checkbox-Listen (spaltenweise) ===== */
.tp-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* ===== Kleine Zahleneingaben (zwei-stellig) ===== */
.tp-input--xsnum {
  width: 7ch;
  text-align: right;
}

/* ===== Whitespace Utilities ===== */
.pre-wrap { white-space: pre-wrap; }
.hidden { display: none; }

/* ===== Pills (Hinweise/Aktionen) ===== */
.tp-pill { display:inline-block; padding:.15rem .5rem; border-radius:9999px; border:1px solid transparent; font-size:.85rem; line-height:1; }
.tp-pill.blue { background:#eff6ff; border-color:#3b82f6; color:#1e3a8a; }
.tp-pill.orange { background:#fff7ed; border-color:#f59e0b; color:#92400e; }
.tp-pill.action { cursor:pointer; }

/* Fehlerzustand für Inputs */
.tp-error { border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.2) !important; }

/* =============================================================
   Moved inline styles from various form plugins to CSS bundle
   Source files: trainingsplan_formular, tpv-header-shortcode,
                 sportlertabelle_trainer, veranstaltung_* plugins
   ============================================================= */

/* Trainingsplan Auswahl / Formular / Tabelle (gemeinsame UI) */
.tp-wrap { max-width: 1100px; margin: 1rem auto; padding: 0.85rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.tp-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:10px; border:1px solid #111827; background:#111827; color:#fff; text-decoration:none; cursor:pointer; }
.tp-btn.secondary { background:#fff; color:#111827; border-color:#d1d5db; }
.tp-btn.small { padding:.4rem .7rem; font-size:.9rem; }
.tp-alert { margin: 0 0 12px 0; padding: 10px 12px; border-radius: 10px; }
.tp-alert-success { background:#ecfdf5; border:1px solid #10b981; }
.tp-alert-error   { background:#fef2f2; border:1px solid #ef4444; }
.tp-alert-info    { background:#f3f4f6; border:1px solid #d1d5db; }
.tp-actions { display:flex; gap:8px; align-items:center; flex-wrap: wrap; }
.tp-actions .tp-btn { white-space: nowrap; }
.tp-muted { color:#6b7280; font-size:.9rem; }
.tp-bar { display:flex; justify-content:space-between; align-items:center; padding:.5rem .75rem; margin-bottom:.75rem; border:1px dashed #d1d5db; border-radius:10px; background:#f9fafb; }

/* Tabellen */
table.tp-table { width:100%; border-collapse: collapse; margin-top: 8px; }
table.tp-table th, table.tp-table td { border:1px solid #e5e7eb; padding:8px; vertical-align: top; }
table.tp-table th { text-align:left; background:#f9fafb; }

/* Formularfelder (Trainingsplan / Veranstaltungen) */
.tp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media(min-width: 768px){ .tp-grid-2 { grid-template-columns: 1fr 1fr; } }
.tp-field label { display:block; font-weight: 600; margin-bottom: 6px; }
.tp-input, .tp-textarea { width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px; box-sizing:border-box; background:#fff; }
.tp-textarea { min-height: 120px; }

/* Zahl-Spinner in Number-Inputs ausblenden */
.tp-wrap input[type=number]::-webkit-outer-spin-button,
.tp-wrap input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tp-wrap input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Drag&Drop Wochenzellen / Planvorschau */
.tp-week-cell{min-height:52px;position:relative;}
.tp-week-cell.drag-over{outline:2px dashed #111827;background:#f9fafb;}
.tp-drag-plan{cursor:grab;display:inline-block;padding:.15rem .4rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;}
.tp-tag{display:inline-block;padding:.15rem .4rem;border-radius:8px;border:1px solid #d1d5db;background:#f3f4f6;}
/* Plan-Karten Titel in Wochenzellen */
.tp-week-cell .tp-title{font-weight:600;margin-bottom:.2rem;text-align:center;}
/* Plan-Karten Listen in Wochenzellen */
.tp-week-cell .tp-parts{list-style:none;padding-left:0;margin:.35rem 0 0 0;text-align:center;}
.tp-parts li{margin:.15rem 0;}
.tp-week-cell .tp-plan{border:1px solid #d1d5db;border-radius:10px;padding:.6rem;background:#fff;}
.tp-week-cell .tp-week-item-event .tp-plan{border:1px solid #f59e0b !important;}
.tp-week-cell .tp-week-item-assigned .tp-plan{border:2px solid #ef4444 !important;}
.tp-week-cell .tp-parts .tp-part{margin:.15rem 0;}
.tp-week-item{cursor:grab;}

/* Hinweis-Text vor letzter Aktionszeile im Formular */
.tp-wrap form > .tp-actions:last-child { flex-wrap: wrap; }
.tp-wrap form > .tp-actions:last-child::before {
  content: 'Fehlt ein Sportler? unter "Sportler Tabelle" den Sportler aktivieren';
  display: block;
  color: #6b7280; /* .tp-muted */
  margin: 0 0 8px 0;
  flex-basis: 100%;
}

/* Veranstaltung zuweisen */
.tp-h1 { margin: 0 0 10px 0; font-size: 1.5rem; }
.tp-section-title{ margin:18px 0 8px; font-weight:600; }
.tp-assignment { display:flex; align-items:center; gap:8px; border:1px solid #e5e7eb; border-radius:10px; padding:6px 8px; margin-bottom:6px; background:#fff; }
.tp-name { font-weight:500; }
.tp-xbtn { border:none; background:transparent; color:#ef4444; font-weight:800; cursor:pointer; font-size:16px; line-height:1; padding:0 4px; }
.tp-xbtn:hover { color:#b91c1c; }
.tp-pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.80rem; border:1px solid transparent; }
.tp-pill--abgesagt { background:#fee2e2; border-color:#ef4444; color:#991b1b; }
.tp-pill--eingetragen { background:#dcfce7; border-color:#10b981; color:#065f46; }
.tp-pill--other { background:#ffedd5; border-color:#f97316; color:#7c2d12; }
.tp-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:8px; }
.tp-list-item{ display:flex; align-items:center; gap:8px; border:1px solid #e5e7eb; background:#fff; padding:8px 10px; border-radius:10px; }

/* Veranstaltung ansehen (Trainer) */
.tp-btn-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;border:1px solid transparent;font-size:.80rem;cursor:pointer;margin-right:6px;}
.tp-pill--vorgeschlagen{background:#ffedd5;border-color:#f97316;color:#7c2d12;}
.tp-modal{position:fixed;inset:0;display:none;z-index:1000;}
.tp-modal.is-open{display:flex;align-items:center;justify-content:center;}
.tp-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);}
.tp-modal__dialog{position:relative;max-width:680px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);overflow:hidden}
.tp-modal__header{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid #e5e7eb}
.tp-modal__close{border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer}
.tp-modal__content{padding:1rem}
.tp-modal__list{margin:0;padding:0;list-style:none}
.tp-modal__list li{padding:.35rem 0;border-bottom:1px solid #f3f4f6}

/* Veranstaltung ansehen (Sportler) */
.pill{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.8rem;border:1px solid transparent}
.pill-red{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.pill-green{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.pill-orange{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.var-wrap{display:flex;flex-direction:column;gap:.35rem}
.var-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.var-name a{padding:.15rem .5rem;border:1px solid #e5e7eb;border-radius:999px;font-size:.85rem;background:#f9fafb;color:#111827;text-decoration:none;display:inline-block}
.var-name a:hover{background:#eef2f7}
.edit-box{border:1px dashed #d1d5db;border-radius:10px;padding:.5rem .6rem;background:#f9fafb;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.edit-box .label{font-weight:600}
.tp-select{padding:.35rem .5rem;border:1px solid #d1d5db;border-radius:8px}
.vas-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:9998;}
.vas-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;}
.vas-card{min-width:280px;max-width:520px;width:92%;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:14px;}
.vas-head{font-weight:600;margin-bottom:.5rem}
.vas-row{display:flex;gap:.5rem;align-items:center;margin:.5rem 0;flex-wrap:wrap}
.vas-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.75rem}

/* Sportler-Tabelle (Trainer) */
.tp-title { font-size:1.25rem; font-weight:600; margin: .25rem 0 1rem; }
.tp-empty { padding:.6rem .8rem; background:#fff7ed; border:1px solid #fed7aa; border-radius:10px; }
.tp-smiley{ margin-left:.4rem; font-size:1.15rem; vertical-align:middle; }
.tp-pill-done{ padding:.32rem .66rem;border-radius:9999px;cursor:pointer;background:#dcfce7;border:1px solid #86efac;color:#065f46;font-weight:600;font-size:.85rem }
.tp-pill-done:hover{ background:#bbf7d0; border-color:#34d399; }
#tp-modal{position:fixed;inset:0;display:none;z-index:9999}
#tp-modal .tp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
#tp-modal .tp-dialog{ position:relative;max-width:1400px;margin:4vh auto;background:#fff;border-radius:12px;padding:16px;border:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(0,0,0,.2)}
#tp-modal .tp-close{position:absolute;top:8px;right:10px;border:0;background:transparent;cursor:pointer;font-size:22px;line-height:1}

/* Anleitung: Inhaltsverzeichnis Navigation */
.tp-anmeldung-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem; }
@media (max-width: 960px) {
  .tp-anmeldung-grid { grid-template-columns: 1fr; }
  .tp-anmeldung-nav { position: static; top: auto; max-height: none; }
}
.tp-anmeldung-nav { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; }
.tp-nav-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; background: #fff; }
.tp-nav-head { display: grid; gap: .5rem; margin-bottom: .5rem; }
.tp-nav-head input[type="search"] { border: 1px solid #d1d5db; border-radius: 10px; padding: .5rem .75rem; width: 100%; font-size: .95rem; }
#tpNavList a { display: block; padding: .35rem .5rem; margin: .1rem 0; border-radius: 8px; text-decoration: none; color: #111827; border: 1px solid transparent; }
#tpNavList a:hover { background: #f3f4f6; }
#tpNavList a.active { background: #111827; color: #fff; }
.tp-anmeldung-content h2 { scroll-margin-top: 90px; border-bottom: 1px solid #eee; padding-bottom: .25rem; }
.tp-anmeldung-content p { margin: .5rem 0 .8rem; }
.tp-anmeldung-content ul, .tp-anmeldung-content ol { margin: .25rem 0 .75rem 1.25rem; }
.tp-anmeldung-content section { margin-bottom: 1.2rem; }
#tpNavList a[data-level="2"] { padding-left: .75rem; opacity: .95; }
.tp-anmeldung-content h1 { scroll-margin-top: 90px; border-bottom: 1px solid #eee; padding-bottom: .25rem; font-weight: 700; }

/* Veranstaltung anlegen: AK-Modal & Variantenbreiten */
.ak-modal.hidden { display: none; }
.ak-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999; display:flex; align-items:center; justify-content:center; }
.ak-modal .ak-box { background:#fff; border-radius:12px; width: min(680px, 94vw); padding:16px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.ak-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.ak-list .ak-row { display:flex; gap:.5rem; align-items:center; margin-bottom:.5rem; }
.ak-row .tp-input { flex:1; }
#variants-table input.tp-input, #variants-table select.tp-input { width:100% !important; max-width:none; box-sizing:border-box; }

/* Veranstaltung Rückmeldung (Sportler) – Wrapper-Basis */
.tp-alert-ok{background:#ecfdf5;border:1px solid #10b981}
.tp-badge{display:inline-block;padding:.15rem .4rem;border:1px solid #d1d5db;border-radius:999px;font-size:.8rem;color:#374151}

/* Simple modal alignment */
.tp-modal--simple { padding: 16px 22px; min-width: 360px; max-width: 560px; }
.tp-modal-title, .tp-modal-text { text-align: center; }
.tp-modal-actions { display: flex; justify-content: center; gap: 8px; margin-top: .75rem; }

/* === Rueckmeldung ansehen (Trainer) – Tabellen-Layout & Summary === */
#tp-rueckmeldung-ansehen-modal .tp-rm-table th,
#tp-rueckmeldung-ansehen-modal .tp-rm-table td { text-align: center; }

/* Column widths via <col> classes */
#tp-rueckmeldung-ansehen-modal .tp-rm-table col.col-nr { width: 6%; }
#tp-rueckmeldung-ansehen-modal .tp-rm-table col.col-teil { width: 22%; }
#tp-rueckmeldung-ansehen-modal .tp-rm-table col.col-satz { width: 6%; }
#tp-rueckmeldung-ansehen-modal .tp-rm-table col.col-dauer,
#tp-rueckmeldung-ansehen-modal .tp-rm-table col.col-tempo,
#tp-rueckmeldung-ansehen-modal .tp-rm-table col.col-avg,
#tp-rueckmeldung-ansehen-modal .tp-rm-table col.col-max { width: 9%; }
#tp-rueckmeldung-ansehen-modal .tp-rm-table col.col-kommentar { width: 30%; }

/* Summary unter der Tabelle: 4-spaltiges Grid, zentriert */
#tp-rueckmeldung-ansehen-modal .tp-rm-summary { margin-top: .5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: center; }
#tp-rueckmeldung-ansehen-modal .tp-rm-summary .tp-field label { text-align: center; }
#tp-rueckmeldung-ansehen-modal .tp-rm-summary .tp-field .tp-value { text-align: center; }
