/* ==========================================================================
   Excel-Kurs – Startseite
   Farben und Abstände sind ganz oben als Variablen definiert. Wer die Optik
   anpassen will, ändert am besten nur diese Werte.
   ========================================================================== */

:root {
  --accent:        #217346;  /* Excel-Grün */
  --accent-dark:   #1a5c38;
  --accent-soft:   #e8f3ed;

  --bg:            #f4f6f5;
  --surface:       #ffffff;
  --surface-alt:   #fafbfa;
  --text:          #1f2421;
  --muted:         #66706a;
  --border:        #dfe4e1;

  /* Hinweiskasten – angelehnt an den gelben Excel-Balken */
  --warn-bg:       #fdf8e3;
  --warn-border:   #e6d79a;
  --warn-accent:   #d9a406;

  /* Breite der Fortschritts-Checkbox samt Abstand zum Titel */
  --check-indent:  1.75rem;

  --radius:        10px;
  --radius-sm:     7px;
  --shadow:        0 1px 2px rgba(31, 36, 33, .05),
                   0 6px 20px rgba(31, 36, 33, .06);

  --container:     62rem;
}

/* ------------------------------------------------------------ Dunkel --- */

/* Drei Zustände, gesteuert von theme.js:
     kein data-theme    → die Einstellung des Betriebssystems gilt
     data-theme="dark"  → dunkel, egal was das System sagt
     data-theme="light" → hell, egal was das System sagt

   Beide Blöcke stehen in @media screen. Auf Papier gelten damit immer die
   hellen Werte – sonst würde man helle Schrift auf weisses Papier drucken. */

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:      #3ea06a;
    --accent-dark: #55b881;
    --accent-soft: #1b2a22;

    --bg:          #141715;
    --surface:     #1c201e;
    --surface-alt: #212624;
    --text:        #e8ebe9;
    --muted:       #9aa5a0;
    --border:      #2e3532;

    --warn-bg:     #2a2415;
    --warn-border: #4f4526;
    --warn-accent: #d9a406;

    --shadow:      0 1px 2px rgba(0, 0, 0, .3),
                   0 6px 20px rgba(0, 0, 0, .25);
  }
}

/* Dieselben Werte nochmals für die bewusste Wahl "dunkel". Wer die Farben
   ändert, muss beide Blöcke anpassen. */
@media screen {
  :root[data-theme="dark"] {
    --accent:      #3ea06a;
    --accent-dark: #55b881;
    --accent-soft: #1b2a22;

    --bg:          #141715;
    --surface:     #1c201e;
    --surface-alt: #212624;
    --text:        #e8ebe9;
    --muted:       #9aa5a0;
    --border:      #2e3532;

    --warn-bg:     #2a2415;
    --warn-border: #4f4526;
    --warn-accent: #d9a406;

    --shadow:      0 1px 2px rgba(0, 0, 0, .3),
                   0 6px 20px rgba(0, 0, 0, .25);
  }
}

/* --------------------------------------------------------- Grundgerüst --- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ------------------------------------------------------------- Header --- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 2.75rem 0 2.25rem;
}

/* Titel links, der Hell/Dunkel-Knopf rechts daneben. Auf schmalen Screens
   rutscht der Knopf unter den Titel. */
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.site-header .header-text { min-width: 0; }

.site-header h1 {
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.site-header h1::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: .85rem;
  border-radius: 2px;
  background: var(--accent);
}

.lead {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* ------------------------------------------------- Hinweis (Warnung) --- */

main { padding: 2.25rem 0 3rem; }

.notice {
  margin: 0 0 2rem;
  padding: 1.15rem 1.35rem 1.35rem;
  border: 1px solid var(--warn-border);
  border-left: 5px solid var(--warn-accent);
  border-radius: var(--radius);
  background: var(--warn-bg);
}

.notice-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}

/* Kein max-width: der Satz soll die volle Kastenbreite nutzen und erst am
   Rand umbrechen, nicht an einer festen Zeilenlänge. */
.notice p { margin: 0; }

/* Der Screenshot ist 993 px breit. Herunterskaliert auf Handybreite wäre der
   Text darin unlesbar, darum bekommt er eine Mindestbreite und darf in seinem
   eigenen Kasten horizontal scrollen – die Seite selbst scrollt nicht. */
.notice-figure {
  margin: 1rem 0 0;
  overflow-x: auto;
  border-radius: var(--radius-sm);
}

.notice-figure img {
  display: block;
  width: 100%;
  min-width: 32rem;
  height: auto;
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------- Lesezeichen --- */

/* Der Balken wird von lesezeichen.js zuoberst in <main> gesetzt – und nur
   dann, wenn wirklich ein Lesezeichen gesetzt ist. Ohne Lesezeichen sieht die
   Seite aus wie bisher. */
.weiter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin: 0 0 2rem;
  padding: .9rem 1.35rem;
  border: 1px solid var(--accent);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

/* Das Ziel des Wiedereinstiegs: ein Klick, ohne suchen zu müssen. Darum ist
   der ganze Text ein einziger grosser Link. */
.weiter-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  color: var(--accent-dark);
  text-decoration: none;
}

.weiter-link svg {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
}

.weiter-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.weiter-label {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.weiter-stelle {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.weiter-link:hover .weiter-stelle { text-decoration: underline; }

.weiter-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Klein und zurückhaltend: das Entfernen ist der seltene Fall. */
.weiter-weg {
  flex: none;
  margin: 0;
  padding: .35rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}

.weiter-weg:hover {
  border-color: var(--accent);
  color: var(--text);
}

.weiter-weg:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Dieselbe Marke nochmals dort, wo das Unterkapitel im Kurs steht – damit man
   sieht, wie weit man insgesamt gekommen ist, nicht nur wo es weitergeht. */
/* Eine Klasse mehr als nötig: sonst gewinnt die weiter unten stehende Regel
   für die abwechselnd eingefärbten Zeilen (.subchapter:nth-child(even)). */
.subchapters .subchapter.ist-lesezeichen { background: var(--accent-soft); }

.lz-marke {
  display: inline-flex;
  align-items: center;
  margin-right: .4rem;
  vertical-align: -.15em;
  color: var(--accent);
}

.lz-marke svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* Nur für Vorleseprogramme: die Marke selbst ist ein Bild ohne Text. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Kapitel --- */

.chapter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.chapter + .chapter { margin-top: 1.75rem; }

.chapter-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem 1rem;
  margin: 0;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  background: var(--accent-soft);
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

/* Zähler rechts in der Kapitelzeile, von fortschritt.js gefüllt */
.chapter-progress {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.chapter-progress.is-complete { color: var(--accent); }

.chapter-progress.is-complete::before {
  content: "✓ ";
}

/* -------------------------------------------------------- Unterkapitel --- */

.subchapters {
  margin: 0;
  padding: 0;
  list-style: none;
}

.subchapter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.25rem;
  padding: .8rem 1.35rem;
}

.subchapter:nth-child(even) { background: var(--surface-alt); }

.subchapter + .subchapter { border-top: 1px solid var(--border); }

.subchapter-title {
  flex: 1 1 14rem;
  min-width: 0;
  font-weight: 600;
}

/* Kleiner Zusatz unter einem Titel, z.B. "(nicht Probenstoff)": eigene Zeile,
   nicht fett, gedämpft. Ein <p> geht hier nicht, weil der Titel ein <span> ist. */
.subchapter-note {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: var(--muted);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Zweite, kleinere Zeile für Zusatzdateien (Lösung, Demo). flex-basis: 100%
   zwingt sie in einer flex-wrap-Zeile auf eine eigene Zeile – ohne dass das
   Grundlayout der Zeile angetastet werden muss. */
.links-extra {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .2rem 1rem;
}

.link-extra {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--muted);
  font-size: .85rem;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}

.link-extra:hover { color: var(--text); }

.link-extra .icon { font-size: .9em; }

.link-extra:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------------------------------------------------------- Abhaken (JS) --- */

/* Die Checkbox setzt fortschritt.js als erstes Kind der Zeile ein und hängt
   der Zeile die Klasse .has-check an. Aus der Flex-Zeile wird dann ein Raster
   mit drei Spalten: Checkbox – Titel – Buttons. Als Raster bleibt der Titel
   auch dann in seiner Spalte, wenn die Zeile ein Akkordeon ist. */
.subchapter.has-check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem 1.25rem;
  padding: .8rem 1.35rem;
}

/* Die Akkordeon-Variante weiter unten setzt selbst zwei Spalten (1fr auto) und
   ist mit drei Klassen spezifischer als die Regel oben. Damit die Checkbox
   nicht die Titelspalte besetzt, wird das Raster hier nochmals gesetzt – mit
   einer Klasse mehr, damit diese Regel gewinnt. */
.subchapter.is-accordion.has-links.has-check {
  grid-template-columns: auto 1fr auto;
}

.subchapter.is-accordion.has-check { align-items: start; }

/* Beim Akkordeon sitzt der Titel im <summary>, also eine Zeilenhöhe tiefer als
   die Rasterkante – die Checkbox wird darum leicht nach unten geschoben. */
.subchapter.is-accordion.has-check > .done-box { margin-top: .3rem; }

/* Die Spaltenzuweisung der Akkordeon-Variante (Text 1, Buttons 2) gilt nur
   ohne Checkbox – mit Checkbox sollen die Elemente automatisch einrücken. */
.subchapter.has-check > .accordion,
.subchapter.has-check > .links { grid-column: auto; }

.subchapter.has-check > .links-extra { grid-column: 1 / -1; }

.done-box {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.done-box:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Erledigt: nur der Titel wird zurückgenommen. Die Buttons bleiben normal
   sichtbar, damit eine Aufgabe jederzeit nochmals geöffnet werden kann. */
.subchapter.is-done .subchapter-title {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
}

/* Zeilen ohne Checkbox (reine Hinweise) um die Breite einer Checkbox samt
   Abstand einrücken, damit alle Titel auf derselben Kante beginnen. Gilt nur,
   wenn fortschritt.js gelaufen ist – sonst gäbe es nichts, wozu man einrückt. */
.js-fortschritt .subchapter.is-accordion:not(.has-check) .accordion-summary {
  padding-left: calc(1.35rem + var(--check-indent));
}

.js-fortschritt .subchapter.is-accordion:not(.has-check) .accordion-body {
  padding-left: calc(2.5rem + var(--check-indent));
}

/* --------------------------------------------------- Hell/Dunkel-Knopf --- */

/* Von theme.js erzeugt. Dieselben Regeln stehen auch in mystyle.css, damit
   der Knopf auf den Aufgabenseiten gleich aussieht. */
.theme-toggle {
  flex: none;
  margin: 0;
  padding: .35rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--text);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.reset-progress {
  margin-top: .9rem;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}

.reset-progress:hover {
  border-color: var(--muted);
  color: var(--text);
}

.reset-progress:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- Akkordeon --- */

/* Manche Unterkapitel sind kein Download, sondern ein aufklappbarer Hinweis.
   Umgesetzt mit <details>/<summary>: reines HTML, kein JavaScript, und von
   Haus aus mit Tastatur und Screenreader bedienbar. */
.subchapter.is-accordion {
  display: block;
  padding: 0;
}

.accordion-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.35rem;
  cursor: pointer;
  list-style: none;          /* Standard-Dreieck weg (Firefox) */
}

.accordion-summary::-webkit-details-marker { display: none; }

/* Eigener Chevron aus zwei Rändern: zeigt nach rechts, wenn zu –
   und nach unten, wenn offen. */
.accordion-summary::before {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}

.accordion[open] .accordion-summary::before { transform: rotate(45deg); }

/* Kein Hintergrund beim Hover: die Variante mit Buttons kann ihn nicht über die
   ganze Zeile ziehen (dort ist das <summary> nur die linke Grid-Spalte), darum
   überall dieselbe Unterstreichung – zusammen mit dem Chevron Hinweis genug,
   dass die Zeile aufklappbar ist. */
.accordion-summary:hover .subchapter-title {
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

.accordion-summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.accordion-body { padding: .1rem 1.35rem 1.15rem 2.5rem; }

.accordion-body p { margin: 0 0 .6rem; }

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

/* Variante mit Buttons: die Zeile wird zum Grid mit zwei Spalten. Links das
   <details> (Titel zum Aufklappen + Text), rechts die Buttons. Weil die Buttons
   eine eigene Grid-Zelle sind, liegen sie ausserhalb des <summary> und bleiben
   normal klickbar – und der aufgeklappte Text läuft nie unter sie. */
.subchapter.is-accordion.has-links {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: .6rem 1.25rem;
  padding: .8rem 1.35rem;
}

.has-links > .accordion { grid-column: 1; min-width: 0; }

.has-links > .links { grid-column: 2; }

/* Das Zeilen-Padding kommt hier vom <li>, nicht vom summary */
.has-links .accordion-summary { padding: 0; }

.has-links .accordion-summary:focus-visible { outline-offset: 2px; }

.has-links .accordion-body {
  padding: .6rem 0 .2rem 1rem;
  max-width: 62ch;
}

.hint-list {
  margin: 0;
  padding-left: 1.3rem;
}

.hint-list > li + li { margin-top: 1.1rem; }

.hint-list p { margin: 0; }

.hint-example { margin-top: .55rem; }

.hint-table {
  margin: .65rem 0 0;
  border-collapse: collapse;
  font-size: .95rem;
}

.hint-table th,
.hint-table td {
  padding: .28rem 1.5rem .28rem 0;
  text-align: left;
}

.hint-table th {
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

code {
  padding: .1rem .35rem;
  border-radius: 4px;
  background: var(--accent-soft);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .92em;
}

/* ------------------------------------------------------------ Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn .icon { font-size: .95em; }

/* Aufgabe: gefüllt */
.btn-task {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-task:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Excel-Datei: Outline – unterscheidbar auch ohne Farbwahrnehmung */
.btn-file {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn-file:hover {
  background: var(--accent-soft);
}

/* Lösung als Button – nur dort, wo es keine Aufgabenseite gibt und die Lösung
   damit eine der beiden Hauptressourcen ist (Zusatzaufgaben). Neutral-grau und
   mit gestricheltem Rand, damit nicht zuerst sie angeklickt wird.
   In Zeilen, die schon Aufgabe + Excel-Datei haben, steht die Lösung
   stattdessen klein darunter als .link-extra. */
.btn-solution {
  background: transparent;
  border-color: var(--border);
  border-style: dashed;
  color: var(--muted);
  font-weight: 500;
}

.btn-solution:hover {
  border-color: var(--muted);
  color: var(--text);
}

.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Noch nicht verlinkt (href="#") – dezent gedämpft, damit sofort sichtbar
   ist, was fehlt. Greift automatisch nicht mehr, sobald die echte URL drin
   steht. */
.btn[href="#"],
.link-extra[href="#"] {
  opacity: .4;
  filter: grayscale(1);
}

/* ------------------------------------------------------------- Footer --- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 2.5rem;
  color: var(--muted);
  font-size: .9rem;
}

.site-footer p { margin: 0; }

.site-footer .footer-hinweis {
  margin-top: .4rem;
  max-width: 34rem;
  font-size: .85rem;
}

/* ------------------------------------------------------- Schmale Screens --- */

@media (max-width: 40rem) {
  body { font-size: 16px; }

  .subchapter {
    flex-direction: column;
    align-items: flex-start;
  }

  .subchapter-title { flex: none; }

  .links { width: 100%; }

  .btn { flex: 1 1 auto; justify-content: center; }

  /* Auf dem Handy ist alles linksbündig gestapelt – die Zusatzzeile auch */
  .links-extra {
    justify-content: flex-start;
    margin-top: .1rem;
  }

  /* In der gestapelten Spalte würde flex-basis: 100% die Höhe meinen, nicht die
     Breite – darum hier explizit auf voller Breite und ohne Wachstum. */
  .links-extra {
    flex: none;
    width: 100%;
  }

  /* Akkordeon mit Buttons: aus zwei Spalten wird eine, Buttons unter den Text */
  .subchapter.is-accordion.has-links { grid-template-columns: 1fr; }

  .has-links > .accordion,
  .has-links > .links { grid-column: 1; }

  /* Mit Checkbox bleiben Häkchen und Titel nebeneinander, die Buttons rutschen
     darunter über die ganze Breite. */
  .subchapter.has-check,
  .subchapter.is-accordion.has-links.has-check { grid-template-columns: auto 1fr; }

  .subchapter.has-check > .accordion { grid-column: auto; }

  .subchapter.has-check > .links { grid-column: 1 / -1; }

  /* Weniger Einzug, damit der Hinweistext nicht in eine Schlucht rutscht */
  .accordion-body { padding-left: 1.35rem; }

  .js-fortschritt .subchapter.is-accordion:not(.has-check) .accordion-body {
    padding-left: calc(1.35rem + var(--check-indent));
  }

  .hint-table th,
  .hint-table td { padding-right: 1rem; }
}

/* ---------------------------------------------------------------- Print --- */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }

  .notice { break-inside: avoid; }

  /* Aufklappbare Hinweise auf Papier immer ausgeklappt zeigen, ohne Chevron */
  .accordion-body { display: block !important; }
  .accordion-summary::before { display: none; }
  .is-accordion:not(.has-links) .accordion-summary { padding-left: 1.35rem; }
  code { background: none; }

  /* Auf Papier gibt es kein Scrollen – der Screenshot muss auf die Seite passen */
  .notice-figure img { min-width: 0; }

  .chapter {
    box-shadow: none;
    border-color: #999;
    break-inside: avoid;
  }

  .chapter-title { background: none; }

  .subchapter:nth-child(even) { background: none; }

  /* Der Wiedereinstieg-Balken ist ein Knopf zum Klicken – auf Papier nutzlos.
     Die Marke beim Unterkapitel bleibt, nur ohne farbigen Hintergrund. */
  .weiter { display: none; }

  .subchapters .subchapter.ist-lesezeichen { background: none; }

  .btn {
    background: none !important;
    border: none;
    color: #000;
    opacity: 1;
    filter: none;
    padding: 0;
    font-weight: 400;
  }

  .btn .icon { display: none; }

  /* URL ausschreiben, damit die Liste auf Papier brauchbar ist. Die hrefs sind
     relativ, deshalb die Domain hier ergänzen – und noch nicht verlinkte
     Platzhalter (href="#") auslassen. */
  .btn[href]:not([href="#"])::after,
  .link-extra[href]:not([href="#"])::after {
    content: " (excel.daho.ch/" attr(href) ")";
    font-size: .85em;
    word-break: break-all;
  }

  .link-extra { color: #000; }

  .theme-toggle { display: none; }

  /* Der Zurücksetzen-Knopf steht im Footer und fällt damit ohnehin weg;
     die Checkboxen bleiben – auf Papier eine Liste zum Ankreuzen von Hand. */
  .site-footer { display: none; }
}