/* Letheschule — Schuljahreskalender
   Цвета взяты из логотипа: солнце, река, холм. */

:root {
  --sun-red: #f53a19;
  --sun-orange: #f18c19;
  --sun-yellow: #f4b91e;
  --river: #0572b1;
  --hill-light: #6bae1f;
  --hill-dark: #497625;

  --ink: #1f2a1b;
  --ink-soft: #5d6b58;
  --line: #dbe3d6;
  --paper: #ffffff;
  --bg: #f6f7f3;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(31, 42, 27, 0.09);
  --font: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: 1640px; margin: 0 auto; padding: 22px 22px 60px; }

/* ---------- Шапка ---------- */

.masthead {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 26px 24px;
  overflow: hidden;
}

/* Горизонт из логотипа: солнечный градиент вдоль верхней кромки */
.masthead::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--sun-red), var(--sun-orange) 45%, var(--sun-yellow));
}

.masthead-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 340px; }
.brand img { width: 132px; height: auto; display: block; flex: none; }
.brand-text { min-width: 0; }

.brand h1 {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--hill-dark);
}

.brand .school {
  margin: 0 0 3px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun-orange);
}

.brand .year-line { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Панель управления ---------- */

.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.segmented {
  display: inline-flex;
  background: #eef1ea;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.segmented button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.segmented button:hover { color: var(--hill-dark); }

.segmented button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--hill-dark);
  box-shadow: 0 2px 8px rgba(31, 42, 27, 0.14);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 17px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.btn:hover { border-color: var(--hill-light); box-shadow: 0 4px 14px rgba(31, 42, 27, 0.1); }
.btn:active { transform: translateY(1px); }

.btn-sun {
  border: 0;
  color: #fff;
  background: linear-gradient(100deg, var(--sun-red), var(--sun-orange) 60%, var(--sun-yellow));
  box-shadow: 0 4px 14px rgba(241, 140, 25, 0.35);
}

.btn .icon { width: 17px; height: 17px; }

select.btn { appearance: none; padding-right: 34px; background-image: none; }

.year-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.year-select::after {
  content: "";
  position: absolute;
  right: 14px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

/* ---------- Легенда ---------- */

.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  background: var(--area-tint);
  color: var(--area-ink);
  border: 1.5px solid var(--area-line);
}

.legend-item .icon { width: 17px; height: 17px; color: var(--area-base); }

/* ---------- Переключение вида ---------- */

.view { display: none; }
body[data-view="h1"] .view-h1,
body[data-view="h2"] .view-h2,
body[data-view="year"] .view-year { display: block; }

/* ---------- Календарь ---------- */

.sheet {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 24px;
  margin-top: 22px;
}

.sheet-title {
  margin: 0 0 14px;
  font-size: 19px;
  color: var(--hill-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sheet-title::after {
  content: "";
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sun-yellow), rgba(244, 185, 30, 0));
}

.grid-scroll { overflow-x: auto; }

.grid {
  display: grid;
  grid-template-columns: 178px repeat(var(--months), minmax(122px, 1fr));
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-width: 100%;
}

/* Годовой вид: 12 колонок, поэтому у областей остаётся только иконка */
.grid.is-year { grid-template-columns: 54px repeat(var(--months), minmax(88px, 1fr)); }
.grid.is-year .area-cell { justify-content: center; padding: 10px 4px; }
.grid.is-year .area-cell span { display: none; }
.grid.is-year .area-cell .icon { width: 30px; height: 30px; }

.month-head {
  background: var(--hill-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: center;
  padding: 9px 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.month-head:last-child { border-right: 0; }

.corner-head {
  background: var(--hill-dark);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

/* Laufender Monat — Sonnengelb aus dem Logo */
.month-head.is-current {
  background: var(--sun-yellow);
  color: #5c4106;
  position: relative;
}

.now-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5c4106;
  margin: 3px auto 0;
}

.cell.is-current { background-color: rgba(244, 185, 30, 0.07); }
.cell.is-current.is-empty {
  background: repeating-linear-gradient(135deg, #fdf7e6, #fdf7e6 8px, #fbf2d9 8px, #fbf2d9 16px);
}

.area-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--area-tint);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--area-ink);
  line-height: 1.2;
}

.area-cell .icon { width: 26px; height: 26px; color: var(--area-base); flex: none; }

.cell {
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 5px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.cell:last-child { border-right: 0; }
.cell.is-empty { background: repeating-linear-gradient(135deg, #fbfcfa, #fbfcfa 8px, #f6f8f4 8px, #f6f8f4 16px); }

.card {
  background: var(--area-tint);
  color: var(--area-ink);
  border-left: 3px solid var(--area-base);
  border-radius: 5px;
  padding: 4px 6px;
  font-weight: 600;
  line-height: 1.2;
  /* Немецкие составные слова переносим по правилам, а не посреди слога */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  /* На экране единый кегль: автоподбор с ячейки нужен только при печати */
  font-size: 12.5px;
}

.grid.is-year .card { font-size: 11px; padding: 3px 5px; }

/* ---------- Zusatzinfo am Termin ---------- */

.has-note { cursor: pointer; }
.has-note:focus-visible { outline: 2px solid var(--area-base); outline-offset: 1px; }

.note-mark {
  display: inline-block;
  margin-left: 5px;
  color: var(--area-base);
  line-height: 0;
}

.note-mark .note-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}

.has-note.note-open { box-shadow: 0 0 0 2px var(--area-base); }

.note-pop {
  position: fixed;
  z-index: 60;
  width: min(300px, calc(100vw - 24px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 14px 16px 15px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(31, 42, 27, 0.22);
}

.note-title {
  margin: 0 22px 7px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--hill-dark);
  line-height: 1.25;
}

.note-body {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
}

.note-close {
  position: absolute;
  top: 8px; right: 9px;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.note-close:hover { background: #eef1ea; color: var(--ink); }

/* ---------- Мобильный вид ---------- */

.mobile-view { display: none; }

.m-month {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 14px;
  overflow: hidden;
}

.m-month > h3 {
  margin: 0;
  padding: 13px 16px;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(100deg, var(--hill-dark), var(--hill-light));
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.m-month > h3 span { font-size: 12px; font-weight: 600; opacity: 0.85; }
.m-month.is-empty > h3 { background: #b9c4b4; }

.m-month.is-current > h3 {
  background: linear-gradient(100deg, var(--sun-orange), var(--sun-yellow));
  color: #4a3204;
}

.m-month > h3 em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.65);
  color: #5c4106;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
}

.m-group { padding: 12px 16px; border-top: 1px solid var(--line); }
.m-group:first-of-type { border-top: 0; }

.m-group h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--area-ink);
  display: flex;
  align-items: center;
  gap: 7px;
}

.m-group h4 .icon { width: 17px; height: 17px; color: var(--area-base); }

.m-group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }

.m-group li {
  background: var(--area-tint);
  border-left: 3px solid var(--area-base);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--area-ink);
  font-weight: 600;
}

.m-empty { padding: 14px 16px; color: var(--ink-soft); font-size: 14px; }

.footnote { margin: 22px 2px 0; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.footnote a { color: var(--hill-dark); }

.print-stand { display: none; }

/* Umschalter für den Schwarz-weiß-Druck */
.btn-toggle { cursor: pointer; gap: 7px; user-select: none; }
.btn-toggle input { accent-color: var(--hill-dark); width: 15px; height: 15px; margin: 0; }

/*
 * Werkzeuge (Schwarz-weiß, PDF, Drucken) und Legende.
 * Am Rechner stehen sie einfach in der Kopfzeile — «display: contents» lässt
 * die Knöpfe direkte Kinder von .controls bleiben, das Layout ändert sich nicht.
 * Auf dem Handy füllten sie den halben Bildschirm, dort sind sie eingeklappt.
 */
.tools { display: contents; }
.tools-toggle { display: none; }

@media screen and (max-width: 900px) {
  .tools-toggle {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    color: var(--ink-soft);
  }

  .tools-toggle .chev {
    width: 9px; height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.15s;
  }

  .tools,
  .masthead .legend { display: none; }

  body.tools-open .tools-toggle { color: var(--hill-dark); }
  body.tools-open .tools-toggle .chev { transform: translateY(2px) rotate(-135deg); }
  body.tools-open .tools { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
  body.tools-open .masthead .legend { display: flex; margin-top: 12px; }
}

@media (max-width: 900px) {
  .shell { padding: 12px 12px 44px; }
  .desktop-view { display: none; }
  .mobile-view { display: block; }
  .masthead { padding: 18px 18px 20px; }
  .brand img { width: 74px; }
  .controls { width: 100%; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding: 10px 8px; font-size: 13px; }
}

/* ---------- Печать: A4 landscape ---------- */

@page { size: A4 landscape; margin: 0; }

@media print {
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .shell { max-width: none; padding: 0; }
  .controls, .footnote, .mobile-view, .no-print { display: none !important; }
  .desktop-view { display: block !important; }

  .masthead {
    box-shadow: none;
    border-radius: 0;
    padding: 6mm 8mm 3mm;
    break-inside: avoid;
  }

  .masthead::before { height: 2mm; }
  .brand img { width: 26mm; }
  .brand h1 { font-size: 19pt; }
  .brand .school { font-size: 8pt; }
  .brand .year-line { font-size: 8.5pt; }
  .legend { margin-top: 3mm; gap: 2mm; }
  .legend-item { font-size: 7.5pt; padding: 1mm 2.5mm; border-width: 0.35mm; }
  .legend-item .icon { width: 3.4mm; height: 3.4mm; }

  /* Шапка печатается один раз, дальше — только листы */
  .sheet {
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 4mm 8mm 6mm;
    break-after: page;
    break-inside: avoid;
  }

  .sheet:last-of-type { break-after: auto; }
  .sheet-title { font-size: 13pt; margin-bottom: 2.5mm; }
  .grid-scroll { overflow: visible; }
  /* На бумаге колонки задаём в мм: minmax из экранной версии не влезал в лист */
  .grid {
    border-radius: 0;
    grid-template-columns: 47mm repeat(var(--months), 1fr);
  }

  .grid.is-year {
    grid-template-columns: 13mm repeat(var(--months), 1fr);
  }

  .grid.is-year .area-cell { padding: 1mm 0.5mm; }
  .grid.is-year .area-cell .icon { width: 7mm; height: 7mm; }
  .month-head { font-size: 8.5pt; padding: 1.6mm 1mm; }
  .area-cell { font-size: 9.5pt; padding: 1.5mm 2mm; gap: 2mm; }
  .area-cell .icon { width: 5.6mm; height: 5.6mm; }
  .cell, .area-cell { height: var(--row-h, 25mm); overflow: hidden; }
  .cell { min-height: 0; padding: 1mm; gap: 0.7mm; }
  /* При печати кегль берётся из ячейки — он подобран под объём текста */
  .card, .grid.is-year .card {
    font-size: inherit;
    padding: 0.7mm 1.2mm;
    border-left-width: 0.6mm;
    border-radius: 1mm;
  }
  .cell.is-empty { background: #fcfdfb; }

  /* Первый лист идёт на одной странице с шапкой */
  .masthead + .sheet { break-before: avoid; }

  /* Auf Papier wäre die Monatsmarkierung schon nächsten Monat falsch */
  .month-head.is-current { background: var(--hill-dark); color: #fff; }
  .now-dot { display: none; }
  .cell.is-current { background-color: transparent; }
  .cell.is-current.is-empty { background: #fcfdfb; }

  .print-stand {
    display: block;
    margin: 2mm 8mm 0;
    font-size: 7.5pt;
    color: #555;
    text-align: right;
  }

  /* ---------- Schwarz-weiß: spart Farbtoner, bleibt gut lesbar ---------- */

  body.is-bw .masthead::before { background: #000; }
  body.is-bw .brand img { filter: grayscale(1) contrast(1.35); }
  body.is-bw .brand h1,
  body.is-bw .brand .school,
  body.is-bw .sheet-title { color: #000; }
  body.is-bw .sheet-title::after { background: #000; }

  body.is-bw .month-head,
  body.is-bw .corner-head { background: #1a1a1a !important; color: #fff; }

  body.is-bw .legend-item,
  body.is-bw .area-cell {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
  }

  body.is-bw .legend-item { border: 0.35mm solid #000; }
  body.is-bw .legend-item .icon,
  body.is-bw .area-cell .icon { color: #000 !important; }

  body.is-bw .cell,
  body.is-bw .cell.is-empty { background: #fff !important; }

  /* Karten: weißer Grund, kräftiger Balken links — Bereiche bleiben unterscheidbar */
  body.is-bw .card {
    background: #fff !important;
    color: #000 !important;
    border-left: 0.9mm solid #000 !important;
    border-top: 0.15mm solid #999;
    border-right: 0.15mm solid #999;
    border-bottom: 0.15mm solid #999;
  }

  body.is-bw .grid { border-color: #000; }
  body.is-bw .area-cell,
  body.is-bw .cell { border-color: #777 !important; }
}