/* Gemeinsam für alle Vokabellisten und Vokabeltrainer: Drucken und Lernliste */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
}
.print-btn:hover {
  background: rgba(37, 99, 235, 0.08);
}

/* Lernliste nach beendeter Übung */
.lernliste {
  text-align: left;
  margin-top: 22px;
  border-top: 1px dashed var(--line);
  padding-top: 18px;
}
.lernliste > h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  margin: 0 0 4px;
}
.lernliste-hinweis {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0 0 14px;
}
.lern-gruppe {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.6);
}
.lern-gruppe h4 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  margin: 0 0 6px;
}
.lern-gruppe.stark {
  border-left-color: #dc2626;
}
.lern-gruppe.etwas {
  border-left-color: #d97706;
}
.lern-gruppe.sitzt {
  border-left-color: #16a34a;
}
.lern-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  font-size: 14px;
  padding: 7px 0;
  border-top: 1px dashed var(--line);
}
.lern-antwort {
  font-weight: 700;
}
.lern-fehler {
  color: var(--muted);
  white-space: nowrap;
}

/* Druckfassung der Lernliste: am Bildschirm unsichtbar */
.lernliste-druck {
  display: none;
}

@media (max-width: 640px) {
  .hero-actions {
    width: 100%;
  }
  .print-btn {
    width: 100%;
  }
  .lern-zeile {
    grid-template-columns: 1fr auto;
  }
  .lern-antwort {
    grid-column: 1;
    grid-row: 2;
  }
  .lern-fehler {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Seitenränder und Seitenzahlen wie im PDF */
@page {
  size: A4;
  margin: 45pt;
  @bottom-right {
    content: "Seite " counter(page) " von " counter(pages);
    font: 9pt Helvetica, Arial, sans-serif;
    color: #5e6e87;
  }
}

@media print {
  body {
    background: #fff;
    color: #101729;
    font-family: Helvetica, Arial, sans-serif;
  }
  .shell {
    max-width: none;
    padding: 0;
  }
  .back,
  .topbar,
  .hero-actions,
  .searchrow,
  .eyebrow,
  .progress-track,
  .progress-meta,
  .count,
  #footer {
    display: none !important;
  }

  /* Vokabelliste: gleiche Schrift und Linien wie die Lernliste */
  .hero,
  .tablewrap {
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .hero::before,
  .hero::after {
    display: none;
  }
  .hero h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18pt;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 3pt;
  }
  .setname {
    font-size: 10pt;
    color: #5e6e87;
    margin-bottom: 14pt;
  }

  /* Tabelle auch dann als Tabelle drucken, wenn die Handy-Ansicht aktiv wäre */
  .tablewrap table {
    display: table !important;
  }
  .tablewrap thead {
    display: table-header-group !important;
  }
  .tablewrap tbody {
    display: table-row-group !important;
  }
  .tablewrap tr {
    display: table-row !important;
    break-inside: avoid;
  }
  .tablewrap th,
  .tablewrap td {
    display: table-cell !important;
    width: auto !important;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10.5pt;
    color: #101729 !important;
    background: none !important;
    padding: 3.5pt 8pt 3.5pt 0 !important;
    border-top: 0.5pt solid #d9e0eb !important;
    border-bottom: none !important;
  }
  .tablewrap th {
    font-size: 9.5pt;
    color: #5e6e87 !important;
  }
  .tablewrap .beispiel-cell {
    font-size: 9.5pt;
    color: #5e6e87 !important;
  }
  .tablewrap td::before {
    display: none !important;
  }

  /* Lernliste: im Druck nur die Fassung, die wie das PDF aussieht */
  .shell:has(.lernliste-druck) .hero,
  .done > :not(.lernliste-druck) {
    display: none !important;
  }
  .card,
  .card .done {
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
    margin: 0;
    overflow: visible;
    text-align: left;
  }
  .card::before,
  .card::after {
    display: none;
  }
  .stage {
    margin: 0;
  }
  .lernliste-druck {
    display: block;
    color: #101729;
    font-family: Helvetica, Arial, sans-serif;
  }
  .lernliste-druck h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18pt;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0 0 3pt;
  }
  .druck-stand {
    font-size: 10pt;
    color: #5e6e87;
    margin: 0 0 14pt;
  }
  .druck-gruppe {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 0 14pt;
  }
  .druck-gruppe thead {
    display: table-header-group;
  }
  .druck-gruppe th {
    font-size: 12pt;
    font-weight: 700;
    text-align: left;
    padding: 0 0 8pt;
  }
  .druck-balken {
    display: inline-block;
    width: 5pt;
    height: 16pt;
    margin-right: 5pt;
    vertical-align: -3.5pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .stark .druck-balken {
    background: #db2626;
  }
  .etwas .druck-balken {
    background: #d97805;
  }
  .sitzt .druck-balken {
    background: #17a34a;
  }
  .druck-gruppe tr {
    break-inside: avoid;
  }
  .druck-gruppe td {
    font-size: 10.5pt;
    line-height: 13pt;
    vertical-align: top;
    padding: 3.5pt 0;
    border-top: 0.5pt solid #d9e0eb;
  }
  .druck-spalte-frage {
    width: 255pt;
  }
  .druck-spalte-fehler {
    width: 66pt;
  }
  .druck-frage {
    padding-left: 10pt !important;
    padding-right: 12pt !important;
  }
  .druck-antwort {
    font-weight: 700;
    padding-right: 8pt !important;
  }
  .druck-fehler {
    font-size: 9.5pt !important;
    color: #5e6e87;
    text-align: right;
    padding-right: 8pt !important;
  }
}