/* ================================================
   Spieler Plugin CSS v1.1.0 — Vereinsfarbe #d51426
   ================================================ */

:root {
    --sp-primary:      #d51426;
    --sp-primary-dark: #a80e1e;
    --sp-text:         #1a1a1a;
    --sp-muted:        #6b7280;
    --sp-border:       #e5e7eb;
    --sp-bg:           #f9fafb;
    --sp-white:        #ffffff;
    --sp-radius:       10px;
}

/* ── Gruppen-Wrapper ──────────────────────────── */
.sp-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.sp-gruppe {
    /* kein extra Abstand nötig, gap übernimmt das */
}

/* Gruppen-Header */
.sp-gruppe-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sp-primary);
}
.sp-gruppe-header::before,
.sp-gruppe-header::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--sp-primary);
    opacity: .25;
}
.sp-gruppe-header span {
    white-space: nowrap;
}
/* Inaktiv-Gruppe dezenter */
.sp-gruppe-header-inaktiv {
    color: var(--sp-muted);
}
.sp-gruppe-header-inaktiv::before,
.sp-gruppe-header-inaktiv::after {
    background: var(--sp-muted);
}

/* ── Grid ─────────────────────────────────────── */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 20px;
}

/* ── Karte ────────────────────────────────────── */
.sp-card {
    display: flex;
    flex-direction: column;
    background: var(--sp-white);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--sp-text);
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
}
.sp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(213,20,38,.18);
    border-color: var(--sp-primary);
    text-decoration: none;
}
.sp-card-inaktiv {
    opacity: .55;
    filter: grayscale(60%);
}

/* Bild */
.sp-card-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background: #eee;
    overflow: hidden;
}
.sp-card-img-wrap img.sp-card-img,
.sp-card-img-wrap .sp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sp-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eee 0%, #ddd 100%);
    width: 100%;
    height: 100%;
}
.sp-placeholder span {
    font-size: 52px;
    font-weight: 700;
    color: #bbb;
}

/* Badges — gestapelt oben links */
.sp-badge {
    position: absolute;
    left: 8px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    line-height: 1.4;
    z-index: 2;
    pointer-events: none;
}
.sp-badge:nth-child(2) { top: 8px; }
.sp-badge:nth-child(3) { top: 34px; }
.sp-badge:nth-child(4) { top: 60px; }

.sp-badge-neuzugang {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}
.sp-badge-verletzt {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
}
.sp-badge-inaktiv {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

/* Card Body */
.sp-card-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 3px solid var(--sp-primary);
}
.sp-card-nummer   { font-size: 12px; font-weight: 700; color: var(--sp-primary); }
.sp-card-name     { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--sp-text); }
.sp-card-position { font-size: 12px; color: var(--sp-muted); }


/* ================================================
   Einzelseite – Spielerprofil
   ================================================ */
.sp-profile {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
}

.sp-profile-header {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.sp-profile-photo {
    width: 220px;
    flex-shrink: 0;
    border-radius: var(--sp-radius);
    overflow: hidden;
    border: 3px solid var(--sp-primary);
    aspect-ratio: 3/4;
    background: #eee;
}
.sp-profile-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-profile-photo-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 80px; font-weight: 700; color: #bbb;
    background: linear-gradient(135deg, #eee 0%, #ddd 100%);
}

.sp-profile-info { flex: 1; min-width: 240px; }
.sp-profile-nummer { font-size: 48px; font-weight: 900; color: var(--sp-primary); line-height: 1; margin-bottom: 6px; }
.sp-profile-name   { font-size: 28px; font-weight: 700; margin: 0 0 6px; color: var(--sp-text); }
.sp-profile-position { font-size: 16px; color: var(--sp-muted); margin-bottom: 16px; }

.sp-profile-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.sp-profile-badge  { font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: 20px; }
.sp-profile-badge-neuzugang { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.sp-profile-badge-verletzt  { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.sp-profile-badge-inaktiv   { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }
.sp-profile-badge-aktiv     { background: #d1fae5; color: #065f46; border: 1px solid #34d399; }

.sp-data-table { width:100%; border-collapse:collapse; margin-bottom:0; }
.sp-data-table tr { border-bottom: 1px solid var(--sp-border); }
.sp-data-table tr:last-child { border-bottom: none; }
.sp-data-table th { text-align:left; padding:8px 4px; font-size:13px; color:var(--sp-muted); font-weight:600; width:40%; }
.sp-data-table td { padding:8px 4px; font-size:14px; font-weight:500; color:var(--sp-text); }

.sp-section { background:var(--sp-bg); border-radius:var(--sp-radius); padding:20px 24px; margin-bottom:20px; border:1px solid var(--sp-border); }
.sp-section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--sp-primary); margin:0 0 16px; padding-bottom:8px; border-bottom:2px solid var(--sp-primary); }

.sp-stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:14px; }
.sp-stat-box { background:var(--sp-white); border:1px solid var(--sp-border); border-radius:8px; padding:14px 10px; text-align:center; }
.sp-stat-value { font-size:28px; font-weight:800; color:var(--sp-primary); line-height:1; display:block; }
.sp-stat-label { font-size:11px; text-transform:uppercase; color:var(--sp-muted); font-weight:600; letter-spacing:.04em; margin-top:4px; display:block; }

.sp-karten { display:flex; gap:12px; flex-wrap:wrap; }
.sp-karte  { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.sp-karte-icon { display:inline-block; width:16px; height:22px; border-radius:3px; }
.sp-karte-gelb    { background:#fbbf24; }
.sp-karte-gelbrot { background: linear-gradient(135deg,#fbbf24 50%,#dc2626 50%); }
.sp-karte-rot     { background:#dc2626; }

.sp-biografie { font-size:15px; line-height:1.7; color:var(--sp-text); margin:0; }

.sp-back-link { display:inline-flex; align-items:center; gap:6px; color:var(--sp-primary); font-size:14px; font-weight:600; text-decoration:none; margin-bottom:20px; }
.sp-back-link:hover { text-decoration:underline; color:var(--sp-primary-dark); }

.sp-mannschaft-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.sp-mannschaft-tag  { background:var(--sp-primary); color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; text-decoration:none; }
.sp-mannschaft-tag:hover { background:var(--sp-primary-dark); color:#fff; }

@media (max-width: 600px) {
    .sp-profile-header { flex-direction:column; }
    .sp-profile-photo  { width:100%; max-width:260px; }
    .sp-profile-nummer { font-size:36px; }
    .sp-profile-name   { font-size:22px; }
    .sp-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
}