/* =============================================================================
   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
   ========================================================================== */
/* F-014: Hier standen `break-inside: avoid` und `break-after: page`
   gleichzeitig. Ein Tagesblock ist mit allen Uebungen regelmaessig hoeher als
   eine Seite (gemessen rund 1729 px gegen 994 px nutzbare Hoehe) - er KANN
   also nicht ungeteilt bleiben. Der Browser loest den Widerspruch, indem er
   den Block auf eine frische Seite schiebt und trotzdem umbricht; aus drei
   Trainingstagen wurden so 14 Seiten.

   Der Umbruch steht jetzt VOR jedem Tag statt hinter jedem. Das ergibt
   dasselbe „ein Tag je Seite", erzeugt keine leere Schlussseite, und ein zu
   hoher Tag darf weiterlaufen, statt eine halbe Seite frei zu lassen. Vor
   jedem, nicht erst vor dem zweiten: sonst begaenne der erste Tag mitten auf
   der Uebersichtsseite und wuerde dort geteilt. Zusammengehalten wird
   weiterhin das, was auch wirklich auf eine Seite passt: Tageskopf und
   Uebungszeile. */
.plan-tag {
  break-inside: auto;
  page-break-inside: auto;
  break-before: page;
  page-break-before: always;
  padding: 0 !important;
  border: 0 !important;
  margin-block-end: 0 !important;
}

/* Zweiter Teil von F-014: Die beiden Muskelkarten eines Tages standen im
   Ausdruck untereinander statt nebeneinander. Sie sind am Bildschirm 300 px
   breit, die Spalte im Druck aber nur 42 % - also brechen sie um und machen
   den Tagesblock allein dadurch rund 1240 px hoch. Mit einer Druckgroesse
   passen Vorder- und Rueckansicht nebeneinander, und ein Trainingstag geht
   wieder auf eine Seite. */
.plan-woche .muskelkarte svg,
.plan-tag .muskelkarte svg {
  inline-size: 28mm !important;
  block-size: 56mm !important;
}

.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;
  }
}

/* F-026: stand vorher als literales style-Attribut in
   views/pages/plaene/druck.php und wurde von der CSP verworfen. */
.muskelkarte--schmal {
  max-inline-size: 42%;
}