/* =====================================================================
   TRAINER APP – DESIGN-SYSTEM (neues Layout)
   Alle Klassen beginnen mit "ta-", damit nichts mit alten Styles
   (style.css, dashboard.css) kollidiert. Alles ist unter .ta-app gekapselt.
   ===================================================================== */

.ta-app {
    /* Farben */
    --ta-bg: #F3F5F7;
    --ta-surface: #FFFFFF;
    --ta-soft: #F6F8FA;
    --ta-ink: #0F172A;
    --ta-muted: #556070;
    --ta-line: #E3E7EC;
    --ta-accent: #0B6E4F;               /* Vereinsfarbe – wird pro Trainer überschrieben */
    --ta-accent-soft: color-mix(in srgb, var(--ta-accent) 11%, transparent);
    --ta-on-accent: #FFFFFF;

    /* Status */
    --ta-ok-bg: #E3F4EC;   --ta-ok-fg: #0B6E4F;
    --ta-bad-bg: #FDE7E5;  --ta-bad-fg: #B42318;
    --ta-warn-bg: #FEF0D7; --ta-warn-fg: #93370D;
    --ta-info-bg: #EFEAFE; --ta-info-fg: #5925DC;

    /* Form */
    --ta-radius: 14px;
    --ta-radius-lg: 18px;
    --ta-radius-sm: 10px;
    --ta-shadow-hover: 0 6px 18px rgba(15, 23, 42, .08);
    --ta-font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --ta-font-display: "Space Grotesk", Inter, "Segoe UI", system-ui, sans-serif;

    min-height: 100vh;
    display: flex;
    background: var(--ta-bg);
    color: var(--ta-ink);
    font-family: var(--ta-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.ta-app *,
.ta-app *::before,
.ta-app *::after { box-sizing: border-box; }

/* Alte globale Button-Styles (style.css) neutralisieren */
.ta-app button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.ta-app button:hover { background: none; }
.ta-app a { color: inherit; text-decoration: none; }
.ta-app h1, .ta-app h2, .ta-app h3, .ta-app p { margin: 0; }
.ta-app svg { flex-shrink: 0; }
.ta-app :focus-visible { outline: 2px solid var(--ta-accent); outline-offset: 2px; border-radius: 6px; }
/* "hidden" muss immer gewinnen – sonst überschreiben display:flex/grid-Regeln das Ausblenden (z. B. Kader-Filter) */
.ta-app [hidden] { display: none !important; }

/* ============================ SEITENLEISTE ============================ */
.ta-app .ta-sidebar {
    flex: 0 0 256px;
    background: var(--ta-surface);
    border-right: 1px solid var(--ta-line);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.ta-app .ta-brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 22px; }
.ta-app .ta-brand-logo {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--ta-accent); color: var(--ta-on-accent);
    display: flex; align-items: center; justify-content: center;
}
.ta-app .ta-brand.has-logo { padding: 4px 6px 22px; }
.ta-app .ta-brand-img { display: block; width: 100%; max-width: 220px; height: auto; border-radius: 10px; }
.ta-app .ta-brand.has-logo:focus-visible { outline: 2px solid var(--ta-accent); outline-offset: 3px; border-radius: 12px; }
.ta-app .ta-brand-name { font-family: var(--ta-font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.ta-app .ta-brand-sub { font-size: 12px; color: var(--ta-muted); }

.ta-app .ta-nav { display: flex; flex-direction: column; gap: 4px; }
.ta-app .ta-nav-item {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px;
    border-radius: var(--ta-radius-sm);
    font-size: 14px; font-weight: 600;
    color: var(--ta-muted);
}
.ta-app .ta-nav-item:hover { background: var(--ta-soft); color: var(--ta-ink); }
.ta-app .ta-nav-item.is-active { background: var(--ta-accent-soft); color: var(--ta-accent); }
.ta-app .ta-nav-item.is-disabled { opacity: .55; cursor: not-allowed; }
.ta-app .ta-nav-item.is-disabled:hover { background: none; color: var(--ta-muted); }
.ta-app .ta-nav-badge {
    margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 8px; border-radius: 999px; background: var(--ta-soft); border: 1px solid var(--ta-line);
}

.ta-app .ta-sidebar-spacer { flex: 1 1 24px; }
.ta-app .ta-menu-btn, .ta-app .ta-logout-text { display: none; }
.ta-app .ta-sidebar-foot { border-top: 1px solid var(--ta-line); padding: 14px 10px 0; display: flex; flex-direction: column; gap: 12px; }
.ta-app .ta-user { display: flex; align-items: center; gap: 12px; }
.ta-app .ta-avatar {
    width: 36px; height: 36px; border-radius: 999px; flex: 0 0 36px;
    background: var(--ta-soft); border: 1px solid var(--ta-line);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.ta-app .ta-user-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-user-role { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-icon-btn {
    width: 44px; height: 44px; border-radius: var(--ta-radius-sm);
    display: inline-flex; align-items: center; justify-content: center; color: var(--ta-muted);
}
.ta-app .ta-icon-btn:hover { background: var(--ta-soft); color: var(--ta-ink); }

.ta-app .ta-color-pick { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ta-muted); cursor: pointer; }
.ta-app .ta-color-pick input[type="color"] {
    width: 32px; height: 32px; padding: 0; border: 1px solid var(--ta-line); border-radius: 8px;
    background: none; cursor: pointer;
}

/* Verein (Name + Logo) */
/* Testzeit & Lizenz */
.ta-app .ta-license-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px; margin: -4px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--ta-ink); text-align: left; cursor: pointer; }
.ta-app .ta-license-btn:hover { background: var(--ta-soft); }
.ta-app .ta-license-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--ta-warn-bg); color: var(--ta-warn-fg); }
.ta-app .ta-license-btn.is-licensed .ta-license-icon { background: var(--ta-ok-bg); color: var(--ta-ok-fg); }
.ta-app .ta-license-btn.is-expired .ta-license-icon { background: var(--ta-bad-bg); color: var(--ta-bad-fg); }
.ta-app .ta-license-btn .ta-color-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.ta-app .ta-license-label { font-weight: 600; }
.ta-app .ta-license-btn.is-expired .ta-license-label { color: var(--ta-bad-fg); }
.ta-app .ta-license-btn small { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-license-banner { max-width: 1180px; margin: 0 auto 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-radius: 14px; background: var(--ta-warn-bg); color: var(--ta-warn-fg); font-size: 14px; font-weight: 600; }
.ta-app .ta-license-banner.is-expired { background: var(--ta-bad-bg); color: var(--ta-bad-fg); }
.ta-app .ta-license-banner.is-licensed { background: var(--ta-soft); color: var(--ta-ink); }
.ta-app .ta-license-banner-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ta-app .ta-license-banner .ta-icon-btn { width: 36px; height: 36px; font-size: 20px; color: inherit; }
.ta-dialog.ta-license-dialog { width: min(520px, calc(100vw - 32px)); }
.ta-dialog .ta-license-state p { color: var(--ta-ink); }
.ta-dialog .ta-license-ok { color: var(--ta-ok-fg) !important; }
.ta-dialog .ta-license-bad { color: var(--ta-bad-fg) !important; }
.ta-dialog .ta-license-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.ta-dialog .ta-license-steps li strong { display: inline-block; margin-right: 6px; }
.ta-dialog .ta-license-steps li > .ta-btn { display: inline-flex; margin-top: 8px; }
.ta-dialog .ta-license-steps label { font-weight: 700; }
.ta-dialog .ta-license-keyrow { display: flex; gap: 8px; margin-top: 8px; }
.ta-dialog .ta-license-keyrow .ta-input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; }
.ta-dialog .ta-license-note { font-size: 12.5px !important; }
.ta-dialog .ta-btn[hidden] { display: none; }

/* Rechtliche Links: am PC unten in der Seitenleiste, am Handy ganz unten auf der Seite */
.ta-app .ta-legal { font-size: 12px; color: var(--ta-muted); padding: 2px 4px 0; }
/* Sprachumschalter DE | EN */
.ta-lang { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--ta-muted, #6b7280); }
.ta-lang a, .ta-lang span.is-active { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 28px; padding: 0 8px; border-radius: 8px; text-decoration: none; }
.ta-lang a { color: inherit; }
.ta-lang a:hover, .ta-lang a:focus-visible { background: var(--ta-soft, #eef2f0); color: var(--ta-text, #0f172a); }
.ta-lang span.is-active { background: var(--ta-accent, #0B6E4F); color: #fff; }
.ta-app .ta-sidebar-lang { padding: 0 4px; }
.ta-app .ta-legal a { color: inherit; text-decoration: none; }
.ta-app .ta-legal a:hover, .ta-app .ta-legal a:focus-visible { color: var(--ta-ink); text-decoration: underline; }
.ta-app .ta-legal-mobile { display: none; }
.ta-app .ta-club-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px; margin: -4px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--ta-ink); text-align: left; cursor: pointer; }
.ta-app .ta-club-btn:hover { background: var(--ta-soft); }
.ta-app .ta-club-btn-logo { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ta-line); background: var(--ta-accent); color: var(--ta-on-accent); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ta-app .ta-club-btn-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ta-app .ta-club-btn .ta-color-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.ta-app .ta-club-btn-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-club-btn small { font-size: 12px; color: var(--ta-muted); }
.ta-dialog.ta-club-dialog { width: min(480px, calc(100vw - 32px)); }
.ta-dialog .ta-club-logo-row { display: flex; gap: 16px; align-items: center; }
.ta-dialog .ta-club-preview { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 16px; border: 1px dashed var(--ta-line); background: var(--ta-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ta-muted); }
.ta-dialog .ta-club-preview img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ta-dialog .ta-club-removed { font-size: 12px; text-align: center; padding: 6px; }
.ta-dialog .ta-club-logo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ta-dialog .ta-club-logo-actions small { font-size: 12px; color: var(--ta-muted); }
.ta-dialog .ta-club-upload { cursor: pointer; position: relative; }
.ta-dialog .ta-club-upload:focus-within { outline: 2px solid var(--ta-accent); outline-offset: 2px; }
.ta-dialog .ta-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.ta-dialog .ta-btn[hidden] { display: none; }

/* ============================ INHALT ============================ */
.ta-app .ta-main { flex: 1 1 auto; min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 56px; }
.ta-app .ta-container { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

.ta-app .ta-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ta-app .ta-eyebrow { font-size: 13px; font-weight: 600; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .06em; }
.ta-app .ta-title { margin-top: 6px; font-family: var(--ta-font-display); font-size: 32px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.ta-app .ta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Buttons */
.ta-app .ta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 16px;
    border-radius: var(--ta-radius-sm);
    font-size: 14px; font-weight: 600; white-space: nowrap;
}
.ta-app .ta-btn-primary { background: var(--ta-accent); color: var(--ta-on-accent); }
.ta-app .ta-btn-primary:hover { background: var(--ta-accent); filter: brightness(.92); }
.ta-app .ta-btn-secondary { background: var(--ta-surface); color: var(--ta-ink); border: 1px solid var(--ta-line); }
.ta-app .ta-btn-secondary:hover { background: var(--ta-soft); }
.ta-app .ta-btn-outline { border: 1px solid var(--ta-accent); color: var(--ta-accent); }
.ta-app .ta-btn-outline:hover { background: var(--ta-accent-soft); }
.ta-app .ta-link { color: var(--ta-accent); font-weight: 600; font-size: 14px; min-height: 40px; display: inline-flex; align-items: center; }
.ta-app .ta-link:hover { text-decoration: underline; }

/* Karten */
.ta-app .ta-card {
    background: var(--ta-surface);
    border: 1px solid var(--ta-line);
    border-radius: var(--ta-radius);
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
}
.ta-app .ta-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ta-app .ta-card-title { font-size: 17px; font-weight: 700; }
.ta-app .ta-card-meta { font-size: 13px; color: var(--ta-muted); }
.ta-app .ta-lift:hover { transform: translateY(-1px); box-shadow: var(--ta-shadow-hover); }

.ta-app .ta-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.ta-app .ta-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.ta-app .ta-stack { display: flex; flex-direction: column; gap: 16px; }

/* Kennzahlen */
.ta-app .ta-stat { gap: 4px; transition: transform .15s, box-shadow .15s; }
.ta-app .ta-stat-label { font-size: 13px; color: var(--ta-muted); font-weight: 500; }
.ta-app .ta-stat-value { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ta-app .ta-stat-num { font-family: var(--ta-font-display); font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.ta-app .ta-stat-unit { font-size: 15px; color: var(--ta-muted); }
.ta-app .ta-stat-sub { font-size: 13px; color: var(--ta-muted); }
.ta-app .ta-bar { height: 6px; border-radius: 999px; background: var(--ta-line); overflow: hidden; margin-top: 8px; }
.ta-app .ta-bar > span { display: block; height: 100%; background: var(--ta-accent); border-radius: 999px; }

/* Chips / Badges */
.ta-app .ta-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.ta-app .ta-chip-accent { background: var(--ta-accent-soft); color: var(--ta-accent); text-transform: uppercase; letter-spacing: .06em; }
.ta-app .ta-chip-ok { background: var(--ta-ok-bg); color: var(--ta-ok-fg); }
.ta-app .ta-chip-bad { background: var(--ta-bad-bg); color: var(--ta-bad-fg); }
.ta-app .ta-chip-warn { background: var(--ta-warn-bg); color: var(--ta-warn-fg); }
.ta-app .ta-chip-info { background: var(--ta-info-bg); color: var(--ta-info-fg); }

/* Hero: nächstes Spiel */
.ta-app .ta-hero {
    background: var(--ta-surface); border: 1px solid var(--ta-line); border-radius: var(--ta-radius-lg);
    padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 28px;
}
.ta-app .ta-hero-main { display: flex; flex-direction: column; gap: 18px; }
.ta-app .ta-matchup { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ta-app .ta-team { text-align: center; max-width: 140px; }
.ta-app .ta-team-badge {
    width: 56px; height: 56px; border-radius: 14px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ta-font-display); font-weight: 700; font-size: 18px;
    background: var(--ta-soft); border: 1px solid var(--ta-line);
}
.ta-app .ta-team-badge.is-home { background: var(--ta-accent); color: var(--ta-on-accent); border-color: var(--ta-accent); }
.ta-app .ta-team-badge.has-logo { background: #fff; border-color: var(--ta-line); padding: 4px; overflow: hidden; }
.ta-app .ta-team-badge.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ta-app .ta-team-name { font-size: 13px; font-weight: 600; margin-top: 6px; overflow-wrap: anywhere; }
.ta-app .ta-vs { font-family: var(--ta-font-display); font-size: 22px; font-weight: 600; color: var(--ta-muted); }
.ta-app .ta-meta-row { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ta-muted); }
.ta-app .ta-meta-row span { display: inline-flex; align-items: center; gap: 6px; }

.ta-app .ta-prep {
    background: var(--ta-soft); border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
    padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.ta-app .ta-prep-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ta-app .ta-big { font-family: var(--ta-font-display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ta-app .ta-progress { height: 8px; border-radius: 999px; background: var(--ta-line); overflow: hidden; }
.ta-app .ta-progress > span { display: block; height: 100%; background: var(--ta-accent); border-radius: 999px; transition: width .3s; }
.ta-app .ta-steps { display: flex; flex-direction: column; gap: 6px; }
.ta-app .ta-step {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
    border-radius: var(--ta-radius-sm); border: 1px solid var(--ta-line); background: var(--ta-surface);
    font-size: 14px;
}
.ta-app .ta-step:hover { border-color: var(--ta-accent); }
.ta-app .ta-step-dot {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px;
    border: 1.5px solid var(--ta-line); display: flex; align-items: center; justify-content: center; color: #fff;
}
.ta-app .ta-step.is-done .ta-step-dot { background: var(--ta-accent); border-color: var(--ta-accent); }
.ta-app .ta-step-label { flex: 1 1 auto; font-weight: 600; }
.ta-app .ta-step-state { font-size: 12px; font-weight: 600; color: var(--ta-muted); }
.ta-app .ta-step.is-done .ta-step-state { color: var(--ta-accent); }

/* Listen */
.ta-app .ta-list { display: flex; flex-direction: column; }
.ta-app .ta-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--ta-line); }
.ta-app .ta-row:last-child { border-bottom: 0; }
.ta-app a.ta-row:hover { background: var(--ta-soft); }
.ta-app .ta-num {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
    background: var(--ta-soft); border: 1px solid var(--ta-line);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ta-font-display); font-weight: 700; font-size: 14px;
}
.ta-app .ta-row-body { flex: 1 1 auto; min-width: 0; }
.ta-app .ta-row-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-row-sub { font-size: 12px; color: var(--ta-muted); }

/* Segment-Filter */
.ta-app .ta-seg { display: flex; background: var(--ta-soft); border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm); padding: 3px; }
.ta-app .ta-seg button { min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ta-muted); }
.ta-app .ta-seg button[aria-pressed="true"] { background: var(--ta-surface); color: var(--ta-ink); box-shadow: 0 1px 2px rgba(15,23,42,.08); }

/* Schnellzugriff */
.ta-app .ta-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ta-app .ta-tile {
    min-height: 76px; padding: 14px; border-radius: 12px;
    border: 1px solid var(--ta-line); background: var(--ta-soft);
    display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600;
    transition: transform .15s, box-shadow .15s;
}
.ta-app .ta-tile:hover { transform: translateY(-1px); box-shadow: var(--ta-shadow-hover); }

.ta-app .ta-select {
    width: 100%; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm);
    background: var(--ta-surface); color: var(--ta-ink); font: inherit; font-size: 14px;
}
.ta-app .ta-empty { text-align: center; padding: 24px 8px; color: var(--ta-muted); font-size: 14px; }
.ta-app .ta-note { font-size: 14px; line-height: 1.55; }

/* ============================ FORMULARE / WERKZEUGLEISTE ============================ */
.ta-app .ta-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ta-app .ta-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.ta-app .ta-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ta-muted); pointer-events: none; }
.ta-app .ta-input,
.ta-dialog .ta-input {
    width: 100%; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm);
    background: var(--ta-surface); color: var(--ta-ink); font: inherit; font-size: 15px;
}
.ta-app .ta-search .ta-input { padding-left: 40px; }
.ta-app .ta-input:focus, .ta-dialog .ta-input:focus { outline: 2px solid var(--ta-accent); outline-offset: 0; border-color: transparent; }

/* Gruppen (z. B. Positionen im Kader) */
.ta-app .ta-group-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .06em;
    padding: 18px 2px 6px;
}
.ta-app .ta-group-head:first-child { padding-top: 0; }
.ta-app .ta-group-count { font-weight: 600; background: var(--ta-soft); border: 1px solid var(--ta-line); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
.ta-app .ta-row-actions { display: flex; align-items: center; gap: 4px; }
.ta-app .ta-icon-btn.is-danger:hover { background: var(--ta-bad-bg); color: var(--ta-bad-fg); }

/* Schalter Anwesend / Abwesend */
.ta-app .ta-switch {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px;
    border-radius: var(--ta-radius-sm); font-size: 13px; font-weight: 600; color: var(--ta-bad-fg);
}
.ta-app .ta-switch:hover { background: var(--ta-soft); }
.ta-app .ta-switch-track {
    width: 40px; height: 24px; border-radius: 999px; background: #C9CFD6; position: relative; flex: 0 0 40px;
    transition: background .15s;
}
.ta-app .ta-switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.ta-app .ta-switch[aria-checked="true"] { color: var(--ta-ok-fg); }
.ta-app .ta-switch[aria-checked="true"] .ta-switch-track { background: var(--ta-accent); }
.ta-app .ta-switch[aria-checked="true"] .ta-switch-track::after { transform: translateX(16px); }
.ta-app .ta-switch[aria-busy="true"] { opacity: .6; pointer-events: none; }
.ta-app .ta-switch-text { min-width: 64px; text-align: left; }

/* Dialog (Spieler anlegen / bearbeiten / löschen) */
.ta-dialog {
    --ta-surface: #FFFFFF; --ta-soft: #F6F8FA; --ta-ink: #0F172A; --ta-muted: #556070; --ta-line: #E3E7EC;
    --ta-bad-bg: #FDE7E5; --ta-bad-fg: #B42318; --ta-radius-sm: 10px;
    width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px;
    background: var(--ta-surface); color: var(--ta-ink);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}
.ta-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.ta-dialog form { margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.ta-dialog h2 { margin: 0; font-size: 20px; font-weight: 700; }
.ta-dialog p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ta-muted); }
.ta-dialog .ta-field { display: flex; flex-direction: column; gap: 6px; }
.ta-dialog .ta-field label { font-size: 13px; font-weight: 600; }
.ta-dialog .ta-field-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.ta-dialog .ta-hint { font-size: 12px; color: var(--ta-muted); min-height: 16px; }
.ta-dialog .ta-hint.is-error { color: var(--ta-bad-fg); font-weight: 600; }
.ta-dialog .ta-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.ta-dialog button { margin: 0; font: inherit; cursor: pointer; }
.ta-dialog .ta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 0;
}
.ta-dialog .ta-btn-secondary { background: var(--ta-surface); color: var(--ta-ink); border: 1px solid var(--ta-line); }
.ta-dialog .ta-btn-secondary:hover { background: var(--ta-soft); }
.ta-dialog .ta-btn-primary { background: var(--ta-accent, #0B6E4F); color: #fff; }
.ta-dialog .ta-btn-primary:hover { background: var(--ta-accent, #0B6E4F); filter: brightness(.92); }
.ta-dialog .ta-btn-danger { background: #B42318; color: #fff; }
.ta-dialog .ta-btn-danger:hover { background: #912018; }
.ta-dialog .ta-btn[disabled] { opacity: .6; cursor: wait; }

/* ============================ SPIELE ============================ */
.ta-app .ta-game {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center;
    padding: 16px; border: 1px solid var(--ta-line); border-radius: var(--ta-radius); background: var(--ta-surface);
}
.ta-app .ta-game + .ta-game { margin-top: 10px; }
.ta-app .ta-game.is-next { border-color: var(--ta-accent); box-shadow: 0 0 0 1px var(--ta-accent) inset; }
.ta-app .ta-date {
    width: 64px; height: 64px; border-radius: 12px; background: var(--ta-soft); border: 1px solid var(--ta-line);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.ta-app .ta-game.is-next .ta-date { background: var(--ta-accent); border-color: var(--ta-accent); color: var(--ta-on-accent); }
.ta-app .ta-date-day { font-family: var(--ta-font-display); font-size: 22px; font-weight: 700; }
.ta-app .ta-date-mon { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ta-app .ta-game-title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ta-app .ta-game-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ta-muted); margin-top: 2px; }
.ta-app .ta-game-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ta-app .ta-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ta-app .ta-pill {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--ta-line); background: var(--ta-soft);
    font-size: 13px; font-weight: 600; color: var(--ta-ink);
}
.ta-app .ta-pill:hover { border-color: var(--ta-accent); }
.ta-app .ta-pill-dot { width: 8px; height: 8px; border-radius: 999px; background: #C9CFD6; }
.ta-app .ta-pill.is-done { background: var(--ta-accent-soft); border-color: transparent; color: var(--ta-accent); }
.ta-app .ta-pill.is-done .ta-pill-dot { background: var(--ta-accent); }
.ta-app .ta-game-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ta-app .ta-month { font-size: 12px; font-weight: 700; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .06em; padding: 18px 2px 8px; }
.ta-app .ta-month:first-child { padding-top: 4px; }
@media (max-width: 640px) {
    .ta-app .ta-game { grid-template-columns: 56px minmax(0, 1fr); }
    .ta-app .ta-date { width: 56px; height: 56px; }
    .ta-app .ta-game-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============================ SPIELTAG-KOPF ============================ */
.ta-app .ta-spieltag { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ta-app .ta-backlink { color: var(--ta-muted); align-self: flex-start; }
.ta-app .ta-steptabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--ta-line); }
.ta-app .ta-steptab {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    font-size: 14px; font-weight: 600; color: var(--ta-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ta-app .ta-steptab:hover { color: var(--ta-ink); }
.ta-app .ta-steptab.is-active { color: var(--ta-accent); border-bottom-color: var(--ta-accent); }
.ta-app .ta-steptab.is-done .ta-pill-dot { background: var(--ta-accent); }
@media (max-width: 640px) {
    .ta-app .ta-steptabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ta-app .ta-steptab { flex: 0 0 auto; }
}

/* ============================ AUFSTELLUNG (bestehender Editor im neuen Look) ============================ */
.ta-app .lineup-editor-wrapper { max-width: 1280px; margin: 0 auto; padding: 0; font-family: var(--ta-font); }
.ta-app .lineup-content { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.ta-app .lineup-players,
.ta-app .lineup-field {
    background: var(--ta-surface); border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
    box-shadow: none; padding: 20px;
}
.ta-app .lineup-players { width: auto; max-height: none; position: sticky; top: 20px; }
.ta-app .lineup-players h3 { font-size: 17px; font-weight: 700; color: var(--ta-ink); border: 0; padding: 0; margin: 0 0 14px; }
.ta-app .player-group { margin-bottom: 18px; }
.ta-app .player-group h4 {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .06em;
}
.ta-app .player-group h4 .lineup-count {
    font-family: var(--ta-font-display); font-size: 14px; letter-spacing: 0; color: var(--ta-ink);
    background: var(--ta-soft); border: 1px solid var(--ta-line); border-radius: 999px; padding: 1px 10px;
}
.ta-app .player-list { border: 1px dashed var(--ta-line); border-radius: var(--ta-radius-sm); padding: 6px; min-height: 56px; background: var(--ta-soft); }
.ta-app .player-list .player-item {
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
    min-height: 44px; padding: 6px 10px; margin: 0 0 4px; border: 1px solid var(--ta-line); border-left: 1px solid var(--ta-line);
    border-radius: 8px; background: var(--ta-surface);
}
.ta-app .player-list .player-item:last-child { margin-bottom: 0; }
.ta-app .player-list .player-item:hover { background: var(--ta-surface); border-color: var(--ta-accent); }
.ta-app .player-list .player-item.disabled { opacity: .55; }
.ta-app .player-list .player-item .player-number {
    background: var(--ta-accent-soft); color: var(--ta-accent); font-family: var(--ta-font-display);
    font-weight: 700; font-size: 13px; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ta-app .player-list .player-item .player-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .player-list .player-item .player-pos { font-size: 11px; color: var(--ta-muted); background: var(--ta-soft); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ta-app .player-list .player-item .remove-from-field {
    min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
    background: var(--ta-bad-bg); color: var(--ta-bad-fg); border: 0; margin: 0;
}
.ta-app .player-list .player-item .remove-from-field:hover { background: var(--ta-bad-fg); color: #fff; }
.ta-app .field-color-selector { margin: 0 0 12px; padding: 0; background: none; border: 0; }
.ta-app .field-color-selector label { font-size: 13px; font-weight: 600; color: var(--ta-ink); margin-bottom: 6px; }
.ta-app .field-color-selector select {
    min-height: 44px; padding: 0 12px; border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm);
    font: inherit; font-size: 14px; color: var(--ta-ink); background: var(--ta-surface);
}
.ta-app .player-hint {
    background: var(--ta-soft); border: 1px solid var(--ta-line); color: var(--ta-muted);
    border-radius: var(--ta-radius-sm); padding: 12px 14px; margin-top: 4px; font-size: 13px; line-height: 1.5;
}
.ta-app .player-hint strong { color: var(--ta-ink); }
/* Feldgröße bewusst NICHT begrenzen – die Drag-&-Drop-Berechnung geht von der vollen Breite aus */
.ta-app .lineup-field .football-field { border-radius: 10px; }
.ta-app .lineup-field { max-width: 640px; width: 100%; justify-self: center; }
.ta-app .error-message { background: var(--ta-bad-bg); color: var(--ta-bad-fg); border-radius: var(--ta-radius); }
@media (max-width: 992px) {
    .ta-app .lineup-content { grid-template-columns: 1fr; }
    .ta-app .lineup-players { position: static; }
    .ta-app .lineup-field { padding: 10px; }
}
@media print {
    .ta-app .ta-spieltag, .ta-app .lineup-players { display: none !important; }
}

/* ============================ SPIELVORBEREITUNG ============================ */
.ta-app .ta-savestate { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ta-muted); min-height: 44px; padding: 0 4px; }
.ta-app .ta-savestate::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ta-accent); }
.ta-app .ta-savestate.is-dirty::before { background: #f59e0b; }
.ta-app .ta-savestate.is-saving::before { background: #94a3b8; }
.ta-app .ta-savestate.is-error { color: var(--ta-bad-fg); }
.ta-app .ta-savestate.is-error::before { background: var(--ta-bad-fg); }
.ta-app .ta-prep-form { display: flex; flex-direction: column; gap: 8px; }
.ta-app .ta-prep-system-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ta-app .ta-prep-system-row .ta-select { flex: 1 1 240px; width: auto; }
.ta-app .ta-prep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ta-app .ta-prep-grid.is-single { grid-template-columns: 1fr; }
.ta-app .ta-prep-field { gap: 8px; }
.ta-app .ta-prep-label { font-size: 15px; font-weight: 700; }
.ta-app .ta-textarea {
    width: 100%; min-height: 110px; padding: 12px 14px; resize: vertical;
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm);
    background: var(--ta-soft); color: var(--ta-ink); font: inherit; font-size: 15px; line-height: 1.55;
    transition: border-color .15s, background .15s;
}
.ta-app .ta-textarea:hover { border-color: #c9cfd6; }
.ta-app .ta-textarea:focus { outline: 2px solid var(--ta-accent); outline-offset: 0; border-color: transparent; background: var(--ta-surface); }
.ta-app .ta-textarea::placeholder { color: #8a94a1; }

/* Kernbotschaften */
.ta-app .ta-kern { border: 2px solid var(--ta-accent); }
.ta-app .ta-kern-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ta-app .ta-kern-list li { display: flex; align-items: center; gap: 12px; }
.ta-app .ta-kern-nr {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 999px;
    background: var(--ta-accent); color: var(--ta-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ta-font-display); font-weight: 700; font-size: 16px;
}
.ta-app .ta-kern-input { font-size: 17px; font-weight: 600; }

/* Formular-Raster (Uhrzeiten, Auswahlfelder) */
.ta-app .ta-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.ta-app .ta-form-grid .ta-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ta-app .ta-form-grid .ta-field label { font-size: 13px; font-weight: 600; }
.ta-app .ta-span-2 { grid-column: span 2; }
.ta-app .ta-span-all { grid-column: 1 / -1; }
.ta-app .ta-textarea-sm { min-height: 64px; }
@media (max-width: 760px) {
    .ta-app .ta-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Auswahl als Segment (Pressinghöhe) */
.ta-app .ta-radio-seg { display: inline-flex; background: var(--ta-soft); border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm); padding: 3px; align-self: flex-start; }
.ta-app .ta-radio-seg label { position: relative; cursor: pointer; }
.ta-app .ta-radio-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ta-app .ta-radio-seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ta-muted); }
.ta-app .ta-radio-seg input:checked + span { background: var(--ta-accent); color: var(--ta-on-accent); }
.ta-app .ta-radio-seg input:focus-visible + span { outline: 2px solid var(--ta-accent); outline-offset: 2px; }

/* Wiederholbare Zeilen (Schlüsselspieler, Wechselplan) */
.ta-app .ta-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.ta-app .ta-rep { display: flex; flex-direction: column; gap: 8px; }
.ta-app .ta-rep-head { font-size: 12px; font-weight: 700; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .05em; }
.ta-app .ta-rep-keys { display: grid; grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.ta-app .ta-rep-subs { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 44px; gap: 8px; align-items: center; }
.ta-app .ta-rep-row .ta-select { min-width: 0; }
.ta-app .ta-rep-empty { margin: 0; font-size: 14px; color: var(--ta-muted); }
@media (max-width: 760px) {
    .ta-app .ta-rep-head { display: none; }
    .ta-app .ta-rep-row { grid-template-columns: 64px minmax(0, 1fr) 44px; padding: 10px; border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm); background: var(--ta-soft); }
    .ta-app .ta-rep-row > :nth-child(3), .ta-app .ta-rep-row > :nth-child(4) { grid-column: 1 / -1; }
    .ta-app .ta-rep-row > :nth-child(5) { grid-column: 3; grid-row: 1; }
}

/* ============================ TAKTIKTAFEL PRO ============================ */
.ta-app .ta-tt-main { padding: 16px clamp(12px, 2vw, 24px); }
.ta-app .ta-tt { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 32px); min-height: 560px; }
.ta-app .ta-tt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ta-app .ta-tt-titlewrap { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
.ta-app .ta-tt-title {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px;
    background: transparent; font-family: var(--ta-font-display); font-size: 24px; font-weight: 700; color: var(--ta-ink);
}
.ta-app .ta-tt-title:hover { border-color: var(--ta-line); }
.ta-app .ta-tt-title:focus { outline: 2px solid var(--ta-accent); background: var(--ta-surface); }
.ta-app .ta-tt-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr) 290px; gap: 12px; }

/* Werkzeugleiste */
.ta-app .ta-tt-rail {
    display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; overflow-y: auto;
    background: var(--ta-surface); border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
    scrollbar-width: thin;
}
.ta-app .ta-tt-tool {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; padding: 4px 2px; border-radius: 10px; color: var(--ta-muted); font-size: 10.5px; font-weight: 600; line-height: 1.1;
}
.ta-app .ta-tt-tool span { text-align: center; }
.ta-app .ta-tt-tool:hover { background: var(--ta-soft); color: var(--ta-ink); }
.ta-app .ta-tt-tool.is-active { background: var(--ta-accent); color: var(--ta-on-accent); }
.ta-app .ta-tt-tool[disabled] { opacity: .35; cursor: default; }
.ta-app .ta-tt-sep { height: 1px; background: var(--ta-line); margin: 4px 6px; flex: 0 0 1px; }
.ta-app .ta-tt-colors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 2px 6px; }
.ta-app .ta-tt-color {
    width: 100%; aspect-ratio: 1; border-radius: 999px; background: var(--c) !important; border: 2px solid var(--ta-line) !important;
    box-shadow: inset 0 0 0 2px #fff;
}
.ta-app .ta-tt-color.is-active { border-color: var(--ta-accent) !important; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--ta-accent); }

/* Spielfeld */
.ta-app .ta-tt-stage {
    position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center;
    background: #1b5e34; border-radius: var(--ta-radius); overflow: hidden;
}
.ta-app .ta-tt-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.ta-app .ta-tt-svg[data-tool="move"] .tt-token { cursor: grab; }
.ta-app .ta-tt-svg[data-tool="move"] .tt-token.is-dragging { cursor: grabbing; }
.ta-app .ta-tt-svg[data-tool="move"] .tt-drawing.is-text, .ta-app .ta-tt-svg[data-tool="text"] .tt-drawing.is-text { cursor: grab; }
.ta-app .tt-drawing.is-text.is-dragging { cursor: grabbing; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.ta-app .ta-tt-svg:not([data-tool="move"]) { cursor: crosshair; }
.ta-app .ta-tt-svg[data-tool="erase"] { cursor: not-allowed; }
.ta-app .tt-token.is-dragging circle:nth-of-type(2) { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.ta-app .tt-laser-fade { transition: opacity 1.2s ease; opacity: 0 !important; }
.ta-app .ta-tt-hint {
    position: absolute; left: 50%; top: 10px; transform: translate(-50%, -8px); max-width: calc(100% - 24px);
    background: rgba(15,23,42,.78); color: #fff; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; text-align: center;
    pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.ta-app .ta-tt-hint.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; transition: opacity .25s ease, transform .25s ease; }

/* Einstellungen rechts */
.ta-app .ta-tt-panel { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.ta-app .ta-tt-card { padding: 14px; gap: 10px; }
.ta-app .ta-tt-dot { display: inline-block; width: 14px; height: 14px; border-radius: 999px; flex: 0 0 14px; }
.ta-app .ta-tt-dot.is-home { background: var(--ta-accent); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--ta-line); }
.ta-app .ta-tt-dot.is-away { background: #dc2626; }
.ta-app .ta-tt-dot.is-ball { width: 18px; height: 18px; flex-basis: 18px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-11%20-11%2022%2022%22%3E%3Ccircle%20r%3D%2210%22%20fill%3D%22%23fff%22%20stroke%3D%22%23111827%22%20stroke-width%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M0%20-3.3L0%20-9.5M3.14%20-1.02L9.04%20-2.94M1.94%202.67L5.58%207.69M-1.94%202.67L-5.58%207.69M-3.14%20-1.02L-9.04%20-2.94M4.58%20-6.31L1.94%20-2.67M7.42%202.41L3.14%201.02M0%207.8L0%203.3M-7.42%202.41L-3.14%201.02M-4.58%20-6.31L-1.94%20-2.67%22%20fill%3D%22none%22%20stroke%3D%22%23111827%22%20stroke-width%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M0%20-3.3L3.14%20-1.02L1.94%202.67L-1.94%202.67L-3.14%20-1.02ZM7.09%20-6.31L4.58%20-6.31L3.81%20-8.69L4.01%20-8.61L4.75%20-8.23L5.45%20-7.78L6.11%20-7.28L6.72%20-6.72ZM7.42%202.41L9.45%200.93L9.36%201.65L9.18%202.46L8.93%203.25L8.61%204.01L8.23%204.75L8.19%204.8ZM1.65%209.36L0.83%209.46L0%209.5L-0.83%209.46L-1.65%209.36L-2.03%209.27L0%207.8L2.03%209.27ZM-8.93%203.25L-9.18%202.46L-9.36%201.65L-9.45%200.93L-7.42%202.41L-8.19%204.8L-8.23%204.75L-8.61%204.01ZM-4.75%20-8.23L-4.01%20-8.61L-3.81%20-8.69L-4.58%20-6.31L-7.09%20-6.31L-6.72%20-6.72L-6.11%20-7.28L-5.45%20-7.78Z%22%20fill%3D%22%23111827%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.ta-app .ta-tt-cone { display: inline-block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid #f97316; }
.ta-app .ta-check-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-height: 32px; cursor: pointer; }
.ta-app .ta-check-row input { width: 18px; height: 18px; accent-color: var(--ta-accent); }
.ta-app .ta-tt-addgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ta-app .ta-tt-add {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ta-line);
    border-radius: 10px; background: var(--ta-soft); font-size: 13.5px; font-weight: 600;
}
.ta-app .ta-tt-add:hover { border-color: var(--ta-accent); background: var(--ta-soft); }
/* Spielergröße + Farben im Spieler-Dialog */
.ta-app .ta-tt-range { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.ta-app .ta-tt-range input { width: 100%; accent-color: var(--ta-accent); }
.ta-app .ta-tt-range output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ta-muted); }
.ta-app .ta-tt-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-app .ta-tt-swatch { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--ta-line); background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.ta-app .ta-tt-swatch.is-team { width: auto; padding: 0 12px; background: var(--ta-soft); font-size: 13px; font-weight: 700; box-shadow: none; }
.ta-app .ta-tt-swatch[aria-pressed="true"] { border-color: var(--ta-ink); outline: 3px solid color-mix(in srgb, var(--ta-accent) 45%, transparent); outline-offset: 1px; }
.ta-app .ta-tt-dirpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "ul u ur" "l . r" "dl d dr"; gap: 6px; max-width: 300px; }
.ta-app .ta-tt-dirpad button { min-height: 76px; padding: 3px 4px; border: 1px solid var(--ta-line); border-radius: 10px; background: var(--ta-soft); font-size: 13px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; }
.ta-app .ta-tt-dirpad button svg { width: 40px; height: 56px; display: block; pointer-events: none; }
.ta-app .ta-tt-dirpad button small { font-size: 10.5px; font-weight: 600; color: var(--ta-muted); white-space: nowrap; }
.ta-app .ta-tt-dirpad button[data-v="ul"] { grid-area: ul; }
.ta-app .ta-tt-dirpad button[data-v="u"] { grid-area: u; }
.ta-app .ta-tt-dirpad button[data-v="ur"] { grid-area: ur; }
.ta-app .ta-tt-dirpad button[data-v="l"] { grid-area: l; }
.ta-app .ta-tt-dirpad button[data-v="r"] { grid-area: r; }
.ta-app .ta-tt-dirpad button[data-v="dl"] { grid-area: dl; }
.ta-app .ta-tt-dirpad button[data-v="d"] { grid-area: d; }
.ta-app .ta-tt-dirpad button[data-v="dr"] { grid-area: dr; }
.ta-app .ta-tt-dirpad button[aria-pressed="true"] { background: var(--ta-accent); border-color: var(--ta-accent); color: #fff; }
.ta-app .ta-tt-dirpad button[aria-pressed="true"] small { color: rgba(255,255,255,.85); }
.ta-app .ta-tt-posepad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 360px; margin-bottom: 6px; }
.ta-app .ta-tt-posepad { max-width: 300px; }
.ta-app .ta-tt-posepad button { min-height: 40px; padding: 3px 6px; border: 1px solid var(--ta-line); border-radius: 10px; background: var(--ta-soft); font-size: 12.5px; font-weight: 600; line-height: 1.1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.ta-app .ta-tt-posepad button svg { width: 40px; height: 56px; display: block; pointer-events: none; }
.ta-app .ta-tt-posepad button[aria-pressed="true"] { background: var(--ta-accent); border-color: var(--ta-accent); color: #fff; }
.ta-app #tt-token-dirfield .ta-tt-dirpad { margin-bottom: 12px; }
.ta-app .tt-token.is-dragging > g { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
/* Material-Menü der Taktiktafel */
.ta-app .ta-tt-matmenu { margin-top: 8px; border-top: 1px solid var(--ta-line); padding-top: 8px; }
.ta-app .ta-tt-matmenu > summary { display: flex; align-items: baseline; gap: 8px; min-height: 36px; cursor: pointer; font-size: 14px; font-weight: 700; list-style: none; }
.ta-app .ta-tt-matmenu > summary::-webkit-details-marker { display: none; }
.ta-app .ta-tt-matmenu > summary::after { content: "▾"; margin-left: auto; color: var(--ta-muted); transition: transform .15s; }
.ta-app .ta-tt-matmenu[open] > summary::after { transform: rotate(180deg); }
.ta-app .ta-tt-matmenu > summary small { font-weight: 500; color: var(--ta-muted); font-size: 12px; }
.ta-app .ta-tt-eqgrid { margin-top: 4px; }
.ta-app .ta-tt-eqbtn { padding: 0 8px; gap: 8px; }
.ta-app .ta-tt-eqicon { width: 38px; height: 28px; flex: 0 0 38px; border-radius: 6px; display: block; }
.ta-app .ta-tt-eqhint { margin: 6px 0 0; font-size: 11.5px; color: var(--ta-muted); }
.ta-app .ta-tt-seg { width: 100%; }
.ta-app .ta-tt-seg button { flex: 1 1 0; }
.ta-app .ta-tt-colorrow { display: flex; gap: 12px; font-size: 13px; font-weight: 600; }
.ta-app .ta-tt-colorrow label { display: flex; align-items: center; gap: 8px; }
.ta-app .ta-tt-colorrow input { width: 36px; height: 30px; border: 1px solid var(--ta-line); border-radius: 8px; padding: 0; background: none; }

/* Szenen */
.ta-app .ta-tt-scenes {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    background: var(--ta-surface); border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
}
.ta-app .ta-tt-playctl { display: flex; align-items: center; gap: 8px; }
.ta-app .ta-tt-play { width: 48px; height: 48px; border-radius: 999px; background: var(--ta-accent); color: var(--ta-on-accent); display: flex; align-items: center; justify-content: center; }
.ta-app .ta-tt-play:hover { background: var(--ta-accent); filter: brightness(.92); }
.ta-app .ta-tt-speed { width: auto; min-height: 40px; }
.ta-app .ta-tt-scenelist { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding: 2px; }
.ta-app .ta-tt-scene {
    flex: 0 0 auto; min-width: 48px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ta-line);
    background: var(--ta-soft); font-family: var(--ta-font-display); font-weight: 700; font-size: 16px;
}
.ta-app .ta-tt-scene:hover { border-color: var(--ta-accent); background: var(--ta-soft); }
.ta-app .ta-tt-scene.is-active { background: var(--ta-accent); border-color: var(--ta-accent); color: var(--ta-on-accent); }
.ta-app .ta-tt-scenectl { display: flex; align-items: center; gap: 6px; }
.ta-app .ta-tt.is-playing .ta-tt-rail, .ta-app .ta-tt.is-playing .ta-tt-panel { opacity: .5; pointer-events: none; }

/* Präsentationsmodus: Feld groß, dunkler Rahmen, schwebende Werkzeuge */
.ta-app .ta-tt.is-present {
    position: fixed; inset: 0; z-index: 9000; height: 100vh; min-height: 0; padding: 12px; gap: 10px;
    background: #0b1220;
}
.ta-app .ta-tt.is-present .ta-tt-head { color: #fff; }
.ta-app .ta-tt.is-present .ta-tt-title { color: #fff; }
.ta-app .ta-tt.is-present .ta-tt-head .ta-actions > :not(#tt-exit-present) { display: none; }
.ta-app .ta-tt.is-present .ta-savestate { display: none; }
.ta-app .ta-tt.is-present .ta-tt-body { grid-template-columns: 84px minmax(0, 1fr); }
.ta-app .ta-tt.is-present .ta-tt-panel { display: none; }
.ta-app .ta-tt.is-present .ta-tt-rail, .ta-app .ta-tt.is-present .ta-tt-scenes { background: #111a2e; border-color: #1f2a44; }
.ta-app .ta-tt.is-present .ta-tt-rail { scrollbar-color: #2a3756 #111a2e; }
.ta-app .ta-tt.is-present .ta-icon-btn.is-danger { color: #fca5a5; }
.ta-app .ta-tt.is-present .ta-tt-tool { color: #a8b3c7; }
.ta-app .ta-tt.is-present .ta-tt-tool:hover { background: #1b2742; color: #fff; }
.ta-app .ta-tt.is-present .ta-tt-tool.is-active { color: var(--ta-on-accent); background: var(--ta-accent); }
.ta-app .ta-tt.is-present .ta-tt-scene { background: #1b2742; border-color: #2a3756; color: #e2e8f0; }
.ta-app .ta-tt.is-present .ta-tt-scene.is-active { background: var(--ta-accent); border-color: var(--ta-accent); color: var(--ta-on-accent); }
.ta-app .ta-tt.is-present .ta-tt-stage { background: #0b1220; }
.ta-app .ta-tt.is-present .ta-tt-hint { display: none; }
.ta-app .ta-tt.is-present .ta-tt-speed, .ta-app .ta-tt.is-present .ta-tt-scenectl .ta-btn { background: #1b2742; color: #e2e8f0; border-color: #2a3756; }
body.ta-tt-presenting { overflow: hidden; }

@media (max-width: 1180px) {
    .ta-app .ta-tt { height: auto; }
    .ta-app .ta-tt-body { grid-template-columns: 76px minmax(0, 1fr); }
    .ta-app .ta-tt-stage { height: min(78vh, 720px); }
    .ta-app .ta-tt-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .ta-app .ta-tt.is-present .ta-tt-stage { height: auto; }
}
@media (max-width: 700px) {
    .ta-app .ta-tt-body { grid-template-columns: 1fr; }
    .ta-app .ta-tt-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; order: 2; }
    .ta-app .ta-tt-tool { flex: 0 0 60px; }
    .ta-app .ta-tt-sep { width: 1px; height: auto; margin: 6px 2px; flex: 0 0 1px; }
    .ta-app .ta-tt-colors { grid-template-columns: repeat(6, 32px); align-items: center; }
    .ta-app .ta-tt-stage { order: 1; height: 62vh; }
    .ta-app .ta-tt-panel { order: 3; }
    .ta-app .ta-tt-scenes { flex-wrap: wrap; }
    .ta-app .ta-tt.is-present .ta-tt-body { grid-template-columns: 1fr; }
}

/* ============================ SPIELSYSTEME ============================ */
.ta-app .ta-sys-intro { gap: 10px; }
.ta-app .ta-sys-intro .ta-note { color: var(--ta-muted); }
.ta-app .ta-sys-intro .ta-note strong { color: var(--ta-ink); }
.ta-app .ta-sys-stats { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ta-muted); }
.ta-app .ta-sys-stats strong { color: var(--ta-ink); font-family: var(--ta-font-display); font-size: 18px; }
.ta-app .ta-sys-filter, .ta-app #ta-sys-style { flex-wrap: wrap; }
.ta-app .ta-sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ta-app .ta-sys-card {
    display: flex; flex-direction: column; gap: 10px; padding: 14px;
    border: 1px solid var(--ta-line); border-radius: var(--ta-radius); background: var(--ta-surface);
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.ta-app .ta-sys-card:hover { box-shadow: var(--ta-shadow-hover); }
.ta-app .ta-sys-card.is-hidden { background: var(--ta-soft); }
.ta-app .ta-sys-card.is-hidden .ta-sys-top, .ta-app .ta-sys-card.is-hidden .ta-sys-desc { opacity: .55; }
.ta-app .ta-sys-card.is-fav { border-color: var(--ta-accent); box-shadow: 0 0 0 1px var(--ta-accent) inset; }
.ta-app .ta-sys-top { display: flex; gap: 14px; align-items: flex-start; }
.ta-app .ta-sys-pitch { flex: 0 0 auto; line-height: 0; }
.ta-app .ta-sys-pitch svg { border-radius: 8px; display: block; }
.ta-app .ta-sys-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ta-app .ta-sys-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ta-app .ta-sys-code { margin: 0; font-family: var(--ta-font-display); font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.ta-app .ta-sys-name { font-size: 14px; font-weight: 600; color: var(--ta-muted); }
.ta-app .ta-sys-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ta-app .ta-sys-style.is-offensiv { background: var(--ta-bad-bg); color: var(--ta-bad-fg); }
.ta-app .ta-sys-style.is-ausgewogen { background: var(--ta-ok-bg); color: var(--ta-ok-fg); }
.ta-app .ta-sys-style.is-defensiv { background: var(--ta-info-bg); color: var(--ta-info-fg); }
.ta-app .ta-sys-star { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #9aa3ad; }
.ta-app .ta-sys-star:hover { background: var(--ta-soft); color: #d97706; }
.ta-app .ta-sys-star[aria-pressed="true"] { color: #d97706; }
.ta-app .ta-sys-star[aria-pressed="true"] svg path { fill: currentColor; }
.ta-app .ta-sys-desc { margin: 0; font-size: 14px; line-height: 1.5; }
.ta-app .ta-sys-details { font-size: 13.5px; border-top: 1px solid var(--ta-line); padding-top: 8px; }
.ta-app .ta-sys-details summary { cursor: pointer; font-weight: 600; color: var(--ta-accent); min-height: 32px; display: flex; align-items: center; }
.ta-app .ta-sys-pm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.ta-app .ta-sys-pm h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ta-muted); }
.ta-app .ta-sys-pm ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ta-app .ta-sys-pm li { padding-left: 16px; position: relative; line-height: 1.4; }
.ta-app .ta-sys-pm .is-plus li::before { content: "+"; position: absolute; left: 0; font-weight: 800; color: var(--ta-ok-fg); }
.ta-app .ta-sys-pm .is-minus li::before { content: "−"; position: absolute; left: 0; font-weight: 800; color: var(--ta-bad-fg); }
.ta-app .ta-sys-roles { margin: 8px 0 0; line-height: 1.5; }
.ta-app .ta-sys-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.ta-app .ta-sys-card .ta-switch { color: var(--ta-muted); }
.ta-app .ta-sys-card .ta-switch[aria-checked="true"] { color: var(--ta-accent); }
.ta-app .ta-sys-grouphead { padding-top: 22px; }
.ta-dialog.ta-sys-dialog { width: min(600px, calc(100vw - 24px)); }
.ta-dialog .ta-sys-dialog-body { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; }
.ta-dialog .ta-sys-preview svg { border-radius: 10px; display: block; }
.ta-dialog .ta-sys-dialog-fields { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 560px) {
    .ta-dialog .ta-sys-dialog-body { grid-template-columns: 1fr; }
    .ta-dialog .ta-sys-preview { justify-self: center; }
    .ta-app .ta-sys-pm { grid-template-columns: 1fr; }
}

/* ============================ SPIELANALYSE PRO ============================ */
.ta-app .ta-ana-early { background: var(--ta-warn-bg); border-color: #f8d9a6; color: var(--ta-warn-fg); font-size: 14px; }
.ta-app .ta-ana-score { gap: 18px; }
.ta-app .ta-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.ta-app .ta-score-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.ta-app .ta-score-name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.ta-app .ta-score-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ta-app .ta-score-inputs { display: flex; align-items: center; gap: 10px; }
.ta-app .ta-score-input {
    width: 84px; height: 84px; text-align: center; border: 2px solid var(--ta-line); border-radius: 16px;
    font-family: var(--ta-font-display); font-size: 44px; font-weight: 800; color: var(--ta-ink); background: var(--ta-soft);
    -moz-appearance: textfield;
}
.ta-app .ta-score-input::-webkit-outer-spin-button, .ta-app .ta-score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ta-app .ta-score-input:focus { outline: 2px solid var(--ta-accent); outline-offset: 0; border-color: transparent; background: var(--ta-surface); }
.ta-app .ta-score-input.is-small { width: 44px; height: 36px; font-size: 18px; border-radius: 8px; border-width: 1px; }
.ta-app .ta-score-colon { font-family: var(--ta-font-display); font-size: 40px; font-weight: 800; color: var(--ta-muted); }
.ta-app .ta-score-ht { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ta-muted); font-weight: 600; }
.ta-app .ta-ana-meta { padding-top: 14px; border-top: 1px solid var(--ta-line); }
.ta-app .ta-ana-list { gap: 8px; }
.ta-app .ta-ana-li { display: flex; align-items: center; gap: 10px; }
.ta-app .ta-ana-li > span { flex: 0 0 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.ta-app .ta-ana-list.is-good .ta-ana-li > span { background: var(--ta-ok-bg); color: var(--ta-ok-fg); }
.ta-app .ta-ana-list.is-bad .ta-ana-li > span { background: var(--ta-bad-bg); color: var(--ta-bad-fg); }
.ta-app .ta-ana-optional { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ta-muted); background: var(--ta-soft); border: 1px solid var(--ta-line); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }

.ta-app .ta-ana-kern { display: flex; flex-direction: column; gap: 10px; }
.ta-app .ta-ana-kernrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ta-app .ta-ana-kerntext { font-weight: 600; font-size: 15px; }
.ta-app .ta-radio-seg.is-tri span { padding: 0 12px; font-size: 13px; }
.ta-app .ta-radio-seg.is-tri .is-ja input:checked + span { background: var(--ta-ok-fg); color: #fff; }
.ta-app .ta-radio-seg.is-tri .is-teilweise input:checked + span { background: #b45309; color: #fff; }
.ta-app .ta-radio-seg.is-tri .is-nein input:checked + span { background: var(--ta-bad-fg); color: #fff; }

.ta-app .ta-rep-goals { display: grid; grid-template-columns: 72px 90px minmax(0, 1fr) minmax(0, 1fr) 150px 44px; gap: 8px; align-items: center; }
.ta-app .ta-rep-goals .ta-goal-wide { grid-column: span 2; }
.ta-app .ta-goal-team { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; text-align: center; background: var(--ta-ok-bg); color: var(--ta-ok-fg); }
.ta-app .ta-rep-goals.is-opp .ta-goal-team { background: var(--ta-bad-bg); color: var(--ta-bad-fg); }

.ta-app .ta-stats { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin: 0 auto; width: 100%; }
.ta-app .ta-stats-head, .ta-app .ta-stats-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px; gap: 10px; align-items: center; }
.ta-app .ta-stats-head { font-size: 12px; font-weight: 700; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .05em; }
.ta-app .ta-stats-head span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-stats-row .ta-input { text-align: center; font-weight: 700; font-size: 16px; min-height: 40px; }
.ta-app .ta-stats-label { text-align: center; font-size: 14px; color: var(--ta-muted); font-weight: 600; }
.ta-app .ta-stats-auto { text-align: center; font-weight: 700; font-size: 16px; color: var(--ta-muted); }

.ta-app .ta-ana-phasehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ta-app .ta-rate { display: inline-flex; gap: 4px; }
.ta-app .ta-rate label { position: relative; cursor: pointer; }
.ta-app .ta-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ta-app .ta-rate span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ta-line); font-size: 12px; font-weight: 700; color: var(--ta-muted); background: var(--ta-surface); }
.ta-app .ta-rate .is-plus input:checked + span { background: var(--ta-ok-bg); border-color: var(--ta-ok-fg); color: var(--ta-ok-fg); }
.ta-app .ta-rate .is-neutral input:checked + span { background: var(--ta-warn-bg); border-color: #b45309; color: var(--ta-warn-fg); }
.ta-app .ta-rate .is-minus input:checked + span { background: var(--ta-bad-bg); border-color: var(--ta-bad-fg); color: var(--ta-bad-fg); }
.ta-app .ta-rate input:focus-visible + span { outline: 2px solid var(--ta-accent); outline-offset: 2px; }

.ta-app .ta-rating-table { display: flex; flex-direction: column; }
.ta-app .ta-rating-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 80px 96px minmax(0, 2fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ta-line); }
.ta-app .ta-rating-row.is-head { font-size: 12px; font-weight: 700; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .05em; padding-top: 0; }
.ta-app .ta-rating-row:last-child { border-bottom: 0; }
.ta-app .ta-rating-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ta-app .ta-rating-player strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-rating-player small { font-size: 11px; color: var(--ta-muted); }
.ta-app .ta-rating-row .ta-input, .ta-app .ta-rating-row .ta-select { min-height: 40px; font-size: 14px; }
.ta-app .ta-rating-row [data-p="min"] { text-align: center; }

@media (max-width: 760px) {
    .ta-app .ta-score-input { width: 64px; height: 64px; font-size: 32px; }
    .ta-app .ta-team-badge { width: 44px; height: 44px; font-size: 15px; }
    .ta-app .ta-ana-kernrow { grid-template-columns: 36px minmax(0, 1fr); }
    .ta-app .ta-ana-kernrow .ta-radio-seg { grid-column: 1 / -1; justify-self: start; }
    .ta-app .ta-rep-goals { grid-template-columns: 64px minmax(0, 1fr) 44px; padding: 10px; border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm); background: var(--ta-soft); }
    .ta-app .ta-rep-goals > .ta-goal-team { grid-column: 2; grid-row: 1; justify-self: start; }
    .ta-app .ta-rep-goals > [data-remove] { grid-column: 3; grid-row: 1; }
    .ta-app .ta-rep-goals > select, .ta-app .ta-rep-goals > .ta-goal-wide { grid-column: 1 / -1; }
    .ta-app .ta-rating-row { grid-template-columns: minmax(0, 1fr) 64px 80px; }
    .ta-app .ta-rating-row > :nth-child(4) { grid-column: 1 / -1; }
    .ta-app .ta-rating-row.is-head > :nth-child(4) { display: none; }
}

/* ============================ STANDARDS PRO ============================ */
.ta-app .ta-container.ta-std { max-width: 1440px; }
.ta-app .ta-std-variants { gap: 12px; }
.ta-app .ta-vgroups { display: flex; flex-direction: column; gap: 10px; }
.ta-app .ta-vgroup { display: flex; align-items: flex-start; gap: 12px; }
.ta-app .ta-vgroup-label { flex: 0 0 76px; padding-top: 12px; font-size: 12px; font-weight: 700; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .06em; }
.ta-app .ta-vchips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ta-app .ta-vchip {
    display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 14px;
    border: 1px solid var(--ta-line); border-radius: 12px; background: var(--ta-soft); max-width: 260px;
}
.ta-app .ta-vchip strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-vchip span { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-vchip:hover { border-color: var(--ta-accent); }
.ta-app .ta-vchip.is-active { background: var(--ta-accent); border-color: var(--ta-accent); color: var(--ta-on-accent); }
.ta-app .ta-vchip.is-active span { color: var(--ta-on-accent); opacity: .85; }
.ta-app .ta-std-empty p { margin: 0 0 12px; font-size: 14px; color: var(--ta-muted); }
.ta-app .ta-std-empty p strong { color: var(--ta-ink); }
.ta-app .ta-std-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ta-app .ta-std-quickbtn {
    min-height: 48px; padding: 0 14px; border: 1px solid var(--ta-line); border-radius: 10px;
    background: var(--ta-surface); font-size: 14px; font-weight: 600; text-align: left;
}
.ta-app .ta-std-quickbtn:hover { border-color: var(--ta-accent); background: var(--ta-accent-soft); color: var(--ta-accent); }

.ta-app .ta-std-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.ta-app .ta-std-tools, .ta-app .ta-std-brief { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ta-app .ta-std-card { padding: 16px; gap: 10px; box-shadow: none; }
.ta-app .ta-std-h { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ta-muted); display: flex; align-items: center; gap: 8px; border: 0; padding: 0; }
.ta-app .ta-std-row { display: flex; gap: 8px; }
.ta-app .ta-std-row .ta-select { flex: 1 1 auto; min-width: 0; }
.ta-app .ta-std-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ta-muted); }

/* Spielerliste (Engine-Klassen im neuen Look) */
.ta-app .ta-std .player-list-container { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ta-app .ta-std .player-item {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; margin: 0;
    border: 1px solid var(--ta-line); border-left: 1px solid var(--ta-line); border-radius: 8px;
    background: var(--ta-surface); font-size: 13px; cursor: pointer;
}
.ta-app .ta-std .player-item:hover { border-color: var(--ta-accent); background: var(--ta-surface); }
.ta-app .ta-std .player-item .player-number {
    min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ta-accent-soft); color: var(--ta-accent); font-family: var(--ta-font-display); font-weight: 700; font-size: 13px;
}
.ta-app .ta-std .player-item .player-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-std .player-item .player-status { display: none; }
.ta-app .ta-std .player-item.disabled { opacity: .5; background: var(--ta-soft); }
.ta-app .ta-std .player-item.disabled::after { content: "auf dem Feld"; font-size: 11px; color: var(--ta-muted); }
html[lang^="en"] .ta-app .ta-std .player-item.disabled::after { content: "on the pitch"; }

/* Gegner als Nummern-Kacheln */
.ta-app .ta-opp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-height: none; }
.ta-app .ta-std .opponent-item {
    display: flex; align-items: center; justify-content: center; height: 40px; margin: 0; padding: 0;
    border-radius: 8px; border: 1px solid #f5c2bd; background: #fdecea; color: #b42318;
    font-family: var(--ta-font-display); font-weight: 700; font-size: 14px; cursor: pointer; transform: none;
}
.ta-app .ta-std .opponent-item:hover { background: #fbd5d0 !important; transform: none; }

/* Werkzeuge */
.ta-app .ta-std .tools-tabs { gap: 2px; margin: 0 0 4px; border-bottom: 1px solid var(--ta-line); }
.ta-app .ta-std .tools-tab {
    flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 6px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    background: transparent; color: var(--ta-muted); font-size: 12.5px; font-weight: 600; border-radius: 0;
}
.ta-app .ta-std .tools-tab:hover { color: var(--ta-ink); background: transparent; }
.ta-app .ta-std .tools-tab.active { color: var(--ta-accent); border-bottom-color: var(--ta-accent); background: transparent; }
.ta-app .ta-std .tools-panel { padding-top: 8px; }
.ta-app .ta-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ta-app .ta-preset {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 56px; padding: 8px 10px;
    border: 1px solid var(--ta-line); border-radius: 10px; background: var(--ta-soft); font-size: 12.5px; font-weight: 600; text-align: left;
}
.ta-app .ta-preset:hover { border-color: var(--ta-accent); background: var(--ta-soft); }
.ta-app .ta-preset.is-active { border-color: var(--ta-accent); background: var(--ta-accent-soft); color: var(--ta-accent); }
.ta-app .ta-preset-line { display: block; width: 100%; height: 0; border-top: 3px solid #475569; position: relative; }
.ta-app .ta-preset-line::after { content: ""; position: absolute; right: -2px; top: -7px; border-left: 9px solid #475569; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.ta-app .ta-preset-line.is-lauf { border-top-style: dashed; border-top-color: #ca8a04; }
.ta-app .ta-preset-line.is-lauf::after { border-left-color: #ca8a04; }
.ta-app .ta-preset-line.is-schuss { border-top-width: 5px; border-top-color: #dc2626; }
.ta-app .ta-preset-line.is-schuss::after { border-left-color: #dc2626; top: -8px; }
.ta-app .ta-preset-line.is-block { border-top-width: 5px; border-top-color: #2563eb; }
.ta-app .ta-preset-line.is-block::after { display: none; }
.ta-app .ta-std-more { margin-top: 8px; font-size: 13px; }
.ta-app .ta-std-more summary { cursor: pointer; font-weight: 600; color: var(--ta-muted); min-height: 32px; display: flex; align-items: center; }
.ta-app .ta-std-arrowtypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0 8px; }
.ta-app .ta-std .arrow-type-btn, .ta-app .ta-std .shape-type-btn {
    min-height: 36px; padding: 0 8px; border: 1px solid var(--ta-line); border-radius: 8px; background: var(--ta-surface); font-size: 12.5px; font-weight: 600; margin: 0;
}
.ta-app .ta-std .arrow-type-btn.active, .ta-app .ta-std .shape-type-btn.active { background: var(--ta-accent); border-color: var(--ta-accent); color: var(--ta-on-accent); box-shadow: none; }
.ta-app .ta-std .settings-group { margin-bottom: 8px; }
.ta-app .ta-std .settings-group label { font-size: 12px; font-weight: 600; color: var(--ta-ink); margin-bottom: 4px; }
.ta-app .ta-std .settings-group select {
    width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--ta-line); border-radius: 8px;
    background: var(--ta-surface); color: var(--ta-ink); font: inherit; font-size: 13px;
}

/* Feld */
.ta-app .ta-std-board { background: var(--ta-surface); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ta-app .ta-std-boardbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ta-app .ta-std-boardtitle { display: flex; flex-direction: column; min-width: 0; }
.ta-app .ta-std-boardtitle strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-std-boardtitle span { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-std-boardactions { display: flex; align-items: center; gap: 4px; }
.ta-app .ta-std-boardactions .ta-icon-btn { font-size: 20px; }
.ta-app .ta-std-boardactions .ta-icon-btn[disabled] { opacity: .35; cursor: default; }
.ta-app .ta-std .field-wrapper { max-width: 640px; width: 100%; margin: 0 auto; }
.ta-app .ta-std-boardhint { text-align: center; }

/* Steckbrief */
.ta-app .ta-std-field { display: flex; flex-direction: column; gap: 5px; }
.ta-app .ta-std-field label { font-size: 12.5px; font-weight: 600; }
.ta-app .ta-std-field .ta-input, .ta-app .ta-std-field .ta-select { min-height: 40px; font-size: 14px; }
.ta-app .ta-std-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ta-app .ta-std-subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ta-line); }
.ta-app .ta-std-subhead h4 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ta-muted); }
.ta-app .ta-rep-roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 6px; align-items: center; }
.ta-app .ta-rep-roles .ta-input, .ta-app .ta-rep-roles .ta-select { min-height: 38px; font-size: 13px; padding: 0 8px; }
.ta-app .ta-rep-roles .ta-icon-btn { width: 40px; height: 40px; }
.ta-app .ta-std-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ta-app .ta-std-steps li { display: flex; gap: 8px; align-items: flex-start; }
.ta-app .ta-std-stepnr {
    flex: 0 0 26px; height: 26px; margin-top: 9px; border-radius: 999px; background: var(--ta-accent); color: var(--ta-on-accent);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.ta-app .ta-std-steps .ta-textarea { min-height: 44px; padding: 10px 12px; font-size: 14px; }
.ta-app .ta-std-varactions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ta-line); }
.ta-app .ta-btn-dangerlink { color: var(--ta-bad-fg); margin-left: auto; }
.ta-app .ta-btn-dangerlink:hover { background: var(--ta-bad-bg); }

/* Dialoge */
.ta-dialog.ta-std-libdialog { width: min(560px, calc(100vw - 24px)); }
.ta-dialog .ta-std-liblist { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.ta-dialog .ta-std-libitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--ta-line); border-radius: 12px; }
.ta-dialog .ta-std-libitem strong { display: block; font-size: 14px; }
.ta-dialog .ta-std-libitem span { font-size: 12px; color: var(--ta-muted); }
.ta-dialog .ta-check { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 40px; cursor: pointer; }
.ta-dialog .ta-check input { width: 18px; height: 18px; accent-color: var(--ta-accent, #0B6E4F); }

@media (max-width: 1240px) {
    .ta-app .ta-std-layout { grid-template-columns: 260px minmax(0, 1fr); }
    .ta-app .ta-std-brief { grid-column: 1 / -1; }
    .ta-app .ta-std-brief .ta-std-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
    .ta-app .ta-std-brief .ta-std-h, .ta-app .ta-std-brief .ta-std-subhead, .ta-app .ta-std-brief .ta-rep,
    .ta-app .ta-std-brief .ta-std-steps, .ta-app .ta-std-brief .ta-std-varactions { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .ta-app .ta-std-layout { grid-template-columns: 1fr; }
    .ta-app .ta-std-board { order: -1; padding: 8px; }
    .ta-app .ta-std-brief .ta-std-card { display: flex; }
    .ta-app .ta-vgroup { flex-direction: column; gap: 6px; }
    .ta-app .ta-vgroup-label { flex: none; padding-top: 0; }
    .ta-app .ta-std .player-list-container { max-height: 220px; }
}

/* ============================ TEILEN-DIALOG ============================ */
.ta-dialog.ta-share-dialog { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.ta-share-dialog .ta-share-inner { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.ta-share-dialog .ta-share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ta-share-dialog .ta-share-close {
    width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent;
    font-size: 28px; line-height: 1; color: var(--ta-muted); cursor: pointer;
}
.ta-share-dialog .ta-share-close:hover { background: var(--ta-soft); color: var(--ta-ink); }
.ta-share-dialog .ta-share-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.ta-share-dialog .ta-share-preview {
    aspect-ratio: 4 / 5; border-radius: 12px; background: var(--ta-soft); border: 1px solid var(--ta-line);
    display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; padding: 8px;
    font-size: 13px; color: var(--ta-muted);
}
.ta-share-dialog .ta-share-preview img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 8px; }
.ta-share-dialog .ta-share-preview:has(img:not([hidden])) { padding: 0; border: 0; }
.ta-share-dialog .ta-share-options { display: flex; flex-direction: column; gap: 8px; }
.ta-share-dialog .ta-share-option {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
    min-height: 56px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ta-line);
    background: var(--ta-surface); color: var(--ta-ink); font: inherit; cursor: pointer; margin: 0;
}
.ta-share-dialog .ta-share-option:hover { border-color: var(--ta-accent, #0B6E4F); background: var(--ta-soft); }
.ta-share-dialog .ta-share-option strong { font-size: 15px; font-weight: 700; }
.ta-share-dialog .ta-share-option span { font-size: 12.5px; color: var(--ta-muted); }
.ta-share-dialog .ta-share-option.is-primary { background: var(--ta-accent, #0B6E4F); border-color: var(--ta-accent, #0B6E4F); color: #fff; }
.ta-share-dialog .ta-share-option.is-primary span { color: rgba(255, 255, 255, .85); }
.ta-share-dialog .ta-share-option.is-primary:hover { background: var(--ta-accent, #0B6E4F); filter: brightness(.93); }
.ta-share-dialog .ta-share-option[disabled] { opacity: .6; cursor: wait; }
.ta-dialog.ta-share-dialog.is-compact { width: min(440px, calc(100vw - 24px)); }
@media (max-width: 560px) {
    .ta-share-dialog .ta-share-body { grid-template-columns: 1fr; }
    .ta-share-dialog .ta-share-preview { max-width: 220px; margin: 0 auto; width: 100%; }
}

/* Toast */
.ta-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
    background: #0F172A; color: #fff; padding: 12px 18px; border-radius: 10px;
    font: 600 14px/1.4 Inter, "Segoe UI", system-ui, sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s; z-index: 10000;
}
.ta-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.ta-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ============================ HANDY / TABLET ============================ */
@media (max-width: 900px) {
    .ta-app { flex-direction: column; }
    .ta-app .ta-sidebar {
        position: static; height: auto; flex: none;
        border-right: 0; border-bottom: 1px solid var(--ta-line);
        padding: 12px 16px; gap: 8px;
    }
    .ta-app .ta-brand, .ta-app .ta-brand.has-logo { padding: 0; }
    .ta-app .ta-brand-img { width: auto; height: 40px; max-width: 70vw; }
    .ta-app .ta-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
    .ta-app .ta-nav::-webkit-scrollbar { display: none; }
    .ta-app .ta-nav-item { flex: 0 0 auto; white-space: nowrap; }
    .ta-app .ta-nav-badge { margin-left: 4px; }
    .ta-app .ta-sidebar-spacer { display: none; }
    /* Seitenleiste oben: kein eigener Bildlauf, damit das Menü darüber aufklappen kann */
    .ta-app .ta-sidebar { position: relative; overflow: visible; z-index: 40; }
    .ta-app .ta-brand-img { max-width: calc(100vw - 110px); }
    .ta-app .ta-license-banner { margin: 0 0 14px; font-size: 13px; }
    .ta-app .ta-legal-mobile { display: block; order: 99; text-align: center; padding: 8px 16px 24px; }

    /* Menü-Knopf ☰ oben rechts */
    .ta-app .ta-menu-btn { display: flex; position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; align-items: center; justify-content: center;
        border: 1px solid var(--ta-line); border-radius: 12px; background: var(--ta-surface); color: var(--ta-ink); cursor: pointer; }
    .ta-app .ta-menu-btn:hover { background: var(--ta-soft); }
    .ta-app .ta-menu-btn[aria-expanded="true"] { background: var(--ta-ink); border-color: var(--ta-ink); color: #fff; }
    .ta-app .ta-menu-btn path { transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
    .ta-app .ta-menu-btn[aria-expanded="true"] .ta-menu-l1 { transform: translateY(5px) rotate(45deg); }
    .ta-app .ta-menu-btn[aria-expanded="true"] .ta-menu-l2 { opacity: 0; }
    .ta-app .ta-menu-btn[aria-expanded="true"] .ta-menu-l3 { transform: translateY(-5px) rotate(-45deg); }
    .ta-app .ta-menu-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #dc2626; box-shadow: 0 0 0 2px var(--ta-surface); }

    /* Aufklappbares Menü */
    .ta-app .ta-sidebar-foot { display: none; position: absolute; top: 64px; right: 12px; z-index: 60; width: min(340px, calc(100vw - 24px));
        flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--ta-line); border-radius: 16px; background: var(--ta-surface);
        box-shadow: 0 18px 44px rgba(15, 23, 42, .18); }
    .ta-app .ta-sidebar.is-menu-open .ta-sidebar-foot { display: flex; }
    .ta-app .ta-sidebar-foot > * { order: 2; }
    .ta-app .ta-sidebar-foot .ta-user { order: 0; padding: 6px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ta-line); }
    .ta-app .ta-sidebar-foot .ta-club-btn { order: 1; }
    .ta-app .ta-sidebar-foot .ta-color-pick { order: 2; }
    .ta-app .ta-sidebar-foot .ta-license-btn { order: 3; }
    .ta-app .ta-sidebar-foot .ta-sidebar-lang { order: 4; justify-content: center; padding: 6px 0 0; }
    .ta-app .ta-sidebar-foot .ta-legal { order: 5; display: block; margin-top: 6px; padding: 8px 8px 2px; border-top: 1px solid var(--ta-line); text-align: center; }
    .ta-app .ta-sidebar-foot .ta-club-btn, .ta-app .ta-sidebar-foot .ta-license-btn, .ta-app .ta-sidebar-foot .ta-color-pick {
        width: 100%; margin: 0; padding: 8px; min-height: 52px; border-radius: 12px; }
    .ta-app .ta-sidebar-foot .ta-color-pick:hover { background: var(--ta-soft); }
    .ta-app .ta-sidebar-foot .ta-color-pick .ta-color-text { color: var(--ta-ink); font-size: 14px; font-weight: 600; }
    .ta-app .ta-club-btn-logo, .ta-app .ta-license-icon { width: 36px; height: 36px; flex-basis: 36px; }
    .ta-app .ta-sidebar-foot .ta-color-text, .ta-app .ta-sidebar-foot .ta-user-text { display: flex; }
    .ta-app .ta-sidebar-foot .ta-user-text { flex-direction: column; }
    .ta-app .ta-sidebar-foot .ta-user-name { font-size: 15px; }
    /* Abmelden als eigener Knopf unten im Menü */
    .ta-app .ta-sidebar-foot .ta-user { position: relative; }
    .ta-app .ta-sidebar-foot .ta-logout { width: auto; height: 40px; padding: 0 12px; gap: 8px; border: 1px solid var(--ta-line); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ta-bad-fg); text-decoration: none; }
    .ta-app .ta-sidebar-foot .ta-logout-text { display: inline; }
    .ta-app .ta-title { font-size: 26px; }
    .ta-app .ta-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .ta-app .ta-hero { padding: 18px; }
    .ta-app .ta-card { padding: 16px; }
    .ta-app .ta-actions { width: 100%; }
    .ta-app .ta-actions .ta-btn { flex: 1 1 auto; }
}

/* Druck */
@media print {
    .ta-app .ta-sidebar, .ta-app .ta-actions { display: none; }
    .ta-app { background: #fff; }
}

/* ============================ TRAINING: ÜBUNGSBIBLIOTHEK ============================ */
.ta-app .ta-steptab.is-soon { color: #9aa3ad; cursor: default; }
.ta-app .ta-steptab.is-soon:hover { color: #9aa3ad; }
.ta-app .ta-steptab small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--ta-soft); border-radius: 999px; padding: 2px 6px; margin-left: 4px; }
.ta-app .ta-tt-dot.is-neutral { background: #facc15; }

.ta-app .ta-tr .ta-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ta-app .ta-tr .ta-seg button { flex: 0 0 auto; }
.ta-app .ta-tr-filters { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.ta-app .ta-tr-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ta-app .ta-tr-chips::-webkit-scrollbar { display: none; }
.ta-app .ta-tr-chip {
    flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ta-line);
    background: var(--ta-surface); font-size: 13px; font-weight: 600; color: var(--ta-muted); cursor: pointer;
}
.ta-app .ta-tr-chip:hover { border-color: var(--ta-accent); color: var(--ta-ink); }
.ta-app .ta-tr-chip[aria-pressed="true"] { background: var(--ta-accent); border-color: var(--ta-accent); color: var(--ta-on-accent); }
.ta-app .ta-tr-filterrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ta-app .ta-tr-filterrow label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ta-muted); }
.ta-app .ta-tr-filterrow .ta-input, .ta-app .ta-tr-filterrow .ta-select { width: auto; min-width: 90px; min-height: 40px; }
.ta-app .ta-tr-filterrow #tr-players { width: 90px; }
.ta-app .ta-tr-filterrow #tr-count { margin-left: auto; }

.ta-app .ta-tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ta-app .ta-tr-card {
    background: var(--ta-surface); border: 1px solid var(--ta-line); border-radius: var(--ta-radius);
    overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s;
}
.ta-app .ta-tr-card:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.ta-app .ta-tr-thumb { position: relative; display: block; width: 100%; height: 0; padding: 0 0 66.6% 0; border: 0; background: #2a8447; cursor: pointer; overflow: hidden; }
.ta-app .ta-tr-thumb .ta-tr-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ta-app .ta-tr-thumb .ta-tr-nograph { position: absolute; inset: 0; }
.ta-app .ta-tr-thumb .ta-tr-nograph { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; }
.ta-app .ta-tr-cardbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.ta-app .ta-tr-cardtop { display: flex; align-items: center; gap: 6px; }
.ta-app .ta-tr-cardtop .ta-sys-star { margin-left: auto; width: 36px; height: 36px; margin-right: -6px; }
.ta-app .ta-tr-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ta-app .ta-tr-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ta-muted); }
.ta-app .ta-tr-int { font-weight: 600; }
.ta-app .ta-tr-int::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; background: currentColor; }
.ta-app .ta-tr-int.is-leicht { color: #15803d; }
.ta-app .ta-tr-int.is-mittel { color: #b45309; }
.ta-app .ta-tr-int.is-intensiv { color: #b42318; }
.ta-app .ta-tr-cat { background: var(--ta-soft); color: var(--ta-ink); }
.ta-app .ta-tr-cat.is-aufwaermen { background: #e0f2fe; color: #075985; }
.ta-app .ta-tr-cat.is-technik { background: #ede9fe; color: #5b21b6; }
.ta-app .ta-tr-cat.is-spielform { background: #dcfce7; color: #166534; }
.ta-app .ta-tr-cat.is-abschluss { background: #fee2e2; color: #991b1b; }
.ta-app .ta-tr-cat.is-pressing { background: #ffedd5; color: #9a3412; }
.ta-app .ta-tr-cat.is-umschalten { background: #fef9c3; color: #854d0e; }
.ta-app .ta-tr-cat.is-standards { background: #e2e8f0; color: #1e293b; }
.ta-app .ta-tr-cat.is-athletik { background: #fce7f3; color: #9d174d; }
.ta-app .ta-tr-cat.is-abschlussspiel { background: #ccfbf1; color: #115e59; }

/* Detail-Dialog */
.ta-dialog.ta-tr-detail { width: min(1080px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.ta-tr-detail .ta-tr-detail-inner { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.ta-tr-detail .ta-share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ta-tr-detail .ta-share-close { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 28px; line-height: 1; color: var(--ta-muted); cursor: pointer; flex: none; }
.ta-tr-detail .ta-share-close:hover { background: var(--ta-soft); }
.ta-tr-detail .ta-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ta-accent); }
.ta-tr-detail-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ta-tr-detail-graphic .ta-tr-svg { width: 100%; height: auto; display: block; border-radius: 12px; background: #2a8447; aspect-ratio: 3 / 2; }
.ta-tr-frames { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ta-tr-frames .ta-tt-scene { font-size: 14px; height: 38px; }
.ta-tr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ta-tr-facts > div { background: var(--ta-soft); border-radius: 10px; padding: 10px 12px; }
.ta-tr-facts > div.is-wide { grid-column: 1 / -1; }
.ta-tr-facts span { display: block; font-size: 12px; color: var(--ta-muted); font-weight: 600; }
.ta-tr-facts strong { font-size: 14px; }
.ta-tr-detail-text { display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 1.55; }
.ta-tr-detail-text h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ta-muted); }
.ta-tr-detail-text p { color: var(--ta-ink); }
.ta-tr-detail-text ol, .ta-tr-detail-text ul { margin: 0; padding-left: 20px; }
.ta-tr-detail-text li { margin: 3px 0; }
.ta-tr-detail-text ul li::marker { color: var(--ta-accent); }
.ta-tr-var { display: grid; gap: 10px; }
.ta-tr-var > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ta-tr-var .ta-chip { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ta-tr-var .ta-chip-ok { background: #dcfce7; color: #166534; }
.ta-tr-var .ta-chip-bad { background: #fde7e5; color: #b42318; }
.ta-tr-nograph { color: var(--ta-muted); font-size: 14px; }
.ta-tr-detail-actions { border-top: 1px solid var(--ta-line); padding-top: 14px; }

/* Bearbeiten-Dialog */
.ta-dialog.ta-tr-edit { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.ta-tr-editgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ta-tr-editgrid .ta-span-all { grid-column: 1 / -1; }
.ta-tr-range { display: flex; align-items: center; gap: 8px; }
.ta-tr-range .ta-input { min-width: 0; }
.ta-tr-area { resize: vertical; min-height: 80px; font: inherit; }
.ta-dialog .ta-field-label small { font-weight: 500; color: var(--ta-muted); }

/* Material zum Anklicken */
.ta-app .ta-tr-matpick { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ta-line); border-radius: 12px; background: var(--ta-soft); }
.ta-app .ta-tr-matgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ta-app .ta-tr-matgroup > span { flex: 0 0 100%; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ta-muted); }
.ta-app .ta-tr-mat { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ta-line); border-radius: 999px; background: var(--ta-surface); color: var(--ta-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.ta-app .ta-tr-mat::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 2px solid #b6c0cc; flex: none; }
.ta-app .ta-tr-mat:hover { border-color: var(--ta-accent); }
.ta-app .ta-tr-mat[aria-pressed="true"] { background: var(--ta-accent); border-color: var(--ta-accent); color: #fff; }
.ta-app .ta-tr-mat[aria-pressed="true"]::before { border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E4F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.ta-app .ta-tr-mat:focus-visible { outline: 3px solid color-mix(in srgb, var(--ta-accent) 40%, transparent); outline-offset: 2px; }
.ta-app .ta-tr-matcount { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-tr-matextra { margin-top: 8px; }

/* Eigenes Bild */
.ta-tr-imgpick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--ta-line); border-radius: 12px; }
.ta-tr-imgprev { width: 132px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--ta-soft); flex: none; }
.ta-tr-imgprev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ta-tr-imgbtns { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 200px; }
.ta-tr-imgbtns .ta-btn-dangerlink { margin-left: 0; }
.ta-tr-imgbtn { cursor: pointer; }
.ta-tr-imghint { flex: 0 0 100%; margin: 0; font-size: 12px; color: var(--ta-muted); }
.ta-tr-storage { flex: 0 0 100%; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ta-muted); }
.ta-tr-storagebar { flex: 0 0 120px; height: 8px; border-radius: 999px; background: var(--ta-line); overflow: hidden; }
.ta-tr-storagebar i { display: block; height: 100%; width: 0; background: var(--ta-accent); border-radius: 999px; }
.ta-tr-storage.is-warn .ta-tr-storagebar i { background: #d97706; }
.ta-tr-storage.is-full .ta-tr-storagebar i { background: #dc2626; }
.ta-tr-storage.is-full span { color: #b42318; font-weight: 600; }

/* Bild in Karte und Detail */
.ta-app .ta-tr-thumb .ta-tr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.ta-tr-viewswitch { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 8px; border-radius: 10px; background: var(--ta-soft); }
.ta-app .ta-tr-viewswitch button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--ta-muted); cursor: pointer; }
.ta-app .ta-tr-viewswitch button[aria-pressed="true"] { background: var(--ta-surface); color: var(--ta-ink); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.ta-tr-detail-img { display: block; border-radius: 12px; overflow: hidden; background: var(--ta-soft); }
.ta-tr-detail-img img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; display: block; margin: 0 auto; }

@media (max-width: 860px) {
    .ta-tr-detail-body { grid-template-columns: 1fr; }
    .ta-tr-detail .ta-tr-detail-inner { padding: 16px; }
}
@media (max-width: 560px) {
    .ta-app .ta-tr-grid { grid-template-columns: 1fr; }
    .ta-tr-editgrid { grid-template-columns: 1fr; }
    .ta-app .ta-tr-filterrow #tr-count { margin-left: 0; width: 100%; }
    .ta-tr-detail-actions .ta-btn { flex: 1 1 auto; }
}

/* ============================ TRAINING: EINHEIT PLANEN ============================ */
.ta-app .ta-se-back { color: inherit; text-decoration: none; }
.ta-app .ta-se-back:hover { text-decoration: underline; }
.ta-app .ta-se-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.ta-app .ta-se-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ta-app .ta-se-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.ta-app .ta-se-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.ta-app .ta-se-grid .ta-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ta-app .ta-se-grid .ta-field label, .ta-app .ta-se-material .ta-field label { font-size: 13px; font-weight: 600; }
.ta-app .ta-se-span2 { grid-column: span 2; }
.ta-app .ta-se-span4 { grid-column: 1 / -1; }

/* Zeitleiste */
.ta-app .ta-se-timeline { margin-top: 12px; }
.ta-app .ta-se-tlphases { display: flex; gap: 2px; margin-bottom: 4px; }
.ta-app .ta-se-tlphases div { border-top: 3px solid var(--ta-accent); padding-top: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ta-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.ta-app .ta-se-tlphases div:nth-child(2) { border-top-color: var(--ta-ink); }
.ta-app .ta-se-tlphases div:nth-child(3) { border-top-color: #94a3b8; }
.ta-app .ta-se-tlbar { display: flex; gap: 2px; height: 40px; border-radius: 10px; overflow: hidden; }
.ta-app .ta-se-seg { min-width: 3px; display: flex; align-items: center; padding: 0 8px; color: #fff; font-size: 12px; font-weight: 600; overflow: hidden; }
.ta-app .ta-se-seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-app .is-pause.ta-se-seg { background: #cbd5e1; color: #334155; }
.ta-app .is-leicht.ta-se-seg { background: #16a34a; }
.ta-app .is-mittel.ta-se-seg { background: #f59e0b; color: #422006; }
.ta-app .is-intensiv.ta-se-seg { background: #dc2626; }
.ta-app .ta-se-tlclock { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--ta-muted); margin-top: 4px; }
.ta-app .ta-se-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-se-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ta-app .ta-se-legend .is-pause { background: #cbd5e1; } .ta-app .ta-se-legend .is-leicht { background: #16a34a; }
.ta-app .ta-se-legend .is-mittel { background: #f59e0b; } .ta-app .ta-se-legend .is-intensiv { background: #dc2626; }

/* Phasen + Übungen */
.ta-app .ta-se-phase { border-left: 4px solid var(--ta-accent); }
.ta-app .ta-se-phase.is-main { border-left-color: var(--ta-ink); }
.ta-app .ta-se-phase.is-end { border-left-color: #94a3b8; }
.ta-app .ta-se-phase.is-drop-end .ta-se-items { box-shadow: inset 0 -3px 0 var(--ta-accent); }
.ta-app .ta-se-phasemin { font-size: 13px; font-weight: 600; color: var(--ta-muted); margin-left: 6px; }
.ta-app .ta-se-phaseactions { display: flex; gap: 8px; }
.ta-app .ta-se-items { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 8px; }
.ta-app .ta-se-emptyphase { margin: 10px 0 0; padding: 16px; border: 1.5px dashed var(--ta-line); border-radius: 10px; color: var(--ta-muted); font-size: 14px; text-align: center; }
.ta-app .ta-se-item {
    /* drei Reihen: Titel + Pfeile / Dauer, Intensität, Gruppe / Notiz – so bleibt der Titel immer lesbar */
    display: grid; grid-template-columns: 52px 22px 72px minmax(0, 1fr) auto; grid-template-areas: "time handle thumb info actions" "time handle thumb fields fields" "time handle thumb note note";
    gap: 6px 10px; align-items: center; padding: 10px; border: 1px solid var(--ta-line); border-radius: 12px; background: var(--ta-surface);
}
.ta-app .ta-se-item.is-parallel { margin-left: 28px; border-style: dashed; background: var(--ta-soft); }
.ta-app .ta-se-item.is-block { background: var(--ta-soft); }
.ta-app .ta-se-item.is-dragging { opacity: .4; }
.ta-app .ta-se-item.is-drop-before { box-shadow: 0 -3px 0 var(--ta-accent); }
.ta-app .ta-se-time { grid-area: time; font-family: var(--ta-font-display); font-weight: 700; font-size: 15px; color: var(--ta-ink); text-align: center; }
.ta-app .ta-se-handle { grid-area: handle; width: 22px; height: 44px; border: 0; background: transparent; color: #9aa3ad; cursor: grab; padding: 0; display: flex; align-items: center; justify-content: center; }
.ta-app .ta-se-handle:active { cursor: grabbing; }
.ta-app .ta-se-thumb { grid-area: thumb; width: 72px; height: 48px; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: #2a8447; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 18px; }
.ta-app .ta-se-thumb.is-empty { background: var(--ta-line); cursor: default; }
.ta-app .ta-se-thumb svg { width: 100%; height: 100%; display: block; }
.ta-app .ta-se-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ta-app .ta-se-title { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ta-ink); cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ta-app .ta-se-blocktitle { width: 100%; }
.ta-app .ta-se-int { min-width: 96px; }
.ta-app .ta-se-title:hover { color: var(--ta-accent); text-decoration: underline; }
.ta-app .ta-se-blocktitle { font-weight: 700; min-height: 38px; }
.ta-app .ta-se-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.ta-app .ta-se-meta .ta-chip { font-size: 11px; padding: 2px 8px; }
.ta-app .ta-se-fields { grid-area: fields; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
.ta-app .ta-se-fields .ta-input { min-height: 38px; padding: 0 8px; font-size: 13px; width: auto; }
.ta-app .ta-se-dur { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-se-dur .ta-input { width: 60px; text-align: center; font-weight: 700; }
.ta-app .ta-se-int.is-pause { box-shadow: inset 4px 0 0 #cbd5e1; }
.ta-app .ta-se-int.is-leicht { box-shadow: inset 4px 0 0 #16a34a; }
.ta-app .ta-se-int.is-mittel { box-shadow: inset 4px 0 0 #f59e0b; }
.ta-app .ta-se-int.is-intensiv { box-shadow: inset 4px 0 0 #dc2626; }
.ta-app .ta-se-par { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ta-muted); font-weight: 600; cursor: pointer; }
.ta-app .ta-se-note { grid-area: note; min-height: 36px; font-size: 13px; }
.ta-app .ta-se-itemactions { grid-area: actions; display: flex; gap: 2px; }
.ta-app .ta-se-itemactions .ta-icon-btn { width: 34px; height: 34px; font-size: 12px; }

/* Seitenleiste */
.ta-app .ta-se-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ta-app .ta-se-kpis div { background: var(--ta-soft); border-radius: 10px; padding: 10px 12px; }
.ta-app .ta-se-kpis span { display: block; font-size: 12px; color: var(--ta-muted); font-weight: 600; }
.ta-app .ta-se-kpis strong { font-family: var(--ta-font-display); font-size: 20px; }
.ta-app .ta-se-intbar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin-top: 12px; gap: 2px; }
.ta-app .ta-se-intbar div { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; min-width: 3px; white-space: nowrap; overflow: hidden; }
.ta-app .ta-se-intbar .is-leicht { background: #16a34a; } .ta-app .ta-se-intbar .is-mittel { background: #f59e0b; color: #422006; }
.ta-app .ta-se-intbar .is-intensiv { background: #dc2626; } .ta-app .ta-se-intbar .is-pause { background: #cbd5e1; color: #334155; }
.ta-app .ta-se-help { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--ta-muted); }
.ta-app .ta-se-md { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ta-info-bg, #e0f2fe); color: var(--ta-info-fg, #075985); display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ta-app .ta-se-md strong { font-family: var(--ta-font-display); font-size: 18px; }
.ta-app .ta-se-md em { font-style: normal; font-weight: 600; }
.ta-app .ta-se-md.is-md1, .ta-app .ta-se-md.is-game { background: var(--ta-warn-bg); color: var(--ta-warn-fg); }
.ta-app .ta-se-md.is-mdplus { background: #dcfce7; color: #166534; }
.ta-app .ta-se-week h3 { margin: 16px 0 8px; font-size: 13px; display: flex; justify-content: space-between; }
.ta-app .ta-se-week h3 span { color: var(--ta-muted); }
.ta-app .ta-se-weekbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; height: 80px; }
.ta-app .ta-se-weekbars div { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; }
.ta-app .ta-se-weekbars i { display: block; background: #cbd5e1; border-radius: 4px 4px 2px 2px; min-height: 2px; }
.ta-app .ta-se-weekbars .is-current i { background: var(--ta-accent); }
.ta-app .ta-se-weekbars .is-game i { background: var(--ta-ink); opacity: .85; }
.ta-app .ta-se-weekbars span { font-size: 11px; text-align: center; color: var(--ta-muted); font-weight: 600; }
.ta-app .ta-se-focus h3 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ta-muted); }
.ta-app .ta-se-focus ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ta-app .ta-se-focusbtn { width: 100%; text-align: left; border: 1px solid var(--ta-line); background: var(--ta-surface); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.ta-app .ta-se-focusbtn:hover { border-color: var(--ta-accent); background: var(--ta-soft); }
.ta-app .ta-se-matlist { margin: 10px 0 12px; padding-left: 18px; columns: 2; font-size: 14px; }
.ta-app .ta-se-matlist li { margin: 2px 0; break-inside: avoid; }
.ta-app .ta-se-matlist .is-empty { list-style: none; margin-left: -18px; color: var(--ta-muted); columns: 1; }

/* Übungsauswahl */
.ta-se-picker .ta-share-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ta-se-picker .ta-share-close { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 28px; line-height: 1; color: var(--ta-muted); cursor: pointer; }
.ta-se-picker .ta-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ta-accent); }
.ta-se-picker .ta-search { position: relative; }
.ta-se-picker .ta-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ta-muted); }
.ta-se-picker .ta-search .ta-input { padding-left: 40px; width: 100%; }
/* Großes Auswahlfenster: fast ganzer Bildschirm, nur die Kartenliste scrollt */
.ta-dialog.ta-se-picker { width: min(1280px, calc(100vw - 32px)); height: calc(100vh - 32px); max-height: calc(100vh - 32px); max-width: none; overflow: hidden; }
.ta-se-picker > .ta-tr-detail-inner { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; overflow: hidden; }
.ta-se-picker .ta-tr-chips { flex: 0 0 auto; flex-wrap: wrap; overflow: visible; }
.ta-se-picker .ta-search { flex: 0 0 auto; max-width: 420px; } /* sonst wirkt die Flex-Breite aus der Werkzeugleiste als Höhe */
.ta-se-pickgrid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 14px; overflow-y: auto; padding: 2px 4px 8px 2px; }
.ta-se-pick { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--ta-line); background: var(--ta-surface); border-radius: 14px; overflow: hidden; font: inherit; }
.ta-se-pick:hover { border-color: var(--ta-accent); box-shadow: 0 6px 18px rgba(15, 23, 42, .1); }
.ta-se-pickthumb { position: relative; display: block; width: 100%; height: 0; padding-bottom: 62%; background: #2a8447; cursor: zoom-in; }
.ta-se-pickthumb svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ta-se-pickthumb .ta-se-thumbimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.ta-app .ta-se-thumb .ta-se-thumbimg { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
.ta-se-pvimg { width: 100%; height: auto; max-height: 55vh; object-fit: contain; display: block; border-radius: 12px; background: var(--ta-soft); }
.ta-se-pickinfo { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 4px; flex: 1 1 auto; }
.ta-se-pickinfo strong { font-size: 15px; line-height: 1.3; }
.ta-se-pickinfo small { font-size: 13px; color: var(--ta-muted); }
.ta-se-pickinfo i { font-style: normal; }
.ta-se-picktags { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-se-picktag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ta-soft); color: var(--ta-ink); }
.ta-se-pickziel { font-size: 13px; line-height: 1.45; color: var(--ta-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ta-se-pickacts { display: flex; gap: 8px; padding: 10px 14px 14px; }
.ta-se-pickacts .ta-btn { flex: 1 1 0; justify-content: center; min-height: 40px; }
@media (max-width: 760px) {
    .ta-dialog.ta-se-picker { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
    .ta-se-picker > .ta-tr-detail-inner { padding: 14px 16px; }
    .ta-se-picker .ta-tr-chips { flex-wrap: nowrap; overflow-x: auto; }
    .ta-se-pickgrid { grid-template-columns: 1fr; }
}

/* ============================ TRAINING: PLANUNG ============================ */
.ta-app .ta-pl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ta-app .ta-pl-nav { display: flex; align-items: center; gap: 8px; }
.ta-app .ta-pl-nav.is-hidden { visibility: hidden; }
.ta-app .ta-pl-nav .ta-icon-btn { font-size: 24px; }
.ta-app .ta-pl-range { display: flex; flex-direction: column; min-width: 170px; text-align: center; }
.ta-app .ta-pl-range strong { font-family: var(--ta-font-display); font-size: 18px; }
.ta-app .ta-pl-range span { font-size: 13px; color: var(--ta-muted); }
.ta-app .ta-pl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#pl-weekview { display: flex; flex-direction: column; gap: 16px; }
.ta-app #pl-weekview[hidden] { display: none !important; }
.ta-app .ta-pl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ta-app .ta-pl-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.ta-app .ta-pl-kpi span { font-size: 12px; font-weight: 700; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .05em; }
.ta-app .ta-pl-kpi strong { font-family: var(--ta-font-display); font-size: 26px; line-height: 1.15; }
.ta-app .ta-pl-kpi small { font-size: 12px; color: var(--ta-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-pl-kpi.is-warn { border-color: #f8d9a6; background: var(--ta-warn-bg); }
.ta-app .ta-pl-kpi.is-warn small { color: var(--ta-warn-fg); font-weight: 700; }
.ta-app .ta-pl-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 12px; }
.ta-app .ta-pl-barcol { display: flex; flex-direction: column; gap: 6px; }
.ta-app .ta-pl-barwrap { height: 130px; display: flex; align-items: flex-end; background: var(--ta-soft); border-radius: 8px; overflow: hidden; }
.ta-app .ta-pl-bar { width: 100%; min-height: 0; display: flex; justify-content: center; align-items: flex-start; border-radius: 6px 6px 0 0; transition: height .25s; }
.ta-app .ta-pl-bar span { font-size: 11px; font-weight: 700; padding-top: 4px; color: #fff; }
.ta-app .ta-pl-bar.is-low { background: #16a34a; }
.ta-app .ta-pl-bar.is-mid { background: #f59e0b; } .ta-app .ta-pl-bar.is-mid span { color: #422006; }
.ta-app .ta-pl-bar.is-high { background: #dc2626; }
.ta-app .ta-pl-bar.is-game { background: repeating-linear-gradient(135deg, var(--ta-ink) 0 8px, #1e293b 8px 16px); align-items: center; }
.ta-app .ta-pl-barlabel { display: flex; flex-direction: column; align-items: center; font-size: 12px; }
.ta-app .ta-pl-barlabel em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ta-muted); }
.ta-app .ta-pl-barcol.is-today .ta-pl-barlabel strong { color: var(--ta-accent); }
.ta-app .ta-pl-warn { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--ta-info-bg, #e0f2fe); color: var(--ta-info-fg, #075985); font-size: 14px; }
.ta-app .ta-pl-warn.is-warn { background: var(--ta-warn-bg); color: var(--ta-warn-fg); font-weight: 600; }
.ta-app .ta-pl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ta-app .ta-pl-day { background: var(--ta-surface); border: 1px solid var(--ta-line); border-radius: var(--ta-radius); display: flex; flex-direction: column; min-height: 240px; min-width: 0; }
.ta-app .ta-pl-day.is-today { border-color: var(--ta-accent); box-shadow: 0 0 0 1px var(--ta-accent); }
.ta-app .ta-pl-day.is-past { background: #fafbfc; }
.ta-app .ta-pl-dayhead { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 10px 10px 8px; border-bottom: 1px solid var(--ta-line); }
.ta-app .ta-pl-dayhead strong { font-family: var(--ta-font-display); font-size: 15px; }
.ta-app .ta-pl-dayhead span { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-pl-md { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--ta-soft); color: var(--ta-muted); white-space: nowrap; }
.ta-app .ta-pl-md.is-md1 { background: var(--ta-warn-bg); color: var(--ta-warn-fg); }
.ta-app .ta-pl-md.is-game { background: var(--ta-ink); color: #fff; }
.ta-app .ta-pl-md.is-mdplus { background: #dcfce7; color: #166534; }
.ta-app .ta-pl-daybody { padding: 8px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ta-app .ta-pl-session { display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; border-radius: 10px; border: 1px solid var(--ta-line); border-left: 4px solid var(--ta-accent); text-decoration: none; color: var(--ta-ink); background: var(--ta-surface); }
.ta-app .ta-pl-session:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .1); }
.ta-app .ta-pl-session.is-regeneration { border-left-color: #16a34a; }
.ta-app .ta-pl-session.is-abschluss { border-left-color: #f59e0b; }
.ta-app .ta-pl-session.is-athletik { border-left-color: #dc2626; }
.ta-app .ta-pl-session.is-torwart, .ta-app .ta-pl-session.is-test { border-left-color: #6366f1; }
.ta-app .ta-pl-session.is-cancelled { opacity: .55; }
.ta-app .ta-pl-session.is-cancelled strong { text-decoration: line-through; }
.ta-app .ta-pl-session strong { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.ta-app .ta-pl-stime { font-size: 12px; font-weight: 700; color: var(--ta-muted); }
.ta-app .ta-pl-stime i { font-style: normal; color: var(--ta-accent); }
.ta-app .ta-pl-sfocus { font-size: 12px; color: var(--ta-muted); overflow-wrap: anywhere; }
.ta-app .ta-pl-smeta { font-size: 12px; font-weight: 600; }
.ta-app .ta-pl-smeta em { font-style: normal; color: #b45309; }
.ta-app .ta-pl-session .ta-chip { align-self: flex-start; font-size: 11px; padding: 1px 7px; margin-top: 2px; }
.ta-app .ta-pl-game { display: flex; flex-direction: column; gap: 1px; padding: 8px 9px; border-radius: 10px; background: var(--ta-ink); color: #fff; text-decoration: none; }
.ta-app .ta-pl-game span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.ta-app .ta-pl-game strong { font-size: 14px; overflow-wrap: anywhere; }
.ta-app .ta-pl-game small { font-size: 12px; opacity: .7; }
.ta-app .ta-pl-add { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 40px; border: 1.5px dashed var(--ta-line); border-radius: 10px; color: var(--ta-muted); text-decoration: none; font-size: 13px; font-weight: 600; }
.ta-app .ta-pl-add:hover { border-color: var(--ta-accent); color: var(--ta-accent); background: var(--ta-soft); }
.ta-app .ta-pl-month { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ta-muted); }
.ta-app .ta-pl-rows { display: flex; flex-direction: column; gap: 6px; }
.ta-app .ta-pl-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 80px auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ta-line); border-radius: 12px; text-decoration: none; color: var(--ta-ink); }
.ta-app .ta-pl-row:hover { border-color: var(--ta-accent); background: var(--ta-soft); }
.ta-app .ta-pl-row.is-cancelled { opacity: .55; }
.ta-app .ta-pl-row.is-game { background: var(--ta-ink); border-color: var(--ta-ink); color: #fff; }
.ta-app .ta-pl-row.is-game:hover { background: #1e293b; }
.ta-app .ta-pl-row.is-game small { color: #cbd5e1; }
.ta-app .ta-pl-row.is-game .ta-pl-rdate, .ta-app .ta-pl-row.is-game .ta-pl-rdate strong, .ta-app .ta-pl-row.is-game .ta-pl-rmain strong { color: #fff; }
.ta-app .ta-pl-weekhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.ta-app .ta-pl-weekhead .ta-pl-month { margin: 0; }
.ta-app .ta-pl-weekhead span { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-pl-listbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 4px 0 6px; border-bottom: 1px solid var(--ta-line); margin-bottom: 6px; }
.ta-app .ta-pl-listbar .ta-field { margin: 0; }
.ta-app .ta-pl-listbar .ta-field label, .ta-app .ta-pl-listbar .ta-field-label { font-size: 12px; font-weight: 600; color: var(--ta-muted); }
.ta-app .ta-pl-listbar input[type="date"] { min-width: 150px; }
.ta-app .ta-pl-ptitle { flex: 1 1 220px; }
.ta-app .ta-pl-ptitle input { width: 100%; }
.ta-app .ta-pl-rdate { display: flex; flex-direction: column; font-size: 13px; color: var(--ta-muted); }
.ta-app .ta-pl-rdate strong { color: var(--ta-ink); font-size: 14px; }
.ta-app .ta-pl-rmain { display: flex; flex-direction: column; min-width: 0; }
.ta-app .ta-pl-rmain small { color: var(--ta-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-app .ta-pl-rload { font-size: 12px; font-weight: 600; text-align: right; color: var(--ta-muted); }
.ta-app .ta-pl-rload em { font-style: normal; color: #b45309; }
.ta-pl-days { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-pl-days label { position: relative; cursor: pointer; }
.ta-pl-days input { position: absolute; opacity: 0; pointer-events: none; }
.ta-pl-days span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 42px; border-radius: 10px; border: 1px solid var(--ta-line); font-weight: 700; font-size: 14px; }
.ta-pl-days input:checked + span { background: var(--ta-accent); border-color: var(--ta-accent); color: var(--ta-on-accent, #fff); }
.ta-pl-days input:focus-visible + span { outline: 2px solid var(--ta-accent); outline-offset: 2px; }
.ta-dialog .ta-field-label { font-size: 13px; font-weight: 600; }

@media (max-width: 1100px) {
    .ta-app .ta-se-layout { grid-template-columns: 1fr; }
    .ta-app .ta-se-side { position: static; }
    .ta-app .ta-pl-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .ta-app .ta-se-grid { grid-template-columns: 1fr 1fr; }
    .ta-app .ta-se-item { grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-areas: "time info actions" "fields fields fields" "note note note"; padding: 10px 8px; }
    .ta-app .ta-se-thumb, .ta-app .ta-se-handle { display: none; }
    .ta-app .ta-se-time { font-size: 13px; }
    .ta-app .ta-se-itemactions .ta-icon-btn { width: 30px; height: 34px; }
    .ta-app .ta-pl-nav { flex-wrap: wrap; justify-content: center; }
    .ta-app .ta-pl-range { min-width: 0; flex: 1; }
    .ta-app .ta-se-fields { justify-content: flex-start; }
    .ta-app .ta-se-item.is-parallel { margin-left: 12px; }
    .ta-app .ta-se-phase .ta-card-head { align-items: flex-start; }
    .ta-app .ta-pl-kpis { grid-template-columns: 1fr 1fr; }
    .ta-app .ta-pl-week { grid-template-columns: 1fr; }
    .ta-app .ta-pl-day { min-height: 0; }
    .ta-app .ta-pl-daybody { flex-direction: column; }
    .ta-app .ta-pl-bars { gap: 4px; }
    .ta-app .ta-pl-row { grid-template-columns: 54px minmax(0, 1fr) auto; }
    .ta-app .ta-pl-row .ta-pl-md, .ta-app .ta-pl-row .ta-chip { display: none; }
    .ta-app .ta-pl-toolbar { justify-content: center; }
}
@media (max-width: 420px) {
    .ta-app .ta-se-grid { grid-template-columns: 1fr; }
    .ta-app .ta-se-span2 { grid-column: auto; }
    .ta-app .ta-se-itemactions .ta-icon-btn { width: 32px; }
}

/* =====================================================================
   TRAINING – Anwesenheit & Belastung (.ta-lo-*)
   ===================================================================== */
.ta-app .ta-savestate[hidden] { display: none; }
.ta-app .ta-lo-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.ta-app .ta-lo-sessions { position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; padding-bottom: 8px; }
.ta-app .ta-lo-slist { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 -8px; padding: 0 8px 4px; }
.ta-app .ta-lo-sgroup { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ta-muted); margin: 10px 4px 2px; }
.ta-app .ta-lo-sitem { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 10px; padding: 8px; font: inherit; color: var(--ta-ink); cursor: pointer; min-height: 52px; }
.ta-app .ta-lo-sitem:hover { background: var(--ta-soft); }
.ta-app .ta-lo-sitem.is-active { border-color: var(--ta-accent); background: var(--ta-soft); box-shadow: inset 3px 0 0 var(--ta-accent); }
.ta-app .ta-lo-sdate { display: flex; flex-direction: column; font-size: 12px; color: var(--ta-muted); line-height: 1.25; }
.ta-app .ta-lo-sdate strong { color: var(--ta-ink); font-size: 13px; }
.ta-app .ta-lo-sinfo { display: flex; flex-direction: column; min-width: 0; }
.ta-app .ta-lo-sinfo strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-app .ta-lo-sinfo small { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-lo-sitem .ta-chip { font-size: 11px; padding: 2px 8px; }
.ta-app .ta-lo-open { background: var(--ta-warn-bg); color: var(--ta-warn-fg); }

.ta-app .ta-lo-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ta-app .ta-lo-formhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ta-app .ta-lo-formhead .ta-card-title { font-size: 20px; margin: 2px 0; }
.ta-app .ta-lo-formhead .ta-card-meta { margin: 0; }
.ta-app .ta-lo-hint { flex-basis: 100%; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ta-warn-bg); color: var(--ta-warn-fg); font-size: 13px; }
.ta-app .ta-lo-quick { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; padding: 12px; border-radius: 12px; background: var(--ta-soft); }
.ta-app .ta-lo-quick[hidden] { display: none; }
.ta-app .ta-lo-quick label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ta-muted); }
.ta-app .ta-lo-quick .ta-select { min-width: 190px; }
.ta-app .ta-lo-quick .ta-input { width: 100px; }
.ta-app .ta-lo-quick #lo-sheet { margin-left: auto; }
.ta-app .ta-lo-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-app .ta-lo-count { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--ta-soft); color: var(--ta-muted); }
.ta-app .ta-lo-count strong { color: var(--ta-ink); }
.ta-app .ta-lo-count.is-anwesend { background: var(--ta-ok-bg); color: var(--ta-ok-fg); }
.ta-app .ta-lo-count.is-anwesend strong { color: var(--ta-ok-fg); }
.ta-app .ta-lo-count.is-unentschuldigt, .ta-app .ta-lo-count.is-verletzt { background: var(--ta-bad-bg); color: var(--ta-bad-fg); }
.ta-app .ta-lo-count.is-reha, .ta-app .ta-lo-count.is-entschuldigt { background: var(--ta-warn-bg); color: var(--ta-warn-fg); }

.ta-app .ta-lo-players { display: flex; flex-direction: column; gap: 6px; }
.ta-app .ta-lo-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "num name status" ". load load" ". note note"; gap: 8px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--ta-line); border-radius: 12px; background: var(--ta-surface); border-left: 4px solid var(--ta-line); }
.ta-app .ta-lo-row .ta-num { grid-area: num; }
.ta-app .ta-lo-row.is-anwesend { border-left-color: var(--ta-ok-fg); }
.ta-app .ta-lo-row.is-entschuldigt, .ta-app .ta-lo-row.is-reha { border-left-color: #d97706; }
.ta-app .ta-lo-row.is-unentschuldigt, .ta-app .ta-lo-row.is-verletzt { border-left-color: var(--ta-bad-fg); }
.ta-app .ta-lo-name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.ta-app .ta-lo-name strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-app .ta-lo-name small { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-lo-status { grid-area: status; display: inline-flex; border: 1px solid var(--ta-line); border-radius: 10px; overflow: hidden; }
.ta-app .ta-lo-status button { border: 0; border-right: 1px solid var(--ta-line); background: var(--ta-surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--ta-muted); padding: 0 10px; min-height: 38px; cursor: pointer; white-space: nowrap; }
.ta-app .ta-lo-status button:last-child { border-right: 0; }
.ta-app .ta-lo-status button:hover { background: var(--ta-soft); color: var(--ta-ink); }
.ta-app .ta-lo-status button[aria-pressed="true"].is-anwesend { background: var(--ta-ok-fg); color: #fff; }
.ta-app .ta-lo-status button[aria-pressed="true"].is-entschuldigt { background: #d97706; color: #fff; }
.ta-app .ta-lo-status button[aria-pressed="true"].is-unentschuldigt { background: var(--ta-bad-fg); color: #fff; }
.ta-app .ta-lo-status button[aria-pressed="true"].is-verletzt { background: #7f1d1d; color: #fff; }
.ta-app .ta-lo-status button[aria-pressed="true"].is-reha { background: #7c3aed; color: #fff; }
.ta-app .ta-lo-load { grid-area: load; display: flex; align-items: center; gap: 6px; }
.ta-app .ta-lo-load .ta-select { width: 150px; min-height: 38px; padding-top: 0; padding-bottom: 0; }
.ta-app .ta-lo-min { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-lo-min .ta-input { width: 64px; min-height: 38px; padding: 0 8px; }
.ta-app .ta-lo-srpe { min-width: 62px; font-size: 13px; font-weight: 700; color: var(--ta-accent); text-align: right; }
.ta-app .ta-lo-load :disabled { opacity: .45; }
.ta-app .ta-lo-note { grid-area: note; min-height: 38px; font-size: 13px; width: 100%; box-sizing: border-box; }
.ta-app .ta-lo-note:disabled { opacity: .45; }
.ta-app .ta-lo-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; position: sticky; bottom: 0; background: var(--ta-surface); padding-top: 8px; border-top: 1px solid var(--ta-line); }

/* Auswertung */
.ta-app #lo-report { display: flex; flex-direction: column; gap: 16px; }
.ta-app #lo-report[hidden], .ta-app #lo-entry[hidden] { display: none; }
.ta-app .ta-lo .ta-pl-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ta-app .ta-pl-kpi.is-warn { border-color: #f59e0b; background: var(--ta-warn-bg); }
.ta-app .ta-pl-kpi.is-warn strong { color: var(--ta-warn-fg); }
.ta-app .ta-lo-chart { margin-top: 8px; }
.ta-app .ta-lo-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--ta-muted); margin-top: 8px; }
.ta-app .ta-lo-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.ta-app .ta-lo-legend .is-actual { background: var(--ta-accent); }
.ta-app .ta-lo-legend .is-plan { height: 0; border-top: 2px dashed var(--ta-ink); border-radius: 0; }
.ta-app .ta-lo-legend .is-ratio { height: 0; border-top: 2px solid #d97706; border-radius: 0; }
.ta-app .ta-lo-tablewrap { overflow-x: auto; margin: 0 -4px; }
.ta-app .ta-lo-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ta-app .ta-lo-table th, .ta-app .ta-lo-table td { padding: 10px 8px; border-bottom: 1px solid var(--ta-line); text-align: left; vertical-align: middle; white-space: nowrap; }
.ta-app .ta-lo-table thead th { font-size: 12px; font-weight: 700; color: var(--ta-muted); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; user-select: none; line-height: 1.25; }
.ta-app .ta-lo-table thead th small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ta-app .ta-lo-table thead th[aria-sort="ascending"]::after { content: " ▲"; color: var(--ta-accent); }
.ta-app .ta-lo-table thead th[aria-sort="descending"]::after { content: " ▼"; color: var(--ta-accent); }
.ta-app .ta-lo-table tbody th { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.ta-app .ta-lo-table tbody th span:last-child { display: flex; flex-direction: column; }
.ta-app .ta-lo-table tbody th small, .ta-app .ta-lo-table td small { color: var(--ta-muted); font-size: 12px; }
.ta-app .ta-lo-table tr.is-risk { background: var(--ta-bad-bg); }
.ta-app .ta-lo-pct { display: inline-block; width: 54px; height: 6px; border-radius: 999px; background: var(--ta-line); vertical-align: middle; overflow: hidden; }
.ta-app .ta-lo-pct i { display: block; height: 100%; background: var(--ta-ok-fg); }
.ta-app .ta-lo-pct i.is-low { background: #d97706; }
.ta-app .ta-lo-zone { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.ta-app .ta-lo-zone strong { font-size: 13px; }
.ta-app .ta-lo-zone.is-ok { background: var(--ta-ok-bg); color: var(--ta-ok-fg); }
.ta-app .ta-lo-zone.is-high { background: var(--ta-warn-bg); color: var(--ta-warn-fg); }
.ta-app .ta-lo-zone.is-risk { background: var(--ta-bad-fg); color: #fff; }
.ta-app .ta-lo-zone.is-low { background: #dbeafe; color: #1d4ed8; }
.ta-app .ta-lo-zone.is-none { background: var(--ta-soft); color: var(--ta-muted); font-weight: 500; }
.ta-app .ta-lo-st { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ta-soft); }
.ta-app .ta-lo-st.is-anwesend { background: var(--ta-ok-bg); color: var(--ta-ok-fg); }
.ta-app .ta-lo-st.is-verletzt, .ta-app .ta-lo-st.is-unentschuldigt { background: var(--ta-bad-bg); color: var(--ta-bad-fg); }
.ta-app .ta-lo-st.is-reha { background: #ede9fe; color: #6d28d9; }
.ta-app .ta-lo-st.is-entschuldigt { background: var(--ta-warn-bg); color: var(--ta-warn-fg); }
.ta-app .ta-lo-help { margin-top: 12px; font-size: 13px; color: var(--ta-muted); }
.ta-app .ta-lo-help summary { cursor: pointer; font-weight: 600; color: var(--ta-ink); min-height: 32px; display: flex; align-items: center; }
.ta-app .ta-lo-help ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }

/* Kader + Dashboard: Belastungs-Hinweise */
.ta-app .ta-load-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.ta-app .ta-load-tags .ta-lo-zone, .ta-app .ta-load-tags .ta-lo-st { font-size: 11px; padding: 1px 7px; }
.ta-app .ta-load-pct { font-size: 12px; color: var(--ta-muted); }
.ta-app .ta-dash-load-list { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 1280px) {
    .ta-app .ta-lo .ta-pl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .ta-app .ta-lo-layout { grid-template-columns: 1fr; }
    .ta-app .ta-lo-sessions { position: static; max-height: 300px; }
}
@media (max-width: 760px) {
    .ta-app .ta-lo-row { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "num name" "status status" "load load" "note note"; }
    .ta-app .ta-lo-status { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ta-app .ta-lo-status button { padding: 0 2px; font-size: 11px; min-height: 42px; }
    .ta-app .ta-lo-load .ta-select { flex: 1; width: auto; min-width: 0; }
    .ta-app .ta-lo-quick .ta-select { min-width: 0; width: 100%; }
    .ta-app .ta-lo-quick label { flex: 1 1 140px; }
    .ta-app .ta-lo-quick .ta-input { width: 100%; }
    .ta-app .ta-lo-quick #lo-sheet { margin-left: 0; }
    .ta-app .ta-lo .ta-pl-kpis { grid-template-columns: 1fr 1fr; }
    .ta-app .ta-lo-table thead { display: none; }
    .ta-app .ta-lo-table, .ta-app .ta-lo-table tbody, .ta-app .ta-lo-table tr { display: block; }
    .ta-app .ta-lo-table tr { border: 1px solid var(--ta-line); border-radius: 12px; padding: 6px 10px; margin-bottom: 8px; }
    .ta-app .ta-lo-table tbody th { border-bottom: 1px solid var(--ta-line); padding: 6px 0 8px; }
    .ta-app .ta-lo-table td { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 0; padding: 4px 0; white-space: normal; }
    .ta-app .ta-lo-table td::before { content: attr(data-label); font-size: 12px; color: var(--ta-muted); }
    .ta-app .ta-lo-tablewrap { overflow: visible; margin: 0; }
}.ta-app .ta-lo-zone.is-out { background: #ede9fe; color: #6d28d9; }
@media (max-width: 760px) { .ta-app .ta-lo-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ta-app .ta-lo-chart svg { min-width: 600px; } }
.ta-app .ta-dash-loadkpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ta-app .ta-dash-loadkpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--ta-soft); min-width: 0; }
.ta-app .ta-dash-loadkpis strong { font-size: 20px; line-height: 1.2; }
.ta-app .ta-dash-loadkpis small { font-size: 12px; color: var(--ta-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-app .ta-dash-open { background: var(--ta-warn-bg); border-radius: 12px; }
.ta-app .ta-dash-open .ta-chip { flex: 0 0 auto; }
.ta-app .ta-row .ta-lo-zone { flex: 0 0 auto; }
@media (max-width: 420px) { .ta-app .ta-dash-loadkpis { grid-template-columns: 1fr 1fr; } }.ta-app .ta-btn[hidden] { display: none; }
/* Spiele in Anwesenheit & Belastung */
.ta-app .ta-lo-sitem.is-game .ta-lo-sinfo strong::before { content: "⚽ "; }
.ta-app .ta-lo-sitem.is-game { background: #f1f5f9; }
.ta-app .ta-lo-sitem.is-game.is-active { background: var(--ta-soft); }
.ta-app .ta-lo-status button[aria-pressed="true"].is-gespielt { background: var(--ta-ok-fg); color: #fff; }
.ta-app .ta-lo-status button[aria-pressed="true"].is-bank { background: #475569; color: #fff; }
.ta-app .ta-lo-status button[aria-pressed="true"].is-nicht_kader { background: #94a3b8; color: #fff; }
.ta-app .ta-lo-row.is-gespielt { border-left-color: var(--ta-ok-fg); }
.ta-app .ta-lo-row.is-bank, .ta-app .ta-lo-row.is-nicht_kader { border-left-color: #94a3b8; }
.ta-app .ta-lo-count.is-bank, .ta-app .ta-lo-count.is-nicht_kader { background: #f1f5f9; color: #475569; }
.ta-app .ta-lo-st.is-gespielt { background: var(--ta-ok-bg); color: var(--ta-ok-fg); }
.ta-app .ta-lo-st.is-bank, .ta-app .ta-lo-st.is-nicht_kader { background: #f1f5f9; color: #475569; }
.ta-app .ta-lo-legend .is-game { background: #0f172a; }
@media (max-width: 760px) { .ta-app .ta-lo-status.is-game { grid-template-columns: repeat(4, minmax(0, 1fr)); } }@media (max-width: 760px) { .ta-app .ta-lo-status.is-game button { white-space: normal; line-height: 1.15; } }