/*
 * Die Wochenplan-Vorlage - auf dem Bildschirm und auf Papier.
 *
 * Zwei Darstellungen aus einer Quelle. Der Druck ist dabei die
 * eigentliche: Was hier steht, soll auf eine A4-Seite passen und mit
 * einem Kugelschreiber ausfuellbar sein. Deshalb Zeilenhoehen in
 * Millimetern statt in Pixeln - eine Zeile, in die man nicht schreiben
 * kann, ist keine.
 */

.vorlage-aktion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 28px 0 36px;
}

.vorlage-aktion small {
  font-size: 13px;
  color: var(--text-tertiary);
}

.vorlage-aktion button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* Auf dem Telefon seitlich schiebbar statt gequetscht: Eine
   Wochenplantabelle hat eine Mindestbreite, unter der sie unleserlich
   wird, und das Zusammenschieben verspricht faelschlich, dass sie so
   auch aus dem Drucker kaeme. */
.vorlage-rahmen {
  overflow-x: auto;
  margin: 24px 0 40px;
  -webkit-overflow-scrolling: touch;
}

.vorlage {
  min-width: 640px;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #d8d3ca;
  border-radius: 6px;
  padding: 22px 24px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.vorlage-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1a1a1a;
}

.vorlage-kopf h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.01em;
}

.vorlage-woche {
  margin: 0;
  font-size: 13px;
  color: #55524d;
}

/* Zum Eintragen von Hand: eine Linie, kein Kaestchen. */
.linie-kurz {
  display: inline-block;
  width: 78px;
  border-bottom: 1px solid #8a857e;
}

.vorlage-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vorlage-tabelle th,
.vorlage-tabelle td {
  border: 1px solid #c9c4bb;
  text-align: left;
  vertical-align: top;
  padding: 3px 7px;
}

.vorlage-tabelle thead th {
  background: #f2efe9;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* 14 mm: hoch genug fuer eine handschriftliche Zeile, niedrig genug,
   dass sieben Tage plus Einkaufsliste auf eine Seite passen. */
.vorlage-tabelle tbody th,
.vorlage-tabelle tbody td {
  height: 14mm;
}

.vorlage-tabelle tbody th {
  font-weight: 600;
  white-space: nowrap;
  background: #faf8f5;
}

.sp-tag { width: 15%; }
.sp-gericht { width: 38%; }
.sp-anders { width: 39%; }
.sp-haken { width: 8%; }

.vorlage-unten {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  margin-top: 16px;
}

.vorlage-unten h3 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #55524d;
}

.vorlage-unten ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vorlage-unten li {
  height: 8mm;
  border-bottom: 1px solid #d8d3ca;
}

.vorlage-fuss {
  margin: 16px 0 0;
  font-size: 10px;
  color: #8a857e;
  text-align: right;
}

/* ── Der Druck ──────────────────────────────────────── */

@media print {
  /* Alles ausser der Vorlage verschwindet. Wer auf "Drucken" tippt,
     will das Formular, nicht den Artikel darum herum. */
  .landing-top,
  .landing-fuss,
  .vorlage-aktion,
  .artikel h1,
  .artikel h2,
  .artikel p,
  .artikel-vorspann,
  .artikel-abschluss {
    display: none !important;
  }

  body,
  .landing,
  .artikel,
  article {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .vorlage-rahmen {
    overflow: visible;
    margin: 0;
  }

  .vorlage {
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  /* Eine Seite, und keine Zeile darf umbrechen. */
  .vorlage-tabelle { page-break-inside: avoid; }
  .vorlage-tabelle tr { page-break-inside: avoid; }
  .vorlage-unten { page-break-inside: avoid; }

  @page {
    size: A4 portrait;
    margin: 14mm 12mm;
  }
}