/* packeroo.com · Turnierplan-Generator (/turnierplan/). Quelle: packeroo/site/quelle/turnierplan/turnierplan.css
   Nur auf dieser Seite geladen. Weihnachtscup-Look über .tp.ist-weihnacht (dezent: Tannengrün, Rot, ein Stern). */
.tp-kopf .einleitung { max-width: 40em; }
.tp-kopf .aktualisiert { display: block; margin-top: 8px; font-size: 15px; color: var(--leise); }
.tp-bereich { padding: 8px 0 72px; }
.tp { --tp-akzent: var(--lime); --tp-akzent-text: var(--lime-dunkel); --tp-flaeche: var(--flaeche); }
.tp.ist-weihnacht { --tp-akzent: #B8322A; --tp-akzent-text: #8E241E; --tp-flaeche: #F3F6F1; }

/* Eingabe */
.tp-eingabe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 40px; padding: 28px 32px; border: 1px solid var(--linie); border-radius: var(--rund-gross); background: var(--tp-flaeche); }
.tp-vorlagen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tp-vorlagen > span { font: 600 14px var(--titel); color: var(--leise); margin-right: 4px; }
.tp-vorlage { min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--linie); border-radius: 999px; background: #fff; font: 600 14.5px var(--titel); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.tp-vorlage:hover { border-color: var(--anthrazit); }
.tp-vorlage--weihnacht::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; background: #B8322A;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tp-spalte { display: grid; gap: 16px; align-content: start; min-width: 0; }
.tp-feld { display: grid; gap: 6px; }
.tp-feld > label, .tp-gruppe legend { font: 600 15px var(--titel); }
.tp-eingabe input[type="text"], .tp-eingabe input[type="number"], .tp-eingabe textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid #CFCFC2; border-radius: var(--rund);
  background: #fff; font: 400 16px/1.45 var(--text-schrift); color: var(--text); }
.tp-eingabe textarea { min-height: 220px; resize: vertical; }
.tp-eingabe input:focus-visible, .tp-eingabe textarea:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 1px; }
.tp-zahl, .tp-tipp { margin: 0; font-size: 14px; color: var(--leise); }
.tp-gruppe { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.tp-gruppe legend { margin-bottom: 6px; padding: 0; }
.tp-wahl { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--linie); border-radius: var(--rund); background: #fff; cursor: pointer; line-height: 1.35; }
.tp-wahl input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--anthrazit); }
.tp-wahl small { display: block; font-size: 13.5px; color: var(--leise); }
.tp-wahl:has(input:checked) { border-color: var(--anthrazit); }
.tp-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-hinweis { margin: 0; font-weight: 600; color: #8E241E; }
.tp-hinweis:empty { display: none; }

/* Ausgabe */
.tp-ausgabe { margin-top: 40px; }
.tp-ausgabe-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 16px; border-bottom: 3px solid var(--tp-akzent); }
.tp-ausgabe-kopf h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); }
.tp.ist-weihnacht .tp-ausgabe-kopf h2::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .35em; vertical-align: .02em; background: #B8322A;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tp.ist-weihnacht .tp-ausgabe-kopf { border-image: repeating-linear-gradient(90deg, #1F5C3A 0 18px, #B8322A 18px 36px) 1; }
.tp-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-meldung { margin: 8px 0 0; font-size: 14.5px; color: var(--leise); }
.tp-meldung:empty { display: none; }
.tp-dauer { margin: 18px 0 0; padding: 14px 18px; border-radius: var(--rund); background: var(--tp-flaeche); font-size: 15.5px; }
.tp-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); font-weight: 600; color: #8E241E; }
.tp-umstellen { min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--anthrazit); border-radius: 999px; background: #fff; font: 600 15px var(--titel); color: var(--text); cursor: pointer; }
.tp-umstellen:hover { background: var(--anthrazit); color: #fff; }
.tp-umstellen:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 2px; }
#tp-titel:focus { outline: none; }
.tp-teams h3, .tp-h { margin: 28px 0 12px; font-size: 20px; }
.tp-teamliste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: team; }
.tp-teamliste li { counter-increment: team; padding: 6px 12px; border-radius: 999px; background: var(--tp-flaeche); font-size: 15px; }
.tp-teamliste li::before { content: "Team " counter(team) ": "; font-weight: 600; }
.tp-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 0 48px; align-items: start; }
.tp-plan { grid-column: 1; grid-row: 1; min-width: 0; }
.tp-tabelle { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--kopf-h) + 16px); }
.tp-runde, .tp-ko-runde { margin-bottom: 20px; }
.tp-runde h4, .tp-ko-runde h4 { margin: 0 0 8px; font: 600 14px var(--titel); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-akzent-text); }
.tp-spiele { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.tp-spiel { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3.4em auto 3.4em minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.tp-ort { font-size: 13px; color: var(--leise); }
.tp-a { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.tp-b { font-weight: 600; overflow-wrap: anywhere; }
.tp-gegen { color: var(--leise); font-weight: 700; }
.tp-tor { width: 100%; min-height: 44px; padding: 6px 4px; border: 1.5px solid #CFCFC2; border-radius: var(--rund); text-align: center; font: 600 17px var(--titel); background: #fff; -moz-appearance: textfield; }
.tp-tor::-webkit-outer-spin-button, .tp-tor::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tp-tor:focus-visible { outline: 3px solid var(--anthrazit); outline-offset: 1px; }
.tp-spiel--frei, .tp-spiel--offen { color: var(--leise); }
.tp-spiel--frei .tp-a { grid-column: 2 / 4; }
.tp-spiel--frei .tp-weiter { grid-column: 4 / -1; font-size: 14px; }
.tp-spiel--offen .tp-a, .tp-spiel--offen .tp-b { font-weight: 500; }
.tp-spiel--offen .tp-gegen { grid-column: 3 / 6; text-align: center; }
.tp-frei { margin: 8px 0 0; font-size: 14.5px; color: var(--leise); }
.tp-baum { display: grid; grid-auto-flow: row; gap: 4px; }
.tp-tabelle-rahmen { overflow-x: auto; }
.tp-tab { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tp-tab th, .tp-tab td { padding: 8px 6px; border-bottom: 1px solid var(--linie); text-align: right; }
.tp-tab thead th { font: 600 13px var(--titel); color: var(--leise); }
.tp-tab th[scope="row"], .tp-tab thead th:nth-child(2) { text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.tp-tab td:first-child { text-align: left; color: var(--leise); }
.tp-tab tbody tr:first-child { background: var(--tp-flaeche); }
.tp-klein { margin: 10px 0 0; font-size: 14px; color: var(--leise); }
.tp-warnung { color: #8E241E; }
.tp-sieger { margin: 0; padding: 20px; border-radius: var(--rund-gross); background: var(--anthrazit); color: #fff; font: 700 26px/1.2 var(--titel); }
.tp-sieger span { display: block; margin-bottom: 4px; font: 600 13px var(--titel); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.tp.ist-weihnacht .tp-sieger { background: #1F5C3A; }
.tp.ist-weihnacht .tp-sieger span { color: #F3D9A4; }
.tp-nur-druck { display: none; }
.tp-stand { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tp-liga { margin-top: 8px; padding-bottom: 24px; }

/* Text unter dem Werkzeug */
.tp-text { padding-top: 56px; }
.tp-text .tabelle-rahmen td, .tp-text .tabelle-rahmen th { white-space: normal; }
.tp-text .fragen { margin: 0 0 1.4em; }
.tp-text .frage summary { font-size: 17px; min-height: 56px; }
.tp-beispiel { width: 100%; margin: 0 0 18px; }
.tp-beispiel td:first-child { white-space: nowrap; font-weight: 600; }

@media (max-width: 940px) {
  .tp-eingabe { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .tp-raster { grid-template-columns: minmax(0, 1fr); }
  .tp-tabelle { grid-column: 1; grid-row: 1; position: static; }
  .tp-plan { grid-row: 2; }
}
@media (max-width: 600px) {
  .tp-bereich { padding-bottom: 48px; }
  .tp-spiel { grid-template-columns: minmax(0, 1fr) 3em auto 3em minmax(0, 1fr); gap: 6px; }
  .tp-ort { grid-column: 1 / -1; }
  .tp-spiel--frei .tp-a { grid-column: 1 / 3; text-align: left; }
  .tp-spiel--frei .tp-weiter { grid-column: 3 / -1; }
  .tp-spiel--offen .tp-gegen { grid-column: 2 / 5; }
  .tp-tab .tp-breit { display: none; }
  .tp-ausgabe-kopf .tp-aktionen, .tp-aktionen .knopf { width: 100%; }
  .tp-aktionen .knopf { flex: 1; }
  .tp-knoepfe .knopf { flex: 1 1 100%; }
}

/* Drucken: nur Titel, Dauer, Teams, Tabelle und Plan. Leere Felder bleiben zum Ausfüllen mit Stift. */
@media print {
  @page { margin: 12mm; }
  body { font-size: 10.5pt; background: #fff; }
  .kopf, .fuss, .skip, .schleier, .tp-kopf, .tp-eingabe, .tp-aktionen, .tp-meldung, .tp-liga, .tp-text, .verwandt, .tp-nicht-druck { display: none !important; }
  .tp-bereich { padding: 0; }
  .huelle { max-width: none; padding: 0; }
  .tp-ausgabe { margin: 0; }
  .tp-ausgabe-kopf { padding-bottom: 6px; }
  .tp-ausgabe-kopf h2 { font-size: 20pt; }
  .tp-dauer { margin: 6px 0 0; background: none; padding: 0; font-size: 10pt; }
  .tp-teams h3, .tp-h { margin: 10px 0 6px; font-size: 13pt; }
  .tp-teamliste { gap: 4px 6px; }
  .tp-teamliste li { padding: 2px 8px; font-size: 10pt; }
  /* Kompakt untereinander: kein erzwungener Umbruch, die Tabelle darf direkt unter dem Plan weiterlaufen. */
  .tp-raster { display: flex; flex-direction: column; }
  .tp-plan { order: 1; }
  .tp-tabelle { order: 2; position: static; margin: 0 0 4mm; }
  .tp-runde, .tp-ko-runde { margin-bottom: 8px; }
  .tp-runde h4, .tp-ko-runde h4 { margin-bottom: 3px; font-size: 9pt; }
  .tp-tab { font-size: 10pt; }
  .tp-tab th, .tp-tab td { padding: 3px 6px; }
  .tp-tab .tp-breit { display: table-cell; }
  .tp-tab tr, .tp-spiel { break-inside: avoid; }
  .tp-tab thead { display: table-header-group; }
  /* Noch nichts eingetragen: Zellen leer lassen, damit man mit Stift eintragen kann. */
  .tp-tab tbody.tp-leer td { color: transparent; }
  .tp-tab tbody.tp-leer tr:first-child { background: none; }
  .tp-tab td { height: 1.6em; }
  .tp-spiel { grid-template-columns: 9em minmax(0, 1fr) 2.6em auto 2.6em minmax(0, 1fr); gap: 6px; padding: 2px 0; }
  .tp-ort { font-size: 9pt; }
  .tp-tor { min-height: 0; height: 1.6em; padding: 0 2px; border: 1px solid #555; border-radius: 3px; font-size: 11pt; }
  .tp-frei, .tp-klein { margin-top: 4px; font-size: 9pt; }
  .tp-nur-druck { display: block; margin-top: 5mm; padding-top: 3mm; border-top: 1px solid #999; font-size: 9pt; }
  .tp-sieger { background: none !important; color: #000; padding: 0; }
}