/* ===================================================================
   Vereinsmarkt - "Freie Vereine" und "Interimsvereine"

   Aufbau nach dem Vorbild der Altfassung im master: die Ligen stehen als
   schmale Spalten nebeneinander, und in der Liste steht pro Verein nur der
   Name. Alles Weitere zeigt eine Tafel, die im Fluss keinen Platz kostet.

   Der Zwischenstand mit einer Wertetabelle je Liga (acht Spalten pro
   Verein) war 2517px hoch und verstellte den Blick auf das, wonach man
   sucht: die Vereinsnamen. Diese Fassung braucht rund 1100px fuer dieselbe
   Information.

   Was die Altfassung falsch machte und hier anders ist:
     * Sie oeffnete die Tafel per onMouseOver - auf Beruehrungsgeraeten
       also gar nicht. Hier per Klick.
     * Sie legte je Verein ein verstecktes <div> ins Dokument, 131 Kopien
       desselben Geruests. Hier gibt es eine Tafel, die gefuellt wird.
     * Ihre Ligen standen in starren Tabellenzeilen: jede Reihe war so hoch
       wie ihre laengste Liga, eine leere Liga riss trotzdem elf Zeilen auf.
       Hier packt der Zeitungssatz dicht.

   Kein Dark-Block: die lokale Token-Ebene wird aus den globalen Tokens
   gespeist und schaltet damit von selbst um.
   =================================================================== */

/* Die Token-Ebene liegt auf BEIDEN Wurzeln. Die Tafel wird bewusst hinter
   </div> der .vm-page gerendert - ein Overlay darf nicht in einem Element
   mit overflow oder eigenem Stacking-Kontext haengen. Damit erbt sie deren
   Tokens aber nicht: ohne diese Zeile ist sie durchsichtig und der Tacho
   unsichtbar, weil --vm-flaeche und --vm-gut nicht aufgeloest werden. */
.vm-page,
.vm-tafel {
    --vm-flaeche: var(--bg-card);
    /* Fallback, falls .vm-page einmal ohne .ui-page steht: --ui-border wird
       nur von .ui-page/.ui-card gesetzt. */
    --vm-rand: var(--ui-border, var(--gray-200));
    --vm-gut: var(--success);
    --vm-gut-text: var(--success-text);
    --vm-mittel: var(--warning);
    --vm-mittel-text: var(--warning-text);
    --vm-schlecht: var(--danger);
    --vm-schlecht-text: var(--danger-text);
}

/* ----- Bereichsnavigation -----
   Markup und Grundstil kommen aus skeletons/_pill_nav.twig, wie in
   Vereinsumfeld und Transfer. Hier nur die beiden Zutaten, die auch
   .vu-nav braucht: ein Stapelkontext fuer das aufgeklappte Mobilmenue und
   eine lesbare Farbe fuer die inaktiven Pills.

   Bewusst auf .vm-nav begrenzt statt in eus.css gehoben - elf Templates
   nutzen .nav-pills, eine globale Regel wuerde sie alle mitaendern. */
.vm-nav {
    position: relative;
    z-index: 100;
    overflow: visible;
    margin-bottom: 10px;
}

.vm-nav .nav-pills .nav-link {
    font-size: 0.8125rem;
    border-radius: 0.375rem;
}

.vm-nav .nav-pills .nav-link:not(.active) {
    color: var(--bs-body-color);
}

.vm-nav .nav-pills .nav-link:not(.active):hover {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* ===================================================================
   Ligaspalten
   =================================================================== */

/* Zeitungssatz statt Raster: die Ligen sind unterschiedlich lang (null bis
   vierzehn Vereine), ein Grid liesse unter der kuerzeren eine Luecke.
   columns fuellt Spalte fuer Spalte. */
.vm-ligen {
    columns: 4;
    column-gap: 13px;
}

@media (max-width: 1299.98px) { .vm-ligen { columns: 3; } }
@media (max-width: 899.98px)  { .vm-ligen { columns: 2; } }
@media (max-width: 575.98px)  { .vm-ligen { columns: 1; } }

.vm-liga {
    /* Ohne das reisst der Spaltenumbruch mitten durch eine Liga. */
    break-inside: avoid;
    margin-bottom: 13px;
}

.vm-liga-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 3px 9px;
    background: var(--kopf-band);
    border: 1px solid var(--vm-rand);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
}

/* Eine Liga ohne freie Vereine hat keine Liste - dann rundet der Kopf
   unten mit ab, statt eine Kante ins Leere zu ziehen. */
.vm-liga:not(:has(.vm-liga-liste)) .vm-liga-kopf {
    border-bottom: 1px solid var(--vm-rand);
    border-radius: 7px;
}

.vm-liga-kopf .bi {
    color: var(--primary);
}

.vm-liga-zahl {
    font-weight: 600;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-500);
    white-space: nowrap;
}

.vm-liga-liste {
    background: var(--vm-flaeche);
    border: 1px solid var(--vm-rand);
    border-radius: 0 0 7px 7px;
    padding: 3px 0;
}

/* ----- Ein Verein ----- */
.vm-v {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    font-size: 13px;
    line-height: 1.45;
    text-decoration: none;
    color: var(--link-text);
    cursor: pointer;
}

.vm-v:hover,
.vm-v.is-offen {
    background: color-mix(in srgb, var(--primary) 10%, var(--vm-flaeche));
}

.vm-v:hover .vm-v-name {
    text-decoration: underline;
}

/* Der Name wird NICHT gekuerzt - er ist die eine Angabe, wegen der die
   Zeile gelesen wird. Lieber bricht er um; in einer schmalen Spalte
   trifft das die langen Namen ohnehin. */
.vm-v-name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.vm-v-marker {
    margin-left: auto;
    display: flex;
    gap: 3px;
    font-size: 11px;
    flex: 0 0 auto;
    padding-left: 4px;
}

/* Der Punkt ist die einzige Kennzahl, die in der Liste bleibt. */
.vm-punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.vm-punkt-gut { background: var(--vm-gut); }
.vm-punkt-mittel { background: var(--vm-mittel); }
.vm-punkt-schlecht { background: var(--vm-schlecht); }

/* Nationalteams tragen statt des Punktes ihre Flagge: fuer sie gibt es
   keine Vereinswerte, also auch keine Schwierigkeit. */
.vm-v-flagge {
    width: 17px;
    height: 12px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--vm-rand);
    border-radius: 2px;
}

/* ===================================================================
   Detailtafel
   =================================================================== */

.vm-tafel {
    position: fixed;
    z-index: 1050;
    width: 272px;
    max-width: calc(100vw - 24px);
    background: var(--vm-flaeche);
    border: 1px solid var(--primary);
    border-radius: 10px;
    box-shadow: var(--shadow-xl);
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--text-primary);
}

.vm-tafel[hidden] {
    display: none;
}

.vm-tafel-zu {
    float: right;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    padding: 2px 0 2px 6px;
    cursor: pointer;
}

.vm-tafel-zu:hover {
    color: var(--text-primary);
}

.vm-tafel-titel {
    font-size: 14px;
    font-weight: 700;
    color: var(--link-text);
    text-decoration: none;
    display: block;
}

.vm-tafel-titel:hover {
    text-decoration: underline;
}

.vm-tafel-sub {
    color: var(--text-muted);
    font-size: 11.5px;
    margin-bottom: 7px;
}

.vm-tafel-werte {
    margin: 0 0 7px;
}

.vm-tafel-werte > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 1px 0;
}

.vm-tafel-werte dt {
    color: var(--text-muted);
    font-weight: 400;
}

.vm-tafel-werte dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ----- Tacho -----
   Die Idee stammt aus grafiken/fv1-4.png der Altfassung. Als SVG, weil das
   PNG nur einen Satz Farben kennt und im Dunkelmodus zum hellen Fleck mit
   unsichtbarem Zeiger wurde. */
.vm-tacho-paar {
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--vm-rand);
    padding-top: 7px;
}

.vm-tacho-eins {
    flex: 1;
    text-align: center;
    min-width: 0;
}

.vm-tacho-titel {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gray-500);
    font-weight: 600;
}

.vm-tacho-wert {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    margin-top: -2px;
}

.vm-tacho {
    width: 56px;
    height: 33px;
}

.vm-tacho-bogen {
    fill: none;
    stroke-width: 7;
}

.vm-tacho-gut { stroke: var(--vm-gut); }
.vm-tacho-mittel { stroke: var(--vm-mittel); }
.vm-tacho-schlecht { stroke: var(--vm-schlecht); }

/* Der Winkel kommt aus --vm-zeiger, gesetzt vom Skript. Ohne Wert steht
   der Zeiger senkrecht. */
.vm-tacho-zeiger {
    stroke: var(--text-primary);
    stroke-width: 2.2;
    stroke-linecap: round;
    transform: rotate(var(--vm-zeiger, 0deg));
    transform-origin: 26px 26px;
    transition: transform .18s ease-out;
}

.vm-tacho-nabe {
    fill: var(--text-primary);
}

/* ===================================================================
   Zufallsvorschlag

   Die Seite beantwortet eine Frage - "welchen Verein nehme ich?" - und der
   Vorschlag ist die einzige Stelle, die sie direkt beantwortet. Vorher war
   er eine Zeile zwischen Navigation und Liste und wurde entsprechend
   uebersehen. Jetzt: mittig, mit eigenem Farbton und eigener Kante.
   =================================================================== */

.vm-vorschlag {
    text-align: center;
    padding: 16px 18px 14px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    border-radius: 12px;
    /* Leise Toenung statt weisser Flaeche: hebt den Kasten vom Seitengrund
       ab, ohne mit den Ligaspalten zu konkurrieren. */
    background: color-mix(in srgb, var(--primary) 6%, var(--vm-flaeche));
}

.vm-vorschlag-eyebrow {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.vm-vorschlag .vm-wappen-feld {
    margin: 0 auto 7px;
}

.vm-vorschlag-name {
    display: block;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--link-text);
    text-decoration: none;
    line-height: 1.15;
}

.vm-vorschlag-name:hover {
    text-decoration: underline;
}

.vm-vorschlag-satz {
    margin: 3px 0 11px;
    font-size: 13.5px;
    color: var(--text-secondary);
}

/* Kennzahlenband: Beschriftung klein darueber, Wert darunter - lesbarer
   als eine Reihe gleich aussehender Badges, weil man sieht, was welche
   Zahl bedeutet. */
.vm-vorschlag-werte {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin: 0 0 12px;
    border: 1px solid var(--vm-rand);
    border-radius: 8px;
    overflow: hidden;
    background: var(--vm-flaeche);
}

.vm-vorschlag-werte > div {
    padding: 6px 16px;
    min-width: 84px;
    border-right: 1px solid var(--vm-rand);
}

.vm-vorschlag-werte > div:last-child {
    border-right: 0;
}

.vm-vorschlag-werte dt {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-500);
    font-weight: 600;
}

.vm-vorschlag-werte dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vm-t-gut { color: var(--vm-gut-text); }
.vm-t-mittel { color: var(--vm-mittel-text); }
.vm-t-schlecht { color: var(--vm-schlecht-text); }

.vm-vorschlag-knoepfe {
    display: flex;
    gap: 7px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .vm-vorschlag-werte {
        display: flex;
        width: 100%;
    }

    .vm-vorschlag-werte > div {
        flex: 1 1 33%;
        min-width: 0;
        padding: 5px 4px;
        border-bottom: 1px solid var(--vm-rand);
    }
}

/* Wappenfeld: das Ersatzsymbol liegt darunter, das Bild deckt es ab. Fehlt
   die Grafik, blendet ui-aktionen.js das <img> aus und das Symbol kommt zum
   Vorschein - ohne Sprung, weil das Feld die Groesse haelt. Von 435
   Vereinsgrafiken fehlen etliche. */
.vm-wappen-feld {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--gray-500);
    font-size: 22px;
}

.vm-wappen-gross {
    width: 66px;
    height: 66px;
    font-size: 38px;
}

.vm-wappen-feld .vm-wappen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===================================================================
   Legende

   Als Leiste ueber der Liste statt eingeklappt am Fuss: wer den Punkt zum
   ersten Mal sieht, sucht die Erklaerung dort, wo er auftaucht.
   =================================================================== */

.vm-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 6px 12px;
    margin-bottom: 10px;
    background: var(--surface-3);
    border: 1px solid var(--vm-rand);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.vm-legende-titel {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray-500);
}

.vm-legende-punkt,
.vm-legende-eintrag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Die drei Punkte ruecken zusammen, damit sie als Skala lesbar sind und
   nicht als drei einzelne Angaben. */
.vm-legende-punkt .vm-punkt + .vm-punkt {
    margin-left: -2px;
}

.vm-legende-punkt > span:last-child {
    margin-left: 3px;
}

/* ===================================================================
   Filter, Leerzustaende, Interims-Uebersicht
   =================================================================== */



.vm-leer {
    padding: 9px 13px;
    text-align: center;
    font-size: 13px;
}

.vm-leer .bi {
    margin-right: 6px;
}

/* Vom Filter ausgeblendete Vereine und Ligabloecke. Eigene Klasse statt
   d-none, damit das Skript Bootstrap-Klassen im Markup nicht anfasst. */
.vm-versteckt {
    display: none !important;
}

/* Nebenspalten der Interims-Uebersicht: auf schmalen Geraeten fallen Liga
   und Dauer weg, damit Manager, Verein und Beginn ohne Querscrollen
   lesbar bleiben. */
@media (max-width: 575.98px) {
    .vm-spalte-sm-aus {
        display: none;
    }
}

/* ===================================================================
   Nationalteams

   Eigener Block ueber die volle Breite statt einer Ligaspalte: es sind
   vierzig und mehr, und sie tragen nur einen Namen - in einer schmalen
   Spalte wuerde daraus eine sehr lange Kolonne.
   =================================================================== */

.vm-liga-breit {
    break-inside: auto;
}

.vm-liga-liste-breit {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* ===================================================================
   Hinweiszeile

   Der Hinweis ist zweifach formuliert; welcher gilt, entscheidet dieselbe
   Medienabfrage, nach der sich auch res/js/vereinsmarkt.js richtet. Ueber
   die Bildschirmbreite ginge es nicht: ein Tablet mit Maus ist breit und
   hat trotzdem einen Zeiger.

   Vorgabe ist die Mausfassung. Browser ohne (hover)-Unterstuetzung sind
   praktisch immer Zeigergeraete.
   =================================================================== */

.vm-hinweis {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
    padding: 7px 12px;
    background: color-mix(in srgb, var(--primary) 8%, var(--vm-flaeche));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.vm-hinweis .bi {
    color: var(--primary);
    flex: 0 0 auto;
}

.vm-hinweis strong {
    color: var(--text-primary);
}

.vm-nur-touch {
    display: none;
}

@media (hover: none) {
    .vm-nur-maus {
        display: none;
    }

    .vm-nur-touch {
        display: inline;
    }
}