/* PES CLASSIC CUP — Stil nach dem Vorbild von Sports-Reference-Seiten,
   Farben aus dem Menü des Spiels (PES 6 Classic Patch) übernommen und
   am Screenshot gemessen. Hintergrund bleibt auf Wunsch sjw weiß.
   Wird von scripts/pes6-seite-bauen.py nach pes6/site/stil.css kopiert.

   Die Variablennamen stammen aus der ersten Fassung; --grau ist seit der
   Umstellung ein warmes Papiergold, nicht mehr grau. */

:root {
  --dunkel:   #23120a;   /* Balken im Spielmenü */
  --braun:    #542f19;   /* Menüschrift */
  --braun-hell:#936333;
  --rot:      #6d3a14;   /* Beschriftung der Tabellenköpfe */
  --grau:     #e8d8ae;   /* Tabellenkopf, aus #d0ab68 aufgehellt */
  --grau-rand:#d8c9a4;
  --gelb:     #fbf3dc;   /* Hinweisstreifen */
  --gruen:    #2e7d32;
  --rot-bar:  #c62828;
  --gold:     #be9427;   /* aktiver Menüpunkt im Spiel */
  --gold-hell:#f4efbc;
}

* { box-sizing: border-box; }

/* iPhone/Safari: keine eigenmächtige Schriftvergrößerung langer Zellentexte
   (sjw 01.11.2026: Kutten-Kunde „welche“ am Handy viel größer). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #241a10;
  background: #fff;
}
/* Verweise durchgehend im gewohnten Linkblau (Vorgabe sjw 19.09.2026).
   Topleiste, Navigation und Seitenmenü setzen ihre Farbe selbst und
   bleiben davon unberührt. */
a { color: #0645ad; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Kopf ---------- */
/* Die dunkle Leiste ganz oben (Startseite, Turniere, Spieler, Rekorde,
   „Ich bin“) ist seit 03.10.2026 weg (sjw); „Ich bin“ steht unter der Suche. */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--grau-rand);
  flex-wrap: wrap;
  gap: 10px;
}
.kopf .marke {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--dunkel);
}
.kopf .marke span { color: var(--gold); }
/* Logo (Entwurf G, sjw 23.09.2026) aus scripts/archiv/pes6/pes6-logo-web.sh;
   der Schriftzug „Für die Ehre seit 2015" bleibt darunter stehen. */
.kopf .marke img { display: block; height: 80px; width: auto; }
/* „FÜR DIE EHRE SEIT 2015“ als Bild im Stil von CLASSIC CUP (sjw 02.10.2026,
   scripts/pes6-slogan-bauen.sh), so breit wie vorher der Text */
.kopf .marke img.slogan { height: auto; width: 212px; margin-top: 5px; }
@media (max-width: 860px) {
  .kopf .marke img { height: 60px; }
  .kopf .marke img.slogan { height: auto; width: 159px; }
}
.kopf .marke small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  color: #666;
}
.suche input {
  padding: 7px 10px;
  border: 1px solid var(--grau-rand);
  width: 260px;
  font-size: 13px;
}

/* ---------- Navigation ---------- */
nav.haupt {
  background: var(--dunkel);
  border-bottom: 2px solid var(--gold);
  padding: 0 8px;
  display: flex;
  flex-wrap: wrap;
}
nav.haupt a {
  display: block;
  padding: 9px 16px;
  color: #e3d2a6;
  font-weight: 600;
  font-size: 13px;
}
nav.haupt a:hover { background: rgba(190,148,39,.25); color: #fff; text-decoration: none; }
nav.haupt a.aktiv { background: linear-gradient(90deg, #000, rgba(0,0,0,.65)); color: var(--gold-hell); text-shadow: 0 0 6px rgba(190,148,39,.85); }

.hinweis {
  background: var(--gelb);
  border-bottom: 1px solid #e8dfae;
  padding: 7px 16px;
  font-size: 13px;
}

/* ---------- Seitengerüst ---------- */
/* 1180 → 1280 px (sjw, 24.09.2026): Tabellen mit „Ohne Tor" brauchen den
   Platz; bei Fenstern unter 1280 px (und am Handy) ändert sich nichts. */
.inhalt { padding: 16px; max-width: 1280px; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Start: zweite Reihe Ehrentafel | Titel, Überschriften auf einer Höhe (sjw 01.10.2026) */
.zweispaltig.zweite-reihe { margin-top: 16px; }
/* Start: Begrüßung „Yo Bro,“ (sjw 01.10.2026) */
.begruessung { border-left: 4px solid #d99b00; background: #fbf6e6; padding: 10px 16px;
  margin: 0 0 18px; font-size: 15px; max-width: 900px; }
/* Abstand zwischen den Absätzen = eine Leerzeile (sjw diktiert 23.10.2026) */
.begruessung p { margin: 0 0 1.5em; }
.begruessung p:last-child { margin-bottom: 0; }
.mit-menue { display: grid; grid-template-columns: 170px 1fr; gap: 16px; }
/* min-width: 0 -- ohne das waechst die Inhaltsspalte mit der
   breitesten Tabelle und der Rollbalken im .tabellenrahmen
   kommt nie zum Zug. */
.mit-menue > *, .zweispaltig > * { min-width: 0; }   /* sonst wächst die Spalte mit der Tabelle und schneidet sie am Handy ab (Start „Alle Turniere“, sjw 03.10.2026) */

h1 { font-size: 26px; margin: 0 0 6px; }
h2 {
  font-size: 17px;
  color: var(--braun);
  border-bottom: 1px solid var(--braun-hell);
  padding-bottom: 3px;
  margin: 22px 0 10px;
}
h2:first-child { margin-top: 0; }
h3 { font-size: 15px; margin: 16px 0 6px; color: #333; }

/* ---------- Kopfblock einer Seite ---------- */
.kopfblock {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border-bottom: 1px solid var(--grau-rand);
  padding-bottom: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.kopfblock .wappen {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--braun);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700;
  flex: none;
}
/* Spielerkopf: der Lederball als Hintergrund, darauf der Name in
   Weiss. Der Schatten haelt die Schrift auf dem hellen Leder lesbar. */
.kopfblock .wappen-ball {
  width: 116px; height: 116px;
  flex: none;
  background: url(ball.png) center/contain no-repeat;
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.1;
  padding: 0 12px;
  box-sizing: border-box;
  font-weight: 700;
  text-shadow:
    1.50px 0.00px 0 var(--braun),
    1.39px 0.57px 0 var(--braun),
    1.06px 1.06px 0 var(--braun),
    0.57px 1.39px 0 var(--braun),
    0.00px 1.50px 0 var(--braun),
    -0.57px 1.39px 0 var(--braun),
    -1.06px 1.06px 0 var(--braun),
    -1.39px 0.57px 0 var(--braun),
    -1.50px 0.00px 0 var(--braun),
    -1.39px -0.57px 0 var(--braun),
    -1.06px -1.06px 0 var(--braun),
    -0.57px -1.39px 0 var(--braun),
    -0.00px -1.50px 0 var(--braun),
    0.57px -1.39px 0 var(--braun),
    1.06px -1.06px 0 var(--braun),
    1.39px -0.57px 0 var(--braun),
    0 2px 4px rgba(0, 0, 0, .45);
}
.kopfblock .wappen-ball.kurz   { font-size: 21px; }
.kopfblock .wappen-ball.mittel { font-size: 18px; }
.kopfblock .wappen-ball.lang     { font-size: 15px; }
.kopfblock .wappen-ball.sehrlang { font-size: 13px; }
.kopfblock .wappen-ball.winzig   { font-size: 11px; }
.kopfblock .wappen-ball span { display: block; }

.kopfblock .daten { flex: 1 1 320px; font-size: 13px; }
.kopfblock .daten b { color: #000; }
.auszeichnungen { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.abzeichen {
  background: var(--braun);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 3px;
  white-space: nowrap;
}
.abzeichen.grau { background: #d8d8d8; color: #333; }

/* ---------- Kennzahlenleiste ---------- */
.kennzahlen {
  display: flex;
  /* 26 px sprengten die Leiste ab der 10. Kennzahl; 22 → 16 px seit
     T/Sp und G/Sp in der Leiste stehen (24.09.2026) */
  gap: 16px;
  border-top: 1px solid var(--grau-rand);
  border-bottom: 1px solid var(--grau-rand);
  padding: 10px 2px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.kennzahlen .feld { text-align: left; }
.kennzahlen .feld .titel {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--rot);
  font-weight: 700;
  text-transform: uppercase;
}
.kennzahlen .feld .wert { font-size: 19px; font-weight: 700; }

/* ---------- Tabellen ---------- */
/* Rahmen um jede Tabelle: breite Tabellen (viele Quoten-Spalten)
   bekommen einen waagerechten Rollbalken, statt rechts abgeschnitten
   zu werden. */
.tabellenrahmen { max-width: 100%; overflow-x: auto; }
table.stat {
  border-collapse: collapse;
  width: auto;              /* Spalten nach Inhalt, nicht auf volle Breite gestreckt */
  max-width: 100%;
  font-size: 13px;
  margin-bottom: 8px;
}
table.stat th {
  background: var(--grau);
  color: var(--rot);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid var(--grau-rand);
  padding: 4px 5px;    /* 6 px sprengten die Tabelle "Als Duo" */
  text-align: right;
  white-space: nowrap;
}
table.stat th.links, table.stat td.links { text-align: left; }
table.stat td {
  border: 1px solid #e3e3e3;
  padding: 4px 5px;
  text-align: right;
  white-space: nowrap;
}
table.stat tbody tr:nth-child(odd) { background: #fbf7ed; }
table.stat tbody tr:hover { background: #f6e8c4; }
table.stat tr.hervor { font-weight: 700; background: #fdf6e3 !important; }
table.stat caption {
  text-align: left;
  font-weight: 700;
  color: var(--braun);
  padding-bottom: 4px;
}


/* ---------- Seitenmenü ---------- */
.seitenmenue { border: 1px solid var(--grau-rand); font-size: 13px; }
.seitenmenue .kopfzeile {
  background: var(--grau);
  padding: 7px 10px;
  font-weight: 700;
}
.seitenmenue a {
  display: block;
  padding: 6px 10px;
  border-top: 1px solid #eee;
  color: #0645ad;
}
.seitenmenue a.aktiv { font-weight: 700; color: #111; background: #faf6ef; }

/* Sprungnavigation unter dem ausgewaehlten Eintrag */
.seitenmenue .untermenue { background: #faf6ef; padding: 2px 0 6px; }
.seitenmenue .untermenue a {
  border-top: 0;
  padding: 3px 10px 3px 22px;
  font-size: 12px;
  color: #6b4a2a;
}
.seitenmenue .untermenue a::before { content: "› "; color: #a98a5a; }
.seitenmenue .untermenue a:hover { background: #f3e9d6; }

/* Sprungleiste: bleibt beim Scrollen am oberen Rand stehen, damit man
   von ueberall in einen anderen Abschnitt springen kann. */
.sprungleiste {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 2px;
  background: #fbf7ed;
  border-top: 1px solid var(--grau-rand);
  border-bottom: 1px solid var(--braun-hell);
  padding: 5px 4px;
  margin: 0 0 12px;
}
.sprungleiste a {
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #6b4a2a;
  border-radius: 3px;
}
.sprungleiste a:hover { background: #efe2c8; text-decoration: none; }

/* Sprungziel nicht unter der klebenden Leiste verschwinden lassen */
h2[id] { scroll-margin-top: 48px; }
html { scroll-behavior: smooth; }

/* ---------- Fuß ---------- */
footer {
  margin-top: 30px;
  border-top: 1px solid var(--grau-rand);
  padding: 12px 16px 30px;
  font-size: 12px;
  color: #666;
}

.hinweisbox {
  background: #fdfaf2;
  border-left: 3px solid var(--braun-hell);
  padding: 8px 12px;
  font-size: 12.5px;
  color: #444;
  margin: 10px 0;
}

@media (max-width: 860px) {
  .zweispaltig, .mit-menue { grid-template-columns: 1fr; }
}

/* ---------- Ergebnisbalken (groß, je Mannschaft) ---------- */
.balken-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
  margin: 8px 0 20px;
}
.balken-karte {
  border: 1px solid var(--grau-rand);
  background: #fff;
}
.balken-karte .karte-kopf {
  background: #f2f2f2;
  border-bottom: 1px solid var(--grau-rand);
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 700;
}
.balken-karte .karte-kopf .rang {
  display: inline-block;
  min-width: 20px;
  margin-right: 6px;
  padding: 0 5px;
  background: var(--braun);
  color: #fff;
  border-radius: 3px;
  font-size: 11px;
  text-align: center;
}
.balken-karte .karte-kopf .bilanz {
  float: right;
  font-weight: 400;
  color: #666;
  font-size: 12px;
}
.balken-karte .karte-kopf a { color: var(--braun); }
.balken {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 170px;
  margin: 0;
  padding: 12px 10px 0;
  position: relative;
  overflow-x: auto;
}
.balken .spiel {
  position: relative;
  width: 34px;
  flex: 0 0 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: help;
}
.balken .spiel:hover .bar { filter: brightness(1.25); }
.balken .bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
}
.balken .bar.sieg { background: var(--gruen); align-self: flex-end; }
.balken .bar.niederlage { background: var(--rot-bar); border-radius: 0 0 2px 2px; }
.balken .bar.remis { background: #9a9a9a; height: 5px !important; border-radius: 2px; }
.balken .spiel .oben { display: flex; align-items: flex-end; height: 50%; }
.balken .spiel .unten { display: flex; align-items: flex-start; height: 50%; }
.balken .spiel .zahl {
  position: absolute;
  left: 0; right: 0;
  font-size: 11px;
  text-align: center;
  color: #444;
  white-space: nowrap;
}
.balken .spiel .zahl .ne { font-size: 9px; font-weight: 400; color: #666; }  /* n.E./n.V. */
.balken .spiel .zahl.oben-an { bottom: calc(50% + 2px); }
.balken .spiel .zahl.unten-an { top: calc(50% + 2px); }
.balken-karte .karte-fuss {
  border-top: 1px solid #eee;
  padding: 4px 10px 6px;
  font-size: 11.5px;
  color: #666;
}
.balken-legende {
  font-size: 12.5px;
  color: #555;
  margin: 4px 0 10px;
}
.balken-legende i {
  display: inline-block;
  width: 11px; height: 11px;
  margin: 0 3px 0 10px;
  vertical-align: -1px;
}
.balken-legende i.s { background: var(--gruen); }
.balken-legende i.n { background: var(--rot-bar); }
.balken-legende i.u { background: #9a9a9a; }

/* ---------- Sortieren und Filtern ---------- */
table.stat th.sortierbar {
  cursor: pointer;
  user-select: none;
  padding-right: 14px;
  position: relative;
}
table.stat th.sortierbar:hover { background: #dcdcdc; }
table.stat th.sortierbar::after {
  content: "\2195";
  position: absolute;
  right: 3px;
  color: #b0b0b0;
  font-size: 10px;
}
table.stat th.auf::after { content: "\25B2"; color: var(--braun); }
table.stat th.ab::after  { content: "\25BC"; color: var(--braun); }


/* ---------- Flaggen ---------- */
.fl {
  display: inline-block;
  width: 21px;
  height: 14px;
  margin-right: 5px;
  vertical-align: -2px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(0,0,0,.25);
  box-sizing: border-box;
}
.kopfblock .wappen .fl {
  width: 46px; height: 31px; margin: 0; vertical-align: 0;
}
.balken-karte .karte-kopf .fl { margin-right: 6px; }

/* ---------- Ergebnis, Zusätze, Hinweiszeile ---------- */
table.stat td .regulaer { color: #555; font-weight: 400; }
table.stat td .zusatz {
  color: #111;
  font-size: 11px;
  font-weight: 700;

  letter-spacing: .3px;
}
table.stat td .ohne { color: #999; }
table.stat td .spielhinweis {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: #666;
  white-space: normal;
  text-align: right;
}
h1 .fl { width: 30px; height: 20px; margin-right: 9px; vertical-align: -1px; }

/* ---------- Abschlusstabelle: Gold, Silber, Bronze ---------- */
table.stat tr.rang1 { background: #fdf6d8 !important; }
table.stat tr.rang2 { background: #f2f2f2 !important; }
table.stat tr.rang3 { background: #f8ece0 !important; }
table.stat tr.rang1 td { border-color: #e8d48a; }
table.stat tr.rang2 td { border-color: #d8d8d8; }
table.stat tr.rang3 td { border-color: #e3c9ac; }
table.stat th.mitte, table.stat td.mitte { text-align: center; }
table.stat td.mitte .spielhinweis { text-align: center; }


/* Platz 1-3: Zahl, dahinter ein Pokal in Gold, Silber, Bronze */
.pokal {
  display: inline-block;
  width: 15px;
  height: 21px;
  margin-left: 7px;
  vertical-align: -8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.pokal.p1 { background-image: url("pokal-gold.svg"); }
.pokal.p2 { background-image: url("pokal-silber.svg"); }
.pokal.p3 { background-image: url("pokal-bronze.svg"); }
/* Mannschaftsübersicht: Pokal VOR dem Namen (Turniersieger, sjw 24.09.2026) */
/* Weltkarte über der Mannschaftsübersicht (sjw 24.09.2026). Auf dem Handy
   seitlich wischbar statt winzig geschrumpft. */
.diagramm.weltkarte { margin: 0 0 30px; }   /* muss nach Spezifität über .diagramm { margin: 0 } stehen */
.weltkarte svg { display: block; width: 100%; height: auto; max-width: 960px; }
.weltkarte .karte-name { font-size: 12px; fill: #0645ad; paint-order: stroke;
  stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.weltkarte a:hover .karte-name { text-decoration: underline; }
@media (max-width: 860px) {
  .weltkarte .karte-rahmen { overflow-x: auto; }
  .weltkarte svg { min-width: 720px; }
}
/* Grafiken der Advanced Stats: auf dem Handy in Originalgröße und seitlich
   wischbar statt auf Mini-Schrift geschrumpft (sjw 25.09.2026); den Hinweis
   darunter setzt tabellen.js nur, wenn die Grafik wirklich breiter ist. */
.grafikrahmen { overflow-x: auto; }
/* Balkengrafiken gibt es zweimal: breit (PC) und schmal (Handy, passt
   ohne Wischen). */
.nur-handy { display: none; }
@media (max-width: 860px) {
  .diagramm .grafikrahmen svg { max-width: none; }
  .nur-pc { display: none; }
  .nur-handy { display: block; }
}
.pokal.vorn { width: 14px; height: 19px; margin: 0 6px 0 0; vertical-align: -8px; }

/* Balkenkarten der Plätze 1-3 in den Farben der Abschlusstabelle */
.balken-karte.rang1 { border-color: #e8d48a; }
.balken-karte.rang2 { border-color: #cfcfcf; }
.balken-karte.rang3 { border-color: #e3c9ac; }
.balken-karte.rang1 .karte-kopf { background: #fdf6d8; border-bottom-color: #e8d48a; }
.balken-karte.rang2 .karte-kopf { background: #f2f2f2; border-bottom-color: #cfcfcf; }
.balken-karte.rang3 .karte-kopf { background: #f8ece0; border-bottom-color: #e3c9ac; }
.balken-karte.rang1 .karte-kopf .rang { background: #d4a017; color: #3d2f08; }
.balken-karte.rang2 .karte-kopf .rang { background: #a8a8a8; color: #2f2f2f; }
.balken-karte.rang3 .karte-kopf .rang { background: #b5702f; color: #fff; }

/* Siegermannschaft im Spielplan, Torschützenkönig in der Torliste */
table.stat td .sieger a, table.stat td .sieger { font-weight: 700; }
table.stat tr.fett td, table.stat tr.fett td a { font-weight: 700; }

/* ---------- Kutten-Kunde: die Patches ---------- */
/* Die Fotos sind unterschiedlich groß (der Stern misst 103 px, der
   Chevron 300). Deshalb legt nicht die Datei die Größe fest, sondern
   eine feste Anzeigehöhe. */
.patchreihe { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 18px; }
.patch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--grau-rand);
  border-radius: 4px;
  background: #fdfaf2;
}
.patch:hover { border-color: var(--braun-hell); background: var(--gelb); }
.patch .patchbild { height: 42px; width: auto; display: block; }
.patchzahl { font-size: 13px; font-weight: 700; color: var(--rot); }
.patch-leer, .patch-hinweis { font-size: 12.5px; color: #666; margin: 6px 0; }

.patchbloecke { display: flex; flex-direction: column; gap: 4px; }
.patchblock {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border-bottom: 1px solid var(--grau-rand);
  padding: 16px 2px;
}
.patchblock:last-child { border-bottom: none; }
.patchbild-gross {
  flex: none;
  width: 130px;
  display: flex;
  justify-content: center;
}
.patchbild-gross .patchbild { max-width: 130px; max-height: 110px; width: auto; height: auto; }
.patchtext { flex: 1 1 320px; }
.patchtext h3 { margin: 0 0 4px; font-size: 17px; }
.patchtext p { margin: 6px 0; font-size: 13.5px; }
.patchbedingung {
  display: inline-block;
  background: var(--braun);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 3px;
}
.patch-mehrfach { font-size: 12px; color: var(--rot); margin-top: 5px; font-weight: 600; }
.patchtraeger { color: #333; }
.patch-keiner { color: #777; font-weight: 600; }

/* ---------- Länderwappen der Turniersieger ---------- */
/* Gezeichnet aus der vorhandenen Flaggen-SVG: Schildform per clip-path,
   Landesname oben auf dunklem Grund. So entsteht für jedes Land ein
   Wappen, ohne dass ein Foto gebraucht wird. */
.wappenstueck {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 5px 2px 0;
}
.wappen {
  position: relative;
  display: block;
  width: 62px;
  height: 74px;
  background: #151b2f;
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%);
}
.wappen-name {
  position: absolute;
  top: 3px; left: 0; right: 0;
  text-align: center;
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
}
.wappen-flagge {
  position: absolute;
  left: 5px; right: 5px; top: 16px; bottom: 5px;
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 100% 0, 100% 52%, 50% 100%, 0 52%);
}
.wappen-jahr { font-size: 10px; color: #555; font-weight: 600; }
.patch-wappen { padding: 6px; gap: 0; flex-wrap: wrap; }
table.stat td .wappenstueck { margin: 0; }

/* ---------- Erfolge Jahr für Jahr (Spielerseiten) ---------- */
/* Die Farben sind dieselben wie in der Abschlusstabelle der Turniere:
   Gold für Platz 1, Silber für 2, Bronze für 3. */
.erfolge {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 12px 0 4px;
}
.erfolg-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.erfolg-was {
  flex: none;
  min-width: 150px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rot);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.erfolg-jahre { display: flex; gap: 5px; flex-wrap: wrap; }
.erfolg-jahre .abzeichen { font-size: 12px; padding: 3px 10px; }
a.abzeichen { text-decoration: none; }
.abzeichen.gold   { background: #d4a017; color: #3d2f08; }
.abzeichen.silber { background: #a8a8a8; color: #2f2f2f; }
.abzeichen.bronze { background: #b5702f; color: #fff; }
.abzeichen.kanone { background: var(--braun); color: #fff; }
.abzeichen.patchjahr { background: #e8dcc0; color: #3b2a16; }
a.abzeichen:hover { filter: brightness(1.08); }

/* Der Erfolgsblock sitzt im Auszeichnungsbereich des Kopfblocks und
   richtet sich deshalb nach rechts aus. */
.auszeichnungen .erfolge { margin: 8px 0 0; align-items: flex-end; width: 100%; }
.auszeichnungen .erfolg-zeile { justify-content: flex-end; gap: 8px; }
.auszeichnungen .erfolg-was { min-width: 0; text-align: right; }
.auszeichnungen .erfolg-jahre { justify-content: flex-end; }
.kopfblock .auszeichnungen { flex: 1 1 380px; align-items: flex-end; }

/* Im Kopfblock teilen sich Daten und Erfolge den Platz. Damit links
   nichts umbricht, sind die Balken hier kleiner als im Fließtext. */
.kopfblock .daten { flex: 1 1 250px; }
.kopfblock .auszeichnungen { flex: 0 1 auto; max-width: 56%; }
.auszeichnungen .erfolg-was { font-size: 10.5px; letter-spacing: 0.2px; }
.auszeichnungen .erfolg-jahre .abzeichen {
  font-size: 11px;
  padding: 2px 7px;
  font-weight: 700;
}
.auszeichnungen .erfolg-zeile { gap: 7px; }
.auszeichnungen .erfolg-jahre { gap: 4px; }
.nichtumbrechen { white-space: nowrap; }

/* Kleines Patch-Bild vor der Erfolgszeile. Steht vor dem Etikett, also
   bei rechtsbündigem Block ganz links; die Breite ist fest, damit die
   Etiketten untereinander bleiben. */
.erfolg-symbol {
  flex: none;
  width: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  order: -1;
}
.erfolg-symbol .patchbild { max-height: 20px; max-width: 26px; width: auto; height: auto; display: block; }

/* ---------- Diagramme der Spielerseiten ---------- */
.diagramme {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px 26px;
  margin: 14px 0 6px;
}
.diagramm { margin: 0; }
.diagramm.breit { grid-column: 1 / -1; }
.diagramm figcaption {
  font-size: 11px;
  font-weight: 700;
  color: var(--rot);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--grau-rand);
  padding-bottom: 4px;
}
.diagramm svg { display: block; max-width: 100%; }
.diagramm text.achse { font: 600 11px "Helvetica Neue", Helvetica, Arial, sans-serif; fill: #6b5c45; }
.diagramm text.blass { fill: #bdb4a2; }
.diagramm text.hell { fill: #fff; }   /* Zahl im Balken (Schmetterling, Rekorde) */
/* Torjäger-Raster (Rekorde, sjw 27.09.2026): Spieler × Turnier, Farbe = Tore */
table.raster { border-collapse: collapse; font-size: 12px; margin: 6px 0 2px; }
table.raster th, table.raster td {
  border: 1px solid #e3dccb; padding: 3px 6px; text-align: center;
  white-space: nowrap; min-width: 30px;
}
table.raster thead th { background: #f3ecdc; font-weight: 600; }
table.raster th.kreuz-ecke { text-align: left; }
table.raster th.kreuz-name {
  background: #f3ecdc; text-align: left; font-weight: 600; padding: 3px 8px;
}
table.raster th.kreuz-name a { color: #2b2b2b; }
table.raster td.raster-leer { background: #faf7f0; color: #c3b9a2; }
table.raster td.raster-summe { font-weight: 700; background: #f3ecdc; }
table.raster td.raster-aus { background: #fff; border-color: transparent; }  /* Ergebnis-Raster: unmöglich */
/* Spalte „Ausgang“ bei Revanche (Rekorde): farbige Marke wie im Balken darüber */
.ausgang-marke {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font-size: 12px; line-height: 1.5; white-space: nowrap;
}
.diagramm-fuss { font-size: 11.5px; color: #6b6255; margin: 4px 0 0; }
.kuchen-block { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kuchen-legende { font-size: 12.5px; min-width: 150px; }
.kuchen-zeile { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.kuchen-zeile b { margin-left: auto; }
.kuchen-farbe {
  width: 11px; height: 11px; border-radius: 2px; flex: none;
  outline: 1px solid rgba(0, 0, 0, 0.12);
}
.kuchen-anteil { color: #7a7060; min-width: 52px; text-align: right; }  /* „33.33 %“, sjw 21.10.2026 */
.diagramm a:hover circle, .diagramm a:hover rect { filter: brightness(1.12); }

/* Unterüberschrift für die Abschnittstabellen (Gruppenphase/Endrunde) */
h3.abschnitt {
  font-size: 13px;
  font-weight: 700;
  color: var(--rot);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 6px;
}

/* Entwürfe „Spiele je Turnier" */
.minikuchen-reihe { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0; }
.minikuchen { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.minikuchen-jahr { font-size: 11px; font-weight: 700; color: #6b5c45; }
.minikuchen-zahl { font-size: 10.5px; color: #8a8072; }
.minilegende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; margin: 6px 0 0; }
.minilegende .kuchen-zeile { padding: 0; }
.diagramm text.stapelzahl {
  font: 700 10.5px "Helvetica Neue", Helvetica, Arial, sans-serif;
  fill: #fff;
}
.best-jahr { color: #7a7060; }

/* ---------- Ausklappbare Zeilen ---------- */
table.stat tr.aufklappbar { cursor: pointer; }
table.stat tr.aufklappbar td:first-child::after {
  content: " \25B8";            /* Dreieck nach rechts */
  color: var(--braun-hell);
  font-size: 10px;
}
table.stat tr.aufklappbar.offen td:first-child::after {
  content: " \25BE";            /* Dreieck nach unten */
}
table.stat tr.aufklappbar:hover td { background: var(--gelb); }
table.stat tr.detailzeile { display: none; }
table.stat tr.detailzeile.offen { display: table-row; }
table.stat tr.detailzeile > td {
  background: #fdfaf2;
  padding: 8px 10px;
  border-top: none;
}
.einzelspiele { width: 100%; border-collapse: collapse; font-size: 12px; }
.einzelspiele td { padding: 2px 8px 2px 0; vertical-align: top; }
.einzelspiele td.erg { font-weight: 700; white-space: nowrap; }
.einzelspiele td.jahr { white-space: nowrap; }
.einzelspiele tr.sieg td.erg { color: var(--gruen); }
.einzelspiele tr.niederlage td.erg { color: var(--rot-bar); }
.einzelspiele tr.unentschieden td.erg { color: #6b6255; }
.einzelspiele .reg { color: #8a8072; font-weight: 400; }

/* ---------- Teilnahme-Gitter (Startseite) ---------- */
/* Die Zelle trägt die Platzierung in den Farben der Abschlusstabelle.
   Ein Punkt statt einer Zahl heißt: in diesem Jahr nicht dabei. */
.gz {
  display: inline-block; min-width: 26px; padding: 1px 4px;
  border-radius: 3px; font-size: 12px; text-decoration: none;
  color: #2b2b2b; border: 1px solid transparent;
}
a.gz:hover { border-color: #8a7a55; }
.gz1 { background: #fdf6d8; border-color: #e8d48a; font-weight: 700; }
.gz2 { background: #f2f2f2; border-color: #d8d8d8; }
.gz3 { background: #f8ece0; border-color: #e3c9ac; }
.gz4 { background: #e8f1e8; border-color: #cfe0cf; }
.gz-ohne { color: #c3b9a2; }

/* ---------- Das große Kreuz ---------- */
/* 20 Spalten: die Kopfzeile steht senkrecht, sonst passt kein Name in
   eine Spalte von 34 px. */
table.kreuz { border-collapse: collapse; font-size: 10px; margin: 6px 0 2px; }
table.kreuz th, table.kreuz td {
  border: 1px solid #e3dccb; padding: 2px 3px; text-align: center;
  white-space: nowrap;
}
table.kreuz th.kreuz-ecke { background: #f3ecdc; text-align: left; }
table.kreuz th.kreuz-dreh {
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: #f3ecdc; font-size: 11px; padding: 4px 2px; font-weight: 600;
}
table.kreuz th.kreuz-name {
  background: #f3ecdc; text-align: left; font-size: 12px;
  padding: 2px 6px; font-weight: 600;
}
table.kreuz th.kreuz-dreh a, table.kreuz th.kreuz-name a { color: #2b2b2b; }
table.kreuz td.kreuz-selbst { background: #d9d2c2; }
table.kreuz td.kreuz-leer { background: #faf7f0; color: #c3b9a2; }
table.kreuz td.kq0 { background: #e5b4b4; }
table.kreuz td.kq1 { background: #f0d5d0; }
table.kreuz td.kq2 { background: #f0ece2; }
table.kreuz td.kq3 { background: #d6e6d2; }
table.kreuz td.kq4 { background: #aecfa6; }
.kreuz-probe {
  width: 14px; height: 14px; border-radius: 3px; border: 1px solid #ddd4c0;
  display: inline-block;
}
.kreuz-probe.kq0 { background: #e5b4b4; }
.kreuz-probe.kq1 { background: #f0d5d0; }
.kreuz-probe.kq2 { background: #f0ece2; }
.kreuz-probe.kq3 { background: #d6e6d2; }
.kreuz-probe.kq4 { background: #aecfa6; }
table.stat td b.ja { color: #2e7d32; }

/* Spalte "Platzierung" der Duo-Tabellen: einzige Zelle, die umbrechen
   darf. Ohne die Deckelung bliebe sie einzeilig, weil das Tabellen-
   Layout der Spalte so viel Platz gibt, wie ihr Inhalt verlangt. */
.platzliste { display: inline-block; white-space: normal; max-width: 184px; }

/* Tabellenverlauf: eine Linie hervorheben, die übrigen blassen ab */
.verlauf .verlaufsname { fill: #3b2a16; }
.verlauf .verlaufslinie.sieger .verlaufsname { font-weight: 700; }
.verlauf svg:has(.verlaufslinie:hover) .verlaufslinie .strich { opacity: .3; }
.verlauf .verlaufslinie:hover .strich { opacity: 1 !important; stroke: #3b2a16; stroke-width: 3; }
.verlauf .verlaufslinie:hover circle { fill: #3b2a16; }
.verlauf .verlaufslinie { cursor: default; }

/* Turnierseite, 22.09.2026: Patches je Spieler im Abschnitt „Spieler" */
.patchliste { display: flex; flex-wrap: wrap; gap: 4px 14px; }
a.patchchip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: inherit; }
a.patchchip:hover span { text-decoration: underline; }
.patchchip .patchbild { height: 22px; max-width: 30px; width: auto; display: block; }
.wappen.mini { width: 19px; height: 23px; flex: none; }
.wappen.mini .wappen-flagge { left: 2px; right: 2px; top: 2px; bottom: 2px; }

/* Turnierseite, 22.09.2026 (zweite Runde) */
/* Verlauf der Gruppenphase: SSNUU in gleichbreiter Schrift */
table.stat td .folge { font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace; letter-spacing: 1px; }
/* Kreuztabelle der Gruppenphase: Ergebnisse statt Bilanzen */
/* Angeglichen an „Kopf an Kopf" (sjw, 22.09.2026): ganze Zelle farbig,
   normale Schrift. Etwas größer, weil hier nur 4 bis 7 Spalten stehen. */
table.kreuz.ergebniskreuz { font-size: 12px; }
table.kreuz.ergebniskreuz td { padding: 3px 6px; min-width: 34px; }
/* Spaltenkopf: waagerecht gesetzt, als Ganzes gedreht (kein writing-mode) */
table.kreuz.ergebniskreuz th.kreuz-dreh { writing-mode: horizontal-tb; transform: none;
  position: relative; padding: 0; width: 34px; vertical-align: bottom; }
.ergebniskreuz .dreh-inhalt { position: absolute; left: 50%; bottom: 8px;
  transform-origin: left bottom; transform: rotate(-90deg) translateY(50%);
  white-space: nowrap; font-size: 12px; font-weight: 600; }
.ergebniskreuz .dreh-inhalt a { color: #2b2b2b; }
/* Flagge im gedrehten Kopf zurückdrehen, sonst liegen die Streifen quer (Italien wirkte
   wie Ungarn — Fehlersuche sjw 03.10.2026). Nur die Flagge, die Schrift bleibt gedreht. */
.ergebniskreuz .dreh-inhalt .fl { transform: rotate(90deg); }
table.kreuz.ergebniskreuz td.zwei { padding: 0; }
.erg-zwei { display: flex; height: 100%; }
.erg-zwei .erg { flex: 1; padding: 3px 5px; }
.erg-zwei .erg + .erg { border-left: 1px solid #fff; }
.erg.kq0 { background: #e5b4b4; } .erg.kq2 { background: #f0ece2; } .erg.kq4 { background: #aecfa6; }
/* Weg des Meisters (sjw 01.10.2026, Vorschau scripts/pes6-vorschau-ablauf.sh Variante 1) */
.weg { display: flex; align-items: stretch; flex-wrap: wrap; row-gap: 10px; margin: 10px 0 4px; }
.weg-kasten { border: 1px solid #d8ccb3; border-radius: 6px; background: #fffdf8; padding: 8px 12px;
  min-width: 150px; max-width: 280px; }
.weg-ko { background: #faf6ec; }
.weg-titel { display: flex; gap: 10px; align-items: center; background: #fbf6e6; border-color: #d99b00; }
.pokal.weg-pokal { width: 34px; height: 44px; margin: 0; flex: none; }
.weg-runde { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a5a2b; font-weight: 700; }
.weg-haupt { font-size: 17px; font-weight: 700; margin: 2px 0; white-space: nowrap; }
.weg-haupt .regulaer, .weg-haupt .zusatz { font-size: 13px; font-weight: 400; }
.weg-gegner, .weg-klein { font-size: 12.5px; color: #4a3f30; }
.weg-klein { color: #7a7060; }
.weg-pfeil { align-self: center; width: 34px; height: 2px; background: #b8a888; position: relative;
  margin: 0 8px 0 4px; flex: none; }
.weg-pfeil::after { content: ""; position: absolute; right: -6px; top: -5px; border: 6px solid transparent;
  border-left: 8px solid #b8a888; border-right: 0; }
.weg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.weg-chip { font-size: 11.5px; padding: 1px 6px 1px 4px; border-radius: 3px; color: #fff; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; }
.weg-chip .fl { margin: 0; }
.weg-s { background: #2e7d32; } .weg-u { background: #9a9a9a; color: #1f1a12; } .weg-n { background: #c62828; }
@media (max-width: 860px) {
  .weg { flex-direction: column; align-items: flex-start; }
  .weg-pfeil { width: 2px; height: 16px; margin: 2px 0 8px 22px; align-self: flex-start; }
  .weg-pfeil::after { right: -5px; top: auto; bottom: -7px; border: 6px solid transparent;
    border-top: 8px solid #b8a888; border-bottom: 0; }
}
/* Rekorde „Von 20 Spielern“: Männchen-Piktogramm (sjw 01.10.2026, Vorschau
   scripts/pes6-vorschau-maennchen.sh Variante 3) */
.xv-zeile { display: flex; align-items: center; gap: 14px; padding: 6px 0; border-bottom: 1px solid #eee6d4; }
.xv-zahl { width: 64px; flex: none; font-size: 20px; font-weight: 700; text-align: right; }
.xv-zahl small { font-size: 11px; font-weight: 400; color: #7a7060; }
.xv-maenner { display: flex; gap: 2px; flex: none; }
.xv-mann svg { display: block; }
.xv-mann:hover svg { filter: brightness(1.15); }
.xv-text { font-size: 14px; }
@media (max-width: 860px) {
  .xv-zeile { flex-wrap: wrap; gap: 4px 10px; }
  .xv-maenner { order: 3; display: grid; grid-template-columns: repeat(10, 18px); gap: 4px 6px; }
}
/* Startseite „Die Seite aufs Handy legen“ (sjw 01.10.2026) */
.handy-anleitung { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px; margin: 8px 0 14px; }
.handy-karte { border: 1px solid #d8ccb3; border-radius: 6px; background: #fffdf8; padding: 10px 14px; }
.handy-karte h3 { margin: 0 0 6px; font-size: 15px; color: #8a5a2b; }
.handy-karte ol { margin: 0; padding-left: 20px; font-size: 14px; }
.handy-karte li { margin-bottom: 4px; }
.handy-hinweis { margin: 8px 0 0; font-size: 12.5px; font-style: italic; color: #7a7060; }
/* Turnierbaum der Endrunde */
.turnierbaum { display: flex; align-items: center; gap: 0; margin: 10px 0 16px; flex-wrap: wrap; }
.baum-hf { display: flex; flex-direction: column; gap: 22px; }
.baum-verbinder { align-self: stretch; width: 34px; position: relative; }
.baum-verbinder::before { content: ""; position: absolute; left: 0; right: 50%;
  top: 25%; bottom: 25%; border: 2px solid #c9b88f; border-left: 0; }
.baum-verbinder::after { content: ""; position: absolute; left: 50%; right: 0;
  top: 50%; border-top: 2px solid #c9b88f; }
.baum-finale .baum-box { border-color: var(--gold, #be9427); border-width: 2px; }
.baum-neben { display: flex; flex-direction: column; gap: 12px; margin-left: 34px; }
.baum-box { width: 260px; border: 1px solid #d8c9a4; border-radius: 4px; background: #fff; font-size: 13px; }
.baum-titel { background: #f3ecdc; padding: 3px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: #5b4526; }
.baum-zusatz { float: right; text-transform: none; }
.baum-zeile { display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; border-top: 1px solid #eee4cf; gap: 8px; }
.baum-zeile.sieger { background: #fbf6e6; }
.baum-zeile.sieger .baum-name a { font-weight: 700; }
.baum-name { white-space: nowrap; }
.baum-team { display: flex; flex-direction: column; }
.baum-leute { font-size: 11px; color: #6b6255; }
.baum-leute a { color: #6b6255; }
.baum-tore { font-weight: 700; font-size: 15px; white-space: nowrap; }
.baum-elf { font-size: 11px; font-weight: 400; color: #555; }
.baum-hinweis { font-size: 11px; color: #6b6255; padding: 3px 8px; border-top: 1px solid #eee4cf; }
.baum-zeile.leer .baum-team { color: #aaa; }
@media (max-width: 860px) {
  .turnierbaum { display: block; }
  .baum-verbinder { display: none; }
  .baum-hf, .baum-neben { gap: 10px; margin: 0; }
  .baum-box { width: auto; margin: 0 0 10px; }
}

/* Spielverlauf-Karten: kleiner Kuchen neben den Balken (22.09.2026) */
.karte-inhalt { display: flex; align-items: center; }
.karte-inhalt .balken { flex: 1 1 auto; min-width: 0; }
/* Neben dem Kuchen bleiben bei drei Karten je Reihe nur ~220 px: bei 6–7 Spielen
   scrollte der Balkenbereich (Firefox-Leisten, letzter Balken abgeschnitten — sjw
   01.10.2026, 22:19). Die Balken werden darum schmaler statt zu scrollen. */
.karte-inhalt .balken { gap: 5px; }
.karte-inhalt .balken .spiel { flex: 1 1 34px; width: auto; max-width: 34px; min-width: 20px; }
.karte-kuchen { flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 8px 10px 8px 4px; }
.karte-kuchen svg { display: block; }
.karte-kuchen .kuchen-legende { font-size: 11px; min-width: 104px; }
.karte-kuchen .kuchen-zeile { gap: 5px; padding: 1px 0; }
.karte-kuchen .kuchen-farbe { width: 9px; height: 9px; }
.karte-kuchen .kuchen-anteil { min-width: 46px; }
/* Handy: Kuchen unter die Balken, Legende daneben */
@media (max-width: 860px) {
  .karte-inhalt { flex-wrap: wrap; }
  .karte-kuchen { flex-direction: row; width: 100%; justify-content: center; gap: 14px; }
}

/* === HANDY-ANSICHT ANFANG (sjw, 20.09.2026) ================= */
/* Alles hier drin gilt NUR unter 860 px Fensterbreite. Am PC wird
   der ganze Block vom Browser übergangen - die Ansicht dort bleibt
   Pixel für Pixel wie vorher. Rückbau: scripts/pes6-handyansicht-
   zurueckbauen.sh */

/* Der Rollhinweis ist am PC immer aus; er wird erst im Block unten
   sichtbar. Gesetzt wird er von tabellen.js, aber nur an Tabellen,
   die wirklich breiter sind als ihr Rahmen. */
.rollhinweis { display: none; }

@media (max-width: 860px) {

  /* 1) Das Seitenmenü rutscht UNTER den Inhalt. Ohne das scrollt man
        auf der Spielerseite erst an 20 Namen vorbei, bevor der Spieler
        anfängt. */
  .mit-menue > div:first-child { order: 2; }
  .mit-menue > div:nth-child(2) { order: 1; }
  .mit-menue .seitenmenue { margin-top: 18px; }
  /* Oben steht schon die Sprungleiste; unten wiederholt das Untermenü
     sie nur. Besteht das Menü allein aus den eigenen Abschnitten
     (Advanced, Rekorde), fällt der ganze Kasten weg (B9, sjw 25.10.2026). */
  .mit-menue .seitenmenue .untermenue,
  .mit-menue .seitenmenue.nur-abschnitte { display: none; }

  /* 2a) Hinweis unter jeder Tabelle, die seitwärts weitergeht. */
  .rollhinweis {
    display: block;
    font-size: 11.5px;
    color: #8a7a55;
    margin: -4px 0 10px;
  }

  /* 2b) Die erste Spalte bleibt beim Wischen stehen, sonst weiß man
         nicht mehr, zu welcher Zeile die Zahl gehört. `inherit` nimmt
         die Farbe der Zeile mit - auch die von rang1/2/3 und :hover. */
  table.stat tbody tr { background: #fff; }
  table.stat th:first-child,
  table.stat td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
    box-shadow: 1px 0 0 #e3e3e3;
  }
  table.stat thead th:first-child {
    background: var(--grau);
    z-index: 3;
  }
  /* Bei border-collapse gehören die Ränder der Tabelle, nicht der
     Zelle: links neben der klebenden Zelle blieb ein paar Pixel breit
     der durchwandernde Nachbarinhalt sichtbar. Der Streifen deckt ihn
     ab und nimmt über `inherit` die Farbe der Zeile mit. */
  table.stat th:first-child::before,
  table.stat td:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 8px;
    background: inherit;
  }
  table.stat thead th:first-child::before { background: var(--grau); }

  /* Die ausgeklappte Detailzeile spannt über alle Spalten - die darf
     nicht kleben, sonst schiebt sie sich über die Tabelle. */
  table.stat tr.detailzeile td { position: static; box-shadow: none; }
  table.stat tr.detailzeile td::before { display: none; }
}
/* === HANDY-ANSICHT ENDE ===================================== */

/* Rest bis zum nächsten Patch (Wunsch sjw, 21.09.2026): nur bei den
   zählbaren Bedingungen - Teilnahmen, Tore, Siege. */
.patchrest { font-size: 11.5px; color: #7a6a45; white-space: nowrap; }
.patch-offen { border-style: dashed; background: #faf7f0; }
.patch-offen .patchbild { filter: grayscale(1); opacity: 0.4; }
.patch-offen .patchrest { color: #8a7a55; font-style: italic; }

/* Die Reihe mit dem, was noch aussteht, sitzt unter den verdienten
   Patches und rückt etwas näher an sie heran (sjw, 21.09.2026). */
.patchreihe-offen { margin-top: -8px; }

/* Fortschrittsbalken in der Reihe „noch X …“ (sjw 01.10.2026, Variante 3 „kompakt“):
   Kachel mit Bild, schmalem Balken und Rest-Text untereinander. */
.patch-offen { flex-direction: column; gap: 4px; padding: 8px; }
.patchbalken { display: block; width: 110px; height: 10px; background: #ede6d6;
  border-radius: 5px; overflow: hidden; }
.patchbalken > span { display: block; height: 100%; background: #8a5a2b; border-radius: 5px; }

/* Sehr breite Tabellen (Spielerübersicht: 21 Spalten neben dem Menü)
   etwas enger setzen. Nur dort, wo die Klasse gesetzt ist - die
   übrigen Tabellen bleiben, wie sie sind. */
table.stat.kompakt th, table.stat.kompakt td { padding: 3px 4px; }
table.stat.kompakt { font-size: 12.5px; }
/* Sortierzeichen in engen Tabellen (Fehlersuche 25.10.2026 B4, sjw 11:05): die 4 px oben
   nehmen dem „↕“ seinen Platz, es lag auf dem letzten Buchstaben („TORE GAMB!“). Ruhig
   ohne „↕“ (Hand-Zeiger + „Klicken zum Sortieren“ bleiben), nur die sortierte Spalte
   bekommt Platz für ▲/▼. 13 px für alle Köpfe hätte 4 Seiten am PC zu breit gemacht. */
table.stat.kompakt th.sortierbar:not(.auf):not(.ab)::after { content: none; }
table.stat.kompakt th.auf, table.stat.kompakt th.ab { padding-right: 13px; }
/* Rechenweg der Elo-Wertung (Advanced Stats, 25.09.2026) */
ol.rechenweg { margin: 0 0 12px; padding-left: 22px; max-width: 1000px; }
ol.rechenweg li { margin: 3px 0; }
/* Zweizeiliger Spaltenkopf (tabelle(..., umbruch=...)), 24.09.2026 */
table.stat th .umbruch { display: block; }
/* Sortierpfeil sonst unter dem zweizeiligen Kopf (in der ersten Zeile) */
table.stat th:has(.umbruch)::after { top: 50%; transform: translateY(-50%); }
/* Spielverlauf in der Kennzahlenleiste der Duo-Turnierblöcke
   („SSUSSS", sjw 23.09.2026): gleich breite Buchstaben wie in der
   Verlaufsspalte der Gruppentabellen. */
.kennzahlen .folge { font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace; letter-spacing: 1px; }

/* === KLEBENDES MENÜ ANFANG (sjw, 23.09.2026) =====================
   PC: Das Hauptmenü bleibt beim Scrollen oben stehen, die Sprungleiste
   der Seite klebt direkt darunter. Handy (unter 860 px): Das Menü
   verschwindet beim Runterscrollen und kommt beim Hochscrollen wieder;
   tabellen.js setzt dafür body.menue-weg. --menue-h (Höhe des Menüs)
   misst tabellen.js, 38px ist nur der Startwert ohne JavaScript. */
:root { --menue-h: 38px; }
nav.haupt { position: sticky; top: 0; z-index: 40; }
.sprungleiste { top: var(--menue-h); }
h2[id] { scroll-margin-top: calc(var(--menue-h) + 48px); }
@media (max-width: 860px) {
  nav.haupt { transition: transform .2s ease; }
  .sprungleiste { transition: top .2s ease; }
  body.menue-weg nav.haupt { transform: translateY(-100%); }
  body.menue-weg .sprungleiste { top: 0; }
  body.menue-weg h2[id] { scroll-margin-top: 48px; }
}
/* Sandkasten: die drei Rubrik-Knöpfe kleben wie die Sprungleiste unter dem
   Menü (sjw 01.11.2026, 21:38: „komme ich nicht mehr zu denen ohne hochscrollen“). */
.sk-rubriken { position: sticky; top: var(--menue-h); z-index: 30; background: #fff;
  padding: 6px 0; margin: 0 0 8px; }
@media (max-width: 860px) {
  .sk-rubriken { transition: top .2s ease; padding: 4px 0; }
  body.menue-weg .sk-rubriken { top: 0; }
}
@media (max-width: 520px) {   /* Handy: einzeilig, damit die Leiste wenig Platz nimmt */
  .sk-rubriken .sk-rubrik { flex: 1 1 auto; white-space: nowrap; font-size: 12.5px;
    padding: 6px 6px; }
}
/* === KLEBENDES MENÜ ENDE ========================================= */

/* Mitlaufender Tabellenkopf (sjw, 02.10.2026): tabellen.js schiebt bei
   langen Tabellen den Kopf per transform unter Menü/Sprungleiste. Der
   Kopf muss dabei über den Zeilen liegen (auch über der klebenden
   ersten Spalte, z-index 2) und bekommt einen Schatten als Kante. */
table.stat thead { position: relative; z-index: 4; }
table.stat thead.schwebt th { box-shadow: 0 2px 3px rgba(0, 0, 0, .18); }

/* ---------- Bezwungene Gegner (Rekorde, sjw 27.09.2026) ----------
   Je Spieler eine Zeile mit allen Gegnern; wer schon besiegt wurde, ist
   mit einem roten X durchgekreuzt (zwei diagonale Striche über dem Namen). */
.abschussliste { border-top: 1px solid var(--grau-rand); margin: 6px 0 12px; }
.abschuss-zeile {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--grau-rand); align-items: start;
}
.abschuss-kopf { font-size: 13px; font-weight: 700; line-height: 1.5; }
.abschuss-zahl { display: block; font-size: 11.5px; font-weight: 400; color: #7a7060; }
.abschuss-namen { display: flex; flex-wrap: wrap; gap: 3px; }
.abschuss-name {
  position: relative; display: inline-block;
  padding: 2px 5px; font-size: 12px; line-height: 1.5;
  border: 1px solid #d8ccb3; border-radius: 3px; background: #fff; color: #0645ad;
}
.abschuss-name.weg { color: #9a8f80; background: #f6f1e7; }
.abschuss-name.weg::before, .abschuss-name.weg::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
  border-top: 2px solid #c62828; pointer-events: none;
}
/* nie gegeneinander gespielt: grau, gestrichelter Rand, kein Link */
.abschuss-name.nie {
  color: #b0a898; background: #f3f3f3; border: 1px dashed #c8c2b6; cursor: help;
}
.abschuss-name.weg::before { transform: rotate(18deg); }
.abschuss-name.weg::after { transform: rotate(-18deg); }
@media (max-width: 860px) {
  .abschuss-zeile { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Sandkasten (sjw, 28.09.2026) ---------- */
.sk-auswahl {
  background: #faf6ec; border: 1px solid var(--grau-rand); border-radius: 4px;
  padding: 10px 12px; margin: 12px 0 18px;
}
.sk-zeile { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 5px 0; }
.sk-zeile + .sk-zeile { border-top: 1px solid #ece3cf; }
.sk-titel {
  font-size: 11px; letter-spacing: 0.5px; font-weight: 700; text-transform: uppercase;
  color: var(--rot); min-width: 78px;
}
.sk-feld { font-size: 13px; font-weight: 600; }
.sk-feld select { margin-left: 4px; font-size: 13px; padding: 2px 4px; }
.sk-haken { font-size: 13px; white-space: nowrap; cursor: pointer; }
.sk-fehlt span { color: #9a9a9a; }   /* Netz-Achse angekreuzt, gibt es hier aber nicht (sjw 04.10.2026) */
.sk-knoepfe button {
  font-size: 12px; padding: 2px 8px; margin-left: 2px; cursor: pointer;
  border: 1px solid #d8ccb3; border-radius: 3px; background: #fff;
}
.sk-stand { color: #7a7060; margin-top: -6px; }
.sk-hinweis { font-size: 12px; color: #7a7060; }
.sk-wer { font-size: 13.5px; margin: 12px 0 4px; }
/* Rubriken „Jeder gegen Jeden“ | „Die Besten“ (sjw 23.10.2026, 22:21) */
.sk-rubriken { display: flex; }   /* Abstand/Kleben siehe KLEBENDES MENÜ */
.sk-rubrik {
  font-size: 14px; font-weight: 700; padding: 7px 16px; cursor: pointer;
  border: 1px solid var(--grau-rand); background: #fff; color: var(--braun);
}
.sk-rubrik:first-child { border-radius: 4px 0 0 4px; }
.sk-rubrik + .sk-rubrik { border-left: 0; border-radius: 0 4px 4px 0; }
.sk-rubrik.aktiv { background: var(--braun); border-color: var(--braun); color: #fff; }
#skb-stat { max-width: 100%; }
/* Eigener PES-Index: Gewichtsfelder (sjw 23.10.2026, 23:07) */
.ski-zutat { white-space: nowrap; }
.ski-zutat input { width: 4.2em; margin-left: 4px; font-size: 13px; padding: 2px 4px; }
#ski-summe { font-size: 13px; }

/* === DAS BIN ICH (sjw, 02.10.2026, Variante B) ====================
   Auswahl „Ich bin …“ unter dem Suchfeld, rechtsbündig (seit 03.10.2026,
   vorher in der Leiste ganz oben); tabellen.js setzt
   tr.ich (ganze Zeile hellblau, auch über Gold/Silber/Bronze - so gewählt)
   und a.ich-name (eigener Name fett, auch außerhalb von Tabellen).
   Steht am Ende, damit es rang1-3 und .hervor (beide !important) schlägt. */
.kopf .suche { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.kopf .suche .ichbin { font-size: 12px; color: #555; white-space: nowrap; }
.kopf .suche .ichbin select {
  font-size: 12px; margin-left: 4px; padding: 2px 4px; cursor: pointer;
  background: #fff; color: #222; border: 1px solid var(--grau-rand); border-radius: 3px;
}
table.stat tr.ich,
table.stat tr.ich td { background: #d7e8f7 !important; }
a.ich-name { font-weight: 700; }

/* === ZEILE ANTIPPEN (sjw, 03.10.2026) =============================
   tabellen.js schaltet tr.angetippt per Tipp/Klick um. Kräftiges Gelb,
   das sonst nirgends vorkommt (Platz 1 ist blasses Gold #fdf6d8); steht
   nach .ich, gewinnt also auch auf der eigenen Zeile. */
table.stat tr.angetippt,
table.stat tr.angetippt td { background: #ffe08a !important; }

/* Glossar (sjw 04.10.2026): Begriff fett, Erklärung darunter, Zeilen nicht zu lang */
.glossar { margin: 0 0 18px; max-width: 900px; }
.glossar dt { font-weight: bold; margin-top: 10px; }
.glossar dd { margin: 2px 0 0 0; }

/* Pokale (sjw 04.10.2026): je Turnier drei Kacheln mit Foto (bis dahin Platzhalter) */
.pk-raster { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 22px; }
/* Größer (sjw 17.10.2026: „das bild scheint so klein“): 190→260 px breit, Foto 200→420 px hoch */
.pk-kachel { width: 260px; border: 1px solid var(--grau-rand); border-radius: 4px;
  background: #fdfaf2; padding: 6px; font-size: 12.5px; line-height: 1.35; }
.pk-foto { height: 420px; border-radius: 3px; background: #efe6cf; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #8a7a5a; font-size: 12px; margin-bottom: 6px; }
.pokal.pk-symbol { width: 34px; height: 44px; margin: 0; opacity: .35; }
.pk-titel { font-weight: 700; color: var(--rot); font-size: 13px; }
.pk-kanone .pk-titel, .pk-anwesend .pk-titel { color: var(--braun); }
.pk-wer { margin-top: 2px; }
.pk-zusatz { color: #555; margin-top: 2px; }
.pk-leer { color: #888; font-style: italic; }
.pk-unter { font-size: 13px; color: #555; margin: 2px 0 0; }
/* Kachel mit Foto (sjw 17.10.2026): freigestellter Pokal auf hellem Grund, ganz sichtbar */
.pk-foto.pk-mit-foto { background: #fbf7ec; padding: 6px 0; box-sizing: border-box; }
.pk-foto.pk-mit-foto img { max-height: 100%; max-width: 100%; width: auto; height: auto;
  display: block; }
.pk-foto.pk-mit-foto:hover { background: var(--gelb); }
/* Pokal groß ansehen: Ebene über der Seite (sjw 01.11.2026) */
.pk-gross { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 12, 6, .92);
  display: flex; align-items: center; justify-content: center; padding: 48px 12px 16px; }
.pk-gross[hidden] { display: none; }
.pk-gross figure { margin: 0; max-width: 100%; max-height: 100%; display: flex;
  flex-direction: column; align-items: center; }
.pk-gross img { max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto;
  background: #fbf7ec; border-radius: 4px; }
.pk-gross figcaption { color: #fff; margin-top: 8px; font-size: 15px; text-align: center; }
.pk-zu { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: #fff; color: var(--dunkel);
  font-size: 22px; line-height: 44px; cursor: pointer; }
body.pk-gross-offen { overflow: hidden; }

/* Rekord-Marke im Kopf der Turnierseiten (sjw 05.10.2026): goldenes Schild mit Link */
.rekord-marke { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px;
  background: var(--gold-hell); border: 1px solid var(--gold); color: var(--braun);
  font-size: 11.5px; font-weight: 700; line-height: 17px; text-decoration: none;
  white-space: nowrap; }
.rekord-marke:hover { background: #efe2a0; text-decoration: none; }

/* Kennzahl „Häufigstes Ergebnis“ (sjw 05.10.2026): Anzahl kleiner hinter dem Ergebnis */
.kennzahlen .feld .wert .mal { font-size: 13px; font-weight: 600; color: #666; }

/* === HANDY-LEISTEN ANFANG (Fehlersuche 21.10.2026, B14; sjw 22.10.2026) =====
   Handy: Hauptmenü und Sprungleiste je EINE Zeile zum Wischen statt 4 bzw.
   bis zu 10 Zeilen (Rekorde vorher 433 px hoch). Ein Rand blendet aus, wenn
   es auf dieser Seite weitergeht (tabellen.js setzt .mehr-links/.mehr-rechts)
   und rückt den aktiven Menüpunkt ins Bild. PC unverändert. */
@media (max-width: 860px) {
  nav.haupt, .sprungleiste {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  nav.haupt::-webkit-scrollbar, .sprungleiste::-webkit-scrollbar { display: none; }
  nav.haupt a, .sprungleiste a { flex: none; white-space: nowrap; }
  nav.haupt a { padding: 9px 12px; }
  /* Blende als eigene Schicht statt mask-image (B7, sjw 24.10.2026): Die Maske
     machte auch den Hintergrund der Leiste durchsichtig, darunter scrollender
     Inhalt schien durch. Jetzt klebt am Rand ein 36 px breiter Verlauf in der
     Farbe der Leiste; die negativen Ränder halten die Wischbreite gleich. */
  nav.haupt::before, nav.haupt::after, .sprungleiste::before, .sprungleiste::after {
    content: ""; display: none; flex: none; width: 36px; align-self: stretch;
    position: sticky; z-index: 1; pointer-events: none;
  }
  /* Klebend zählt ab dem Innenabstand der Leiste (Menü 8 px, Sprungleiste 4 px);
     um ihn nach außen gerückt, damit der Verlauf bis an den Rand reicht. */
  nav.haupt::before { left: -8px; margin-right: -36px; }
  nav.haupt::after { right: -8px; margin-left: -36px; }
  .sprungleiste::before { left: -4px; margin-right: -36px; }
  .sprungleiste::after { right: -4px; margin-left: -36px; }
  nav.haupt.mehr-links::before, nav.haupt.mehr-rechts::after,
  .sprungleiste.mehr-links::before, .sprungleiste.mehr-rechts::after { display: block; }
  nav.haupt::before { background: linear-gradient(to left, rgba(35,18,10,0), var(--dunkel)); }
  nav.haupt::after { background: linear-gradient(to right, rgba(35,18,10,0), var(--dunkel)); }
  .sprungleiste::before { background: linear-gradient(to left, rgba(251,247,237,0), #fbf7ed); }
  .sprungleiste::after { background: linear-gradient(to right, rgba(251,247,237,0), #fbf7ed); }
}
/* === HANDY-LEISTEN ENDE ================================================== */

/* === NETZ ENG ANFANG (Fehlersuche 21.10.2026, B16; sjw 22.10.2026) =========
   tabellen.js schneidet das Netzdiagramm (Spielerseiten, Sandkasten) auf
   seinen Inhalt zu (svg.netz-eng). Am Handy passt es sich dann der Breite an,
   statt seitlich zu wischen — die einzige Grafik, die das darf. */
@media (max-width: 860px) {
  .diagramm .grafikrahmen svg.netz-eng { max-width: 100%; height: auto; }
}
/* === NETZ ENG ENDE ======================================================= */

/* === HANDY-KOPFBLOCK ANFANG (Fehlersuche 21.10.2026, B18; sjw 22.10.2026) ==
   Am PC steht der Auszeichnungsblock rechts neben den Daten. Am Handy rutschte
   er je nach Textlänge mal darunter (schmal, rechtsbündig), mal blieb er daneben.
   Hier: immer eigene Zeile unter den Daten, volle Breite, linksbündig.
   Raster mit drei Spalten (Symbol | Bezeichnung | Jahre): Die Bezeichnungen
   sind so breit wie die längste, die Jahres-Chips stehen immer untereinander
   (Fehlersuche 24.10.2026, B11: mit fester Mindestbreite 126 px schob
   „Meff der Chef Trophäe“ seine Chips 18 px nach rechts). Zeilen ohne
   Patch-Bild lassen die Symbolspalte frei. */
@media (max-width: 860px) {
  .kopfblock .auszeichnungen { flex: 1 1 100%; max-width: none; align-items: flex-start; }
  .kopfblock .auszeichnungen .erfolge {
    display: grid; grid-template-columns: 26px max-content minmax(0, 1fr);
    column-gap: 7px; row-gap: 5px; align-items: center; justify-items: start;
  }
  .kopfblock .auszeichnungen .erfolg-zeile { display: contents; }
  /* order: 0 — sonst zieht das order: -1 (Flex, PC) alle Symbole vor alle Zeilen */
  .kopfblock .auszeichnungen .erfolg-symbol { grid-column: 1; order: 0; }
  .kopfblock .auszeichnungen .erfolg-was { grid-column: 2; text-align: left; min-width: 0; }
  .kopfblock .auszeichnungen .erfolg-jahre { grid-column: 3; justify-content: flex-start; }
}
/* === HANDY-KOPFBLOCK ENDE ================================================= */

/* === UMBRUCHSCHUTZ ANFANG (Fehlersuche 21.10.2026, B19; sjw 22.10.2026) ====
   Mannschaftsnamen nicht am Bindestrich trennen („Frankreich 96-“ / „00“):
   Links auf Mannschaftsseiten bleiben in einer Zeile; .nb setzt der Generator
   um Flagge + Link und um Namen ohne Link (umbruchschutz() in tabellen.js). */
a[href*="vereine/"], .nb { white-space: nowrap; }
/* === UMBRUCHSCHUTZ ENDE =================================================== */

/* === HANDY-PATCHZEILE ANFANG (Fehlersuche 21.10.2026, B21; sjw 22.10.2026) ==
   Spielertabelle der Turnierseiten: am Handy schrumpfte die Spalte „Patches in
   diesem Turnier“, die Patches standen untereinander (Zeile Kühli 2015 ~110 px,
   Namen abgeschnitten). Hier nebeneinander wie am PC; die Tabelle wischt man. */
@media (max-width: 860px) {
  table.stat .patchliste { flex-wrap: nowrap; }
}
/* === HANDY-PATCHZEILE ENDE ================================================= */

/* === HANDY-POKALE ANFANG (Fehlersuche 21.10.2026, B25; sjw 23.10.2026) ======
   Pokale am Handy: die 260-px-Kachel ließ rechts ~100 px frei, „Foto folgt“ war
   so hoch wie ein Foto (420 px). Unter 590 px passt ohnehin nur eine Kachel je
   Zeile — dann volle Breite und niedriger Platzhalter. Am PC bleibt alles. */
@media (max-width: 590px) {
  .pk-kachel { width: 100%; box-sizing: border-box; }
  .pk-foto:not(.pk-mit-foto) { height: 120px; }
}
/* === HANDY-POKALE ENDE ===================================================== */

/* === ABSCHUSS-LESBAR ANFANG (Fehlersuche 21.10.2026, B26; sjw 23.10.2026) ===
   Bezwungene Gegner: die Klasse .weg gibt es auch bei „Weg des Meisters“ (margin
   10px 0 4px) — die durchgekreuzten Kästchen bekamen den Rand, alle anderen
   streckten sich auf 38 px. Klasse bleibt (pes6-rekorde-gegenprobe.py liest sie),
   Rand hier zurück auf 0. X leicht durchsichtig, Name dunkler: lesbar. */
.abschuss-name.weg { margin: 0; color: #6b6152; }
.abschuss-name.weg::before, .abschuss-name.weg::after {
  border-top: 2px solid rgba(198, 40, 40, .85);
}
/* === ABSCHUSS-LESBAR ENDE ================================================== */

/* === KREIS-LEGENDE-UNTER ANFANG (Fehlersuche 21.10.2026, B28; sjw 23.10.2026) ==
   Platzierungen und Spiele: Legende stand neben dem Kreis, wenn sie passte, sonst
   darunter — auf einer Seite mal so, mal so. Jetzt immer darunter. */
.kuchen-block.kuchen-unter { flex-direction: column; align-items: flex-start; }
/* === KREIS-LEGENDE-UNTER ENDE ================================================ */

/* ---------- Flaggen (erzeugt) ---------- */
.fl-argentinien { background-image: url("flaggen/argentinien.svg"); }
.fl-brasilien { background-image: url("flaggen/brasilien.svg"); }
.fl-daenemark { background-image: url("flaggen/daenemark.svg"); }
.fl-deutschland { background-image: url("flaggen/deutschland.svg"); }
.fl-england { background-image: url("flaggen/england.svg"); }
.fl-frankreich { background-image: url("flaggen/frankreich.svg"); }
.fl-holland { background-image: url("flaggen/holland.svg"); }
.fl-italien { background-image: url("flaggen/italien.svg"); }
.fl-jugoslawien { background-image: url("flaggen/jugoslawien.svg"); }
.fl-jugoslawien-brj { background-image: url("flaggen/jugoslawien-brj.svg"); }
.fl-kolumbien { background-image: url("flaggen/kolumbien.svg"); }
.fl-polen { background-image: url("flaggen/polen.svg"); }
.fl-portugal { background-image: url("flaggen/portugal.svg"); }
.fl-spanien { background-image: url("flaggen/spanien.svg"); }
.fl-tschechien { background-image: url("flaggen/tschechien.svg"); }
.fl-ungarn { background-image: url("flaggen/ungarn.svg"); }
.fl-uruguay { background-image: url("flaggen/uruguay.svg"); }