/* Gemeinsame Gestaltung für Startseite, Themenseiten und Übersichten der Arbeitsblätter.
   Schriften und Farben wie auf den Arbeitsblättern (Skill mathe, Gestaltung):
   Kopfzeile „Mathematik ·“ grau, Thema grün, Teilthema Akzentlila; Überschrift Indie Flower blau;
   Fußzeile „CC BY-NC-SA 4.0 · Patrick Saul · Datenschutzerklärung“ mit grünem Namen. */

@font-face{font-family:'Libertinus Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/stil/libertinus-sans-400.woff2) format('woff2')}
@font-face{font-family:'Libertinus Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/stil/libertinus-sans-700.woff2) format('woff2')}
@font-face{font-family:'Indie Flower';font-style:normal;font-weight:400;font-display:swap;src:url(/stil/indie-flower.woff2) format('woff2')}

:root{
  --text:#1F2933;
  --grau:#6E6E6E;      /* das eine Grau: Kopf- und Fußzeilentext (Skill mathe, Gestaltung, Farben) */
  --blau:#0072B2;      /* Akzentfarbe A: Überschriften, Linien, Titel */
  --blauhell:#EDF4FA;
  --gruen:#26870C;     /* Akzentfarbe B: Thema, Autor */
  --gruenhell:#E3EFDF;
  --orange:#D55E00;    /* Lösungen */
  --orangehell:#F9E7D9;
  --lila:#85609E;      /* Akzentlila: Teilthema, Bildungsgänge, Tests */
  --lilahell:#EBE5EF;
  --linie:#D9DFE6;
  --hand:'Indie Flower',cursive;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  font-family:'Libertinus Sans',system-ui,sans-serif;
  font-size:1.2rem;
  line-height:1.45;
  color:var(--text);
  background:#fff;
}

.seite{max-width:40rem;margin:0 auto;padding:1.2rem 1.25rem 2rem}

/* Kopfzeile wie auf dem Blatt */
.kopf{
  margin:0;
  padding:0 0 .35rem;
  border-bottom:1px solid var(--blau);
  text-align:center;
  font-family:var(--hand);
  font-size:1.1rem;
  color:var(--grau);
}
.kopf a{color:inherit;text-decoration:none}
.kopf .thema{color:var(--gruen)}
.kopf .teilthema{color:var(--lila)}
.kopf .thema,.kopf .teilthema{white-space:nowrap} /* Umbruch am Mittelpunkt, nicht im Namen */
/* Name der Website: normale Schrift, fett, schwarz (Textfarbe) */
.kopf .marke{font-family:'Libertinus Sans',system-ui,sans-serif;font-weight:700;font-size:1.05rem;color:var(--text)}

.zurueck{display:inline-block;margin:0 0 .8rem;font-size:1rem;color:var(--blau);text-decoration:none}

h1{
  margin:1.6rem 0 0;
  text-align:center;
  font-family:var(--hand);
  font-weight:400;
  font-size:2.4rem;
  line-height:1.15;
  color:var(--blau);
}
h1.thema{color:var(--gruen)} /* Themenseite: das Thema als Haupttitel */
.unterzeile{margin:.3rem 0 0;text-align:center;color:var(--grau)}
.unterzeile a{color:var(--blau);text-decoration:none}

/* Thema auf der Startseite: Zeile wie die Kopfzeile, ohne Linie */
.themenkopf{
  margin:2.4rem 0 .7rem;
  font-family:var(--hand);
  font-weight:400;
  font-size:1.35rem;
  color:var(--grau);
}
.themenkopf a{color:inherit;text-decoration:none}
.themenkopf .thema{color:var(--gruen);white-space:nowrap} /* Umbruch am Mittelpunkt, nicht im Namen */

.liste{list-style:none;margin:1.8rem 0 0;padding:0}
.themenkopf + .liste{margin-top:0}
.liste li{margin:0 0 .7rem}

/* Startseite: Trennlinie zwischen den Themen verschiedener Bildungsgänge (BF1, BF2, BGY); oben .4rem + .7rem Abstand der letzten Karte = 1.1rem wie unten */
.trenner{margin:.4rem 0 1.1rem;border:0;border-top:2px dashed var(--lila)}
.trenner + .liste{margin-top:0}
.liste a{
  display:block;
  padding:.75rem 1rem .8rem;
  border:1px solid var(--linie);
  border-left:4px solid var(--blau);
  border-radius:6px;
  color:inherit;
  text-decoration:none;
}
.liste a:hover,.liste a:focus-visible{background:#E0EDF8} /* Farbton des Akzentblaus (OKLCH 244°), Helligkeit wie die Füllungen zu Orange und Grün */
.liste .titel{display:block;font-family:var(--hand);font-size:1.45rem;line-height:1.2;color:var(--blau)}
.liste .text{display:block;margin-top:.2rem;font-size:1rem;color:var(--grau)}

/* Musterlösung in Lösungsfarbe, wie auf dem Blatt */
.liste a.loesung{border-left-color:var(--orange)}
.liste a.loesung:hover,.liste a.loesung:focus-visible{background:var(--orangehell)}
.liste a.loesung .titel{color:var(--orange)}

/* Tests (Probetest, Kurztest): Akzentlila (Violett #7A5195 aus dem Skill mathe, auf die Helligkeit
   des Akzentblaus angehoben), Füllung #EBE5EF */
.liste a.test{border-left-color:var(--lila)}
.liste a.test:hover,.liste a.test:focus-visible{background:var(--lilahell)}
.liste a.test .titel{color:var(--lila)}

/* Interaktive Seiten: Akzentgrün */
.liste a.interaktiv{border-left-color:var(--gruen)}
.liste a.interaktiv:hover,.liste a.interaktiv:focus-visible{background:var(--gruenhell)}
.liste a.interaktiv .titel{color:var(--gruen)}

/* Notentabellen: Zusatz, helleres Akzentblau (35 % zu Weiß aufgehellt), etwas kleiner */
.liste a.notentabelle{border-left-color:#59A3CD}
.liste a.notentabelle:hover,.liste a.notentabelle:focus-visible{background:#F3F8FB} /* heller als die Aufgabenblatt-Füllung */
.liste a.notentabelle .titel{color:#59A3CD;font-size:1.3rem}

/* Noch nicht verfügbar (Lösung nicht freigeschaltet, interaktive Seite fehlt):
   graue Karte ohne Link, mit Hinweis */
.liste .gesperrt{
  display:block;
  padding:.75rem 1rem .8rem;
  border:1px dashed #BFBFBF;
  border-left:4px solid #BFBFBF;
  border-radius:6px;
  background:#F7F7F7;
  cursor:default;
}
.liste .gesperrt .titel{color:#9A9A9A}
.liste .gesperrt .text{color:var(--grau)}

/* Einstieg nach Bildungsgang (Startseite): Kacheln nebeneinander, in Akzentlila */
.klassen{list-style:none;margin:.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.klassen a{
  display:block;
  padding:.6rem .4rem .55rem;
  border:1px solid var(--linie);
  border-top:4px solid var(--lila);
  border-radius:6px;
  text-align:center;
  color:inherit;
  text-decoration:none;
}
.klassen a:hover,.klassen a:focus-visible{background:var(--lilahell)}
.klassen .kuerzel{display:block;font-weight:700;font-size:1.35rem;color:var(--lila)}
.klassen .name{display:block;font-size:.85rem;line-height:1.2;color:var(--grau)}

/* Themen auf der Startseite: Karten in Grün wie das Thema in der Kopfzeile */
.liste a.thema-karte{border-left-color:var(--gruen)}
.liste a.thema-karte:hover,.liste a.thema-karte:focus-visible{background:var(--gruenhell)}
.liste a.thema-karte .titel{color:var(--gruen)}
/* Unterzeile der Themenkarte: die Teile des Themas, grau wie der Text darunter */
.liste a.thema-karte .unterzeile{display:block;margin:.15rem 0 0;text-align:left;font-size:1rem;color:var(--grau)}

/* Bildungsgang-Kennzeichen wie die Badges auf dem Blatt, in Akzentlila (Skill mathe, Gestaltung) */
.badge{
  display:inline-block;
  margin:0 .25rem 0 0;
  padding:0 .4rem;
  border:1px solid var(--lila);
  border-radius:4px;
  background:var(--lilahell);
  font-family:var(--hand);
  font-size:.95rem;
  line-height:1.4;
  color:var(--lila);
  vertical-align:.1em;
}
.liste .titel .badge{margin-left:1.2rem} /* gut doppelt so breit wie ein Leerzeichen im Titel */
.badges{margin:.5rem 0 0;text-align:center}

/* Fußzeile wie auf dem Blatt */
footer{
  margin-top:3rem;
  padding-top:.4rem;
  border-top:1px solid var(--blau);
  text-align:center;
  font-family:var(--hand);
  font-size:1.05rem;
  color:var(--grau);
}
footer .name{color:var(--gruen)}
footer a{color:var(--grau);text-decoration:none;white-space:nowrap}
footer a:hover,footer a:focus-visible{text-decoration:underline}

/* Textseiten (Datenschutzerklärung): Fließtext, schlichte Zwischenüberschriften, Links blau */
.fliesstext{margin-top:1.6rem}
.fliesstext h2{margin:1.8rem 0 .4rem;font-size:1.25rem;font-weight:700;line-height:1.25;color:var(--text)}
.fliesstext p{margin:0 0 .8rem}
.fliesstext ul{margin:0 0 .8rem;padding-left:1.3rem}
.fliesstext li{margin:0 0 .35rem}
.fliesstext a{color:var(--blau);overflow-wrap:break-word}