/* ==========================================================================
   Excel-Kurs – Aufgabenseiten
   Dieselbe Formensprache wie die Startseite (style.css): gleiche Schrift,
   gleiche Rundungen, gleiche Rahmen- und Grautöne.

   Die Farbfamilien sind geblieben, nur aufeinander abgestimmt:

     violett   Aufgaben, Lösungen, Hints   (Arbeitsmaterial)
     rot       Hinweise, Achtung           (aufpassen)
     gelb      Mac                         (gilt nur für einen Teil der Klasse)
     blau      Videos, Formeln im Text     (Medien und Code)
     grün      Titel, Links, Zellbezüge    (Excel selbst)

   Wer die Optik ändern will, ändert am besten nur die Werte hier oben.
   ========================================================================== */

:root {
  /* Grün – wie auf der Startseite */
  --accent:        #217346;
  --accent-dark:   #1a5c38;
  --accent-soft:   #e8f3ed;

  /* Violett – Aufgaben und alles, was zur Arbeit gehört */
  --task:          #5b4bc4;
  --task-dark:     #453398;
  --task-soft:     #f2effc;   /* helleres Violett: Aufgabenbox   */
  --task-mid:      #e1d9f8;   /* dunkleres Violett: Hint          */
  --task-border:   #d3c9f2;

  /* Rot – Hinweise */
  --warn:          #a32b28;
  --warn-soft:     #fceeed;
  --warn-border:   #f0cfcd;

  /* Gelb – Mac */
  --mac:           #9a7508;
  --mac-soft:      #fdf6de;
  --mac-border:    #e6d79a;
  --mac-accent:    #d9a406;

  /* Blau – Videos und Code */
  --info:          #1a6ca3;
  --info-soft:     #ecf3f9;
  --info-border:   #c6dced;

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

  --ok-border:     #bfe3cd;

  --radius:        10px;
  --radius-sm:     7px;
}

/* ------------------------------------------------------------- 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.

   Im Dunkeln drehen sich zwei Rollen um: die Aufgabenbox ist der dunklere,
   der Hint der hellere Violettton – der Hint muss sich ja weiterhin aus der
   Aufgabenbox herausheben. */

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

    --task:        #9b8ae8;
    --task-dark:   #b3a5f0;
    --task-soft:   #201d33;
    --task-mid:    #2b2545;
    --task-border: #3b3560;

    --warn:        #f0908c;
    --warn-soft:   #2c1c1c;
    --warn-border: #4d2f2e;

    --mac:         #d8b45c;
    --mac-soft:    #2a2415;
    --mac-border:  #4f4526;
    --mac-accent:  #d9a406;

    --info:        #74b4e2;
    --info-soft:   #16242e;
    --info-border: #2d4657;

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

    --ok-border:   #2f4a3a;
  }
}

/* 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;

    --task:        #9b8ae8;
    --task-dark:   #b3a5f0;
    --task-soft:   #201d33;
    --task-mid:    #2b2545;
    --task-border: #3b3560;

    --warn:        #f0908c;
    --warn-soft:   #2c1c1c;
    --warn-border: #4d2f2e;

    --mac:         #d8b45c;
    --mac-soft:    #2a2415;
    --mac-border:  #4f4526;
    --mac-accent:  #d9a406;

    --info:        #74b4e2;
    --info-soft:   #16242e;
    --info-border: #2d4657;

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

    --ok-border:   #2f4a3a;
  }
}

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

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* Die Seiten haben kein Wrapper-Element, darum ist der <body> selbst das
   weisse Blatt: auf breiten Bildschirmen mittig und begrenzt, in einem schmalen
   Fenster neben Excel füllt er die ganze Breite. */
body {
  max-width: 58rem;
  margin: 0 auto;
  padding: 1.75rem 1.6rem 4rem;
  background: var(--surface);
  border-inline: 1px solid var(--border);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

p { margin: 0 0 .75rem; }

a { color: var(--accent-dark); text-underline-offset: 2px; }

a:hover { color: var(--accent); }

/* ------------------------------------------- Zurück zur Übersichtsseite --- */

/* Steht zuoberst auf jeder Aufgabenseite, direkt nach <body>:
   <p class="zurueck"><a href="index.html">…</a></p> */
/* Zurück-Link links, der Hell/Dunkel-Knopf rechts in derselben Zeile */
.zurueck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 0 1.4rem;
  font-size: .9rem;
}

.zurueck a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .85rem .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.zurueck a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

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

/* Hell/Dunkel-Knopf, von theme.js erzeugt. Dieselben Regeln stehen auch in
   style.css, damit er auf der Übersicht gleich aussieht. Die Klasse sticht
   die allgemeine button-Regel weiter unten aus. */
.theme-toggle {
  flex: none;
  margin: 0;
  padding: .3rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

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

/* ------------------------------------------------------- Überschriften --- */

h1 {
  margin: 0 0 1.25rem;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Derselbe grüne Strich wie unter dem Titel der Startseite */
h1::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: .75rem;
  border-radius: 2px;
  background: var(--accent);
}

/* Früher ein 5px dicker schwarzer Strich oben – jetzt eine feine Linie, die
   den Abschnitt trennt, ohne die Seite zu zerhacken. */
h2 {
  margin: 2.25rem 0 .85rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--accent-soft);
  font-size: 1.35rem;
  letter-spacing: -.01em;
}

h3 {
  margin: 1.6rem 0 .6rem;
  font-size: 1.12rem;
}

h4 {
  margin: 1.2rem 0 .5rem;
  font-size: 1rem;
}

/* In einer farbigen Box sitzt die Überschrift schon im Kasten – dort braucht
   sie weder Linie noch grossen Abstand nach oben. */
.aufgabe h2, .sol h2, .hint h2, .videos h2, .admin h2, .mac h2 {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 1.15rem;
}

/* -------------------------------------------------- Text-Auszeichnungen --- */

/* Zellbezüge wie B3 oder C4:D8 – grün, weil sie zu Excel gehören. Sie kommen
   sehr häufig vor, darum bewusst zurückhaltend. */
.cell {
  padding: .05em .3em;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .95em;
  font-weight: 600;
}

/* Formeln und Funktionsnamen */
.code {
  padding: .05em .3em;
  border-radius: 4px;
  background: var(--info-soft);
  color: var(--info);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .95em;
  font-weight: 600;
}

.formel {
  padding: .05em .3em;
  border-radius: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .95em;
  font-weight: 600;
}

/* Tastenkombinationen sehen aus wie eine Taste */
.key {
  padding: .1em .45em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-alt);
  color: var(--text);
  font-family: inherit;
  font-size: .88em;
  font-weight: 600;
  white-space: nowrap;
}

/* Dateinamen */
.mono {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .95em;
  font-weight: 600;
}

/* Wichtiges im Fliesstext – nach wie vor rot */
p.hinweis,
span.hinweis {
  color: var(--warn);
  font-weight: 600;
}

p.hinweis { font-style: italic; }

p.hinweis1 {
  color: var(--warn);
  font-weight: 600;
  text-decoration: overline;
}

p.video { color: var(--task-dark); font-weight: 600; }

p.register {
  color: var(--muted);
  font-size: .92em;
  font-style: italic;
}

/* ---------------------------------------------------------------- Boxen --- */

/* Gemeinsames Grundmuster aller farbigen Kästen: farbiger Balken links,
   feiner Rahmen, gleiche Rundung wie auf der Startseite. */
.aufgabe,
.sol,
.hint,
.admin,
.videos,
div.mac,
div.hinweis,
.hinweisbox {
  margin: 1.1rem 0;
  padding: .85rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-sm);
}

.aufgabe > :last-child,
.sol > :last-child,
.hint > :last-child,
.admin > :last-child,
.videos > :last-child,
div.mac > :last-child,
div.hinweis > :last-child,
.hinweisbox > :last-child { margin-bottom: 0; }

/* Aufgabe: helleres Violett */
.aufgabe {
  border-color: var(--task-border);
  border-left-color: var(--task);
  background: var(--task-soft);
}

/* Lösung und die administrativen Punkte: aufgedeckter Text. Weiss, damit er
   sich auch dann abhebt, wenn er – wie meistens – in der Aufgabenbox steht. */
.sol,
.admin {
  border-color: var(--task-border);
  border-left-color: var(--task-dark);
  background: var(--surface);
}

/* Hint: dunkleres Violett, damit er in der Aufgabenbox auffällt */
.hint {
  border-color: var(--task-border);
  border-left-color: var(--task-dark);
  background: var(--task-mid);
}

/* Videos */
.videos {
  border-color: var(--info-border);
  border-left-color: var(--info);
  background: var(--info-soft);
}

.videos ul { margin: 0; padding-left: 1.2rem; }

.videos li { margin-bottom: .3rem; }

/* Hinweiskasten in Rot */
div.hinweis {
  border-color: var(--warn-border);
  border-left-color: var(--warn);
  background: var(--warn-soft);
}

/* Positiver Hinweis / Merksatz in Grün */
.hinweisbox {
  border-color: var(--ok-border);
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* Kleiner Nebensatz – kein Kasten, nur eine leise Randnotiz */
.hinweisklein {
  margin: .5rem 0;
  padding: .35rem 0 .35rem .75rem;
  border-left: 3px solid var(--warn-border);
  color: var(--muted);
  font-size: .9em;
  font-style: italic;
}

/* Benötigte Übungsdatei: schmaler Streifen, nur so breit wie sein Inhalt */
p.datei {
  width: fit-content;
  max-width: 100%;
  margin: .5rem 0;
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: .92em;
}

/* ------------------------------------------------------------------ Mac --- */

/* .mac steht sowohl als Kasten (<div>) als auch mitten im Satz (<span>) */
span.mac {
  padding: .05em .3em;
  border-radius: 4px;
  background: var(--mac-soft);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

div.mac {
  border-color: var(--mac-border);
  border-left-color: var(--mac-accent);
  background: var(--mac-soft);
}

/* Kleine Beschriftung, damit auf einen Blick klar ist, für wen der Kasten gilt.
   Wer sie nicht mag, löscht diese drei Zeilen. */
div.mac::before {
  content: "Für Mac";
  display: block;
  margin-bottom: .2rem;
  color: var(--mac);
  font-size: .75em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

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

/* Gilt für die "Lösung"-Schaltflächen, die im HTML keine Klasse haben */
button {
  margin: .3rem 0;
  padding: .35rem .85rem;
  border: 1px solid var(--task-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--task-dark);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

button:hover {
  border-color: var(--task);
  background: var(--task-soft);
}

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

/* Der Hint-Knopf steht mitten im Text und darf darum kleiner sein */
.button1 {
  margin: 0 0 0 .3rem;
  padding: .1rem .55rem;
  background: var(--task);
  border-color: var(--task);
  color: #fff;
  font-size: .82rem;
  vertical-align: baseline;
}

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

/* ------------------------------------------------------ Knopf nach oben --- */

/* Schwebt unten rechts, wird von nachoben.js erzeugt und erst per Klasse
   "sichtbar" eingeblendet, sobald ein Stück gescrollt wurde. */
.nach-oben {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
  cursor: pointer;

  /* Ausgeblendet, aber schon im Layout – so lässt es sich weich einblenden.
     visibility sorgt dafür, dass er unsichtbar auch nicht anklickbar ist. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nach-oben.sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nach-oben:hover {
  background: var(--accent);
  color: #fff;
}

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

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

/* Der Knopf wird von lesezeichen.js als erstes Kind in jede h2/h3 gesetzt. Er
   hängt links in den Seitenrand hinaus, damit die Überschriften genau dort
   beginnen wie bisher – das Schriftbild der Seiten ändert sich also nicht. */
.lz-ueberschrift { position: relative; }

/* Damit das grössere Bändel in den Rand passt, bekommt das Blatt links etwas
   mehr Luft – aber nur, wenn lesezeichen.js gelaufen ist. Ohne JavaScript gibt
   es keine Knöpfe und die Seite soll darum auch nicht breiter eingerückt sein.
   Rechts gleich viel, sonst sässe der Text nicht mehr mittig. */
.js-lesezeichen body { padding-inline: 2.9rem; }

.lesezeichen {
  /* Die Grösse steht nur hier – der Abstand nach oben rechnet mit ihr. */
  --lz-groesse: 1.5rem;

  position: absolute;
  right: 100%;
  /* Mittig zur ersten Zeile der Überschrift: eine Zeile ist 1.6em hoch (vom
     <body> geerbt), davon das Bändel abgezogen, der Rest je zur Hälfte nach
     oben und unten. Das stimmt so für h2 wie für h3, ohne zwei Werte. */
  top: calc((1.6em - var(--lz-groesse)) / 2);
  display: flex;
  margin: 0 .4rem 0 0;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: none;
  /* Blass, aber sichtbar – nicht erst beim Überfahren mit der Maus. Auf einem
     Tablet gibt es kein Überfahren, dort fände man den Knopf sonst nie. */
  color: var(--border);
  cursor: pointer;
  transition: color .12s ease;
}

.lesezeichen svg {
  width: var(--lz-groesse);
  height: var(--lz-groesse);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.lesezeichen:hover {
  border: none;
  background: none;
  color: var(--accent);
}

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

/* Gesetzt: ausgefülltes Bändel in Excel-Grün. Genau eines davon gibt es im
   ganzen Kurs. */
.lesezeichen.ist-gesetzt {
  color: var(--accent);
}

.lesezeichen.ist-gesetzt svg {
  fill: currentColor;
  stroke: none;
}

/* In den farbigen Kästen ist der Innenrand zu schmal, als dass das Bändel
   daneben hängen könnte – dort steht es in der Zeile vor der Überschrift. */
.aufgabe .lesezeichen,
.admin .lesezeichen,
.videos .lesezeichen,
div.mac .lesezeichen,
div.hinweis .lesezeichen,
.hinweisbox .lesezeichen {
  position: static;
  display: inline-flex;
  /* "middle" richtet das Bändel an der Mitte der Zeile aus – das passt für
     jede Schriftgrösse, ohne einen Wert von Hand zu suchen. */
  vertical-align: middle;
}

/* Kurz aufleuchten, wenn man von der Übersicht her genau hierher gesprungen
   ist – sonst sucht man auf einer langen Seite, was denn nun gemeint war. */
.lz-angesprungen {
  animation: lz-leuchten 2.5s ease-out 1;
}

@keyframes lz-leuchten {
  0%, 45% { background: var(--accent-soft); }
  100%    { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .lesezeichen { transition: none; }
  .lz-angesprungen { animation: none; }
}

/* --------------------------------------------------------------- Bilder --- */

/* .bild steht mal direkt am <img>, mal an einem <div> darum herum – beide
   Varianten müssen sich auf schmale Fenster verkleinern. ".bil" ist ein
   Tippfehler auf drei Seiten und wird hier gleich mitbedient. */
img.bild,
img.bil,
.bild img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .6rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.bild { margin: .6rem 0; }

.sol .bild { max-width: 93%; }

/* ------------------------------------------------- Einzüge und Listen --- */

/* Hängender Einzug für die Aufgabenpunkte a), b), c) … */
.i1 .first {
  margin-left: 1.35rem;
  text-indent: -1.35rem;
}

.i1 p {
  margin-left: 1rem;
  margin-right: .3rem;
  text-indent: 0;
}

.i1 .bild,
.i1 img.bild,
.i1 img.bil { margin-left: 1rem; margin-right: .75rem; }

/* Beim <img class="bild"> sitzt der Einzug am Bild selbst. Ohne diese Zeile
   würde ein breiter Screenshot um genau diesen Einzug rechts hinausragen. */
.i1 img.bild,
.i1 img.bil { max-width: calc(100% - 1.75rem); }

.i1 h3 { margin-left: 1.1rem; }

.i1 h4 { margin-left: 1.35rem; }

.i1 div.mac,
.i1 .hinweisbox { margin-left: 1rem; margin-right: .75rem; }

.i1 p.hinweis { margin-left: 1.1rem; }

.sol .hinweis { margin-right: .3rem; }

ul.liste1 li,
ol.liste1 li { margin-bottom: .4rem; }

ul, ol { padding-left: 1.4rem; }

li { margin-bottom: .2rem; }

/* Gehört zum vorangehenden Absatz oder Bild – darum enger dran */
.follow { margin-top: -.2rem; }

/* --------------------------------------------------- Schmale Fenster --- */

/* Die Seiten werden bewusst in einem schmalen Fenster neben Excel gelesen. */
@media (max-width: 34rem) {
  body {
    padding: 1.25rem 1rem 3rem;
    border-inline: none;
    font-size: 16px;
  }

  h1 { font-size: 1.6rem; }

  h2 { font-size: 1.2rem; }

  .aufgabe,
  .sol,
  .hint,
  .admin,
  .videos,
  div.mac,
  div.hinweis,
  .hinweisbox { padding: .7rem .8rem; }

  /* Die Einzüge bleiben, wie sie sind – sonst bricht der hängende Einzug der
     Aufgabenpunkte a), b), c). Nur der Platz rechts wird gestrichen, und die
     Bilder dürfen die volle Breite nutzen. */
  .i1 p,
  .i1 div.mac,
  .i1 .hinweisbox { margin-right: 0; }

  .i1 .bild,
  .i1 img.bild,
  .i1 img.bil {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .sol .bild { max-width: 100%; }

  /* Im schmalen Fenster ist der Seitenrand zu klein für einen hängenden
     Knopf – dort steht er überall in der Zeile vor der Überschrift, und das
     Blatt braucht auch keine zusätzliche Luft. */
  .js-lesezeichen body { padding-inline: 1rem; }

  .lesezeichen {
    position: static;
    display: inline-flex;
    vertical-align: middle;
  }
}

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

@media print {
  html, body { background: #fff; }

  body {
    max-width: none;
    padding: 0;
    border: none;
    font-size: 11pt;
  }

  .aufgabe,
  .sol,
  .hint,
  .admin,
  .videos,
  div.mac,
  div.hinweis,
  .hinweisbox { break-inside: avoid; }

  /* Zugeklappte Lösungen bleiben auch auf Papier zu – nur die Knöpfe, die
     man dort nicht drücken kann, verschwinden. Dasselbe gilt für den
     Rücksprung zur Übersicht und den Knopf nach oben. */
  button,
  .zurueck,
  .nach-oben { display: none; }
}