/* Live-Ticker – nutzt die Design-Variablen aus HNET_Design. */
.hnet-live {
    --hnet-live-color: #e11d48;
    --hnet-live-goal: #16a34a;
    --hnet-live-warn: #f59e0b;
    --hnet-live-red: #dc2626;
    display: grid;
    gap: 18px;
}

/* Scoreboard */
.hnet-live-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border: 1px solid var(--hnet-border, #e6e8ec);
    border-radius: var(--hnet-radius, 16px);
    background: var(--hnet-surface, #fff);
    box-shadow: var(--hnet-card-shadow, none);
}

.hnet-live-board.is-live {
    border-color: var(--hnet-live-color);
}

.hnet-live-team {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hnet-live-team-away {
    flex-direction: row-reverse;
    text-align: right;
}

.hnet-live-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex: 0 0 auto;
}

.hnet-live-team-name {
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.hnet-live-center {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 120px;
}

.hnet-live-status {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hnet-muted, #6b7280);
}

.hnet-live-status.is-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hnet-live-color);
    font-weight: 700;
}

.hnet-live-status.is-live::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hnet-live-color);
    animation: hnet-live-pulse 1.6s ease-in-out infinite;
}

@keyframes hnet-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.8); }
}

.hnet-live-score {
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    padding: 4px 14px;
    border-radius: calc(var(--hnet-radius, 16px) / 2);
    background: var(--hnet-score-bg, #111827);
    color: var(--hnet-score-text, #fff);
}

.hnet-live-clock {
    font-size: 12px;
    color: var(--hnet-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* Torschützen */
.hnet-live-scorers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.hnet-live-scorer-col {
    border: 1px solid var(--hnet-border, #e6e8ec);
    border-radius: var(--hnet-radius, 16px);
    background: var(--hnet-surface, #fff);
    padding: 12px 14px;
    min-width: 0;
}

.hnet-live-scorer-col h4 {
    margin: 0 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hnet-muted, #6b7280);
}

.hnet-live-scorer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.hnet-live-scorer-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    min-width: 0;
}

.hnet-live-scorer-photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.hnet-live-scorer-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hnet-live-scorer-number {
    display: inline-block;
    min-width: 20px;
    margin-right: 6px;
    text-align: right;
    color: var(--hnet-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.hnet-live-scorer-stats {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.hnet-live-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: var(--hnet-surface-soft, #f7f8fa);
    color: var(--hnet-text, #111827);
}

.hnet-live-badge small { font-weight: 400; font-size: 10px; opacity: .75; }
.hnet-live-badge-goals { background: color-mix(in srgb, var(--hnet-live-goal) 16%, transparent); color: var(--hnet-live-goal); }
.hnet-live-badge-two { background: color-mix(in srgb, var(--hnet-live-warn) 18%, transparent); color: #92400e; }
.hnet-live-badge-warn { background: color-mix(in srgb, var(--hnet-live-warn) 22%, transparent); color: #92400e; }
.hnet-live-badge-red { background: color-mix(in srgb, var(--hnet-live-red) 16%, transparent); color: var(--hnet-live-red); }

/* Ereignisliste */
.hnet-live-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--hnet-border, #e6e8ec);
    border-radius: var(--hnet-radius, 16px);
    background: var(--hnet-surface, #fff);
    overflow: hidden;
}

.hnet-live-block {
    padding: 8px 14px;
    background: var(--hnet-surface-soft, #f7f8fa);
    color: var(--hnet-muted, #6b7280);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hnet-live-event {
    display: grid;
    grid-template-columns: 48px 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--hnet-border, #e6e8ec);
    transition: background-color .6s ease;
}

.hnet-live-list > .hnet-live-event:first-child,
.hnet-live-block + .hnet-live-event {
    border-top: 0;
}

.hnet-live-event.is-new {
    background: color-mix(in srgb, var(--hnet-accent, #0f5aa8) 10%, transparent);
}

.hnet-live-minute {
    font-variant-numeric: tabular-nums;
    color: var(--hnet-muted, #6b7280);
    font-size: 13px;
}

.hnet-live-icon {
    font-size: 15px;
    line-height: 1;
    text-align: center;
}

.hnet-live-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
}

.hnet-live-label { font-weight: 600; }
.hnet-live-player { overflow-wrap: anywhere; }
.hnet-live-eventteam { font-size: 12px; color: var(--hnet-muted, #6b7280); }

.hnet-live-eventscore {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 14px;
}

.hnet-live-goal .hnet-live-icon,
.hnet-live-goal7 .hnet-live-icon { color: var(--hnet-live-goal); }
.hnet-live-goal .hnet-live-label,
.hnet-live-goal7 .hnet-live-label { color: var(--hnet-live-goal); }
.hnet-live-suspension .hnet-live-label { color: #92400e; }
.hnet-live-warning .hnet-live-label { color: #92400e; }
.hnet-live-red .hnet-live-label { color: var(--hnet-live-red); }
.hnet-live-miss7 .hnet-live-label,
.hnet-live-timeout .hnet-live-label,
.hnet-live-lineup .hnet-live-label { color: var(--hnet-muted, #6b7280); font-weight: 500; }
.hnet-live-final .hnet-live-label,
.hnet-live-period .hnet-live-label { color: var(--hnet-accent, #0f5aa8); }

.hnet-live-empty {
    margin: 0;
    padding: 14px;
    color: var(--hnet-muted, #6b7280);
    font-size: 14px;
}

.hnet-live-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--hnet-muted, #6b7280);
}

@media (max-width: 640px) {
    .hnet-live-board {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 10px;
    }

    .hnet-live-team,
    .hnet-live-team-away {
        flex-direction: row;
        text-align: left;
    }

    .hnet-live-scorers { grid-template-columns: 1fr; }

    .hnet-live-event {
        grid-template-columns: 40px 20px 1fr auto;
        gap: 8px;
        padding: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hnet-live-status.is-live::before { animation: none; }
    .hnet-live-event { transition: none; }
}

/* Inhaltliche Links auf handball.net */
.hnet-live .hnet-hbnet-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.hnet-live .hnet-hbnet-link:hover,
.hnet-live .hnet-hbnet-link:focus-visible {
    color: var(--hnet-accent, #0f5aa8);
    border-bottom-color: currentColor;
}

a.hnet-live-score {
    display: inline-block;
    border-bottom: 0;
    text-decoration: none;
    font-weight: 700;
}

a.hnet-live-score:hover,
a.hnet-live-score:focus-visible {
    color: var(--hnet-score-text, #fff);
    filter: brightness(1.15);
}

.hnet-live-context {
    margin: 8px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--hnet-muted, #6b7280);
}

.hnet-live-context-sep { margin: 0 6px; opacity: .6; }

.hnet-live-footlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.hnet-live-credit {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--hnet-muted, #6b7280);
}

.hnet-live-credit a { color: inherit; }

/* --- Kontrast: der Spielstand ist ein Link, darf aber NICHT die Textfarbe
   der Umgebung erben, sonst steht er dunkel auf dunklem Score-Hintergrund.
   Höhere Spezifität als .hnet-wrap a.hnet-hbnet-link ist hier Absicht. --- */
.hnet-wrap .hnet-live-center a.hnet-live-score,
.hnet-wrap a.hnet-live-score,
.hnet-live a.hnet-live-score {
    color: var(--hnet-score-text, #fff);
    background: var(--hnet-score-bg, #111827);
    border-bottom: 0;
    text-decoration: none;
}

.hnet-wrap .hnet-live-center a.hnet-live-score:hover,
.hnet-wrap .hnet-live-center a.hnet-live-score:focus-visible {
    color: var(--hnet-score-text, #fff);
    filter: brightness(1.18);
}

/* --- Ausklappbare Details: eingeklappt bleibt nur das Ergebnis stehen --- */
.hnet-live-details {
    border: 1px solid var(--hnet-border, #e6e8ec);
    border-radius: var(--hnet-radius, 16px);
    background: var(--hnet-surface, #fff);
    overflow: hidden;
}

.hnet-live-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--hnet-text, #111827);
    background: var(--hnet-surface-soft, #f7f8fa);
    list-style: none;
    user-select: none;
}

.hnet-live-summary::-webkit-details-marker { display: none; }
.hnet-live-summary:focus-visible { outline: 2px solid var(--hnet-accent, #0f5aa8); outline-offset: -2px; }

.hnet-live-summary-label { flex: 1 1 auto; }

.hnet-live-summary-count {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    background: var(--hnet-surface, #fff);
    color: var(--hnet-muted, #6b7280);
    border: 1px solid var(--hnet-border, #e6e8ec);
}

.hnet-live-summary-icon {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
    color: var(--hnet-muted, #6b7280);
}

.hnet-live-details[open] .hnet-live-summary-icon {
    transform: rotate(225deg) translate(-2px, -2px);
}

.hnet-live-details-body {
    display: grid;
    gap: 14px;
    padding: 14px;
}

/* Innerhalb der Klappe brauchen die Blöcke keinen zweiten Rahmen. */
.hnet-live-details-body .hnet-live-list,
.hnet-live-details-body .hnet-live-scorer-col {
    border-color: var(--hnet-border, #e6e8ec);
}

@media (prefers-reduced-motion: reduce) {
    .hnet-live-summary-icon { transition: none; }
}

/* Eingeklappt: Hinweis, dass seit dem letzten Blick Ereignisse dazukamen. */
.hnet-live-details.has-updates .hnet-live-summary-count {
    background: var(--hnet-live-color);
    border-color: var(--hnet-live-color);
    color: #fff;
}