/*
  Designsystem der statischen Inhaltsseiten (/about.html, /mathe/…).

  Bewusst dieselben Farbwerte und Bausteine wie die Startseite, damit der
  Übergang von der Landingpage nicht wie ein Sprung auf eine fremde Website
  wirkt. Die Startseite trägt ihr CSS inline – sie ist die Einstiegsseite und
  soll ohne zweiten Request rendern. `web_theme_toggle_test.dart` vergleicht
  die Farbwerte beider Stellen, damit sie nicht auseinanderlaufen.

  Keine externen Schriften oder CDNs: hält die Seiten schnell und erspart
  einen Eintrag in der Datenschutzerklärung.
*/

/* Nunito ist die Schrift der App und liegt bereits im Flutter-Assetbundle. */
@font-face {
  font-family: 'Nunito';
  src: url('/assets/lib/assets/fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/lib/assets/fonts/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/lib/assets/fonts/Nunito-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

/*
  Dunkel ist der Standard – deshalb steht die dunkle Palette in :root. Die
  Systemeinstellung wird bewusst nicht abgefragt: Die Wahl trifft der
  Umschalter in der Kopfzeile, /theme.js merkt sie sich im localStorage und
  sie gilt für alle Seiten.

  Hell verwendet die Farben der App (lib/core/theme/app_theme.dart).
*/
:root {
  --cream: #121212;
  --cream-deep: #252525;
  --card: #1e1e1e;
  --navy: #e6eef7;
  --text: #f2f2f2;
  --muted: #b8b8b8;
  --soft-blue: #252525;
  --table-stripe: #252525;
  --file-button-bg: #704813;
  --file-button-hover-bg: #85591a;
  --file-button-pressed-bg: #5c390d;
  --file-button-text: #fff7ea;
  --file-button-border: #d9a441;
  --file-button-hover-border: #f0b94f;
  --file-button-pressed-border: #ba7d24;
  --solution-button-bg: #663047;
  --solution-button-hover-bg: #7a3b56;
  --solution-button-pressed-bg: #522237;
  --solution-button-text: #fff7ea;
  --solution-button-border: #d68ba8;
  --solution-button-hover-border: #e4a1bb;
  --solution-button-pressed-border: #b76b88;
  --match-button-bg: #8b5a16;
  --match-button-hover-bg: #985f1b;
  --match-button-pressed-bg: #70450f;
  --match-button-text: #fff7ea;
  --match-button-border: #ffd27a;
  --match-button-hover-border: #ffe0a3;
  --match-button-pressed-border: #d9a441;
  --file-button-focus: #f0b94f;
  --amber: #e8b04b;
  --school-ahs: #6cb6ff;
  --school-bhs: #ffb454;
  --school-brp: #ffb454;
  --school-htl-t1: #55d6be;
  --school-htl-t2: #c49bff;
  --school-hlfs-hum: #8bdc65;
  --school-hak: #ff86a7;
  --border: #2f2f2f;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  --on-navy: #121212;
  --link: #9dc4ea;
  --radius: 20px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --cream: #fff7ea;
  --cream-deep: #f6e7c8;
  --card: #fffbf4;
  --navy: #16324f;
  --text: #102a43;
  --muted: #5b6b7c;
  --soft-blue: #e6eef7;
  --table-stripe: #ffffff;
  --file-button-bg: #f3d5a2;
  --file-button-hover-bg: #e8be79;
  --file-button-pressed-bg: #ddaa57;
  --file-button-text: #3b2400;
  --file-button-border: #976000;
  --file-button-hover-border: #7c4b00;
  --file-button-pressed-border: #603700;
  --solution-button-bg: #ead2dc;
  --solution-button-hover-bg: #ddb5c6;
  --solution-button-pressed-bg: #cd94ab;
  --solution-button-text: #451629;
  --solution-button-border: #98506b;
  --solution-button-hover-border: #7e3953;
  --solution-button-pressed-border: #65263e;
  --match-button-bg: #e3aa4c;
  --match-button-hover-bg: #f0bb61;
  --match-button-pressed-bg: #c98c2f;
  --match-button-text: #3b2400;
  --match-button-border: #6b4000;
  --match-button-hover-border: #543000;
  --match-button-pressed-border: #7c4b00;
  --file-button-focus: #7c4b00;
  --amber: #e0952b;
  --school-ahs: #155a9c;
  --school-bhs: #8a4b00;
  --school-brp: #8a4b00;
  --school-htl-t1: #087c68;
  --school-htl-t2: #6840a0;
  --school-hlfs-hum: #3e7714;
  --school-hak: #a32c51;
  --border: #ecdfc8;
  --shadow: 0 18px 40px rgba(16, 42, 67, 0.09);
  --on-navy: #fff7ea;
  --link: #16324f;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-weight: 800;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}

/*
  Standardbreite ist die Lesespalte der Themenseiten. Seiten, die statt eines
  Fließtexts aus gestalteten Blöcken bestehen (about.html), setzen `wide` am
  <body> – dann wachsen Inhalt, Kopf- und Fußzeile gemeinsam, damit nichts
  gegeneinander verrutscht.
*/
.wrap {
  width: min(48rem, 100% - 2.5rem);
  margin-inline: auto;
}

body.wide .wrap:not(.foot-inner) {
  width: min(64rem, 100% - 2.5rem);
}

a {
  color: var(--link);
}

/* ---------- Kopfzeile ---------- */

header.top {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(1.4) blur(10px);
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  border-bottom: 1px solid var(--border);
}

.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  width: min(90rem, 100% - 2.5rem);
  margin-inline: auto;
}

.brand {
  --brand-logo-height: 28px;
  display: flex;
  flex: none;
  position: relative;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand img {
  height: var(--brand-logo-height);
  width: auto;
  display: block;
}

/* Das Original bleibt im Lightmode unverändert. Im Darkmode werden π und ×
   derselben PNG pixelgenau weiß überblendet; der Daumen bleibt unverändert. */
:root:not([data-theme="light"]) .brand::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  inset-inline-start: 0;
  height: var(--brand-logo-height);
  aspect-ratio: 735 / 339;
  background: url("/images/pimaldaumen-logo.png") center / 100% 100% no-repeat;
  clip-path: inset(0 40% 0 0);
  filter: brightness(0) invert(1);
  pointer-events: none;
  transform: translateY(-50%);
}

nav.main {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}

nav.main a {
  text-decoration: none;
  color: var(--muted);
  transition: color 0.15s ease;
}

nav.main a:hover {
  color: var(--text);
}

nav.main a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35rem;
}

/* Alle Hauptlinks bleiben auch auf schmalen Geräten im Header. Dort
   erhält die Navigation eine eigene, horizontal scrollbarere Zeile. */
@media (max-width: 1360px) {
  .top-inner {
    flex-wrap: wrap;
    padding-bottom: 0.55rem;
  }

  nav.main {
    order: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start;
    gap: 1.15rem;
    padding: 0.15rem 0 0.35rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    white-space: nowrap;
  }

  nav.main > * {
    flex: none;
  }
}

/* ---------- Knöpfe ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn.primary {
  background: var(--navy);
  color: var(--on-navy);
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn.ghost {
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
}

.btn.ghost:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn.small {
  padding: 0.55rem 1.05rem;
  font-size: 0.92rem;
  border-radius: 12px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 2rem 0 0;
}

/* ---------- Umschalter hell/dunkel ---------- */

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--navy);
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
}

/* Gezeigt wird das Ziel des Klicks, nicht der aktuelle Zustand. */
.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

/* ---------- Seitenkopf ---------- */

main {
  padding-bottom: 4rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 2rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}

.crumbs a {
  text-decoration: none;
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--text);
}

.crumbs span[aria-hidden] {
  opacity: 0.5;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  margin: 1.75rem 0 0.9rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0 0 0.9rem;
}

h2 {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 3rem 0 0.6rem;
}

h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 2rem 0 0.4rem;
}

.lead {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--muted);
  margin: 0 0 1.5rem;
}

p {
  margin: 0 0 1.1rem;
}

ul,
ol {
  margin: 0 0 1.2rem;
  padding-left: 1.3rem;
}

li {
  margin-bottom: 0.4rem;
}

/* ---------- Bausteine ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin: 1.75rem 0;
}

.card p:last-child {
  margin-bottom: 0;
}

/* Hinweiskasten mit Akzentkante – für Warnungen und Merksätze. */
.note {
  border-left: 4px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Formeln als Text und nicht als Bild, damit sie lesbar und indexierbar
   bleiben. Lange Formeln scrollen im eigenen Kasten statt die Seite zu
   verbreitern. */
.formula {
  display: block;
  overflow-x: auto;
  padding: 0.85rem 1.1rem;
  margin: 1.2rem 0;
  background: var(--soft-blue);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: 'Cambria Math', Cambria, Georgia, serif;
  font-size: 1.08rem;
  white-space: nowrap;
}

/* Tabellen scrollen auf schmalen Displays im eigenen Rahmen. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 1.5rem 0;
  background: var(--card);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
  min-width: 26rem;
}

th,
td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--soft-blue);
}

tbody tr:last-child td {
  border-bottom: none;
}

td:first-child {
  font-weight: 700;
}

/* Formelspalten in Serifen-Mathematik setzen. */
.math td:not(:first-child),
.math.all td {
  font-family: 'Cambria Math', Cambria, Georgia, serif;
}

/* ---------- Themenliste ---------- */

ul.topics {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.9rem;
}

ul.topics li {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

ul.topics li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

ul.topics li a {
  font-weight: 800;
  font-size: 1.08rem;
  text-decoration: none;
}

ul.topics li p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.96rem;
}

/* ---------- Themen-Chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.2rem 0 1.6rem;
  padding: 0;
  list-style: none;
}

.chips li {
  margin: 0;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.92rem;
}

/* ---------- Gestaltete Blöcke (about.html) ---------- */

/*
  Dieselben Bausteine wie im Hero der Startseite. Sie stehen hier statt inline,
  weil sie auf mehreren Seiten gebraucht werden – die Farbwerte sind
  identisch, siehe Kommentar oben.
*/

.page-hero {
  position: relative;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  /* Klippt die Farbwolke, die absichtlich über den Rand hinausragt. Bewusst
     hier und nicht als `overflow-x` an html/body: Das würde die Kopfzeile aus
     `position: sticky` werfen. */
  overflow: hidden;
}

/*
  Weiche Farbwolke im Hintergrund – rein dekorativ.
  `z-index: -1` funktioniert hier nicht: .page-hero ist zwar `relative`, bildet
  ohne eigenen z-index aber keinen Stapelkontext. Das Pseudo-Element läge dann
  hinter dem Hintergrund des <body> und wäre unsichtbar. Deshalb liegt es auf
  0 und der Inhalt darüber.
*/
.page-hero::before {
  content: '';
  position: absolute;
  inset: -60% -20% auto;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cream-deep), transparent 65%);
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero img.mark {
  height: clamp(52px, 9vw, 74px);
  width: auto;
  margin-bottom: 1.25rem;
}

.page-hero h1 {
  margin-bottom: 1rem;
}

/* Auf den Prüfungs- und Formelheftseiten steht bewusst nur die eigentliche
   Seitenüberschrift. Ohne Brotkrumen und Eyebrow fällt der Kopf kompakt aus. */
.page-hero--compact {
  padding: clamp(0.8rem, 2vw, 1.25rem) 0 0.35rem;
}

.page-hero--compact h1 {
  margin: 0;
}

/* Vollständiger Seitenkopf mit Brotkrumen und Einordnung, aber deutlich
   weniger vertikalem Platz als der große Marketing-Hero. */
.page-hero--condensed {
  padding: clamp(0.45rem, 1.2vw, 0.8rem) 0 clamp(0.55rem, 1.5vw, 0.9rem);
}

.page-hero--condensed .crumbs {
  margin-top: 0.2rem;
  font-size: 0.8rem;
}

.page-hero--condensed .eyebrow {
  margin: 0.55rem 0 0.4rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.76rem;
}

.page-hero--condensed h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.15rem);
  margin-bottom: 0.45rem;
}

.page-hero--condensed .lead {
  margin-bottom: 0;
  font-size: clamp(0.96rem, 1.5vw, 1.06rem);
  line-height: 1.45;
}

.page-hero .lead {
  max-width: 38rem;
  margin-inline: auto;
}

.page-hero--condensed .lead {
  max-width: 52rem;
}

.page-hero .crumbs,
.page-hero .eyebrow {
  justify-content: center;
}

.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.5rem;
  text-align: left;
}

.about-intro h1 {
  margin-top: 0;
}

.about-intro .lead {
  margin: 0;
}

.about-portrait {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  justify-self: center;
}

@media (max-width: 760px) {
  .about-intro {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .about-intro .lead {
    margin-inline: auto;
  }
}

/*
  Artikelkopf: derselbe Aufbau wie .page-hero, aber linksbündig. Bei
  Fließtext mit Formeln liest sich zentrierter Satz schlecht – die Optik
  bleibt gleich, die Ausrichtung folgt dem Text.
*/
.article-hero {
  position: relative;
  overflow: hidden;
  padding: 0 0 0.5rem;
}

.article-hero .lead {
  margin-bottom: 0;
}

.byline {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.article-hero::before {
  content: '';
  position: absolute;
  inset: -70% -30% auto;
  height: 38rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cream-deep), transparent 65%);
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.article-hero > * {
  position: relative;
  z-index: 1;
}

/* Sprungmarken zu den Abschnitten – kurz und ohne Nummerierung. */
.toc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin: 2rem 0;
}

.toc .label {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

.toc li {
  margin: 0;
}

.toc a {
  font-weight: 700;
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

/* Gebiets-Karte: Überschrift plus Chips als geschlossener Block. */
.area {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem 1.4rem;
  margin-bottom: 1rem;
}

.area h3 {
  margin: 0 0 0.8rem;
}

.area .chips {
  margin: 0;
}

.area .chips a {
  color: inherit;
  text-decoration: none;
}

.area .chips a:hover {
  text-decoration: underline;
}

/* Zahlenband */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 2rem 0 1rem;
}

.stat {
  background: var(--card);
  padding: 1.3rem 1rem;
  text-align: center;
}

.stat b {
  display: block;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.stat span {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
}

@media (max-width: 620px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* Karten-Raster */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.feature .icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--soft-blue);
  margin-bottom: 0.9rem;
}

.feature .icon svg {
  width: 21px;
  height: 21px;
  color: var(--navy);
}

.feature h3 {
  margin: 0 0 0.3rem;
  font-size: 1.08rem;
}

/* Verlinkte Kartenüberschriften sollen wie Überschriften aussehen, nicht wie
   Fließtextlinks – die ganze Karte ist ohnehin als klickbar erkennbar. */
.feature h3 a {
  color: inherit;
  text-decoration: none;
}

.feature:hover h3 a {
  text-decoration: underline;
}

.feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

/* Aussage-Band */

.band {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: 26px;
  padding: clamp(2rem, 5vw, 3rem);
  margin: 2.5rem 0;
}

.band h2 {
  margin-top: 0;
  margin-bottom: 0.7rem;
}

.band p {
  opacity: 0.85;
  font-size: 1.05rem;
  max-width: 42rem;
}

.band p:last-child {
  margin-bottom: 0;
}

/* Knöpfe im Band drehen den Kontrast um: Der Grund ist bereits die
   Akzentfarbe, also wird der Hauptknopf hell und der zweite eine Kontur. */
.band .actions {
  margin-top: 1.5rem;
}

.band .btn.primary {
  background: var(--on-navy);
  color: var(--navy);
}

.band .btn.ghost {
  background: transparent;
  color: var(--on-navy);
  border-color: color-mix(in srgb, var(--on-navy) 40%, transparent);
}

/* Profilkarte */

.profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  margin: 1.5rem 0;
}

.profile img {
  height: 58px;
  width: auto;
  flex: none;
}

.profile .who {
  min-width: 14rem;
}

.profile .name {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.3;
}

.profile .role {
  color: var(--muted);
  font-size: 0.96rem;
}

.profile a {
  font-weight: 700;
}

/* Download-Block */

.download {
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  margin: 1.5rem 0;
}

.download h2 {
  margin-top: 0;
}

.download p {
  color: var(--muted);
  max-width: 32rem;
  margin-inline: auto;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.badges a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 52px;
  transition: transform 0.15s ease;
}

.badges a:hover {
  transform: translateY(-3px);
}

/*
  Google Play liegt als Quadrat mit viel transparenter Fläche vor und wird
  deshalb auf den Badge-Ausschnitt zugeschnitten. Apples Rand liegt direkt
  am Dateirand und braucht etwas Luft für vollständig sichtbare Ecken.
*/
.badges img {
  display: block;
  width: 176px;
  height: 52px;
  object-fit: cover;
  object-position: center;
}

.badges img[src*="badge-app-store"] {
  width: 168px;
  height: 50px;
  object-fit: contain;
}

.download .actions {
  justify-content: center;
}

/* ---------- Fußzeile ---------- */

footer.site {
  border-top: 1px solid var(--border);
  padding: clamp(2.5rem, 6vw, 4rem) 0 3rem;
  color: var(--muted);
  font-size: 0.93rem;
}

.foot-inner {
  display: grid;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(0, 2.25fr);
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  width: min(70rem, 100% - 2.5rem);
  margin-inline: auto;
}

.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.foot-brand strong {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 900;
}

.foot-brand p {
  margin: 0;
}

.foot-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  font-weight: 700;
}

.foot-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.foot-column h2 {
  margin: 0 0 0.2rem;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foot-links a {
  overflow-wrap: anywhere;
  text-decoration: none;
  color: var(--muted);
}

.foot-links a:hover {
  color: var(--text);
}

.foot-links > .pmd-consent-settings {
  grid-column: 1 / -1;
  justify-self: start;
}

.foot-brand a {
  color: inherit;
  font-weight: 800;
  text-underline-offset: 0.16em;
}

.foot-language {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.language-select {
  width: 3.4rem;
  min-height: 32px;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

@media (max-width: 900px) {
  .foot-inner {
    grid-template-columns: 1fr;
  }

  .foot-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .foot-links {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .theme-toggle,
  ul.topics li {
    transition: none;
  }
}

/* ---------- Download-Seiten (Matura, Kompensationsprüfung) ---------- */

.exam-intro {
  max-width: 52rem;
  margin: 0.25rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.exam-intro strong {
  color: var(--text);
}

.search-box {
  margin: 2rem 0 1.5rem;
}

.search-box label {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.search-box input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.search-box input:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-color: transparent;
}

.search-status {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}

.search-help {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

[data-school-type="ahs"] { --school-color: var(--school-ahs); }
[data-school-type="bhs"] { --school-color: var(--school-bhs); }
[data-school-type="brp_bafep_basop"] { --school-color: var(--school-brp); }
[data-school-type="htl_t1"] { --school-color: var(--school-htl-t1); }
[data-school-type="htl_t2"] { --school-color: var(--school-htl-t2); }
[data-school-type="hlfs_hum"] { --school-color: var(--school-hlfs-hum); }
[data-school-type="hak"] { --school-color: var(--school-hak); }

.download-school-filter {
  min-width: 0;
  margin: 0.75rem 0 0;
  padding: 0;
  border: 0;
}

.download-school-filter legend {
  margin-bottom: 0.4rem;
  padding: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.school-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.school-filter-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.school-filter-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.school-filter-chip span,
.school-type-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.25rem 0.62rem;
  border: 1.5px solid color-mix(in srgb, var(--school-color) 64%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--school-color) 9%, transparent);
  color: var(--school-color);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
}

.school-filter-chip input:checked + span {
  border-color: var(--school-color);
  background: color-mix(in srgb, var(--school-color) 22%, var(--card));
  box-shadow: inset 0 0 0 1px var(--school-color);
}

.school-filter-chip input:focus-visible + span {
  outline: 3px solid var(--school-color);
  outline-offset: 2px;
}

.school-filter-help {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
}

/*
  Die Tabelle bildet die Matrix der App nach (Zeile = Termin, Spalte =
  Schulform). Auf schmalen Geräten wird sie waagrecht geschoben statt
  umgebrochen – genau wie in der App, wo die Tabelle eine Mindestbreite hat.
*/
.table-frame {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}

.exam-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.exam-table.matura {
  min-width: var(--matura-table-min-width, 72rem);
  table-layout: fixed;
}

.exam-table.kompi {
  min-width: var(--kompi-table-min-width, 40rem);
}

/* Die allgemeinen Tabellenstile der Inhaltsseiten setzen Großbuchstaben und
   eine Linie unter jeder Zeile – hier stören beide: Die Kopfzeile trägt
   Schulform und Cluster, und getrennt werden ganze Termine, nicht Zeilen. */
.exam-table thead th {
  padding: 0.7rem 0.5rem;
  background: var(--soft-blue);
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: bottom;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

.exam-table thead th.term-col {
  width: 7.5rem;
  text-align: left;
  padding-left: 1.1rem;
  font-weight: 800;
  font-size: 0.9rem;
}

.exam-table.matura thead th {
  vertical-align: middle;
}

.exam-table.matura thead th[data-school-type] {
  box-shadow: inset 0 4px 0 var(--school-color);
}

.exam-table.matura thead th[data-school-type] .col-main {
  color: var(--school-color);
}

.exam-table.kompi thead th[data-school-type] {
  box-shadow: inset 0 4px 0 var(--school-color);
}

.exam-table.kompi thead th[data-school-type] .col-main {
  color: var(--school-color);
}

.col-main {
  display: block;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.2;
}

.col-sub {
  display: block;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted);
}

.exam-table tbody {
  border-bottom: 1px solid var(--border);
}

.exam-table tbody:last-child {
  border-bottom: none;
}

/* Ein Prüfungstermin besteht aus der sichtbaren Tabellenzeile und der
   aufklappbaren Aufgabenzeile. Jede zweite dieser Gruppen erhält gemeinsam
   einen dezent helleren Hintergrund, damit die Termine leichter zu verfolgen
   sind, ohne die bestehenden Farben der Tabelle zu verändern. */
.exam-table tbody.download-term:nth-of-type(even) > tr > th,
.exam-table tbody.download-term:nth-of-type(even) > tr > td {
  background: var(--table-stripe);
}

.exam-table td,
.exam-table th.term {
  padding: 0.55rem 0.45rem;
  border-bottom: none;
  vertical-align: middle;
  text-align: center;
}

.exam-table th.term {
  text-align: left;
  padding-left: 1.1rem;
  white-space: nowrap;
}

.term .month {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.2;
}

.term .year {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}

.exam-table td.empty {
  color: var(--muted);
  font-weight: 700;
}

/* Eine Prüfung in der Zelle. Mehrere davon (Teil 1 / Teil 2, mehrere Kompis)
   stehen nebeneinander – deshalb inline-flex statt flex: der Tabellenaufbau
   bleibt unangetastet. */
.pair {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  margin: 0.1rem 0.12rem;
  vertical-align: middle;
  min-width: 4.4rem;
}

.exam-table.matura .pair {
  min-width: 4.8rem;
  margin-inline: 0.1rem;
  justify-content: center;
  text-align: center;
}

.exam-table.matura td.cell {
  vertical-align: middle;
  text-align: center;
}

.exam-table.matura .pair .files,
.exam-table.matura .document-links {
  justify-content: center;
}

.pair-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.2;
}

.pair .files {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.document-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
}

a.file {
  --current-button-bg: var(--file-button-bg);
  --current-button-hover-bg: var(--file-button-hover-bg);
  --current-button-pressed-bg: var(--file-button-pressed-bg);
  --current-button-text: var(--file-button-text);
  --current-button-border: var(--file-button-border);
  --current-button-hover-border: var(--file-button-hover-border);
  --current-button-pressed-border: var(--file-button-pressed-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.5rem;
  border-radius: 9px;
  border: 1.5px solid var(--current-button-border);
  background: var(--current-button-bg);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent),
    0 3px 8px color-mix(in srgb, var(--current-button-border) 18%, transparent);
  color: var(--current-button-text);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease;
}

a.file[data-file-kind="solution"] {
  --current-button-bg: var(--solution-button-bg);
  --current-button-hover-bg: var(--solution-button-hover-bg);
  --current-button-pressed-bg: var(--solution-button-pressed-bg);
  --current-button-text: var(--solution-button-text);
  --current-button-border: var(--solution-button-border);
  --current-button-hover-border: var(--solution-button-hover-border);
  --current-button-pressed-border: var(--solution-button-pressed-border);
}

.exam-table.kompi .pair[data-school-type="ahs"]:not(.hit) a.file {
  --current-button-bg: var(--school-color);
  --current-button-hover-bg: color-mix(in srgb, var(--school-color) 90%, var(--cream));
  --current-button-pressed-bg: color-mix(in srgb, var(--school-color) 85%, var(--cream));
  --current-button-text: var(--cream);
  --current-button-border: var(--school-color);
  --current-button-hover-border: var(--school-color);
  --current-button-pressed-border: var(--school-color);
  --file-button-focus: var(--school-color);
}

.exam-table.matura a.file {
  width: 100%;
  padding-inline: 0.55rem;
}

/* Die Downloadknöpfe verwenden immer die Farbe der jeweils nächsten
   Tabellenzeile. Dadurch wechseln Zeile und Knopf bei jedem Termin gemeinsam
   zwischen den beiden neutralen Flächenfarben. Rahmen kennzeichnen weiterhin
   Angabe, Lösung und Suchtreffer. */
.exam-table.matura tbody.download-term:nth-of-type(odd) a.file {
  --current-button-bg: var(--table-stripe);
  --current-button-hover-bg: var(--table-stripe);
  --current-button-pressed-bg: var(--table-stripe);
  --current-button-text: var(--text);
}

.exam-table.matura tbody.download-term:nth-of-type(even) a.file {
  --current-button-bg: var(--card);
  --current-button-hover-bg: var(--card);
  --current-button-pressed-bg: var(--card);
  --current-button-text: var(--text);
}

a.file:hover {
  border-color: var(--current-button-hover-border);
  background: var(--current-button-hover-bg);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent),
    0 6px 14px color-mix(in srgb, var(--current-button-border) 28%, transparent);
  transform: translateY(-2px);
}

a.file:active {
  border-color: var(--current-button-pressed-border);
  background: var(--current-button-pressed-bg);
  box-shadow: inset 0 2px 5px color-mix(in srgb, #000000 22%, transparent);
  transform: translateY(0);
}

a.file:focus-visible {
  outline: 3px solid var(--file-button-focus);
  outline-offset: 2px;
}

a.text-version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  color: var(--link);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

a.text-version:hover {
  border-color: var(--navy);
  color: var(--text);
}

a.text-version:focus-visible {
  outline: 3px solid var(--file-button-focus);
  outline-offset: 2px;
}

/* Wie in der App: Prüfungen, in denen der Suchbegriff als Aufgabe vorkommt,
   werden mit dem warmen Akzentton hervorgehoben. */
.pair.hit a.file[data-file-kind="task"] {
  --current-button-bg: var(--match-button-bg);
  --current-button-hover-bg: var(--match-button-hover-bg);
  --current-button-pressed-bg: var(--match-button-pressed-bg);
  --current-button-text: var(--match-button-text);
  --current-button-border: var(--match-button-border);
  --current-button-hover-border: var(--match-button-hover-border);
  --current-button-pressed-border: var(--match-button-pressed-border);
}

.pair.hit a.text-version {
  border-color: var(--match-button-border);
}

.pair.hit .pair-label {
  color: var(--text);
}

.term-tasks td {
  padding: 0 1.1rem 0.7rem;
  text-align: left;
}

.examples-groups {
  display: grid;
  gap: 0.9rem 1.4rem;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(17rem, 100%), 1fr)
  );
  margin-top: 0.6rem;
}

.examples-group {
  min-width: 0;
}

.group-title {
  margin: 0 0 0.3rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
}

.exam-table.matura .examples-group[data-school-type] .group-title {
  padding-left: 0.5rem;
  border-left: 4px solid var(--school-color);
  color: var(--school-color);
}

.exam-table.kompi .examples-group[data-school-type] .group-title {
  padding-left: 0.5rem;
  border-left: 4px solid var(--school-color);
  color: var(--school-color);
}

.consolidated-group-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  text-align: center;
}

.consolidated-group-school-types {
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.consolidated-group-school-types .school-type-badge {
  min-height: 1.35rem;
  padding: 0.12rem 0.42rem;
  font-size: 0.62rem;
}

/* Suchtreffer werden als eigene, konsolidierte Gruppen erzeugt. Dabei soll
   nicht nur ihre Überschrift, sondern auch die eigentliche Ausgabe mittig
   stehen. Die normalen, eingeklappten Aufgabenlisten bleiben linksbündig. */
.exam-table.matura .consolidated-example-group {
  grid-column: 1 / -1;
  justify-self: center;
  width: clamp(14rem, 20%, 20rem);
  max-width: 100%;
  text-align: center;
}

.exam-table.kompi .consolidated-example-group {
  grid-column: 1 / -1;
  justify-self: center;
  width: clamp(14rem, 20%, 20rem);
  max-width: 100%;
  text-align: center;
}

.exam-table.kompi .examples.has-consolidated-results > summary {
  text-align: center;
}

.exam-table.kompi
  .examples.has-consolidated-results
  .examples-groups {
  grid-template-columns: minmax(0, 1fr);
}

.exam-table.kompi
  .examples.has-multiple-consolidated-results
  .examples-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.exam-table.kompi
  .examples.has-multiple-consolidated-results
  .consolidated-example-group {
  flex: 0 1 clamp(14rem, 20%, 20rem);
  grid-column: auto;
  width: clamp(14rem, 20%, 20rem);
}

.exam-table.kompi .consolidated-example-group .example {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  margin-inline: auto;
  text-align: center;
}

.exam-table.kompi .consolidated-example-group .example-copy {
  flex: none;
  align-items: center;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.exam-table.matura .examples.has-consolidated-results > summary {
  text-align: center;
}

.exam-table.matura
  .examples.has-consolidated-results
  .examples-groups {
  grid-template-columns: minmax(0, 1fr);
}

/* Ein einzelner Treffer behält die schmale, zentrierte Darstellung oben.
   Mehrere Treffer desselben Jahres stehen dagegen in kompakten Spalten
   nebeneinander und brechen erst um, wenn der Platz dafür nicht mehr reicht. */
.exam-table.matura
  .examples.has-multiple-consolidated-results
  .examples-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.exam-table.matura
  .examples.has-multiple-consolidated-results
  .consolidated-example-group {
  flex: 0 1 clamp(14rem, 20%, 20rem);
  grid-column: auto;
  width: clamp(14rem, 20%, 20rem);
}

.exam-table.matura .consolidated-example-group .example {
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  margin-inline: auto;
  text-align: center;
}

.exam-table.matura .consolidated-example-group .example-copy {
  flex: none;
  align-items: center;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.exam-table.matura .consolidated-example-group .match-snippet {
  margin-inline: auto;
  text-align: center;
}

/* Die Aufgabentitel stehen immer im HTML – eingeklappt, damit die Seite nicht
   von mehreren tausend Zeilen erschlagen wird, aber für Suchmaschinen und die
   Seitensuche des Browsers trotzdem vorhanden. */
.examples {
  margin-top: 0.2rem;
}

.examples summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--link);
}

.examples summary:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 6px;
}

.examples ul {
  list-style: none;
  margin: 0.25rem 0 0.2rem;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.examples li {
  margin: 0;
}

/* Ein Klick auf die Aufgabe schlägt das PDF an ihrer Seite auf. */
.example {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  width: 100%;
  padding: 0.15rem 0.35rem;
  margin-left: -0.35rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.example-copy {
  display: flex;
  flex: 1;
  max-width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}

.example-copy .t,
.match-snippet {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.match-snippet {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.example:hover {
  background: var(--soft-blue);
}

.example:hover .t {
  text-decoration: underline;
}

.examples .num {
  flex: none;
  min-width: 1.7rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: var(--soft-blue);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text);
}

.empty-hint {
  color: var(--muted);
  font-weight: 700;
}

/* ---------- PDF-Vorschau ---------- */

.pdf-viewer {
  width: min(80rem, 96vw);
  height: 94vh;
  height: 94dvh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pdf-viewer[open] {
  display: flex;
  flex-direction: column;
}

.pdf-viewer::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.pdf-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--soft-blue);
}

.pdf-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-action {
  flex: none;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.pdf-action:hover {
  border-color: var(--navy);
}

.pdf-videos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.pdf-video-label {
  margin-right: 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.pdf-video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.7rem;
  border-radius: 10px;
  background: #ff0033;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 900;
  text-decoration: none;
}

.pdf-video-link:hover {
  background: #d9002b;
}

.pdf-video-status {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Das PDF selbst. Ohne Rahmen, damit der Betrachter des Browsers wirkt, als
   gehöre er zur Seite. */
.pdf-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--cream-deep);
}

@media (max-width: 620px) {
  .pdf-viewer {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: 0;
  }

  .pdf-head {
    gap: 0.45rem;
    padding-inline: 0.55rem;
  }

  .pdf-title {
    font-size: 0.8rem;
  }

  .pdf-action {
    padding-inline: 0.55rem;
    font-size: 0.76rem;
  }

  .pdf-videos {
    padding-inline: 0.55rem;
  }
}

/*
  Muss als Autorenregel dastehen: Eigene display-Angaben (etwa `.examples li`
  oder `.pair`) schlagen sonst die [hidden]-Regel des Browsers, und die Suche
  würde nichts ausblenden.
*/
[hidden] {
  display: none !important;
}

/* ---------- Ausgelesene Prüfungstexte ---------- */

.document-transcript {
  max-width: 72rem;
  padding-bottom: 3rem;
}

.document-transcript > .crumbs {
  margin-top: 1.25rem;
}

.document-hero {
  padding: clamp(1.5rem, 4vw, 3rem) 0 1.25rem;
}

.document-hero h1 {
  max-width: 58rem;
  margin: 0.55rem 0 0.75rem;
}

.document-hero .lead {
  max-width: 52rem;
}

.document-note {
  margin: 0.5rem 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 5px solid var(--amber);
  border-radius: 12px;
  background: var(--card);
  color: var(--muted);
  line-height: 1.55;
}

.document-stats {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.document-page {
  margin: 0 0 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  scroll-margin-top: 1rem;
}

.document-page__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--soft-blue);
}

.document-page__head h2 {
  margin: 0;
  font-size: 1rem;
}

.document-page__head a {
  flex: none;
  font-size: 0.78rem;
  font-weight: 800;
}

.document-page__text {
  padding: 1rem;
}

.document-page__text p {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.98rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.document-text-empty {
  color: var(--muted);
  font-family: inherit !important;
  font-style: italic;
}

@media (max-width: 620px) {
  .document-page__head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .exam-table {
    font-size: 0.9rem;
  }

  .term-tasks .examples {
    width: min(100%, calc(100vw - 4.7rem));
  }

  .examples-groups {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.file {
    transition: none;
  }

  a.file:hover,
  a.file:active {
    transform: none;
  }
}

/* ---------- Mathematik-Aufgabenpool ---------- */

.task-pool-library {
  padding: 0 0 1.5rem;
}

.task-pool-school-filter {
  margin-top: 0.9rem;
}

.pool-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.pool-result {
  min-width: 0;
  margin: 0;
}

.pool-result__button {
  display: flex;
  width: 100%;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease,
    box-shadow 0.15s ease;
}

.pool-result__button:hover {
  border-color: color-mix(in srgb, var(--amber) 72%, var(--border));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.pool-result__button:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.pool-result__kind {
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pool-result__school-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.42rem;
}

.pool-result__school-types .school-type-badge {
  min-height: 1.4rem;
  padding: 0.12rem 0.45rem;
  font-size: 0.64rem;
}

.pool-result__task-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.42rem;
}

.task-type-badge {
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  padding: 0.14rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--muted) 38%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 9%, var(--card));
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.2;
}

.pool-result__title {
  display: block;
  margin-top: 0.28rem;
  font-size: 1.02rem;
  line-height: 1.32;
}

.pool-result__excerpt {
  display: -webkit-box;
  margin-top: 0.45rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.pool-result__meta {
  display: block;
  margin-top: auto;
  padding-top: 0.7rem;
  color: var(--link);
  font-size: 0.78rem;
  font-weight: 800;
}

.pool-viewer-status {
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.pool-solution-action {
  border-color: color-mix(in srgb, var(--amber) 62%, var(--border));
  background: color-mix(in srgb, var(--amber) 12%, var(--card));
}

.document-chunk-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
}

.document-chunk-nav > :first-child {
  justify-self: start;
}

.document-chunk-nav > :last-child {
  justify-self: end;
}

.document-chunk-nav a {
  display: inline-flex;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.document-chunk-nav a:hover {
  border-color: var(--amber);
}

.document-task-meta {
  margin: 0;
  padding: 0.65rem 1rem 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.document-solution {
  margin: 0 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soft-blue) 55%, var(--card));
  overflow: hidden;
}

.document-solution > summary {
  padding: 0.75rem 0.85rem;
  color: var(--link);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 900;
}

.document-solution > summary:hover {
  background: color-mix(in srgb, var(--amber) 8%, transparent);
}

.document-solution[open] > summary {
  border-bottom: 1px solid var(--border);
}

.document-solution__head {
  background: var(--card);
}

.document-solution__head h3 {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  .pool-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .task-pool-page .pdf-head {
    flex-wrap: wrap;
  }

  .task-pool-page .pdf-title {
    flex-basis: 100%;
  }

  .task-pool-page .pdf-action {
    flex: 1 1 auto;
    text-align: center;
  }

  .pool-viewer-status {
    padding-inline: 0.55rem;
  }

  .document-chunk-nav {
    grid-template-columns: 1fr;
  }

  .document-chunk-nav > * {
    justify-self: stretch !important;
  }

  .document-chunk-nav > span:empty {
    display: none;
  }

  .document-task-meta {
    padding-inline: 0.85rem;
  }

  .document-solution {
    margin-inline: 0.85rem;
  }

  .document-page__head a {
    flex: initial;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pool-result__button {
    transition: none;
  }
}

/* ---------- Videos ---------- */

.video-library {
  padding: 0 0 3rem;
}

.video-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.video-intro h2 {
  margin-bottom: 0.45rem;
}

.video-intro p {
  max-width: 48rem;
  margin: 0;
  color: var(--muted);
}

.video-search-box {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.video-search-box > label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.video-search-box > input[type="search"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  background: var(--cream);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.video-search-box > input[type="search"]:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.video-search-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.video-search-meta p {
  margin: 0;
}

.video-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.video-result {
  margin: 0;
}

.video-result__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 100%;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.video-result__link:hover {
  border-color: #ff3b30;
  transform: translateY(-2px);
}

.video-result__play {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 1.85rem;
  padding-left: 0.12rem;
  border-radius: 0.55rem;
  background: #ff0033;
  color: #ffffff;
  font-size: 0.85rem;
}

.video-result__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

.video-result__copy strong {
  line-height: 1.3;
}

.video-result__date,
.video-result__action {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.video-result__action {
  color: var(--link);
  white-space: nowrap;
}

.video-empty {
  grid-column: 1 / -1;
  padding: 1.2rem;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.video-idea {
  margin-top: 1rem;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.video-idea[hidden] {
  display: none;
}

.video-idea__intro {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.15rem;
}

.video-idea__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  font-size: 1.35rem;
}

.video-idea h3 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
}

.video-idea p {
  margin: 0;
  color: var(--muted);
}

.video-idea form > label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.video-idea textarea {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  resize: vertical;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 13px;
  background: var(--cream);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}

.video-idea textarea:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.video-idea textarea[aria-invalid="true"] {
  border-color: #c62828;
}

.video-idea__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.video-idea__actions {
  display: flex;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-top: 0.85rem;
}

.video-idea__actions [role="status"] {
  font-size: 0.9rem;
  font-weight: 700;
}

.video-idea__actions [data-state="success"] {
  color: #2e7d32;
}

.video-idea__actions [data-state="error"] {
  color: #c62828;
}

@media (max-width: 760px) {
  .video-intro {
    align-items: stretch;
    flex-direction: column;
  }

  .video-intro .btn {
    align-self: flex-start;
  }

  .video-results {
    grid-template-columns: 1fr;
  }

  .video-result__link {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .video-result__action {
    display: none;
  }

  .video-idea__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .video-idea__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-result__link {
    transition: none;
  }
}

/* ---------- Formelheft ---------- */

.formula-search {
  margin: 1rem 0 1.2rem;
}

.formula-search > label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  font-weight: 800;
}

.formula-search-field {
  position: relative;
}

.formula-search-field input {
  width: 100%;
  padding: 0.9rem 3.2rem 0.9rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.formula-search-field input:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-color: transparent;
}

.formula-search-clear {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  width: 2.2rem;
  height: 2.2rem;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--soft-blue);
  color: var(--text);
  font: inherit;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.formula-book-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 1rem 0 1.7rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--soft-blue), var(--card));
  box-shadow: var(--shadow);
}

.formula-book-icon {
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--navy);
  color: var(--on-navy);
  font-family: Georgia, serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 700;
}

.formula-book-copy {
  flex: 1;
  min-width: 12rem;
}

.formula-book-copy h2 {
  margin: 0;
  font-size: 1.45rem;
}

.formula-book-copy p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}

.formula-download {
  flex: none;
  font-size: 0.92rem;
}

.formula-preview {
  position: relative;
  left: 50%;
  width: min(80rem, 100vw - 2.5rem);
  margin: 1.5rem 0 2.5rem;
  transform: translateX(-50%);
}

.formula-section-head h2,
.formula-results > h2 {
  margin-bottom: 0.15rem;
  font-size: 1.45rem;
}

.formula-section-head p {
  margin: 0 0 0.8rem;
  color: var(--muted);
}

.formula-pdf-frame {
  width: 100%;
  height: 110vh;
  height: 110dvh;
  min-height: 52rem;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--cream-deep);
  box-shadow: var(--shadow);
}

.formula-results {
  margin: 1.5rem 0 2.5rem;
}

.formula-result-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.8rem;
}

.formula-result {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.formula-result p {
  margin: 0.4rem 0 0;
}

.formula-result h3 {
  margin: 0.1rem 0 0;
  font-size: 1.35rem;
}

.formula-result h4 {
  margin: 1rem 0 0.2rem;
  font-size: 0.95rem;
}

.formula-section > h4,
.formula-example > h4,
.formula-matura-tip > h4,
.formula-pitfalls > h4 {
  margin-top: 0;
}

.formula-section {
  margin-top: 1rem;
}

.formula-section > p {
  margin-top: 0.3rem;
}

.formula-result .formula-meta {
  margin: 0;
  color: var(--link);
  font-size: 0.8rem;
  font-weight: 800;
}

.formula-expression {
  margin-top: 0.35rem;
  padding: 0.7rem 0.85rem;
  overflow-wrap: anywhere;
  border-radius: 10px;
  background: var(--soft-blue);
  font-family: 'Cambria Math', Cambria, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.formula-variables {
  margin: 0.35rem 0 0;
  padding: 0.25rem 0.85rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--soft-blue) 72%, transparent);
}

.formula-variables > div {
  display: grid;
  grid-template-columns: minmax(4.5rem, max-content) 1fr;
  gap: 0.8rem;
  padding: 0.5rem 0;
}

.formula-variables > div + div {
  border-top: 1px solid var(--border);
}

.formula-variables dt {
  overflow-wrap: anywhere;
  font-family: 'Cambria Math', Cambria, Georgia, serif;
  font-weight: 800;
}

.formula-variables dd {
  min-width: 0;
  margin: 0;
}

.formula-variable-unit {
  color: var(--muted);
}

.formula-steps {
  margin: 0.35rem 0 0;
  padding-left: 1.65rem;
}

.formula-steps li {
  padding-left: 0.2rem;
}

.formula-steps li + li {
  margin-top: 0.4rem;
}

.formula-steps li::marker {
  color: var(--link);
  font-weight: 800;
}

.formula-example {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: var(--soft-blue);
}

.formula-example p {
  margin-top: 0.15rem;
}

.formula-matura-tip,
.formula-pitfalls {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
}

.formula-matura-tip {
  border-left: 4px solid var(--link);
  background: color-mix(in srgb, var(--soft-blue) 72%, transparent);
}

.formula-pitfalls {
  border-left: 4px solid #c45a5a;
  background: color-mix(in srgb, #c45a5a 12%, var(--card));
}

.formula-matura-tip p {
  margin-top: 0.15rem;
}

.formula-pitfalls ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
}

.formula-pitfalls li + li {
  margin-top: 0.3rem;
}

.formula-page-link {
  display: inline-flex;
  margin-top: 1rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--soft-blue);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.formula-page-link:hover {
  border-color: var(--navy);
}

.formula-visual {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soft-blue) 72%, transparent);
}

.formula-visual figcaption {
  font-size: 0.85rem;
}

.formula-visual svg {
  width: min(100%, 28rem);
  height: auto;
  display: block;
  margin: 0.45rem auto 0;
  overflow: visible;
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.formula-visual svg .axis,
.formula-visual svg .guide {
  stroke: var(--muted);
  stroke-width: 1.5;
}

.formula-visual svg .guide {
  stroke-dasharray: 6 5;
}

.formula-visual svg .geometry-shape {
  fill: color-mix(in srgb, var(--navy) 12%, transparent);
}

.formula-visual svg .angle-arc,
.formula-visual svg .right-angle {
  stroke: var(--link);
  stroke-width: 2.2;
}

.formula-visual svg text {
  fill: var(--text);
  stroke: none;
  font: 700 15px 'Nunito', sans-serif;
}

.formula-visual svg .vertex-labels text,
.formula-visual svg .side-labels text,
.formula-visual svg .angle-label {
  text-anchor: middle;
  dominant-baseline: middle;
}

.formula-visual svg .vertex-labels text {
  font-weight: 900;
}

.formula-visual svg .side-labels text {
  font-size: 16px;
  font-style: italic;
  font-weight: 900;
}

.formula-visual svg .angle-label {
  fill: var(--link);
  font-size: 16px;
  font-style: italic;
  font-weight: 900;
}

.formula-visual svg .points circle {
  fill: var(--amber);
  stroke: var(--text);
  stroke-width: 1.5;
}

.formula-visual p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.formula-more {
  color: var(--muted);
  font-weight: 700;
}

.formula-empty {
  text-align: center;
}

.formula-empty h2 {
  margin-top: 0;
}

@media (max-width: 720px) {
  .formula-book-hero {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 1.1rem;
  }

  .formula-download {
    width: 100%;
  }

  .formula-pdf-frame {
    height: 100vh;
    height: 100dvh;
    min-height: 36rem;
    border-radius: 14px;
  }

  .formula-result {
    padding: 1.05rem;
  }

  .formula-variables > div {
    grid-template-columns: minmax(3.6rem, max-content) 1fr;
    gap: 0.6rem;
  }
}