/*
 * Spieldetailseite. Mobil zuerst: die Grundregeln gelten für schmale Bildschirme,
 * alles Breitere kommt über min-width dazu. Die Versprechen dazu stehen in
 * specs/match-detail.md.
 */

.match-page {
    --mp-night: #253032;
    --mp-grass: #2e7d32;
    --mp-paper: #eef2ef;
    --mp-led: #f2b705;
    --mp-ink: #1e2629;
    --mp-muted: #5c6b66;
    --mp-rule: #d5ddd8;
    --mp-numeral: 'Barlow Semi Condensed', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

    color: var(--mp-ink);
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 48px;
}

.match-page a {
    color: var(--mp-grass);
}

.match-page a:focus-visible {
    outline: 2px solid var(--mp-night);
    outline-offset: 2px;
    border-radius: 2px;
}

.match-page ol.breadcrumb {
    margin-bottom: 12px;
}

.match-page h2 {
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--mp-night);
    margin: 0 0 14px;
}

.match-section {
    margin-top: 40px;
}

/* Kopfband ohne Foto: Flutlichtnacht statt des grünen Notbehelfs der Vorlage. */
.intro-header.intro-header--plain {
    background-color: #253032 !important;
    background-image: none !important;
}


/* Vor und Zurück — oben knapp, unten als Abschluss. */
.match-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 17px;
}

.match-nav > div > a,
.match-nav > div > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    text-decoration: none;
}

.match-nav > div > span {
    color: var(--mp-muted);
}

.match-nav .coming-soon-badge {
    font-family: 'Open Sans', sans-serif;
}

.match-nav--top {
    font-size: 15px;
    margin-bottom: 8px;
}

.match-nav--top > div > a,
.match-nav--top > div > span {
    min-height: 36px;
}

.match-nav--bottom {
    margin-top: 48px;
    padding-top: 12px;
    border-top: 2px solid var(--mp-night);
}

/*
 * Die Eckdaten als Eintrittskarte: links, was auf jedem Ticket steht, rechts
 * der Abriss mit Eintritt und Zuschauern. Auf dem Telefon sitzt der Abriss unten.
 */
.match-pass {
    --mp-notch: 18px;

    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--mp-paper);
    border-radius: 8px;
    margin: 4px 0 8px;
}

.match-pass__main {
    padding: 18px 20px 16px;
}

.match-pass__sport {
    display: block;
    color: var(--mp-muted);
    font-size: 14px;
}

.match-pass__league {
    display: block;
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    text-decoration: none;
}

.match-pass__league:hover {
    text-decoration: underline;
}

.match-pass__place {
    margin-top: 12px;
}

.match-pass .match-pass__ground {
    display: inline-block;
    font-family: var(--mp-numeral);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    color: var(--mp-night) !important;
    text-decoration: none;
}

.match-pass__ground:hover {
    text-decoration: underline;
}

.match-pass__town {
    display: block;
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.1;
    color: var(--mp-muted);
}

.match-pass__date {
    display: block;
    margin-top: 12px;
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.2;
    color: var(--mp-night);
    font-variant-numeric: tabular-nums;
}

.match-pass__time {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: var(--mp-muted);
}

.match-pass__course {
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--mp-muted);
}

.match-pass__detail {
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 17px;
    color: var(--mp-muted);
    font-variant-numeric: tabular-nums;
}

.match-pass__course b {
    font-family: var(--mp-numeral);
    font-weight: 700;
    font-size: 18px;
    color: var(--mp-ink);
    font-variant-numeric: tabular-nums;
}

.match-pass__stub {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    padding: 14px 20px 18px;
    border-top: 2px dashed rgba(37, 48, 50, .28);
}

.match-pass__stub::before,
.match-pass__stub::after {
    content: '';
    position: absolute;
    top: calc(var(--mp-notch) / -2 - 1px);
    width: var(--mp-notch);
    height: var(--mp-notch);
    border-radius: 50%;
    background: #fff;
}

.match-pass__stub::before {
    left: calc(var(--mp-notch) / -2);
}

.match-pass__stub::after {
    right: calc(var(--mp-notch) / -2);
}

.match-pass__item {
    display: flex;
    flex-direction: column;
}

.match-pass__label {
    font-size: 13px;
    color: var(--mp-muted);
}

.match-pass__value {
    font-family: var(--mp-numeral);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    color: var(--mp-night);
    font-variant-numeric: tabular-nums;
}

.match-pass__value--text {
    font-size: 19px;
}

.match-pass__extra {
    font-size: 14px;
    color: var(--mp-muted);
}

@media (min-width: 768px) {
    .match-pass {
        grid-template-columns: 1fr minmax(170px, auto);
    }

    .match-pass__main {
        padding: 22px 28px;
    }

    .match-pass__stub {
        flex-direction: column;
        justify-content: center;
        gap: 14px;
        padding: 22px 28px;
        border-top: 0;
        border-left: 2px dashed rgba(37, 48, 50, .28);
    }

    .match-pass__stub::before,
    .match-pass__stub::after {
        left: calc(var(--mp-notch) / -2 - 1px);
        right: auto;
    }

    .match-pass__stub::before {
        top: calc(var(--mp-notch) / -2);
    }

    .match-pass__stub::after {
        top: auto;
        bottom: calc(var(--mp-notch) / -2);
    }

    .match-pass .match-pass__ground {
        font-size: 30px;
    }

    .match-pass__town {
        display: inline;
        font-size: 22px;
    }

    .match-pass__town::before {
        content: '· ';
    }

    .match-pass__date {
        font-size: 21px;
    }

    .match-pass__time {
        display: inline;
        font-size: 21px;
    }

    .match-pass__time::before {
        content: '· ';
    }
}

/* Bericht */
.match-report > h2 {
    font-size: 26px;
}

.matchreport h2,
.matchreport h3 {
    margin-top: 22px;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--mp-numeral);
}

.matchreport p {
    margin: 12px 0 0;
    line-height: 1.65;
}

/* Blocksatz reißt auf schmalen Spalten Löcher in den Text. */
@media (max-width: 767.98px) {
    .match-page .matchreport,
    .match-page .matchreport p {
        text-align: left !important;
        hyphens: auto;
    }
}

/*
 * Berichtsfotos floaten. Ist der Text kürzer als das letzte Foto, ragt der Float
 * aus dem Bericht heraus; flow-root schließt ihn ein (AC-16).
 */
.match-page .matchreport {
    display: flow-root;
}

.report-guest {
    margin: -4px 0 12px;
    font-style: italic;
    font-weight: 600;
}

.match-report__addition {
    margin-top: 28px;
    font-style: italic;
}

/* Der Spielbogen: Tore, Aufstellungen, Strafen, Unparteiische. */
.facts {
    min-width: 0;
}

.facts-block + .facts-block {
    margin-top: 32px;
}

.facts h3 {
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--mp-night);
    margin: 0 0 10px;
}

.facts .content {
    font-size: 15px;
}

.goal-list {
    list-style: none;
    max-width: 34rem;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mp-rule);
}

.goal-list li {
    display: grid;
    grid-template-columns: 3.4em 1fr auto;
    align-items: baseline;
    gap: 0 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--mp-rule);
}

.goal-minute {
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--mp-muted);
}

.goal-score {
    font-family: var(--mp-numeral);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--mp-led);
    background: var(--mp-night);
    border-radius: 3px;
    padding: 1px 6px;
}

.goal-note {
    color: var(--mp-muted);
    font-size: 14px;
}

.lineup-teams {
    display: grid;
    gap: 28px;
}

.lineup-team h4 {
    font-family: var(--mp-numeral);
    font-weight: 600;
    font-size: 18px;
    color: var(--mp-night);
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--mp-night);
}

.lineup-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lineup-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--mp-rule);
    line-height: 1.35;
}

.lineup-role {
    margin-left: 6px;
    font-size: 13px;
    color: var(--mp-muted);
}

.lineup-sub {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--mp-muted);
}

.lineup-note {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--mp-muted);
}

.lineup-sub::before {
    content: '⇄ ';
    color: var(--mp-grass);
}

.lineup-raw {
    font-size: 15px;
    padding: 6px 0;
}

.lineup-extra {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--mp-muted);
}

.lineup-coach {
    margin: 10px 0 0;
    font-size: 15px;
}

.facts-label {
    color: var(--mp-muted);
    margin-right: 4px;
}

.facts-officials {
    margin-top: 28px;
    font-size: 15px;
}

.facts-officials p {
    margin: 0 0 4px;
}

@media (min-width: 768px) {
    .lineup-teams {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* Eintrittskarte neben dem Spielbogen, solange es keinen Bericht gibt (AC-3). */
.match-facts-with-ticket {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ticket-side {
    text-align: center;
}

.ticket-side img,
.thumbticket img {
    width: auto;
    max-width: 100%;
    max-height: 420px;
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--mp-rule), 0 0 0 1px var(--mp-rule);
}

.thumbticket {
    text-align: center;
}

@media (min-width: 768px) {
    .match-facts-with-ticket {
        flex-direction: row;
        align-items: flex-start;
    }

    .match-facts-with-ticket > .facts {
        flex: 1;
    }

    .ticket-side {
        flex: 0 0 auto;
        max-width: 40%;
    }
}

/* Zusatztabellen, etwa eine Etappenwertung */
.match-eventfact table {
    width: 100%;
    font-size: 15px;
}

.match-eventfact td,
.match-eventfact th {
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--mp-rule);
}

/* Mehr dazu: externe Berichte, Saison */
.match-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.match-links li {
    padding: 8px 0;
    border-bottom: 1px solid var(--mp-rule);
}

.match-links .source {
    display: block;
    font-size: 13px;
    color: var(--mp-muted);
}

/* Abschluss: persönliche Statistik und der Ort */
.match-closing {
    display: grid;
    gap: 24px;
    margin-top: 48px;
}

.match-closing > section {
    border-top: 2px solid var(--mp-night);
    padding-top: 14px;
}

.match-closing .stat-box {
    margin: 0;
}

/*
 * Die Karte zeigt einen einzigen Punkt: quadratisch und begrenzt, damit sie
 * nicht höher wird als die Statistik daneben. Die ID im Selektor schlägt die
 * globale #map-Höhe.
 */
.match-page #map.match-map {
    height: auto;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 14px;
}

@media (min-width: 992px) {
    .match-closing {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

.match-visits {
    margin-top: 40px;
}

.match-visits h2 {
    font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .match-page * {
        transition: none !important;
    }
}

/* Kopf ohne Mannschaften: Etappe oder Runde als Titel, der Wettbewerb darüber. */
.site-heading--event {
    padding: 40px 0 36px !important;
}

.site-heading--event h1 {
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin: 0;
}

.site-heading__kicker {
    display: block;
    margin-bottom: 8px;
    font-family: 'Barlow Semi Condensed', 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 19px;
    color: #f2b705;
}

@media (min-width: 768px) {
    .site-heading--event h1 {
        font-size: 42px !important;
    }

    .site-heading__kicker {
        font-size: 22px;
    }
}