/* SchoolUP — das gemeinsame Stilblatt der Rechts- und Vertrauensdokumente.
   ===========================================================================
   Diese Seiten sind kein Beiwerk. Sie sind die eine Flaeche, die eine
   Schulleitung ausdruckt und weiterreicht, und damit die Haelfte der
   Produktbegruendung. Sie sind deshalb DIESELBE Marke wie das Produkt, nur
   leiser: dieselben Farben, dieselben Schriften, dieselben Radien, dieselbe
   Groessenskala. Was sich unterscheidet, ist die Lautstaerke (Fraunces 500,
   Ueberschrift h1 400, statt 900; keine harten Kanten, keine Kritzeleien),
   nicht die Identitaet.

   Die Farbmerkmale heissen hier genauso wie in `school/src/index.css` und
   `homepage/src/index.css`, und sie tragen dieselben Werte. Vorher hatte
   `legal/` ein viertes Farbsystem: ein anderes Schwarzblau (#0e1530 statt
   #272520), eine KUEHLE Linie (#e8ebf2) statt der warmen (#e2ded0), und ein
   Blau, das um eine Ziffer daneben abgetippt war (#eaf1fc statt #eaf1f6).
   Nachgehalten wird das von `school/src/lib/legalmarke.test.ts`: wer hier eine
   Farbe aendert, ohne sie im Produkt zu aendern, macht den Test rot.

   Fuer die PDFs gilt `print.css`. Es ist absichtlich neutral (Georgia,
   Graustufen, das Logo als einziges Markenelement): ein Dokument, das
   unterschrieben und zur Akte genommen wird, sieht anders aus als eine Seite,
   die man liest. Das ist kein vergessener Rest, das ist die Entscheidung. */

@import url('fonts.css');

:root {
  /* Frage 24, entschieden am 13.08.2026: bewusst hell. Ein Rechtsdokument, das
     eine Schulleitung liest und ausdruckt, darf nicht halb dunkel erscheinen,
     nur weil das Betriebssystem des Lesegeraets dunkel gestellt ist. */
  color-scheme: light;

  /* Flaechen */
  --color-paper: #f3f1ea;
  --color-paper-2: #e8e2d1;
  --color-cream: #fbfaf5;
  --color-line: #e2ded0;
  --color-line-strong: #7d7866;

  /* Schrift */
  --color-ink: #272520;
  --color-ink-soft: #4f4c45;
  --color-muted: #66635a;

  /* Blau */
  --color-blue: #5a8ead;
  --color-blue-deep: #3d6b85;
  --color-sky-soft: #eaf1f6;

  /* Die Schriften der Marke, selbst gehostet (`fonts.css`). */
  --font-round: 'Nunito', ui-rounded, system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;

  /* Die Groessenskala des Hauses: sieben Stufen, Verhaeltnis rund 1,2.
     Unter 12px gibt es nichts. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 32px;

  /* Die vier Radien des Hauses. Die Karte ist 1,25rem (20px), wie ueberall
     im Haus; was man drueckt, wird zur Pille (`--radius-full`). */
  --radius-sm: 8px;
  --radius-md: 1.25rem;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Die Satzbreite eines Rechtsdokuments: rund 80 Zeichen. */
  --spalte: 820px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-round);
  color: var(--color-ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper);
  /* Das Raster, ueber ein Merkmal statt als roher Wert: vorher stand hier das
     alte Signalblau (`#3a7bdc`) hart abgetippt, ein Rest aus der Zeit vor der
     Kreide. `color-mix()` traegt jetzt dieselbe Deckkraft (5,5 Prozent) ueber
     `--color-blue` und kennt die Komma-Falle von `rgba()` gar nicht erst,
     die die Compliance-Seite einmal als deckendes Karoraster ausgeliefert
     hat (nachgehalten von `school/src/lib/farbsyntax.test.ts`). */
  background-image: linear-gradient(
      to right,
      color-mix(in srgb, var(--color-blue) 5.5%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-blue) 5.5%, transparent) 1px,
      transparent 1px
    );
  background-size: 32px 32px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-size: var(--text-base);
  line-height: 1.6;
}
a {
  color: var(--color-blue-deep);
  text-underline-offset: 2px;
}
/* `blue` selbst ergibt auf Papier 3,99 zu 1 und verfehlt AA. Beim Ueberfahren
   bleibt die Farbe deshalb, was sich aendert, ist die Unterstreichung. */
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
a:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Kopf ---- */
header {
  padding: 14px 28px;
  border-bottom: 1px solid var(--color-line);
  background: rgb(251 250 247 / 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}
header .h {
  max-width: var(--spalte);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
header a.back {
  text-decoration: none;
  color: var(--color-ink-soft);
  font-weight: 700;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44 Punkt Trefferhoehe, wie im Rest des Hauses. */
  min-height: 44px;
}
header a.back:hover {
  color: var(--color-blue-deep);
}

/* ---- Dokument ---- */
main {
  flex: 1;
  max-width: var(--spalte);
  width: 100%;
  margin: 0 auto;
  padding: 42px 28px 56px;
}
.doc h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: 6px;
  line-height: 1.15;
  letter-spacing: -0.021em;
  text-wrap: balance;
  /* Das ruhige Register: Fraunces 400, nicht 900. */
  font-weight: 400;
}
.doc .updated {
  color: var(--color-muted);
  font-size: var(--text-xs);
  margin-bottom: 28px;
}
.doc .updated b,
.doc .updated strong {
  color: var(--color-ink-soft);
  font-weight: 700;
}
.doc h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 34px 0 10px;
  color: var(--color-ink);
  letter-spacing: -0.021em;
  line-height: 1.25;
  text-wrap: balance;
  font-weight: 500;
}
.doc h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.021em;
  line-height: 1.35;
  text-wrap: balance;
  margin: 20px 0 6px;
  color: var(--color-ink);
}
.doc h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -0.021em;
  line-height: 1.4;
  text-wrap: balance;
  margin: 18px 0 6px;
  color: var(--color-ink);
}
.doc p,
.doc li {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-ink);
  /* Fliesstext ist 600, wie im ganzen Haus: Nunito traegt Fliesstext in 600,
     Knoepfe und Aufschriften in 900. Betont wird trotzdem mit `strong`. */
  font-weight: 600;
  margin: 8px 0;
}
.doc ul,
.doc ol {
  padding-left: 22px;
}
.doc li {
  margin: 6px 0;
}
.doc strong {
  font-weight: 800;
}

/* Der Aufhaenger bekommt eine ruhige Karte. */
.doc h1 + .updated + p,
.doc .lead {
  background: var(--color-cream);
  border: 1.5px solid var(--color-line);
  border-left: 3px solid var(--color-blue);
  padding: 14px 16px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-ink-soft);
}

/* Tabellen */
.doc table {
  border-collapse: collapse;
  margin: 14px 0;
  font-size: var(--text-sm);
  width: 100%;
  display: block;
  overflow-x: auto;
}
.doc th,
.doc td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  min-width: 120px;
}
.doc th {
  background: var(--color-cream);
  font-weight: 800;
}
.doc code {
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  color: var(--color-blue-deep);
}
.doc hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: 26px 0;
}
.doc blockquote {
  border-left: 3px solid var(--color-sky-soft);
  padding: 2px 0 2px 16px;
  color: var(--color-ink-soft);
  margin: 14px 0;
}
.doc .note,
.doc .box {
  background: var(--color-cream);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px 0;
}
.doc .note h2 {
  font-size: var(--text-lg);
  margin: 0 0 6px;
}

/* Das Verzeichnis auf der Compliance-Seite. */
.doc .idx {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}
.doc .idx li {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  margin: 0;
}
.doc .idx a {
  font-weight: 800;
  font-size: var(--text-base);
  text-decoration: none;
}
.doc .idx .d {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.6;
  margin-top: 4px;
}

/* ---- Fuss ---- */
footer.legal {
  margin-top: auto;
  padding: 18px 28px 20px;
  border-top: 1px solid var(--color-line);
  background: var(--color-paper-2);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
footer.legal .lwrap {
  max-width: var(--spalte);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
footer.legal .lleft {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted);
}
footer.legal .lleft a {
  font-weight: 700;
  color: var(--color-ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Hier stand das volle Farblogo mit 22 px Hoehe, also rund 29 px Breite. Bei
   dieser Groesse ist der Schriftzug nicht mehr zu lesen: der Hut schneidet die
   Oberlaengen, und sechs Buchstabenfarben werden zu einem Fleck. Die Bildmarke
   traegt bei 26 px, das Wort steht daneben als Text im Markenschnitt. */
footer.legal .legal-mark {
  /* Das WORTZEICHEN, nicht die Figur. Hier stand die Bildmarke mit dem Wort
     „SchoolUP" daneben als gesetzter Text: ein aus Bild plus Schrift
     zusammengestelltes Ersatzlogo, waehrend das echte Logo genau daraus
     besteht. Gemessen wird weiter die Hoehe, die Breite folgt dem Verhaeltnis
     der Datei. */
  height: 24px;
  width: auto;
  display: block;
  flex: none;
}
footer.legal .legal-name {
  font-weight: 800;
  color: var(--color-ink);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}
footer.legal .lleft a {
  gap: 8px;
}
footer.legal .lsep {
  color: var(--color-line-strong);
}
footer.legal .lnav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
footer.legal .lnav a {
  color: var(--color-muted);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
footer.legal .lnav a:hover {
  color: var(--color-ink-soft);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .doc h1 {
    font-size: var(--text-xl);
  }
  .doc h2 {
    font-size: var(--text-lg);
  }
  main {
    padding: 30px 20px 44px;
  }
  header {
    padding: 13px 20px;
  }
}
@media print {
  body {
    background: #fff;
    background-image: none;
  }
  header,
  footer.legal {
    display: none;
  }
  main {
    max-width: none;
    padding: 0;
  }
  .doc a {
    color: #000;
    text-decoration: underline;
  }
  .doc h1 + .updated + p {
    background: none;
    border: 0;
    border-left: 2px solid #000;
  }
}

/* Der Knopf zur druckfertigen Fassung (in `print.css` ausgeblendet). Wer man
   drueckt, wird zur Pille. */
.doc a.pdflink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 22px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-full);
  background: var(--color-cream);
  color: var(--color-blue-deep);
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
}
.doc a.pdflink:hover {
  border-color: var(--color-blue);
  background: var(--color-sky-soft);
}
.idx a.pdfmini {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-blue-deep);
  text-decoration: none;
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
}
.idx a.pdfmini:hover {
  border-color: var(--color-blue);
  background: var(--color-sky-soft);
}


/* ---------------------------------------------------------------------------
   Ablaufbilder auf der Transparenzseite.

   Sie sind teils sehr hoch: der Weg einer Datei misst in voller Groesse rund
   1600 Punkte und fuellte damit vier Bildschirme. Hier wird eingepasst, und
   der Klick oeffnet das Bild in voller Groesse in einem neuen Tab. Das
   braucht kein Skript und funktioniert auch, wenn jemand die Seite ausdruckt.
   --------------------------------------------------------------------------- */
.diagramm {
  margin: var(--raum-l, 1.6rem) 0;
  text-align: center;
}
.diagramm a {
  display: inline-block;
  max-width: 100%;
  border-bottom: 0;
}
.diagramm img {
  max-width: 100%;
  max-height: 68vh;
  width: auto;
  height: auto;
  background: #fff;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 0.9rem;
}
.diagramm .zoom {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-round);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-muted);
}
@media print {
  .diagramm img { max-height: none; border-color: var(--color-line-strong); }
  .diagramm .zoom { display: none; }
}

/* Der Unterschriftsblock, auch im Netz sichtbar als das, was er ist: ein
   Formular zum Ausdrucken. Auf dem Bildschirm liest man es selten; wer hier
   ist, will wissen, WER unterschreibt, und das soll man auf einen Blick sehen,
   ohne drei Absaetze zu lesen. */
.doc .sigblock {
  /* Ueber die Merkmale des Hauses, ohne rohen Rueckfallwert: `legalmarke.test.ts`
     verbietet jede Hexzahl ausserhalb der Merkmalsliste, und zwar zu Recht.
     Ein Rueckfall ist eine zweite Farbe, die niemand mehr mitpflegt. */
  border: 1.5px solid var(--color-line);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0 0;
  background: var(--color-cream);
}
.doc .sigblock + .sigblock { margin-top: 12px; }
.doc .sigblock p { margin: 4px 0; }