/* MINTucation – Inhalte der eigenen Seiten (Startseite, Übersichten der Bereiche, Rechtstexte).
   Farben, Schriften, Kacheln und Kopf-/Fußzeile kommen aus rahmen.css (wird vorher geladen). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Spalte über die ganze Fensterhöhe, damit die Fußzeile auch auf kurzen Seiten unten steht */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 350 1rem/1.6 var(--font-text); }
body > main { flex: 1 0 auto; width: 100%; }
/* Lange deutsche Wörter (Datenschutzerklärung, Naturwissenschaften) dürfen auf schmalen Handys trennen */
body { overflow-wrap: break-word; }
h1, h2 { hyphens: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .wrap { padding: 0 2.5rem; } }
.label { font: 500 0.72rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; }

/* Kopf auf Millimeterpapier */
.hero {
  border-bottom: 1px solid var(--rule);
  background-image:
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
}
.hero .wrap { padding-top: 3rem; padding-bottom: 3rem; }
.word { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.45rem; margin: 0; }
.word .mt-kachel { width: clamp(4rem, 16vw, 7rem); aspect-ratio: 1; flex-direction: column; font-size: clamp(2.2rem, 8vw, 4rem); gap: 0.3rem; }
/* Fachname unter dem Buchstaben; lange Namen (Naturwissenschaften) brechen an ­ um.
   Alle Namen sind zwei Zeilen hoch, damit die Buchstaben auf einer Linie bleiben. */
.word .mt-kachel small {
  display: block; width: 100%; height: 2.3em; padding: 0 0.15em; text-align: center; hyphens: manual;
  font: 500 clamp(0.48rem, 1.3vw, 0.64rem)/1.15 var(--font-mono); text-transform: uppercase; letter-spacing: 0;
}
.word .rest { font: 800 clamp(2.6rem, 10.5vw, 6rem)/0.85 var(--font-head); letter-spacing: -0.03em; margin-left: 0.25rem; }
.claim { font: 800 clamp(1.5rem, 4.2vw, 2.4rem)/1.1 var(--font-head); letter-spacing: -0.02em; margin: 1.8rem 0 0; }
.claim em { font-style: normal; color: var(--mint); }
/* Schmal passt „ucation“ nicht neben die Kacheln: dann nur „MINT“ und darunter „Material für den Unterricht.“ */
@media (max-width: 59.99rem) {
  .word { flex-wrap: nowrap; gap: 0.35rem; }
  .word .mt-kachel { width: clamp(3.5rem, 21vw, 7rem); font-size: clamp(2.2rem, 10vw, 4rem); }
  .word .rest, .claim em { display: none; }
  .claim { margin-top: 1.2rem; }
}
.hero .title { display: flex; align-items: center; gap: 1rem; font: 800 clamp(1.7rem, 8vw, 4rem)/1 var(--font-head); letter-spacing: -0.03em; margin: 0.6rem 0 0; }
.hero .title > span:last-child { min-width: 0; }
.hero .title .mt-kachel { width: clamp(2.8rem, 6vw, 3.8rem); height: clamp(2.8rem, 6vw, 3.8rem); flex: none; }
.hero .lead { max-width: 40rem; margin: 1rem 0 0; color: var(--muted); }

/* Bereiche als Zeilen: Bildkachel, daneben Titel und kurze Beschreibung */
.sheet { padding-top: 1.5rem; padding-bottom: 3rem; }
.row { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 48rem) { .row { grid-template-columns: 5rem 1fr; gap: 2rem; } }
.row .bild { display: flex; width: 4rem; height: 4rem; }
@media (min-width: 48rem) { .row .bild { width: 5rem; height: 5rem; } }
a.bild:hover { outline: 3px solid var(--mint); outline-offset: 3px; }
.row > .main { min-width: 0; }
.row h2 { font: 800 clamp(1.35rem, 4vw, 2.1rem)/1.1 var(--font-head); letter-spacing: -0.02em; margin: 0 0 0.3rem; }
.row h2 a { text-decoration: none; }
.row h2 a::after { content: "\00a0→"; color: var(--mint); }
.row h2 a:hover { text-decoration: underline 3px var(--mint); text-underline-offset: 5px; }
.row p { margin: 0; color: var(--muted); }

/* Übersichtsseite eines Bereichs: Abschnitte mit Dateiliste (Calliope) */
.chapter { padding: 1.75rem 0; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.75rem 1.25rem; }
@media (min-width: 52rem) { .chapter { grid-template-columns: 4.5rem 1fr; gap: 0.75rem 2rem; } }
.chapter > div { min-width: 0; }
.chapter .bild { width: 3.25rem; height: 3.25rem; }
.chapter h2 { font: 800 1.5rem/1.15 var(--font-head); letter-spacing: -0.01em; margin: 0 0 0.6rem; }
.files { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.files td { padding: 0.45rem 0; border-top: 1px solid var(--hair); vertical-align: baseline; }
.files td + td { padding-left: 1rem; text-align: right; }
@media (min-width: 30rem) { .files td + td { white-space: nowrap; } }
.files a { text-decoration-color: var(--mint); text-underline-offset: 3px; }
.files .kind { font: 500 0.7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: block; margin-bottom: 0.15rem; }

/* Rechtstexte */
.legal { max-width: 46rem; padding-top: 2.5rem; padding-bottom: 3rem; }
.legal h1 { font: 800 clamp(2rem, 6vw, 3rem)/1.05 var(--font-head); letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.legal h2 { font: 800 1.2rem/1.25 var(--font-head); margin: 2rem 0 0.5rem; }
.legal p, .legal li { font-size: 0.95rem; }
.legal a { text-decoration-color: var(--mint); text-underline-offset: 3px; }
.legal table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; font-size: 0.95rem; }
.legal th, .legal td { border: 1px solid var(--hair); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.legal th { background: var(--tint); font-weight: 600; }
.legal .quelle { margin-top: 2rem; color: var(--muted); font-size: 0.85rem; }

/* Calliope-Übersicht: Kapitelnummer als Kachel (wie auf den Arbeitsblättern) */
.row .nr-kachel { font-size: 2rem; text-decoration: none; }
@media (min-width: 48rem) { .row .nr-kachel { font-size: 2.5rem; } }
.row .label + h2 { margin-top: 0.15rem; }

/* Kopf mit Abbildung rechts (z. B. die Calliope-Zeichnung); schmal: Abbildung ausgeblendet */
.hero--bild .wrap { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 1rem 2rem; }
.hero-bild { display: none; }
@media (min-width: 48rem) {
  .hero--bild .wrap { grid-template-columns: minmax(0, 1fr) 15rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .hero-bild { display: block; }
  .hero-bild svg { display: block; width: 100%; height: auto; }
}

/* Übersicht mit Icons in den Kacheln (z. B. Übungs-Sets von „Einheiten umrechnen“) */
.row .bild > .icon { width: 64%; height: 64%; margin: auto; color: var(--tile-ink); }