/* mathebook – Design „Schulheft“
   Jede Klasse hat ihre Heftfarbe (1. blau, 2. rot, 3. grün, 4. gelb). Ruhiger, warmer Kopfbereich,
   Inhaltsverzeichnisse mit Punktlinien wie im Mathebuch, Formeln in Latin Modern (die klassische Mathe-Schrift). */

@font-face { font-family: "Bricolage"; src: url("schriften/bricolagegrotesque-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("schriften/bricolagegrotesque-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("schriften/instrumentsans-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("schriften/instrumentsans-bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --grund: #f3f6fa;
  --papier: #ffffff;
  --tinte: #1b2a4a;
  --tinte-2: #52607c;
  --linie: #d6dfeb;
  --karo: #e1e8f1;
  --kopf-grund: #fffdf6;
  --rand: #e0483d;
  --marker: #fff1a8;
  --blau: #2b62c9; --rot: #cf4136; --gruen: #13865b; --gelb: #e8a20f; --lila: #7a4fc4; --grau: #66758f;
  --k: var(--blau); --k-text: #fff; --k-hell: #e7eefb;
  --schrift: "Instrument", "Segoe UI", system-ui, sans-serif;
  --titel: "Bricolage", "Instrument", "Segoe UI", system-ui, sans-serif;
  --mathe: "Latin Modern", "Cambria Math", "Times New Roman", serif;
  --breite: 1400px;
  --schmal: 760px;
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0f1628; --papier: #172139; --tinte: #e9eefa; --tinte-2: #a8b4cc; --linie: #2b3858; --karo: #1c2740; --marker: #5a4d12;
    --kopf-grund: #172139;
    --k-hell: #1f2c4a;
    color-scheme: dark;
  }
}
.k-blau { --k: var(--blau); --k-text: #fff; --k-hell: #e5edfb; }
.k-rot { --k: var(--rot); --k-text: #fff; --k-hell: #fbe9e7; }
.k-gruen { --k: var(--gruen); --k-text: #fff; --k-hell: #e2f3ec; }
.k-gelb { --k: var(--gelb); --k-text: #1b2a4a; --k-hell: #fdf3d9; }
.k-lila { --k: var(--lila); --k-text: #fff; --k-hell: #efe8fa; }
.k-grau { --k: var(--grau); --k-text: #fff; --k-hell: #eceff4; }
@media (prefers-color-scheme: dark) {
  .k-blau, .k-rot, .k-gruen, .k-gelb, .k-lila, .k-grau { --k-hell: color-mix(in srgb, var(--k) 18%, #172139); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font: 400 1.0625rem/1.6 var(--schrift);
  font-kerning: normal; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--k); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titel); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: 1rem; top: -4rem; z-index: 99; background: var(--tinte); color: var(--grund); padding: .6rem 1rem; border-radius: 6px; }
.springen:focus { top: 1rem; }
.sym { width: 1.15em; height: 1.15em; flex: none; }

/* Kopfbereiche: ruhiges, warmes Papier (Klasse heißt aus historischen Gründen noch „karo“) */
.karo { background-color: var(--kopf-grund); }

/* ---------------------------------------------------------------- Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: .7rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.logo-zeichen { width: 38px; height: 38px; flex: none; }
.logo-name { font-family: var(--titel); font-weight: 700; font-size: 1.45rem; letter-spacing: -.03em; }
.hauptmenue { display: flex; align-items: center; gap: 1.25rem; flex: 1; }
.hauptmenue ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.hauptmenue a { display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .95rem; white-space: nowrap; }
.hauptmenue a:hover { background: var(--k-hell); }
.hauptmenue a[aria-current="page"] { background: var(--k); color: var(--k-text); }
.hauptmenue a[aria-current="page"] .punkt { background: currentColor; }
.menue-seiten { margin-left: auto !important; }
.punkt { width: .7em; height: .7em; border-radius: 50%; background: var(--k); flex: none; display: inline-block; }
.menue-knopf { display: none; }
.kopf .suchfeld { width: 15rem; }

/* Suchfeld */
.suchfeld { display: flex; align-items: stretch; background: var(--papier); border: 2px solid var(--tinte); border-radius: 999px; overflow: hidden; }
.suchfeld input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tinte); font: inherit; font-size: .95rem; padding: .45rem .2rem .45rem 1rem; }
.suchfeld input::placeholder { color: var(--tinte-2); }
.suchfeld input:focus { outline: none; }
.suchfeld:focus-within { outline: 3px solid var(--k); outline-offset: 2px; }
.suchfeld button { border: 0; background: var(--tinte); color: var(--grund); padding: 0 .9rem; cursor: pointer; display: grid; place-items: center; }
.suchfeld.gross { max-width: 34rem; border-width: 2.5px; box-shadow: 4px 4px 0 var(--tinte); }
.suchfeld.gross input { font-size: 1.1rem; padding: .85rem .4rem .85rem 1.25rem; }
.suchfeld.gross button { padding: 0 1.25rem; }
.suchfeld.gross .sym { width: 1.4em; height: 1.4em; }

/* ---------------------------------------------------------------- Startseite */
.start-kopf { border-bottom: 1px solid var(--linie); position: relative; }
.start-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) max(1.25rem, calc((100% - var(--breite)) / 2 + 1.25rem)); }
.start-text h1 { max-width: 13ch; margin-bottom: .45em; }
.start-einleitung { font-size: 1.15rem; max-width: 34rem; color: var(--tinte-2); }
.start-einleitung p { margin-bottom: 1.5rem; }

.hefte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); max-width: 500px; width: 100%; justify-self: end; }
.heft {
  position: relative; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--k); color: var(--k-text); text-decoration: none; border-radius: 4px 12px 12px 4px; padding: 14% 9% 9% 16%;
  box-shadow: inset 12px 0 0 rgb(0 0 0 / .14), inset 14px 0 0 rgb(255 255 255 / .12), 0 2px 0 rgb(0 0 0 / .08), 0 14px 28px -12px rgb(20 30 60 / .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.heft:hover { transform: translateY(-5px) rotate(-1.2deg); box-shadow: inset 12px 0 0 rgb(0 0 0 / .14), inset 14px 0 0 rgb(255 255 255 / .12), 0 22px 34px -14px rgb(20 30 60 / .5); }
.heft:nth-child(even):hover { transform: translateY(-5px) rotate(1.2deg); }
.heft-etikett {
  background: #fff; color: #1b2a4a; border-radius: 6px; padding: .8rem .9rem .6rem; display: flex; flex-direction: column;
  background-image: linear-gradient(transparent calc(100% - 1.15rem), #cfd8e6 calc(100% - 1.15rem), #cfd8e6 calc(100% - 1.1rem), transparent calc(100% - 1.1rem));
  box-shadow: 0 1px 2px rgb(0 0 0 / .18);
}
.heft-fach { font-size: .78rem; font-weight: 700; color: #52607c; letter-spacing: .02em; }
.heft-name { font-family: var(--titel); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.03em; line-height: 1.05; }
.heft-stufe { font-size: .85rem; color: #52607c; padding-bottom: .35rem; }
.heft-zahl { font-size: .88rem; font-weight: 700; opacity: .92; }
.hefte.klein { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px; margin: 0 auto; justify-self: auto; }

.abschnitt { max-width: var(--breite); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; }
.abschnitt.schmal { max-width: var(--schmal); }
.abschnitt-titel { margin-bottom: 1.25em; }
.gebiete { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.5rem 2rem; }
.gebiet-karte { border-top: 3px solid var(--tinte); padding-top: 1rem; }
.gebiet-karte h3 a { text-decoration: none; }
.gebiet-karte > p { color: var(--tinte-2); font-size: .95rem; }
.stichworte { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.stichworte a { display: block; padding: .2rem .65rem; background: var(--papier); border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; font-size: .92rem; }
.stichworte a:hover { border-color: var(--tinte); }
.mehr { font-weight: 700; font-size: .95rem; }

/* ---------------------------------------------------------------- Klassenseite (Heftumschlag) */
.umschlag { background: var(--k); color: var(--k-text); position: relative; overflow: hidden;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .1); }
.umschlag::before { content: ""; position: absolute; inset: 0 auto 0 0; width: max(1rem, calc((100% - var(--schmal)) / 2 - 2.5rem)); background: rgb(0 0 0 / .1); }
.umschlag-innen { position: relative; max-width: var(--schmal); margin: 0 auto; padding: 1.25rem 1.25rem 2.5rem; }
.umschlag .brotkrumen { color: inherit; opacity: .9; }
.etikett { background: #fff; color: #1b2a4a; display: inline-flex; flex-direction: column; padding: 1rem 1.6rem .7rem; border-radius: 8px; margin: 1.5rem 0 1rem;
  min-width: min(100%, 22rem); box-shadow: 0 2px 0 rgb(0 0 0 / .12); }
.etikett h1 { margin: .05em 0 .1em; }
.etikett .heft-stufe { margin: 0; border-top: 1.5px solid #cfd8e6; padding-top: .3rem; font-size: 1rem; }
.umschlag-zahl { font-weight: 700; margin: 0; }

.seite { max-width: var(--breite); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.seite.schmal { max-width: var(--schmal); }
.einleitung { margin-bottom: 2rem; }

/* Inhaltsverzeichnis mit Punktlinie */
.iv-gruppe { margin-bottom: 2.5rem; }
.iv-gruppe > h2 { font-size: 1.15rem; letter-spacing: -.01em; padding-bottom: .4rem; border-bottom: 2px solid var(--tinte); margin-bottom: .3rem; }
.iv-gruppe > h2 a { text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.iv { list-style: none; margin: 0; padding: 0; }
.iv a { display: flex; align-items: baseline; gap: .5rem; padding: .55rem .25rem; text-decoration: none; border-bottom: 1px solid var(--linie); }
.iv a:hover { background: var(--k-hell); }
.iv a:hover .iv-titel { text-decoration: underline; text-decoration-thickness: 2px; }
.iv-titel { font-weight: 700; }
.iv.nummeriert { counter-reset: nr; }
.iv.nummeriert li { counter-increment: nr; }
.iv.nummeriert a::before { content: counter(nr) "."; min-width: 1.9em; font-family: var(--titel); font-weight: 700; color: var(--k); font-variant-numeric: tabular-nums; }
.k-gelb .iv.nummeriert a::before { color: #9a6b00; }
.iv-unter { font-size: .95rem; color: var(--tinte-2); margin: 1.3rem 0 .2rem; letter-spacing: 0; }
.iv-klasse { font-weight: 400; color: var(--tinte-2); font-size: .9rem; white-space: nowrap; }
.iv-punkte { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted color-mix(in srgb, var(--tinte-2) 55%, transparent); transform: translateY(-.3em); }
.iv-zahl { font-variant-numeric: tabular-nums; color: var(--tinte-2); font-size: .92rem; white-space: nowrap; }
.iv .punkt { align-self: center; }
.andere-klassen { margin-top: 3rem; }
.andere-klassen h2 { font-size: 1rem; color: var(--tinte-2); }
.andere-klassen ul { list-style: none; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.andere-klassen a { display: flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border: 1.5px solid var(--linie); border-radius: 999px; text-decoration: none; font-weight: 700; background: var(--papier); }
.andere-klassen a:hover { border-color: var(--k); }

/* ---------------------------------------------------------------- Seitenkopf allgemein */
.seiten-kopf { border-bottom: 1px solid var(--linie); }
.seiten-kopf-innen { max-width: var(--schmal); margin: 0 auto; padding: 1.25rem 1.25rem 2.5rem; }
.seiten-kopf h1 { margin-top: 1.25rem; }
.seiten-kopf p { color: var(--tinte-2); font-size: 1.1rem; max-width: 40rem; }
.gebiet-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 2.5rem; }
.gebiet-spalten .iv-gruppe > h2 { border-bottom-color: var(--k); border-bottom-width: 3px; }

.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .9rem; }
.brotkrumen li + li::before { content: "›"; margin-right: .5rem; opacity: .6; }
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Themenseite */
.thema-kopf { background: var(--papier); border-bottom: 1px solid var(--linie); border-top: 6px solid var(--k);
  background-color: var(--kopf-grund); }
.thema-kopf-innen { max-width: calc(860px + 2.5rem); margin: 0 auto; padding: 1.1rem 1.25rem 2rem; }
.mit-toc-kopf .thema-kopf-innen { max-width: var(--breite); }
.thema-kopf h1 { margin: 1rem 0 .35em; max-width: 22ch; }
.thema-meta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; font-size: .95rem; margin: 0 0 .8rem; }
.thema-meta > * { padding: .2rem .7rem; border-radius: 999px; background: var(--papier); border: 1px solid var(--linie); text-decoration: none; }
.thema-meta a:hover { border-color: var(--tinte); }
.thema-meta .klasse-marke { background: var(--k); color: var(--k-text); border-color: var(--k); font-weight: 700; }
.thema-kurz { font-size: 1.1rem; color: var(--tinte-2); max-width: 44rem; }
.thema-aktionen { margin: 1.2rem 0 0; }
.knopf { display: inline-flex; align-items: center; gap: .55rem; font: inherit; font-weight: 700; padding: .65rem 1.2rem; border-radius: 999px;
  background: var(--tinte); color: var(--grund); border: 0; cursor: pointer; text-decoration: none; }
.knopf:hover { background: var(--k); color: var(--k-text); }
.knopf-klein { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .88rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px;
  border: 1.5px solid var(--linie); background: var(--papier); color: var(--tinte); text-decoration: none; cursor: pointer; }
.knopf-klein:hover { border-color: var(--tinte); }

.thema-raster { max-width: var(--breite); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; display: grid; grid-template-columns: minmax(0, 1100px); justify-content: center; gap: 3rem; }
.thema-raster.mit-toc { grid-template-columns: 250px minmax(0, 1100px); }
.toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; font-size: .92rem; }
.toc h2 { font-size: 1rem; margin-bottom: .6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linie); }
.toc a { display: flex; gap: .55rem; padding: .3rem .6rem; text-decoration: none; color: var(--tinte-2); margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover, .toc a.aktiv { color: var(--tinte); border-left-color: var(--k); background: var(--k-hell); }
.toc-nr { font-variant-numeric: tabular-nums; min-width: 1.4em; font-weight: 700; color: var(--k); }
.toc-text { min-width: 0; line-height: 1.35; }
.toc-code { font-weight: 700; color: var(--tinte); white-space: nowrap; }
.k-gelb .toc-nr { color: #9a6b00; }
.toc li[hidden] { display: none; }

.theorie { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.25rem); margin-bottom: 2.5rem;
  border-left: 5px solid var(--k); }
.art-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.art-filter button { font: inherit; font-size: .9rem; font-weight: 700; padding: .35rem .85rem; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--papier); color: var(--tinte); cursor: pointer; }
.art-filter button[aria-pressed="true"] { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }

.blaetter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 2.5rem 1.75rem; align-items: start; }
.blatt { margin: 0; }
.blatt[hidden] { display: none; }
.blatt-papier { display: block; background: #fff; border: 1px solid var(--linie); border-radius: 3px; overflow: hidden; cursor: zoom-in;
  box-shadow: 0 1px 2px rgb(27 42 74 / .06), 0 10px 30px -12px rgb(27 42 74 / .22); }
.blatt-papier img { width: 100%; }
.blatt figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding-top: .75rem; }
.blatt-nr { font-family: var(--titel); font-weight: 700; font-size: 1.05rem; }
.blatt-titel { font-weight: 700; }
.blatt-aktionen { margin-left: auto; display: flex; gap: .4rem; }
.art { font-size: .78rem; font-weight: 700; padding: .12rem .55rem; border-radius: 4px; background: var(--k-hell); color: var(--tinte); }
.art-theorie { background: #e3ecfb; color: #1d4597; }
.art-uebung { background: #eef1f5; color: #3d4a63; }
.art-loesung { background: #ddf3e8; color: #0e6a47; }
.art-test { background: #fdeccc; color: #8a5300; }
@media (prefers-color-scheme: dark) {
  .art-theorie, .art-uebung, .art-loesung, .art-test { background: var(--linie); color: var(--tinte); }
}

.links, .verwandt { margin-top: 3rem; }
.links h2, .verwandt h2 { font-size: 1.2rem; }
.links ul { list-style: none; padding: 0; margin: 0; }
.links a { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem 0; font-weight: 700; }
.verwandt ul { list-style: none; padding: 0; margin: 0; }
.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 2px solid var(--tinte); }
.blaettern a { display: flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; padding: .5rem; border-radius: 8px; }
.blaettern a:hover { background: var(--k-hell); }
.blaettern small { display: block; font-weight: 400; color: var(--tinte-2); font-size: .85rem; }
.blaettern .weiter { justify-content: flex-end; text-align: right; grid-column: 2; }
.blaettern .sym { width: 1.6em; height: 1.6em; }

/* ---------------------------------------------------------------- Zugang: gesperrte Blätter, Hinweis, Zusatzmaterial */
.blatt.gesperrt .blatt-papier { position: relative; cursor: pointer; background: #eef2f8; }
.blatt.gesperrt .blatt-papier img { filter: blur(7px) saturate(.85); transform: scale(1.08); opacity: .8; image-rendering: auto; }
.schloss-hinweis { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; text-align: center; color: var(--tinte);
  font-weight: 700; background: linear-gradient(rgb(255 255 255 / .15), rgb(255 255 255 / .55)); }
.schloss-hinweis .sym { width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 50%; background: var(--papier); box-shadow: 0 6px 20px -8px rgb(20 30 60 / .45); box-sizing: content-box; }
.schloss-hinweis span { background: var(--papier); padding: .35rem .9rem; border-radius: 999px; box-shadow: 0 6px 20px -10px rgb(20 30 60 / .45); }
.blatt.gesperrt .blatt-papier:hover .schloss-hinweis span { background: var(--k); color: var(--k-text); }
.toc li.gesperrt a { opacity: .65; }
.toc li.gesperrt .sym { width: .85em; height: .85em; margin-left: auto; align-self: center; }
.login-hinweis { display: flex; gap: 1rem; align-items: flex-start; background: var(--k-hell); border: 1px solid color-mix(in srgb, var(--k) 30%, transparent);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 0 0 2rem; }
.login-hinweis > .sym { width: 1.8rem; height: 1.8rem; color: var(--k); flex: none; margin-top: .1rem; }
.login-hinweis p { margin: 0 0 .7rem; }
.login-knoepfe, .formular-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0; }
.knopf.voll { background: var(--k); color: var(--k-text); }
.knopf.voll:hover { background: var(--tinte); color: var(--grund); }
.login-hinweis .knopf:not(.voll) { background: var(--papier); color: var(--tinte); border: 1.5px solid var(--linie); }
.knopf.gefahr { background: #b3261e; color: #fff; }
.theorie-anfang { margin-bottom: .5rem; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.theorie-mehr { display: flex; align-items: center; gap: .5rem; margin: 0 0 2.5rem; font-weight: 700; }
.material { margin-top: 3rem; }
.material h2 { font-size: 1.2rem; }
.material ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.material li a { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); text-decoration: none; }
.material li a:hover { border-color: var(--k); box-shadow: 0 6px 18px -12px rgb(20 30 60 / .5); }
.material li .sym { width: 1.9rem; height: 1.9rem; color: #c0392b; flex: none; }
.material small { display: block; color: var(--tinte-2); font-size: .85rem; }
.material.gesperrt p { display: flex; align-items: center; gap: .5rem; color: var(--tinte-2); }

/* Drucken: Umwelt-Hinweis */
.umwelt-dialog { border: 0; border-radius: 16px; padding: 1.75rem 1.75rem 1.5rem; max-width: min(460px, 92vw); text-align: center; background: var(--papier); color: var(--tinte);
  box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
.umwelt-dialog::backdrop { background: rgb(15 22 40 / .55); }
.umwelt-dialog h2 { margin: .2rem 0 .6rem; font-size: 1.4rem; }
.umwelt-dialog p { margin: 0 0 1rem; color: var(--tinte-2); }
.umwelt-symbol { font-size: 2.6rem; line-height: 1; margin: 0 !important; }
.umwelt-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1.2rem 0 0 !important; }
.umwelt-knoepfe .knopf:not(.voll) { background: var(--papier); color: var(--tinte); border: 1.5px solid var(--linie); }
.umwelt-knoepfe .knopf.voll { background: #13865b; color: #fff; }
.umwelt-hinweis { display: flex; gap: .5rem; align-items: flex-start; background: #e9f6ee; color: #0e5a3d; border-radius: 10px; padding: .65rem .9rem; font-size: .92rem; margin: 0 0 1rem; }
@media (prefers-color-scheme: dark) { .umwelt-hinweis { background: #12352a; color: #bfe8d3; } }

/* Seite „Zusatzmaterial“ */
.material-kopf { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.material-kopf p { margin: 0; color: var(--tinte-2); }
.material-filter { font: inherit; color: var(--tinte); background: var(--papier); border: 1.5px solid var(--linie); border-radius: 999px; padding: .55rem 1rem; min-width: min(100%, 300px); }
.heft-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 1rem; }
.heft-pdf { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; }
.heft-pdf[hidden] { display: none; }
.heft-pdf-link { display: flex; gap: .9rem; align-items: center; text-decoration: none; }
.heft-pdf-link .sym { width: 2.2rem; height: 2.2rem; color: #c0392b; flex: none; }
.heft-pdf-link small { display: block; color: var(--tinte-2); font-size: .85rem; font-weight: 400; }
.heft-pdf-link:hover strong { text-decoration: underline; }
.heft-themen { list-style: none; margin: .8rem 0 0; padding: .7rem 0 0; border-top: 1px dashed var(--linie); display: flex; flex-wrap: wrap; gap: .35rem; }
.heft-themen a { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; text-decoration: none; padding: .2rem .6rem; border-radius: 999px; background: var(--grund); border: 1px solid var(--linie); }
.heft-themen a:hover { border-color: var(--k); }
.heft-themen .punkt { width: .55rem; height: .55rem; }

/* Konto-Seiten und Formulare */
.hauptmenue a.konto-link { border: 1.5px solid var(--linie); }
.hauptmenue a.konto-link .sym { width: 1.05em; height: 1.05em; }
.seite.konto-seite { max-width: 980px; }
.konto-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.formular { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.konto-teil .formular { border: 0; padding: 1rem 0 0; background: none; }
.feld { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.1rem; border: 0; padding: 0; min-width: 0; }
.feld label, .feld legend { font-weight: 700; padding: 0; }
.feld input, .feld textarea { font: inherit; color: var(--tinte); background: var(--grund); border: 1.5px solid var(--linie); border-radius: 8px; padding: .65rem .8rem; width: 100%; box-sizing: border-box; }
.feld input:focus, .feld textarea:focus { outline: 3px solid color-mix(in srgb, var(--k) 35%, transparent); border-color: var(--k); }
.feld-hilfe, .optional { font-size: .85rem; color: var(--tinte-2); font-weight: 400; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.wahlen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.wahl { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.wahlen .wahl { border: 1.5px solid var(--linie); border-radius: 999px; padding: .4rem .85rem; background: var(--grund); }
.wahlen .wahl:has(input:checked) { border-color: var(--k); background: var(--k-hell); font-weight: 700; }
.wahl input { accent-color: var(--k); width: 1.05rem; height: 1.05rem; margin: 0; }
.zustimmung { align-items: flex-start; margin: .4rem 0 1.4rem; line-height: 1.45; }
.zustimmung input { margin-top: .2rem; flex: none; }
.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-meldung { padding: .75rem 1rem; border-radius: 8px; background: #ddf3e8; color: #0e5a3d; font-weight: 700; margin: 0 0 1.2rem; }
.formular-meldung.fehler { background: #fde4e1; color: #8c1d16; }
.formular-unten { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linie); color: var(--tinte-2); }
.formular.fertig { text-align: center; padding: 2.5rem 1.5rem; }
.formular.fertig > .sym { width: 3rem; height: 3rem; color: var(--k); }
.konto-vorteile { background: var(--k-hell); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.konto-vorteile h2 { font-size: 1.15rem; }
.konto-vorteile ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.konto-vorteile li { margin-bottom: .4rem; }
.klein { font-size: .88rem; color: var(--tinte-2); }
.konto-karte { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.konto-person { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.konto-person > .sym { width: 3rem; height: 3rem; padding: .6rem; border-radius: 50%; background: var(--k-hell); color: var(--k); box-sizing: content-box; }
.konto-person h2 { margin: 0; font-size: 1.3rem; }
.konto-person p { margin: 0; color: var(--tinte-2); }
.konto-teil { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier); padding: 1rem 1.5rem; margin-bottom: 1rem; }
.konto-teil summary { cursor: pointer; font-weight: 700; }
@media (max-width: 760px) {
  .konto-raster, .feld-reihe { grid-template-columns: 1fr; }
}

/* Leuchtkasten */
.leuchtkasten { border: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgb(12 18 32 / .94); color: #fff; }
.leuchtkasten[open] { display: grid; grid-template-columns: 4rem 1fr 4rem; grid-template-rows: auto 1fr; }
.leuchtkasten::backdrop { background: rgb(12 18 32 / .7); }
.lk-leiste { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .6rem 1rem; }
.lk-titel { flex: 1; font-weight: 700; }
.lk-original, .lk-drucken { background: transparent; color: #fff; border-color: rgb(255 255 255 / .4); }
.lk-zu { font-size: 2rem; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; padding: 0 .4rem; }
.lk-buehne { grid-row: 2; grid-column: 2; position: relative; overflow: auto; min-width: 0; min-height: 0; touch-action: pan-x pan-y; overscroll-behavior: contain;
  scrollbar-color: rgb(255 255 255 / .45) transparent; }
.lk-flaeche { display: grid; place-items: center; min-width: 100%; min-height: 100%; width: max-content; height: max-content; }
.lk-bild { display: block; max-width: none; max-height: none; background: #fff; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lk-bild.gezoomt { cursor: grab; }
.lk-bild.zieht { cursor: grabbing; }
.lk-zoom { display: inline-flex; align-items: center; border: 1px solid rgb(255 255 255 / .4); border-radius: 999px; overflow: hidden; }
.lk-zoom button { background: none; border: 0; color: #fff; cursor: pointer; font: inherit; font-weight: 700; padding: .3rem .75rem; min-width: 2.4rem; }
.lk-zoom .lk-stufe { min-width: 4.2rem; font-variant-numeric: tabular-nums; font-weight: 600; border-inline: 1px solid rgb(255 255 255 / .25); }
.lk-zoom button:hover:not(:disabled) { background: rgb(255 255 255 / .12); }
.lk-zoom button:disabled { opacity: .35; cursor: default; }
.lk-vor, .lk-nach { grid-row: 2; background: none; border: 0; color: #fff; cursor: pointer; display: grid; place-items: center; }
.lk-vor .sym, .lk-nach .sym { width: 2.4rem; height: 2.4rem; }
.lk-vor:disabled, .lk-nach:disabled { opacity: .25; cursor: default; }

/* ---------------------------------------------------------------- Text (Theorie, Seiten) */
.text h2 { margin-top: 1.6em; }
.text h2:first-child, .text h3:first-child { margin-top: 0; }
.text h3 { margin-top: 1.4em; }
.text ul, .text ol { padding-left: 1.3rem; margin: 0 0 1em; }
.text li { margin-bottom: .3em; }
.text li::marker { color: var(--k); font-weight: 700; }
.text a { color: var(--k); font-weight: 700; }
.k-gelb .text a { color: #8a5f00; }
.leer { color: var(--tinte-2); font-size: 1.05rem; }
.such-anzahl { font-weight: 700; }

/* ---------------------------------------------------------------- Fuß */
.fuss { background: var(--tinte); color: var(--grund); margin-top: 2rem; }
@media (prefers-color-scheme: dark) { .fuss { background: #0a1020; color: var(--tinte); border-top: 1px solid var(--linie); } }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 3rem 1.25rem 2rem; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.fuss h2 { font-size: .95rem; margin-bottom: .6rem; opacity: .75; letter-spacing: 0; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .3rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-marke { display: flex; gap: .8rem; align-items: flex-start; }
.fuss-marke .logo-zeichen { width: 44px; height: 44px; }
.fuss-marke p { margin: 0 0 1rem; }
.fuss a.fuss-material { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .6rem; border-radius: 999px; font-size: .9rem; white-space: nowrap;
  border: 1px solid rgb(255 255 255 / .3); color: inherit; }
.fuss a.fuss-material:hover { text-decoration: none; border-color: var(--gelb); }
.fuss-material .sym { width: 1.1rem; height: 1.1rem; color: var(--gelb); }
.fuss-material small { font-size: .82rem; opacity: .75; white-space: nowrap; }
.fuss-zeile { max-width: var(--breite); margin: 0 auto; padding: 1rem 1.25rem 2rem; font-size: .88rem; opacity: .7; }

/* ---------------------------------------------------------------- Handy & Tablet */
@media (max-width: 1400px) and (min-width: 1201px) {
  .kopf-innen { gap: 1rem; }
  .hauptmenue { gap: .6rem; }
  .hauptmenue ul { gap: 0; }
  .hauptmenue a { padding: .4rem .55rem; }
  .kopf .suchfeld { width: 11rem; }
}
@media (max-width: 1200px) {
  .kopf .suchfeld { width: 100%; }
  .menue-knopf { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; font: inherit; font-weight: 700; background: none; border: 1.5px solid var(--linie);
    border-radius: 999px; padding: .4rem .9rem; color: var(--tinte); cursor: pointer; }
  .hauptmenue { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-bottom: 1px solid var(--linie);
    flex-direction: column; align-items: stretch; padding: 1rem 1.25rem 1.25rem; gap: .75rem; box-shadow: 0 16px 30px -18px rgb(20 30 60 / .4); }
  .hauptmenue.offen { display: flex; }
  .hauptmenue ul { flex-wrap: wrap; }
  .menue-seiten { margin-left: 0 !important; }
  .thema-raster.mit-toc { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .start-kopf { grid-template-columns: 1fr; gap: 2.5rem; }
  .start-text h1 { max-width: none; }
  .fuss-innen { grid-template-columns: 1fr 1fr; }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .hefte { justify-self: stretch; }
  .hefte { gap: .9rem; }
  .heft { padding: 12% 7% 8% 14%; }
  .heft-etikett { padding: .6rem .65rem .45rem; }
  .heft-zahl { font-size: .78rem; }
  .hefte.klein { grid-template-columns: 1fr 1fr; }
  .blatt-aktionen { margin-left: 0; width: 100%; }
  .blaettern { grid-template-columns: 1fr; }
  .blaettern .weiter { grid-column: 1; }
  .leuchtkasten[open] { grid-template-columns: 2.5rem 1fr 2.5rem; }
  .lk-titel { flex-basis: 100%; order: -1; font-size: .9rem; }
  .lk-zoom { margin-right: auto; }
  .iv-zahl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .heft:hover, .heft:nth-child(even):hover { transform: none; }
}

/* ---------------------------------------------------------------- Drucken */
@page { size: A4; margin: 10mm; }
@media print {
  :root { --grund: #fff; --papier: #fff; --tinte: #000; --tinte-2: #333; --linie: #bbb; --karo: transparent; color-scheme: light; }
  body { background: #fff; font-size: 11pt; }
  .kopf, .fuss, .toc, .art-filter, .blatt-aktionen, .thema-aktionen, .blaettern, .verwandt, .springen, .leuchtkasten, .brotkrumen, .suchfeld, .andere-klassen { display: none !important; }
  .thema-kopf, .seiten-kopf, .start-kopf { background: none !important; border: 0; }
  .thema-kopf { border-top: 0; }
  .thema-kopf-innen { padding: 0 0 4mm; }
  .mit-toc-kopf .thema-kopf-innen { max-width: var(--breite); }
.thema-kopf h1 { font-size: 20pt; margin: 0; }
  .thema-raster, .thema-raster.mit-toc { display: block; padding: 0; }
  .theorie { border: 0; padding: 0; }
  /* Normales Drucken (Strg+P): nur Theorie, keine Blätter. Blätter gibt es nur einzeln über „Drucken“. */
  .blaetter, .login-hinweis, .material, .links { display: none !important; }
  .blatt { break-inside: avoid; }
  .blatt[hidden] { display: none; }
  .blatt-papier { border: 0; box-shadow: none; }
  .blatt-papier img { width: auto; max-width: 100%; max-height: 265mm; margin: 0 auto; }
  .blatt figcaption { display: none; }
  .merke { border: 1.5pt solid #000; background: #fff; break-inside: avoid; }
  .tabelle, .tabelle tr { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  a { text-decoration: none; }
  /* „Drucken“ bei einem Blatt: genau dieses eine Blatt, sonst nichts */
  body.ein-blatt .thema-kopf, body.ein-blatt .theorie, body.ein-blatt .theorie-mehr { display: none !important; }
  body.ein-blatt .blaetter { display: block !important; }
  body.ein-blatt .blatt:not(.wird-gedruckt) { display: none !important; }
  body.ein-blatt .wird-gedruckt { display: block !important; }
}