:root {
  --desk: #45524e;          /* muted chalkboard green as work surface */
  --desk-deep: #38443f;
  --paper: #fdfdfb;
  --ink: #1d3f8f;           /* fountain-pen ink */
  --ink-dark: #16306e;
  --text: #23282b;
  --muted: #6b7470;
  --line: #d8ddd9;
  --panel: #f4f5f2;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* keep mobile WebKit from inflating font sizes ("text autosizing") - it would
   change line wrapping and page fills, on screen and in the print job */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: linear-gradient(160deg, var(--desk) 0%, var(--desk-deep) 100%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  min-height: 100vh;
}

header.app {
  color: #eef1ee;
  padding: 22px 24px 10px;
  max-width: 1240px;
  margin: 0 auto;
}
header.app h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
}
header.app p { margin: 0; font-size: 0.85rem; color: #c6cec9; }

.layout {
  display: grid;
  /* minmax(0, …): the A4 sheet's intrinsic width must not widen the column */
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 22px;
  max-width: 1240px;
  margin: 14px auto 40px;
  padding: 0 24px;
  align-items: start;
}

/* ---------- Form panel ---------- */
.panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.panel label.field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0 4px;
}
.panel select, .panel input[type=text], .panel input[type=date],
.panel input[type=time], .panel textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 0.92rem;
  background: #fff;
}
.panel textarea { min-height: 70px; resize: vertical; }
.panel select:focus, .panel input:focus, .panel textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}
.field-row { display: flex; gap: 10px; }
.field-row > div { flex: 1; }
.check-line {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: 0.92rem;
}
.check-line input { width: 17px; height: 17px; accent-color: var(--ink); }

.day-grid {
  display: grid;
  grid-template-columns: 42px 1fr 1fr 26px; /* day, from, to, clear button */
  gap: 6px 8px;
  align-items: center;
  margin-top: 6px;
}
.day-grid .dow { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.day-grid input[type=time] { padding: 6px 6px; font-size: 0.88rem; }
.day-grid .colhead { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.day-grid.dates { grid-template-columns: 86px 1fr 1fr 26px; }
.item-row {
  display: grid;
  grid-template-columns: 1fr 56px; /* title, count */
  gap: 6px;
  margin-top: 6px;
}

/* ---------- Template selection panel ---------- */
.tpl-wrap {
  max-width: 1240px;
  margin: 14px auto 0;
  padding: 0 24px;
}
/* align the "Vorlage" heading with the "Stammdaten" summary above (which
   sits directly at the panel padding) and give the dropdown more air */
.tpl-panel > label.field-label { margin: 0 0 10px; font-size: 0.82rem; }
.tpl-panel select { max-width: 480px; }
.tpl-desc { font-size: 0.85rem; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
#tplNotesHost {
  margin-top: 10px;
  font-size: 0.85rem;
  line-height: 1.55;
  max-width: 860px;
}
#tplNotesHost summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
#tplNotesHost details > *:not(summary) { margin-left: 2px; }
#tplNotesHost details[open] {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 16px 12px;
  margin-top: 6px;
}
#tplNotesHost h4 { margin: 12px 0 4px; font-size: 0.9rem; }
.notes-warning {
  border-left: 4px solid #a33328;
  background: #faf1ef;
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 860px;
}
#tplNotesHost ul { margin: 4px 0; padding-left: 18px; }
#tplNotesHost li { margin-bottom: 4px; }

/* ---------- Master data (Stammdaten) ---------- */
/* full-width collapsible panel above the form/preview layout */
.profiles-wrap {
  max-width: 1240px;
  margin: 14px auto 0;
  padding: 0 24px;
}
details.profiles summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  align-items: start;
  margin-top: 4px;
}
.profile-grid .profile-card { margin-top: 0; }
/* add buttons fill their grid cell, matching the card height in the row */
.profile-grid button.add { align-self: stretch; margin-top: 0; }
details.profiles .field-row { margin-top: 6px; }
.profile-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafaf8;
  padding: 8px 32px 10px 10px;
  margin-top: 8px;
}
.profile-card input, .profile-card select { margin-top: 6px; }
.profile-card input:first-child, .profile-card select:first-child { margin-top: 0; }
button.remove {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
button.remove:hover { color: #a33328; background: #eeeae6; }
.profile-card button.remove { position: absolute; top: 6px; right: 4px; }
button.add {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
}
button.add:hover { border-color: var(--muted); color: var(--text); }

.actions { margin-top: 20px; display: flex; gap: 10px; }
button.primary {
  flex: 1;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.primary:hover { background: var(--ink-dark); }
button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}
button.ghost:hover { border-color: var(--muted); color: var(--text); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hint { font-size: 0.78rem; color: var(--muted); margin-top: 10px; line-height: 1.4; }
.panel-info { font-size: 0.85rem; font-weight: 600; color: var(--ink); margin: 14px 0 0; }

/* ---------- Sheet preview ---------- */
.sheet-wrap { display: flex; justify-content: center; }
.sheet {
  background: var(--paper);
  width: 210mm;
  min-height: 297mm;
  max-width: 100%;
  padding: 15mm; /* must match the print @page margin - same geometry */
  box-shadow: 0 14px 40px rgba(0,0,0,0.38);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 11.5pt;
  line-height: 1.55;
  color: #1a1d1f;
}
/* The sheet keeps its A4 geometry on every screen size - it is scaled down
   to the available width instead of reflowing, so the preview wraps and
   fills pages exactly like the print output (fitSheet() in app.js sets the
   factor). zoom, not transform: the layout around it takes the scaled size.
   The max-width above stays as the fallback for engines without zoom. */
@media screen {
  .sheet { zoom: var(--sheet-zoom, 1); }
}
.sheet h2.doc-title {
  font-size: 15.5pt;
  font-weight: 600;
  margin: 0 0 4px;
}
.sheet .doc-sub { color: #555; font-size: 10pt; margin: 0 0 22px; font-family: system-ui, sans-serif; }
.sheet table.doc {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 18px;
  font-family: system-ui, sans-serif;
  font-size: 10pt;
}
.sheet table.doc th, .sheet table.doc td {
  border: 1px solid #333;
  padding: 6px 9px;
  text-align: left;
}
.sheet table.doc th { background: #f0f0ec; font-weight: 600; }
.sheet table.doc tr.week-start td { border-top: 3px double #333; }
.sheet .kv { margin: 3px 0; }
.sheet .kv b { display: inline-block; min-width: 175px; font-weight: 600; }
/* full-width fill-in line (block variant of .fillline) */
.sheet .fill-row {
  border-bottom: 1px solid #333;
  min-height: 1.1em;
  margin-top: 6px;
  padding: 0 2px;
}
/* inside bordered table cells the empty cell itself is the fill-in area –
   no extra underline (the deliberate .fill-row lines are unaffected) */
.sheet table.doc .fillline { border-bottom: none; min-width: 0; }
.sheet .fillline {
  display: inline-block;
  min-width: 130px;
  border-bottom: 1px solid #333;
  padding: 0 4px;
}
.sheet .sig-row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 60px;
  font-size: 10pt;
  font-family: system-ui, sans-serif;
}
.sheet .sig-row > div {
  flex: 1;
  border-top: 1px solid #333;
  padding-top: 5px;
  color: #444;
}
/* variant with the (pre-filled) value ABOVE the line, label below */
.sheet .sig-row > div.sig-lined { border-top: none; padding-top: 0; }
.sheet .sig-lined .sig-value { padding: 0 4px 2px; min-height: 1.2em; color: #1a1d1f; }
.sheet .sig-lined .sig-label { border-top: 1px solid #333; padding-top: 4px; }
.sheet .empty-note {
  color: #999; font-family: system-ui, sans-serif; font-size: 10pt;
  text-align: center; margin-top: 80px;
}

/* ---------- Original-look form elements ---------- */
/* denser layout for forms that must fit on a single A4 page */
.sheet .compact { font-size: 10pt; line-height: 1.35; }
.sheet .compact p { margin: 6px 0; }
.sheet .compact .form-title { font-size: 11.5pt; margin: 0 0 8px; }
.sheet .compact table.doc { margin: 12px 0 16px; font-size: 9pt; }
.sheet .compact table.doc th, .sheet .compact table.doc td { padding: 3px 6px; }
.sheet .compact .box { margin: 8px 0; padding: 6px 10px; font-size: 9.5pt; }
.sheet .compact .box .box-title { font-size: 10pt; margin: 0 0 6px; }
.sheet .compact .sig-single { margin-top: 14px; }
.sheet .compact .sig-row { margin-top: 24px; }

.sheet .form-title {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 12.5pt;
  margin: 0 0 12px;
}
.sheet .addr-block {
  margin-left: auto;
  width: fit-content;
  font-family: system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 10pt;
  line-height: 1.35;
  margin-bottom: 20px;
}
.sheet .box {
  border: 1.5px solid #1a1d1f;
  padding: 8px 12px;
  margin: 12px 0;
  font-family: system-ui, sans-serif;
  font-size: 10pt;
}
.sheet .box .box-title {
  font-weight: 700;
  font-size: 11pt;
  text-decoration: underline;
  margin: 2px 0 8px;
}
.sheet .note-box {
  border: 2px solid #1a1d1f;
  padding: 10px 14px;
  margin: 20px 0;
  font-family: system-ui, sans-serif;
  font-size: 10.5pt;
  font-weight: 600;
}
.sheet .sig-single {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  font-family: system-ui, sans-serif;
  font-size: 10pt;
}
.sheet .sig-single > div {
  border-top: 1px solid #333;
  padding-top: 4px;
  width: 45%;
  color: #444;
}
/* computed preview values (e.g. in sections the school fills in): grey on
   screen, absent in print - .print-only shows the empty mark instead */
.sheet .ghost { color: #a9a9a9; }
.sheet .print-only { display: none; }

/* each .page of a multi-page form fills a full A4 page in the preview
   (297mm minus the sheet's vertical padding) */
.sheet .page { min-height: 267mm; }

/* second sheet of a multi-page form: the preview shows a desk-coloured gap
   bleeding to the sheet edges, so it reads as two stacked pages */
.sheet .page-break {
  height: 36px;
  margin: 30px -15mm;
  background: var(--desk-deep);
  box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.55), inset 0 -10px 10px -10px rgba(0,0,0,0.55);
}

/* ---------- Footer ---------- */
footer.app {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 28px;
  text-align: center;
  font-size: 0.78rem;
  color: #c6cec9;
  line-height: 1.6;
}
footer.app a { color: #eef1ee; text-decoration: none; }
footer.app a:hover { text-decoration: underline; }
footer.app .brand { color: #9aa5a0; }
/* looks like the footer links, acts like a button */
footer.app button.linklike {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: #eef1ee; text-decoration: underline; cursor: pointer;
}
footer.app button.linklike:hover { color: #fff; }

/* ---------- Responsive ---------- */
/* screen only: the print viewport is narrow too (A4 minus margins ~ 680px),
   so an unqualified max-width query would leak these rules into the print job */
@media screen and (max-width: 980px) {
  /* minmax(0, 1fr): the A4 sheet must not widen the column - it is zoomed
     down to fit it instead (see --sheet-zoom above) */
  .layout { grid-template-columns: minmax(0, 1fr); }
  .profile-grid { grid-template-columns: 1fr; }
  .sheet-wrap { margin: 0 -12px; } /* narrow screens: more room for the sheet */
}

/* ---------- Print: sheet only ---------- */
@media print {
  /* min-height: 100vh would force a blank second page.
     width: phones lay the print job out at the device viewport width (~390px)
     and scale that rendering onto the paper - which blew the sheet up by ~1.7x,
     so page one alone overflowed onto a second sheet (and the content past the
     pre-scale page count was cut off). Pinning the document to the printable
     A4 width (210mm paper - 2x15mm @page margin) makes that scale factor 1,
     so a phone paginates exactly like a desktop. */
  html, body { background: #fff; min-height: 0; height: auto; width: 180mm; }
  header.app, footer.app, .panel, .profiles-wrap, .tpl-wrap { display: none !important; }
  .layout { display: block; margin: 0; padding: 0; max-width: none; }
  .sheet {
    box-shadow: none;
    width: 180mm;
    max-width: none;
    min-height: auto;
    padding: 0;
    margin: 0;
  }
  .sheet .page { min-height: 0; }
  /* the forced break rides on the following page box instead of the empty,
     zero-height separator - a break on a box with no content is honoured
     inconsistently. page-break-before is the legacy alias for engines that
     do not implement break-before for pages. */
  .sheet .page-break { display: none; }
  .sheet .page-break + .page, .sheet .page + .page {
    break-before: page;
    page-break-before: always;
  }
  .sheet .ghost { display: none; }
  .sheet .print-only { display: inline; }
  /* same geometry as the on-screen preview (its 15mm padding), so line
     wraps and page fills match what was checked on screen. NB: a zero
     margin does NOT stop Safari from printing its own header and footer
     (title, date, URL, page number) - it just moves them onto the sheet.
     No CSS suppresses those; only printing an actual PDF file does. */
  @page { size: A4; margin: 15mm; }
}