/* Partner-Bereich: baut auf basis.css auf (Kopie der App-style.css) (Brand-Variablen, .btn,
   .answer-input, .monitor-*). Hier nur, was es dort nicht gibt. */

.partner-gate-text {
  color: var(--color-muted);
  font-weight: 600;
}

/* Login-Formular: Felder untereinander mit Luft (die .answer-form der App
   ist fürs Frage-Sheet gedacht und bringt kein Spacing mit) */
#partner-login .answer-form,
#partner-create .answer-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.partner-logout {
  border: none;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
}

.partner-logout[hidden] { display: none; }

/* Kopfzeile Dashboard: Guthaben-Karte + Neue-Gruppe-Button */
.partner-topline {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.partner-guthaben {
  flex: 1;
  min-width: 180px;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.guthaben-zahl {
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-green-deep);
}

.guthaben-label {
  color: var(--color-muted);
  font-weight: 600;
}

.partner-hint {
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 22px;
}

.partner-h2 {
  font-size: 1.05rem;
  margin: 0 0 12px;
}

.partner-panel {
  max-width: 520px;
  margin: 10px auto 0;
}

.partner-label {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: -6px;
}

.partner-kosten {
  font-weight: 700;
  color: var(--color-green-deep);
  margin: 0;
}

/* Gruppen-Karten */
.gruppen-karte {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  margin-bottom: 12px;
}

.gruppen-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.gruppen-titel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gruppen-meta {
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.gruppen-teams {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.gruppen-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.gruppen-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-cream-light);
  color: var(--color-muted);
}

.gruppen-badge.st-aktiv {
  background: var(--color-success-bg);
  color: var(--color-green-deep);
}

.gruppen-badge.st-abgeschlossen {
  background: var(--color-cream);
  color: var(--color-text);
}

/* Lucide-Icons (Sprite in index.html, Muster aus dem Admin-Backend).
   Stroke/Farbe erben von currentColor -> passt sich jedem Button an. */
.partner-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  margin-right: 0.4em;
  flex: 0 0 auto;            /* in flex-Buttons (.btn) nicht schrumpfen */
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Aktions-Buttons nebeneinander; auf schmalen Karten bricht die Zeile um. */
.gruppen-links {
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.partner-monitor-link {
  color: var(--color-green-deep);
  font-weight: 700;
  word-break: break-all;
}

.gruppen-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-muted);
  padding: 6px 0;
}

/* Code-Listen: monospaced, kopierfreundlich */
.partner-codes {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.7;
  background: var(--color-cream-light);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  overflow-x: auto;
  white-space: pre;
}

.partner-kv {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.partner-kv-label {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.partner-fehler {
  color: var(--color-coral-deep);
  font-weight: 700;
  text-align: center;
}

/* Kleine Screens: Topline stapeln */
@media (max-width: 480px) {
  .partner-topline { flex-direction: column; }
}

/* ---------- Codes-PDF: Druckansicht (26.07.2026) ----------
 *
 * Die Ansicht ist am Bildschirm NIE sichtbar - sie existiert ausschliesslich
 * fuer window.print(). Bewusst rein schwarz-weiss: keine Information haengt an
 * einer Farbe, damit auch ein SW-Laserdrucker alles lesbar ausgibt.
 */

.pdf-druck { display: none; }

/* Codes-PDF und Monitor-Link: gleiche Optik, nebeneinander (26.07.).
   Etwas kleiner und enger als der Standard-.btn - es sind Sekundär-Aktionen
   mit langen Beschriftungen, die sonst dreizeilig umbrechen. */
.gruppen-aktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.95rem;
  padding: 11px 14px;
  line-height: 1.25;
}

/* Gleich breit aufteilen, unter 220px pro Button umbrechen statt quetschen.
   Bewusst NUR in .gruppen-links: in einem Spalten-Flex-Container (.partner-kv)
   wuerde flex-basis auf die HOEHE wirken und den Button 220px hoch machen. */
.gruppen-links > .gruppen-aktion { flex: 1 1 220px; }

@media print {
  /* Ober-/Unterrand bewusst 0: Chrome/Edge zeichnen Titel+Uhrzeit bzw. URL+
     Seitenzahl NUR, wenn dort Platz im Seitenrand ist. Bei 0 bleibt die Kopf-
     /Fusszeile des Browsers weg (kundengerichtetes Dokument, 11.08.2026).
     Links/rechts bleibt der Rand, weil er @page-seitig ist und pro Seite gilt.
     Der frueher hier gesetzte Rand oben/unten wandert als Padding auf
     #pdf-druck (Seite 1) bzw. auf die Tabellen-Kopfzeile (Folgeseiten, die
     sich beim Seitenumbruch automatisch wiederholt). */
  @page { size: A4 portrait; margin: 0 12mm; }

  /* Nur die Druckansicht ausgeben. !important, weil Klassenselektoren aus
     style.css (.app-header, .monitor-main, ...) sonst spezifischer waeren. */
  body > * { display: none !important; }
  body > #pdf-druck {
    display: block !important;
    padding: 12mm 0 10mm;
  }

  html, body {
    background: #fff;
    color: #000;
    overflow: visible;
    font-family: "Nunito", system-ui, sans-serif;
    font-size: 10pt;
    line-height: 1.32;
  }

  /* --- 1. Kopfzeile --- */
  /* Grün ist hier ausschliesslich Dekoration: jede Information steht zusätzlich
     in Text, Position oder Rahmen. Auf einem SW-Drucker wird das Grün zu
     dunklem Grau - lesbar bleibt alles. Schnittlinien und Codes sind bewusst
     rein schwarz (maximaler Kontrast beim Schneiden und Abtippen). */
  .pdf-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8mm;
    border-bottom: 2pt solid var(--color-green);
    padding-bottom: 3mm;
    margin-bottom: 3mm;
  }

  .pdf-kopf-text { flex: 1; min-width: 0; }

  .pdf-logo {
    flex: 0 0 auto;
    width: 40mm;
    height: auto;
    display: block;
  }

  .pdf-titel {
    font-family: "Rubik", system-ui, sans-serif;
    font-size: 17pt;
    font-weight: 700;
    color: var(--color-green-deep);
    margin: 0 0 1.5mm;
  }

  .pdf-meta { margin: 0 0 1mm; font-size: 10pt; }

  .pdf-start {
    display: flex;
    flex-direction: column;
    border: 1pt solid var(--color-green);
    border-left-width: 3pt;
    border-radius: 1.5mm;
    padding: 2mm 3mm;
    margin-top: 3mm;
  }

  .pdf-start-label {
    font-size: 7.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-green-deep);
  }

  .pdf-start-name { font-size: 11pt; }
  .pdf-start-adresse { font-size: 10pt; }

  /* --- 2. Kurzanleitung + QR nebeneinander (26.07.) --- */
  .pdf-anleitung-zeile {
    display: flex;
    align-items: center;
    gap: 6mm;
    border: 1pt solid var(--color-green);
    border-radius: 2mm;
    padding: 2mm 4mm;
    margin-bottom: 3mm;
  }

  .pdf-anleitung { flex: 1; min-width: 0; }

  /* Der einzige QR der Seite. 25mm / ~32 Module = 0,78mm je Modul (weit ueber
     der Druckgrenze), dazu 2mm weisse Ruhezone - zusammen mit dem Rand im SVG
     ~4,5 Module. Die QR-Norm verlangt 4. */
  .pdf-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
  }

  .pdf-qr-bild {
    width: 25mm;
    height: 25mm;
    display: block;
    background: #fff;
    padding: 2mm;
  }

  .pdf-qr-url {
    font-size: 9pt;
    font-weight: 700;
    margin-top: 0.5mm;
  }

  .pdf-h2 {
    font-family: "Rubik", system-ui, sans-serif;
    font-size: 11pt;
    font-weight: 700;
    color: var(--color-green-deep);
    margin: 0 0 1mm;
  }

  .pdf-schritte {
    margin: 0;
    padding-left: 6mm;
  }

  .pdf-schritte li { margin-bottom: 0.4mm; }

  .pdf-standort-zeile {
    margin: 1.5mm 0 0;
    font-weight: 700;
  }

  /* --- 3. Team-Codes --- */
  /* border-spacing statt Grid: eine Tabelle ist die einzige Konstruktion, deren
     Kopfzeile alle Browser beim Seitenumbruch von selbst wiederholen. */
  .pdf-karten {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4mm 2.5mm;
    table-layout: fixed;
  }

  .pdf-lauf {
    text-align: left;
    font-family: "Rubik", system-ui, sans-serif;
    font-size: 10pt;
    font-weight: 700;
    color: var(--color-green-deep);
    border-bottom: 1.5pt solid var(--color-green);
    padding-top: 4mm;
    padding-bottom: 1mm;
  }

  .pdf-karten td { width: 50%; vertical-align: top; }
  .pdf-karte-leer { border: 0; }

  .pdf-karte {
    border: 0.8pt dashed #000;
    border-radius: 2mm;
    padding: 2mm 3.5mm 2.5mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .pdf-karte-label,
  .pdf-karte-feld {
    display: block;
    font-size: 7.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .pdf-karte-label { color: var(--color-green-deep); }

  /* Monospace + Sperrung: die Dreiergruppen bleiben auch beim Abtippen klar
     getrennt. Der Zeichensatz selbst ist schon verwechslungsfrei (kein O/0, I/1/L). */
  .pdf-karte-code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 20pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0.5mm 0 2.5mm;
    white-space: nowrap;
  }

  .pdf-karte-feld { margin-bottom: 4mm; }

  .pdf-karte-linie {
    display: block;
    border-bottom: 0.6pt solid #000;
  }

  /* --- 4. Praxis-Hinweise --- */
  .pdf-praxis {
    margin-top: 3mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .pdf-praxis ul {
    margin: 0;
    padding-left: 5mm;
    font-size: 9.5pt;
  }

  /* --- 5. Abtrennbarer Streifen (nur Gruppenleitung) --- */
  .pdf-streifen {
    margin-top: 4mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .pdf-schnittlinie {
    border-top: 1pt dashed #000;
    padding-top: 2mm;
    font-size: 9pt;
    font-weight: 700;
  }

  .pdf-schere {
    font-size: 13pt;
    line-height: 1;
    vertical-align: -1pt;
  }

  .pdf-streifen-inhalt {
    display: flex;
    flex-direction: column;
    margin-top: 1.5mm;
  }

  .pdf-streifen-label {
    font-size: 7.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .pdf-streifen-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10pt;
    word-break: break-all;
  }
}