/* =============================================================================
   print.css — Druckstylesheet
   Einbinden mit: <link rel="stylesheet" href="/assets/css/print.css" media="print">
   Ziel: lesbarer Trainingsplan auf Papier/PDF, ein Trainingstag pro Seite,
   Muskelkarte mit erhaltenen Datenfarben.
   ========================================================================== */

/* =============================================================================
   01  Seiteneinrichtung
   ========================================================================== */
@page {
  size: A4 portrait;
  margin: 16mm 14mm 18mm;
}

@page :first {
  margin-top: 12mm;
}

/* =============================================================================
   02  Grundfarben und Schrift: schwarz auf weiss, serifenlos, pt-Groessen
   ========================================================================== */
html,
body {
  background: #fff !important;
  color: #000 !important;
  font-family: var(--font-sans) !important;
  font-size: 10.5pt !important;
  line-height: 1.4 !important;
  width: auto !important;
  min-height: 0 !important;
}

/* Themebedingte Farbtoken fuer den Druck neutralisieren.
   Die Muskel- und Heatmap-Token bleiben bewusst farbig. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  color-scheme: light !important;

  --farbe-bg: #fff;
  --farbe-bg-tief: #fff;
  --farbe-flaeche: #fff;
  --farbe-flaeche-hoch: #fff;
  --farbe-flaeche-hover: #fff;
  --farbe-flaeche-gedaempft: #fff;
  --farbe-text: #000;
  --farbe-text-leise: #1a1a1a;
  --farbe-text-schwach: #444;
  --farbe-rand: #000;
  --farbe-rand-stark: #000;
  --farbe-rand-leise: #999;
  --farbe-akzent: #000;
  --farbe-akzent-hell: #000;
  --farbe-akzent-dunkel: #000;
  --farbe-akzent-weich: #fff;
  --farbe-auf-akzent: #000;
  --farbe-link: #000;
  --farbe-link-hover: #000;

  --schatten-xs: none;
  --schatten-sm: none;
  --schatten-md: none;
  --schatten-lg: none;
  --schatten-xl: none;
  --schatten-innen: none;
  --ring-akzent: none;

  /* Muskelfarben bleiben erhalten, leicht abgedunkelt fuer Tinte */
  --muscle-idle: #d9d9d9;
  --muscle-idle-rand: #666;
  --muscle-idle-hover: #d9d9d9;
  --muscle-primary: #d32020;
  --muscle-primary-rand: #7a1010;
  --muscle-secondary: #f2c200;
  --muscle-secondary-rand: #806600;
  --muscle-kontur: #333;

  --heat-0: #fff;
  --heat-1: #e6efd9;
  --heat-2: #c7dfa8;
  --heat-3: #9cc46a;
  --heat-4: #6f9c31;
  --heat-0-text: #333;
  --heat-1-text: #000;
  --heat-2-text: #000;
  --heat-3-text: #000;
  --heat-4-text: #000;
  --heat-rand: #555;
  --heat-muster: rgba(0, 0, 0, 0.35);
}

* {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  scrollbar-width: none;
}

/* =============================================================================
   03  Interaktives und Navigation ausblenden
   ========================================================================== */
.kopfzeile,
.hauptnav,
.mobilmenue,
.menue-schalter,
.sprunglink,
.fusszeile,
.filterleiste,
.aktive-filter,
.suchfeld,
.paginierung,
.tabs__liste,
.theme-umschalter,
.muster-schalter,
.flash-bereich,
.flash__schliessen,
.chip__entfernen,
.akkordeon__pfeil,
.tooltip__blase,
.skeleton,
.btn,
.btn-gruppe,
.icon-knopf,
.formular-aktionen,
.regler,
.regler-feld,
.autorenbox__links,
.karte__fuss,
.sortknopf::after,
.inhaltsverzeichnis--ausklappbar,
.seiten-layout__leiste,
nav[aria-label="Paginierung"],
form,
button,
[type="button"],
[type="submit"],
[type="reset"],
dialog:not([open]),
video,
iframe,
audio,
[data-druck="aus"],
[role="tablist"],
[hidden] {
  display: none !important;
}

/* Ein geoeffneter Dialog wird als normaler Block gedruckt */
dialog[open] {
  position: static !important;
  display: block !important;
  border: 1pt solid #000 !important;
  max-width: none !important;
  max-height: none !important;
}

dialog[open]::backdrop {
  display: none !important;
}

/* Nur zum Drucken bestimmte Inhalte einblenden */
[data-druck="nur"],
.nur-druck {
  display: block !important;
}

/* =============================================================================
   04  Layout entzerren
   ========================================================================== */
.seite,
.seite > main {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.container,
.container--eng,
.container--text,
.container--inhalt,
.container--weit {
  max-width: none !important;
  width: auto !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

.seiten-layout,
.raster,
.raster-2,
.raster-3,
.raster-4,
.messwert-gruppe {
  display: block !important;
}

.tabelle-scroll,
.heatmap,
.schnapp-reihe {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.karte,
.formular-block,
.autorenbox,
.inhaltsverzeichnis,
.leerzustand,
.muskelkarte,
.messwert {
  border: 0.5pt solid #666 !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 4mm !important;
  margin-block-end: 4mm !important;
}

.karte__medien,
.bild-rahmen {
  aspect-ratio: auto !important;
}

/* Panels aus Tabs und geschlossene Akkordeons beim Druck alle zeigen */
.tabs__panel[hidden],
.akkordeon__koerper {
  display: block !important;
  visibility: visible !important;
}

.akkordeon__punkt {
  border-bottom: 0.5pt solid #999 !important;
}

/* =============================================================================
   05  Typografie im Druck
   ========================================================================== */
h1 { font-size: 20pt !important; }
h2 { font-size: 15pt !important; }
h3 { font-size: 13pt !important; }
h4 { font-size: 11.5pt !important; }
h5,
h6 { font-size: 10.5pt !important; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000 !important;
  line-height: 1.2 !important;
  orphans: 3;
  widows: 3;
  /* Ueberschriften nie allein am Seitenende */
  break-after: avoid;
  page-break-after: avoid;
  break-inside: avoid;
}

p,
li,
blockquote,
figcaption,
.inhalt p {
  orphans: 3;
  widows: 3;
  color: #000 !important;
}

.inhalt {
  max-width: none !important;
  color: #000 !important;
  line-height: 1.45 !important;
}

.inhalt h2 {
  border-bottom: 0.5pt solid #000 !important;
}

.inhalt blockquote {
  border-inline-start: 2pt solid #000 !important;
  background: #fff !important;
  font-size: 10.5pt !important;
  break-inside: avoid;
}

.inhalt code,
.inhalt pre,
code,
pre,
kbd {
  background: #fff !important;
  color: #000 !important;
  border: 0.5pt solid #999 !important;
  font-size: 9pt !important;
}

.inhalt pre {
  white-space: pre-wrap !important;
  word-wrap: break-word;
  break-inside: avoid;
}

.lead,
.leise,
.schwach,
.karte__text,
.karte__meta {
  color: #1a1a1a !important;
}

.uebertitel,
.messwert__label,
.filterleiste__label {
  color: #333 !important;
}

/* =============================================================================
   06  Links: keine URL im Fliesstext anhaengen
   ========================================================================== */
a,
a:visited {
  color: #000 !important;
  text-decoration: underline !important;
}

/* Alle automatischen URL-Anhaenge unterdruecken */
a::after,
.inhalt a::after,
a[href]::after {
  content: none !important;
}

/* Karten-Overlaylink darf die Flaeche nicht mehr ueberdecken */
.karte__titel a::after {
  position: static !important;
}

.brotkrumen {
  font-size: 9pt !important;
  color: #333 !important;
}

/* =============================================================================
   07  Bilder und Medien
   ========================================================================== */
img,
svg {
  max-width: 100% !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

figure {
  break-inside: avoid;
  page-break-inside: avoid;
}

.autorenbox__bild {
  width: 18mm !important;
  height: 18mm !important;
  border: 0.5pt solid #666 !important;
}

/* =============================================================================
   08  Tabellen mit wiederholtem Kopf
   ========================================================================== */
table,
.tabelle,
.inhalt table {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
  font-size: 9.5pt !important;
  break-inside: auto;
  page-break-inside: auto;
}

thead {
  display: table-header-group; /* Kopfzeile auf jeder Seite wiederholen */
}

tfoot {
  display: table-footer-group;
}

tr,
.tabelle tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

th,
td,
.tabelle th,
.tabelle td,
.inhalt th,
.inhalt td {
  padding: 1.5mm 2mm !important;
  border: 0.5pt solid #666 !important;
  color: #000 !important;
  background: #fff !important;
  position: static !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.tabelle thead th,
.inhalt th {
  font-weight: 700 !important;
  border-bottom-width: 1pt !important;
  background: #f0f0f0 !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.tabelle--gestreift tbody tr:nth-child(even) {
  background: #fff !important;
}

caption {
  font-size: 9pt !important;
  text-align: left !important;
  padding-bottom: 1mm !important;
}

/* =============================================================================
   09  Trainingsplan: ein Tag pro Seite
   ========================================================================== */
.plan-tag {
  break-inside: avoid;
  page-break-inside: avoid;
  break-after: page;
  page-break-after: always;
  padding: 0 !important;
  border: 0 !important;
  margin-block-end: 0 !important;
}

/* Letzter Tag erzeugt keine leere Schlussseite */
.plan-tag:last-child,
.plan-tag:last-of-type {
  break-after: auto;
  page-break-after: auto;
}

.plan-tag__kopf {
  break-after: avoid;
  page-break-after: avoid;
  border-bottom: 1pt solid #000 !important;
  padding-bottom: 2mm !important;
  margin-bottom: 3mm !important;
}

.plan-tag__titel {
  font-size: 15pt !important;
  font-weight: 700 !important;
}

.plan-uebung,
.plan-satz-gruppe {
  break-inside: avoid;
  page-break-inside: avoid;
}

.plan-notiz {
  border: 0.5pt dashed #666 !important;
  min-height: 14mm;
  margin-top: 3mm;
  padding: 2mm !important;
}

/* Allgemeine Umbruchhilfen */
.seitenumbruch-vor { break-before: page; page-break-before: always; }
.seitenumbruch-nach { break-after: page; page-break-after: always; }
.zusammenhalten { break-inside: avoid; page-break-inside: avoid; }

/* =============================================================================
   10  Muskelkarte: Datenfarben im PDF erhalten
   ========================================================================== */
.muskelkarte,
.muskelkarte *,
.muskel-legende,
.muskel-legende *,
.heatmap,
.heatmap * {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  color-adjust: exact !important;
}

.muskelkarte {
  break-inside: avoid;
  page-break-inside: avoid;
  max-width: 90mm !important;
  aspect-ratio: 1 / 1.6 !important;
  margin: 0 auto 4mm !important;
}

.muskelkarte--doppelt {
  max-width: 150mm !important;
  aspect-ratio: 1 / 0.9 !important;
}

.muscle {
  fill: var(--muscle-idle) !important;
  stroke: var(--muscle-kontur) !important;
  stroke-width: 0.6 !important;
}

.muscle.is-primary {
  fill: var(--muscle-primary) !important;
  stroke: var(--muscle-primary-rand) !important;
  stroke-width: 0.8 !important;
}

.muscle.is-secondary {
  fill: var(--muscle-secondary) !important;
  stroke: var(--muscle-secondary-rand) !important;
  stroke-width: 0.8 !important;
}

/* Musterdarstellung bleibt auch im Druck erhalten, wenn sie aktiv ist */
:root.muster-an .muscle.is-primary {
  fill: url(#hatch-primary) !important;
  stroke: var(--muscle-primary) !important;
}

:root.muster-an .muscle.is-secondary {
  fill: url(#hatch-secondary) !important;
  stroke: var(--muscle-secondary) !important;
}

.muskelkarte__label {
  fill: #000 !important;
  font-size: 7pt !important;
}

.muskel-legende {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2mm 5mm !important;
  border: 0.5pt solid #666 !important;
  background: #fff !important;
  padding: 2mm !important;
  font-size: 8.5pt !important;
  break-inside: avoid;
}

.muskel-legende__probe {
  width: 4mm !important;
  height: 4mm !important;
  border: 0.4pt solid #333 !important;
}

/* =============================================================================
   11  Heatmap im Druck
   ========================================================================== */
.heatmap__raster {
  min-width: 0 !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.heatmap-zelle {
  min-block-size: 8mm !important;
  font-size: 8.5pt !important;
  border-width: 0.5pt !important;
}

.heatmap-zelle.stufe-0 {
  border-style: dashed !important;
}

.heatmap-zelle.ist-unterversorgt {
  outline: 1pt dashed #000 !important;
  outline-offset: -1pt !important;
}

.heatmap-zelle.ist-unterversorgt::after,
.heatmap__zeilenkopf.ist-unterversorgt::before {
  color: #000 !important;
}

.heatmap__warnung {
  border: 0.5pt solid #000 !important;
  border-inline-start-width: 2pt !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 9pt !important;
  break-inside: avoid;
}

/* =============================================================================
   12  Statusmeldungen und Abzeichen entfarben, aber lesbar halten
   ========================================================================== */
.flash {
  border: 0.5pt solid #000 !important;
  border-inline-start-width: 2pt !important;
  background: #fff !important;
  color: #000 !important;
  break-inside: avoid;
}

.flash__text,
.flash__titel {
  color: #000 !important;
}

.abzeichen,
.chip {
  border: 0.5pt solid #333 !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 8.5pt !important;
}

.fortschritt__spur {
  border: 0.5pt solid #000 !important;
  background: #fff !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.fortschritt__balken {
  background: #666 !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* =============================================================================
   13  Fussbereich fuer Ausdrucke
   ========================================================================== */
.druck-kopf {
  display: block !important;
  border-bottom: 1pt solid #000;
  padding-bottom: 2mm;
  margin-bottom: 4mm;
  font-size: 9pt;
}

.druck-fuss {
  display: block !important;
  border-top: 0.5pt solid #666;
  padding-top: 2mm;
  margin-top: 6mm;
  font-size: 8.5pt;
  color: #333 !important;
}

/* Bedienelemente der Druckseite erscheinen nie im Ausdruck. */
@media print {
  .nur-bildschirm,
  [data-druckleiste] {
    display: none !important;
  }

  /* Eintragfelder sichtbar lassen, damit man von Hand ausfuellen kann. */
  .eintragfeld {
    border-bottom: 1pt solid #000;
  }
}


/* Einkaufsliste: Kaestchen und Trennlinien muessen im Ausdruck sichtbar sein. */
@media print {
  .einkaufsliste__kasten {
    border: 1pt solid #000;
  }

  .einkaufsliste__eintrag {
    border-bottom: 0.5pt solid #999;
  }
}


/* Der medizinische Hinweis gehoert auch in den Ausdruck. */
@media print {
  .gesundheitshinweis {
    border-left: 3pt solid #000;
    background: transparent;
    break-inside: avoid;
  }
}