/* schule-kleinoeder.de – Stylesheet
   Serif für Überschriften, serifenlos für Text, Blau + ein warmer Akzent.
   Nur Systemschriften: keine externen Schrift-Server. */

:root {
  --grund: #faf8f4;
  --karte: #ffffff;
  --text: #1c1f23;
  --leise: #6d7177;
  --linie: #e6e2da;
  --blau: #1e5175;
  --blau-hell: #e8eef3;
  --akzent: #c8643b;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 1rem/1.6 var(--sans);
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.seite { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }

/* Leiste oben */
.leiste {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.5rem 0;
  font-size: .95rem;
}
.leiste .name { font-family: var(--serif); font-size: 1.2rem; white-space: nowrap; }
.leiste nav { display: flex; gap: 1.5rem; color: var(--leise); }
.leiste nav a:hover { color: var(--blau); }

/* Einstieg */
.einstieg { padding: 5rem 0 0; margin-bottom: 3rem; }
.einstieg h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.einstieg h1 em { font-style: italic; color: var(--blau); }
.einstieg p { margin: 1.25rem 0 0; color: var(--leise); font-size: 1.1rem; }

/* Abschnittstitel */
.abschnitt-titel {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
}
.abschnitt-titel::after { content: ""; flex: 1; border-top: 1px solid var(--linie); transform: translateY(-.35em); }

section { margin-bottom: 4.5rem; }

/* Jahrgangsstufen auf der Startseite */
.stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.stufe {
  display: grid;
  grid-template-columns: 7rem 1fr;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 4px;
}
.stufe .nr {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1.1rem;
  border-right: 1px solid var(--linie);
}
.stufe .nr b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--blau);
}
.stufe .nr small { color: var(--leise); font-size: .8rem; }
.stufe .inhalt { padding: 1.1rem 1.5rem 1.25rem; }
.stufe .inhalt h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }
.stufe .inhalt h3 a:hover { color: var(--blau); }
.themen { list-style: none; margin: 0; padding: 0; }
.themen li + li { border-top: 1px solid var(--linie); }
.themen a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
}
.themen a span:first-child { transition: color .15s; }
.themen a:hover span:first-child { color: var(--blau); }
.themen .anzahl { color: var(--leise); font-size: .875rem; white-space: nowrap; }

/* Raumplan + Kontakt nebeneinander */
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.raeume { list-style: none; margin: 0; padding: 0; }
.raeume li + li { border-top: 1px solid var(--linie); }
.raeume a { display: flex; justify-content: space-between; padding: .75rem 0; }
.raeume a:hover { color: var(--blau); }
.raeume .pfeil { color: var(--akzent); }
.hinweis { color: var(--leise); font-size: .95rem; margin: .75rem 0 0; }
.mail {
  font-family: var(--serif);
  font-size: 1.35rem;
  border-bottom: 1px solid var(--linie);
  word-break: break-word;
}
.mail:hover { color: var(--blau); border-color: var(--blau); }

.fuss {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  border-top: 1px solid var(--linie);
  padding: 2rem 0 3rem;
  color: var(--leise);
  font-size: .875rem;
}
.fuss nav { display: flex; gap: 1.25rem; }
.fuss a:hover { color: var(--blau); }

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.textseite { max-width: 40rem; padding: 3.5rem 0 4rem; }
.textseite h1 {
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1.15;
}
.textseite h2 {
  margin: 2.5rem 0 .5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
}
.textseite p, .textseite address { margin: 0 0 1rem; font-style: normal; }
.textseite a { color: var(--blau); border-bottom: 1px solid var(--linie); }
.textseite a:hover { border-color: var(--blau); }
.textseite .stand { color: var(--leise); font-size: .9rem; margin-top: 3rem; }

/* ---------- Unterseite einer Jahrgangsstufe ---------- */
.stufenkopf {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: end;
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 3rem;
}
.stufenkopf .gross {
  font-family: var(--serif);
  font-size: clamp(5rem, 14vw, 8rem);
  line-height: .8;
  color: var(--blau);
}
.stufenkopf p { margin: 0; color: var(--leise); }
.stufenkopf h1 {
  margin: .25rem 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.15;
}

.layout { display: grid; grid-template-columns: 13rem 1fr; gap: 3.5rem; align-items: start; }

.inhaltsverzeichnis { position: sticky; top: 1.5rem; font-size: .95rem; }
.inhaltsverzeichnis p { margin: 0 0 .5rem; color: var(--leise); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.inhaltsverzeichnis ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linie); }
.inhaltsverzeichnis a { display: block; padding: .35rem 0 .35rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--leise); }
.inhaltsverzeichnis a:hover { color: var(--blau); border-left-color: var(--blau); }

.lernbereich { margin-bottom: 4rem; scroll-margin-top: 1.5rem; }
.lernbereich .lb { margin: 0; color: var(--akzent); font-size: .85rem; font-weight: 600; letter-spacing: .04em; }
.lernbereich h2 {
  margin: .2rem 0 .5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
}
.lernbereich > p { margin: 0 0 1.5rem; color: var(--leise); max-width: 36rem; }

.material { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.material a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 4px;
  transition: border-color .15s;
}
.material a:hover { border-color: var(--blau); }
.material strong { font-weight: 600; }
.material .beschreibung { grid-column: 1; color: var(--leise); font-size: .95rem; }
.material .art {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: .8rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--blau-hell);
  color: var(--blau);
  white-space: nowrap;
}
.material .art.pdf { background: #f6e9e2; color: #9a4423; }
.material .art.folien { background: #eef0e6; color: #4f5a2a; }


@media (max-width: 760px) {
  .einstieg { padding: 3rem 0 0; margin-bottom: 2.5rem; }
  .leiste { flex-wrap: wrap; padding: 1.25rem 0 .5rem; }
  .leiste nav { gap: 1.25rem; width: 100%; font-size: .9rem; }
  .stufe { grid-template-columns: 1fr; }
  .stufe .nr { flex-direction: row; align-items: baseline; gap: .75rem; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--linie); padding: .9rem 1.25rem; }
  .stufe .nr b { font-size: 2.25rem; }
  .zweispaltig { grid-template-columns: 1fr; gap: 2.5rem; }
  .stufenkopf { gap: 1.25rem; padding: 2rem 0; }
  .layout { grid-template-columns: 1fr; gap: 2rem; }
  .inhaltsverzeichnis { position: static; }
  .material a { grid-template-columns: 1fr; }
  .material .art { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Werkzeug-Karten mit Live-Vorschau ---------- */
.werkzeuge {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 1.25rem;
}
.werkzeug {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.werkzeug:hover, .werkzeug:focus-visible {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px var(--blau-hell), 0 10px 24px -12px rgba(30, 81, 117, .35);
  transform: translateY(-2px);
}
.werkzeug:focus-visible { outline: none; }

/* Bild des Werkzeugs */
.bild {
  position: relative;
  aspect-ratio: 320 / 190;
  overflow: hidden;
  border-bottom: 1px solid var(--linie);
}
.bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition: transform .35s ease;
}
.werkzeug:hover .bild img, .werkzeug:focus-visible .bild img { transform: scale(1.05); }

/* Erklärung beim Darüberfahren */
.erklaerung {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem 1.1rem;
  background: rgba(16, 38, 58, .92);
  color: #fff;
  font-size: .9rem;
  line-height: 1.45;
  opacity: 0;
  transition: opacity .2s;
}
.erklaerung p { margin: 0; }
.erklaerung span { font-weight: 600; color: #ffd9c6; }
.werkzeug:hover .erklaerung, .werkzeug:focus-visible .erklaerung { opacity: 1; }
@media (hover: none) { .erklaerung { display: none; } }

/* Lebendige Karten (karten.js): Das eingesetzte SVG verhält sich wie das Bild.
   Die Erklärung kommt etwas später, damit man die Bewegung zuerst sieht. */
.bild svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .35s ease; }
.werkzeug:hover .bild svg, .werkzeug:focus-visible .bild svg { transform: scale(1.05); }
.werkzeug.lebt:hover .erklaerung, .werkzeug.lebt:focus-visible .erklaerung { transition-delay: 1.6s; }

.werkzeug-text { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1.1rem 1.05rem; flex: 1; }
.werkzeug-text strong { font-weight: 600; transition: color .2s; }
.werkzeug:hover .werkzeug-text strong { color: var(--blau); }
.werkzeug-text .kurz { color: var(--leise); font-size: .9rem; line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .4rem; }
.chips code {
  font-size: .72rem;
  padding: .1rem .4rem;
  border-radius: 3px;
  background: var(--blau-hell);
  color: var(--blau);
}
.chips .stufe-chip { background: #f6e9e2; color: #9a4423; font-family: var(--sans); }

.quelle { color: var(--leise); font-size: .875rem; margin: 1rem 0 0; }
.quelle a { border-bottom: 1px solid var(--linie); }
.quelle a:hover { color: var(--blau); border-color: var(--blau); }

.wiederholung {
  margin: 0 0 1.5rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--akzent);
  background: var(--karte);
  color: var(--text);
}
.wiederholung a { color: var(--blau); border-bottom: 1px solid var(--linie); }

.material .art.download { background: #eceef1; color: #3c4450; }
.unterabschnitt { margin: 2.25rem 0 .75rem; font-size: 1rem; font-weight: 600; }

.einstieg + section .werkzeuge { margin-top: .25rem; }
.leiste nav { flex-wrap: wrap; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) {
  .werkzeug:hover, .werkzeug:focus-visible { transform: none; }
  .werkzeug:hover .bild img, .werkzeug:focus-visible .bild img,
  .werkzeug:hover .bild svg, .werkzeug:focus-visible .bild svg { transform: none; }
}
@media (max-width: 760px) {
  .leiste nav { justify-content: flex-start; gap: .4rem 1.1rem; }
}

/* ---------- Werkzeug-Übersicht mit Filter ---------- */
.mehr { margin: 1.25rem 0 0; }
.mehr a { color: var(--blau); border-bottom: 1px solid var(--linie); }
.mehr a:hover { border-color: var(--blau); }

.alle-link { margin: 1.25rem 0 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .9rem !important; }
.alle-link a { color: var(--blau); }

.filter {
  display: grid;
  gap: .9rem;
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 6px;
}
.filter[hidden] { display: none; }
.filter-suche { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: 1rem; }
.filter-suche label, .filter-name { color: var(--leise); font-size: .9rem; }
.filter-suche input {
  font: inherit;
  padding: .55rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--grund);
  color: var(--text);
  max-width: 28rem;
}
.filter-suche input:focus { outline: 2px solid var(--blau); outline-offset: 0; border-color: var(--blau); }
.filter-gruppe { display: grid; grid-template-columns: 9rem 1fr; align-items: baseline; gap: 1rem; }
.filter-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-knoepfe button, .filter-status button, .leer-hinweis button {
  font: inherit;
  font-size: .9rem;
  padding: .3rem .8rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--grund);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.filter-knoepfe button:hover { border-color: var(--blau); color: var(--blau); }
.filter-knoepfe button[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }
.filter-status {
  margin: .25rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: .9rem;
  display: flex; align-items: center; gap: 1rem;
}
.filter-status button, .leer-hinweis button { font-size: .85rem; padding: .2rem .7rem; }
.filter-status button:hover, .leer-hinweis button:hover { border-color: var(--akzent); color: var(--akzent); }
.werkzeuge li[hidden] { display: none; }
.leer-hinweis { color: var(--leise); padding: 2rem 0; }

@media (max-width: 760px) {
  .filter { padding: 1rem; }
  .filter-suche, .filter-gruppe { grid-template-columns: 1fr; gap: .4rem; }
}
.einstieg.kompakt { padding-bottom: 0; margin-bottom: 2.5rem; }

/* Startseite: Fächer zweizeilig */
.einstieg h1.faecher .ueber {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--sans);
  font-size: .4em;
  font-style: normal;
  letter-spacing: .01em;
  color: var(--leise);
}
.filter-gruppe[hidden] { display: none; }

/* Startseite: ganze Jahrgangsstufen-Karte klickbar.
   Der Link der Überschrift wird über die ganze Karte gelegt,
   die Themen-Links liegen darüber und bleiben einzeln anklickbar. */
.stufe { position: relative; transition: border-color .2s, box-shadow .2s; }
.stufe .inhalt h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.stufe .themen a, .stufe .nr { position: relative; z-index: 1; }
.stufe:hover { border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.stufe:hover .inhalt h3 a { color: var(--blau); }
.stufe:focus-within { border-color: var(--blau); }

/* Dezenter Zurück-Knopf auf den Unterseiten (rechts) */
.zurueck-knopf {
  justify-self: end;
  align-self: center;
  white-space: nowrap;
  font-size: .9rem;
  color: var(--leise);
  padding: .4rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  transition: color .15s, border-color .15s;
}
.zurueck-knopf:hover { color: var(--blau); border-color: var(--blau); }
.stufenkopf { grid-template-columns: auto 1fr auto; }
.einstieg.mit-zurueck { display: grid; grid-template-columns: 1fr auto; column-gap: 2rem; }
.einstieg.mit-zurueck > * { grid-column: 1; }
.einstieg.mit-zurueck .zurueck-knopf { grid-column: 2; grid-row: 1; align-self: center; }
.titel-mit-zurueck { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.titel-mit-zurueck h1 { margin: 0 !important; }
.textseite { max-width: none; }
.textseite > :not(.titel-mit-zurueck) { max-width: none; }

@media (max-width: 760px) {
  .stufenkopf { grid-template-columns: auto 1fr; }
  .stufenkopf .zurueck-knopf { grid-column: 1 / -1; justify-self: start; order: -1; }
  .einstieg.mit-zurueck { grid-template-columns: 1fr; }
  .einstieg.mit-zurueck .zurueck-knopf { grid-column: 1; grid-row: auto; justify-self: start; margin-bottom: 1.25rem; }
  .titel-mit-zurueck { flex-direction: column-reverse; align-items: flex-start; }
}

/* Kompakte Werkzeug-Karten (z. B. Wiederholung): drei nebeneinander */
.werkzeuge.kompakt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.werkzeuge.kompakt .werkzeug-text { padding: .7rem .85rem .8rem; gap: .2rem; }
.werkzeuge.kompakt .werkzeug-text strong { font-size: .92rem; }
.werkzeuge.kompakt .werkzeug-text .kurz { font-size: .82rem; }
.werkzeuge.kompakt .chips { display: none; }
.werkzeuge.kompakt .erklaerung { padding: .7rem .8rem; font-size: .78rem; line-height: 1.4; }
.werkzeuge.kompakt .erklaerung p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

@media (max-width: 760px) {
  .werkzeuge.kompakt { grid-template-columns: 1fr; gap: .6rem; }
  .werkzeuge.kompakt .werkzeug { flex-direction: row; }
  .werkzeuge.kompakt .bild { flex: 0 0 38%; border-bottom: 0; border-right: 1px solid var(--linie); }
  .werkzeuge.kompakt .werkzeug-text { justify-content: center; }
}
.layout > * { min-width: 0; }
.werkzeuge.kompakt .werkzeug-text { min-width: 0; }
@media (max-width: 760px) {
  .werkzeuge.kompakt .bild { aspect-ratio: auto; min-height: 5.5rem; }
  .werkzeuge.kompakt .bild { background: #e8eef3; }
  .werkzeuge.kompakt .bild img { object-fit: contain; }
}


/* Hinweis auf der Abitur-Seite */
.einstieg p.ki-hinweis {
  margin: 1.25rem 0 0;
  padding: .7rem 1rem;
  border-left: 3px solid var(--akzent);
  background: var(--karte);
  color: var(--text);
  font-size: 1rem;
}
.einstieg.mit-zurueck > .ki-hinweis { grid-column: 1 / -1; }

/* ---------- Fächer: eigene Farbe für Wirtschaft und Recht ---------- */
:root { --wr: #9a4423; --wr-hell: #f6e9e2; }
#wr { scroll-margin-top: 1rem; }
.stufe.wr .nr b { color: var(--wr); }
/* Jahrgangsstufenübergreifend: Wort statt Zahl */
.stufe .nr b.wort { font-size: 2rem; line-height: 1.1; }
.stufenkopf .gross.wort { font-size: clamp(3.2rem, 9vw, 5rem); line-height: .9; }
.stufe.wr:hover { border-color: var(--wr); box-shadow: 0 0 0 3px var(--wr-hell); }
.stufe.wr:hover .inhalt h3 a, .stufe.wr .themen a:hover span:first-child { color: var(--wr); }
.fach-wr .stufenkopf .gross { color: var(--wr); }
.fach-wr .inhaltsverzeichnis a:hover { color: var(--wr); border-left-color: var(--wr); }
.fach-wr .alle-link a { color: var(--wr); }
.fach-wr .werkzeug:hover, .fach-wr .werkzeug:focus-visible { border-color: var(--wr); box-shadow: 0 0 0 3px var(--wr-hell), 0 10px 24px -12px rgba(154, 68, 35, .35); }
.fach-wr .werkzeug:hover .werkzeug-text strong { color: var(--wr); }
.einstieg h1 em.wr { color: var(--wr); }

/* ---------- Werkzeug für Lehrkräfte ---------- */
.werkzeug.lehrkraft { border-style: dashed; border-color: #d9c3b6; }
.werkzeug.lehrkraft .chips code:first-child { background: var(--wr); color: #fff; }
/* Informatik: Lehrkraft-Karten und Auswahlseiten in Blau statt WR-Rot */
.fach-inf, [data-fach="Informatik"] { --wr: var(--blau); --wr-hell: var(--blau-hell); }
.werkzeug.lehrkraft:is(.fach-inf *, [data-fach="Informatik"] *) { border-color: #b9c9d6; }
.fach-inf .knopf:hover { background: #163f5c; }

/* ---------- Auswahlseite Klassenmodus ---------- */
.ueber-zeile { margin: 0 0 .5rem !important; color: var(--wr) !important; font-size: .9rem !important; font-weight: 600; }
.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 3rem; }
.wahl-karte {
  margin: 0; display: flex; flex-direction: column; gap: .6rem;
  padding: 1.5rem 1.6rem 1.6rem; background: var(--karte);
  border: 1px solid var(--linie); border-radius: 6px;
}
.wahl-karte h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.wahl-karte p { margin: 0; color: var(--leise); }
.wahl-nr {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wr-hell); color: var(--wr) !important; font-weight: 700;
}
.wahl-ziel { font-size: .95rem; }
.knopf {
  margin-top: auto; align-self: flex-start;
  padding: .65rem 1.2rem; border-radius: 999px;
  background: var(--wr); color: #fff; font-weight: 600;
  transition: background .15s;
}
.knopf:hover { background: #7c3519; }
.passwort-hinweis {
  margin: .4rem 0 .6rem; padding: .8rem 1rem;
  border-left: 3px solid var(--wr); background: var(--wr-hell);
  font-size: .95rem; line-height: 1.5;
}
.passwort-hinweis strong { display: block; }
.passwort-hinweis a { color: var(--wr); font-weight: 600; border-bottom: 1px solid currentColor; }
.ablauf ol { margin: 0; padding-left: 1.3rem; max-width: 46rem; }
.ablauf li { margin-bottom: .6rem; }
.ablauf .hinweis a, .ablauf li a { color: var(--wr); border-bottom: 1px solid var(--linie); }
.ablauf li a { font-weight: 600; }
.ablauf li a:hover { border-bottom-color: var(--wr); }
@media (max-width: 760px) { .wahl { grid-template-columns: 1fr; } }

/* ---------- Abitur: Einstieg zu beiden Übersichten ---------- */
.abi-wahl .wahl-karte { border-top: 3px solid var(--blau); }
.abi-wahl .wahl-karte.wr { border-top-color: var(--wr); }
.abi-fach { color: var(--blau) !important; font-weight: 600; font-size: .9rem; letter-spacing: .02em; }
.wahl-karte.wr .abi-fach { color: var(--wr) !important; }
.abi-funktionen { margin: .2rem 0 .6rem; padding-left: 1.1rem; color: var(--leise); font-size: .95rem; }
.abi-funktionen li { margin-bottom: .2rem; }
.abi-wahl .wahl-karte.inf .knopf { background: var(--blau); }
.abi-wahl .wahl-karte.inf .knopf:hover { background: #163f5c; }

/* Anleitung auf der Klassenmodus-Seite */
.anleitung-box {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.25rem 2rem;
  margin: 0 0 3rem; padding: 1.4rem 1.6rem;
  background: var(--karte); border: 1px solid var(--linie); border-left: 3px solid var(--wr); border-radius: 6px;
}
.anleitung-box h2 { margin: 0 0 .3rem; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }
.anleitung-box p { margin: 0; color: var(--leise); }
.anleitung-knoepfe { display: flex; flex-direction: column; gap: .6rem; }
.anleitung-knoepfe .knopf { margin: 0; align-self: stretch; text-align: center; }
.knopf.zweit { background: transparent; color: var(--wr); box-shadow: inset 0 0 0 1.5px var(--wr); }
.knopf.zweit:hover { background: var(--wr-hell); }
@media (max-width: 760px) { .anleitung-box { grid-template-columns: 1fr; } }
.anleitung-box p.anleitung-mehr { margin-top: .7rem; font-size: .9rem; }
.anleitung-mehr a { color: var(--wr); border-bottom: 1px solid var(--linie); }

/* ---------- Linktipps (gepflegt in der Verwaltung, linktipps.js) ---------- */
.lt-art { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
.lt-art svg { width: .95rem; height: .95rem; }
.lt-kommentar { color: var(--text); font-size: .9rem; line-height: 1.45; }
.lt-quelle { color: var(--leise); font-size: .8rem; overflow-wrap: anywhere; }
.lt-bild, .ltk-bild { display: block; position: relative; overflow: hidden; background: var(--blau-hell); }
.lt-bild img, .ltk-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ohne-bild { display: grid; place-items: center; color: var(--blau); }
.ohne-bild.fach-wr { background: #f6e9e2; color: #9a4423; }
.ohne-bild svg { width: 34%; height: auto; max-width: 3.4rem; opacity: .85; }

/* Zeilen auf den Seiten der Jahrgangsstufen */
.linktipps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.linktipp {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: .6rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 6px;
  transition: border-color .2s, box-shadow .2s;
}
.linktipp:hover, .linktipp:focus-visible { border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); outline: none; }
.fach-wr .linktipp:hover, .fach-wr .linktipp:focus-visible { border-color: var(--wr); box-shadow: 0 0 0 3px var(--wr-hell); }
.linktipp .lt-bild { aspect-ratio: 16 / 9; border-radius: 4px; }
.lt-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.lt-text strong { font-weight: 600; line-height: 1.35; }
.linktipp:hover .lt-text strong { color: var(--blau); }
.fach-wr .linktipp:hover .lt-text strong { color: var(--wr); }
.linktipps-block { margin-top: 1.5rem; }
.linktipps-block h3 { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
@media (max-width: 560px) { .linktipp { grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; } }

/* Karten auf der Seite „Linktipps“ */
.linktipps-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.25rem; }
.linktipps-raster li[hidden] { display: none; }
.linktipp-karte {
  display: flex; flex-direction: column; height: 100%;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 6px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.linktipp-karte:hover, .linktipp-karte:focus-visible {
  border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell), 0 10px 24px -12px rgba(30, 81, 117, .35); transform: translateY(-2px); outline: none;
}
.linktipp-karte .ltk-bild { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--linie); }
.ltk-text { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1.1rem 1.05rem; flex: 1; }
.ltk-text strong { font-weight: 600; line-height: 1.35; }
.linktipp-karte:hover .ltk-text strong { color: var(--blau); }
.chips code.lt-fach { font-family: var(--sans); }
.chips code.lt-fach.wr { background: #f6e9e2; color: #9a4423; }
.chips code.lt-thema { font-family: var(--sans); background: #eceae6; color: var(--leise); }