/* kernseminar.de – gemeinsamer Stil.
   Geschwister von fachseminarmusik.de: warmes Papier, dunkle Tinte, Überschriften in
   EB Garamond, Text in Inter. Eigener Akzent: Tintenblau (Kompass statt Notenlinien).
   Keine Anfrage nach außen: Schriften liegen in assets/schrift/. */

@import url('schrift/schriften.css');

:root {
  /* Raster der Seite: drei Spalten mit dem Abstand --spalte. Fließtext, Hinweise und Felder enden auf der Kante der
     zweiten Spalte des umgebenden Kastens (Container: main und die breiten Kästen, siehe unten). */
  --spalte: 1rem;      /* Abstand zwischen Kästen und Kacheln */
  --eng: .5rem;        /* Abstand zwischen Pillen, Knöpfen und in Listen aus Aufklappern */
  --abschnitt: 2rem;   /* Abstand zwischen Abschnitten einer Seite (AGENTS.md, Gestaltung 4) */
  --lesebreite: calc((100cqi - 2 * var(--spalte)) * 2 / 3 + var(--spalte));
  --papier:      #F6F3EC;
  --blatt:       #FFFFFF;
  --tinte:       #1E2733;
  --tinte-leise: #5A6472;
  --linie:       #E2DCCF;
  --linie-fest:  #CFC6B4;
  --akzent:      #34508F;   /* Tintenblau */
  --akzent-hell: #E6EBF6;
  --akzent-text: #FFFFFF;
  --gold:        #8A6A1F;
  --gold-hell:   #F6EDDA;
  --rot:         #B3402A;   /* Warnung, Löschen, Rückgang */
  --gruen:       #2F7D4B;   /* Zuwachs, alles gut */

  --schrift: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --titel-schrift: 'EB Garamond', Georgia, "Times New Roman", serif;
  --rund: 14px;
  --rund-pille: 8px;   /* die eine Pille: fester Radius, gerade Seiten, nie 999px (AGENTS.md, Gestaltung 10) */
  --schatten: 0 1px 2px rgba(30,39,51,.05), 0 4px 16px rgba(30,39,51,.06);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier:      #151A21;
    --blatt:       #1D242D;
    --tinte:       #E9E5DC;
    --tinte-leise: #A3ABB6;
    --linie:       #2E3843;
    --linie-fest:  #3E4A57;
    --akzent:      #8FA8E0;
    --akzent-hell: #1E2840;
    --akzent-text: #0E1420;
    --gold:        #D6AE5F;
    --gold-hell:   #3A3020;
    --rot:         #F08A73;
    --gruen:       #7FD39A;
    --schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--papier); -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { overflow-wrap: break-word;
  margin: 0;
  font-family: var(--schrift);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: var(--akzent); }
h1, h2, h3 { font-family: var(--titel-schrift); font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; overflow-wrap: break-word; hyphens: auto; }  /* lange Wörter („Medienkompetenzrahmen“) trennen statt überlaufen */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }

.rahmen { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* ---------- Dachzeile ---------- */
.dachzeile { background: var(--tinte); color: var(--papier); }
.dachzeile .rahmen {
  display: flex; flex-wrap: nowrap; align-items: center; gap: .45rem;
  min-height: 2.875rem; font-size: .92rem;
}
/* Alles bleibt in einer Zeile: Knöpfe behalten ihre Breite, der Seitenname kürzt sich mit „…“, „KS Dorok“ fällt auf schmalen Fenstern weg */
.dachzeile .rahmen > * { flex: none; white-space: nowrap; }
.dachzeile .rahmen > span:not([class]), .dachzeile .rahmen > a:not(.dach-start) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .dach-rechts { visibility: hidden; flex: 1 1 0 !important; min-width: 0; } }
@media (max-width: 480px) { .dachzeile .rahmen > a:not(.dach-start), .dachzeile .rahmen > a:not(.dach-start) + .dach-pfeil { display: none; } }
.dachzeile a { color: var(--papier); text-decoration: none; font-weight: 600; }
.dachzeile a:hover { text-decoration: underline; }
.dach-start { font-family: var(--titel-schrift); font-size: 1.15rem; font-weight: 500 !important; letter-spacing: .01em; }
.dach-pfeil { opacity: .55; }
.dach-rechts { margin-left: auto; opacity: .8; }

/* ---------- Heftlinie: wiederkehrendes Motiv (Kompass-Skala) ---------- */
.heftlinie {
  height: 0.875rem;
  background:
    repeating-linear-gradient(to right, var(--linie-fest) 0 1px, transparent 1px 12px) bottom / 100% 7px no-repeat,
    linear-gradient(var(--linie-fest), var(--linie-fest)) bottom / 100% 1px no-repeat;
  opacity: .85;
}

/* ---------- Fuß ---------- */
footer {
  border-top: 1px solid var(--linie);
  margin-top: 3rem;
  padding: 1.2rem 0 2rem;
  text-align: center;
  font-size: .84rem;
  color: var(--tinte-leise);
}
footer a { color: var(--tinte-leise); }

/* ---------- Bausteine ---------- */
.karte {
  background: var(--blatt);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
}
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.5rem; padding: .45rem .95rem;
  border: 1px solid var(--linie-fest); border-radius: var(--rund-pille);
  background: var(--blatt); color: var(--tinte);
  font: inherit; font-weight: 600; font-size: .92rem;
  cursor: pointer; text-decoration: none;
}
.knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf.voll { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.knopf.voll:hover { filter: brightness(1.08); color: var(--akzent-text); }
.leise { color: var(--tinte-leise); }
.marke {
  display: inline-block; padding: .1rem .55rem; border-radius: var(--rund-pille);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--gold-hell); color: var(--gold);
}

/* ---------- Farbfamilien ----------
   Jedes Handlungsfeld hat seinen Farbton: U blau, E terrakotta, L beere, B grün, S gold,
   Leitlinie Vielfalt petrol. Gesetzt als Klasse an Kachel oder Bereich. */
.fam-blau   { --akzent: #2F6FA3; --akzent-hell: #E6F0F8; --ton2-hell: #E3EFF0; --akzent-text: #FFFFFF; }
.fam-terra  { --akzent: #A5572A; --akzent-hell: #F8ECE3; --ton2-hell: #F6EDDA; --akzent-text: #FFFFFF; }
.fam-beere  { --akzent: #6A4C93; --akzent-hell: #F0EAF7; --ton2-hell: #F7E8EE; --akzent-text: #FFFFFF; }
.fam-gruen  { --akzent: #3B7A4E; --akzent-hell: #E5F1E8; --ton2-hell: #EEF2DC; --akzent-text: #FFFFFF; }
.fam-gold   { --akzent: #8A6A1F; --akzent-hell: #F6EDDA; --ton2-hell: #F3EFE2; --akzent-text: #FFFFFF; }
.fam-petrol { --akzent: #1D6470; --akzent-hell: #E3EFF0; --ton2-hell: #E6F0F2; --akzent-text: #FFFFFF; }

/* Gruppenfarben der Startseite (bewusst anders als die Handlungsfeld-Farben):
   Olive = Ankommen und Orientieren, Rose = Begleitung und Reflexion, Schiefer = Nachschlagen und Material */
.fam-olive   { --akzent: #5F7A2B; --akzent-hell: #EEF3DF; --ton2-hell: #F4F1DC; --akzent-text: #FFFFFF; }
.fam-rose    { --akzent: #A8445F; --akzent-hell: #F8E7EC; --ton2-hell: #F7ECE6; --akzent-text: #FFFFFF; }
.fam-schiefer { --akzent: #4E5D78; --akzent-hell: #E8ECF3; --ton2-hell: #EDEFF2; --akzent-text: #FFFFFF; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fam-blau   { --akzent: #7FB3DE; --akzent-hell: #1D2E3D; --ton2-hell: #1C3439; --akzent-text: #0E1A1D; }
  :root:not([data-theme="light"]) .fam-terra  { --akzent: #E09A6E; --akzent-hell: #3A2A20; --ton2-hell: #3A3020; --akzent-text: #0E1A1D; }
  :root:not([data-theme="light"]) .fam-beere  { --akzent: #B79BE0; --akzent-hell: #2C2440; --ton2-hell: #3A2230; --akzent-text: #0E1A1D; }
  :root:not([data-theme="light"]) .fam-gruen  { --akzent: #86C79A; --akzent-hell: #1E3226; --ton2-hell: #2A3020; --akzent-text: #0E1A1D; }
  :root:not([data-theme="light"]) .fam-gold   { --akzent: #D6AE5F; --akzent-hell: #3A3020; --ton2-hell: #2F2A1E; --akzent-text: #1A1407; }
  :root:not([data-theme="light"]) .fam-petrol { --akzent: #5FB3BF; --akzent-hell: #1C3439; --ton2-hell: #1A2E33; --akzent-text: #0E1A1D; }
  :root:not([data-theme="light"]) .fam-olive   { --akzent: #B5CC7A; --akzent-hell: #28301A; --ton2-hell: #2F2E1A; --akzent-text: #151A0A; }
  :root:not([data-theme="light"]) .fam-rose    { --akzent: #E48CA5; --akzent-hell: #3A2029; --ton2-hell: #3A2A22; --akzent-text: #1A0A10; }
  :root:not([data-theme="light"]) .fam-schiefer { --akzent: #A3B3D1; --akzent-hell: #232B3A; --ton2-hell: #272C33; --akzent-text: #0E1420; }
}

/* Dunkelmodus erzwingen (Umschalter in der Dachzeile, assets/theme.js): dieselben Werte wie oben */
  :root[data-theme="dark"] {
    --papier:      #151A21;
    --blatt:       #1D242D;
    --tinte:       #E9E5DC;
    --tinte-leise: #A3ABB6;
    --linie:       #2E3843;
    --linie-fest:  #3E4A57;
    --akzent:      #8FA8E0;
    --akzent-hell: #1E2840;
    --akzent-text: #0E1420;
    --gold:        #D6AE5F;
    --gold-hell:   #3A3020;
    --rot:         #F08A73;
    --gruen:       #7FD39A;
    --schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    color-scheme: dark;
  }
  :root[data-theme="dark"] .fam-blau   { --akzent: #7FB3DE; --akzent-hell: #1D2E3D; --ton2-hell: #1C3439; --akzent-text: #0E1A1D; }
  :root[data-theme="dark"] .fam-terra  { --akzent: #E09A6E; --akzent-hell: #3A2A20; --ton2-hell: #3A3020; --akzent-text: #0E1A1D; }
  :root[data-theme="dark"] .fam-beere  { --akzent: #B79BE0; --akzent-hell: #2C2440; --ton2-hell: #3A2230; --akzent-text: #0E1A1D; }
  :root[data-theme="dark"] .fam-gruen  { --akzent: #86C79A; --akzent-hell: #1E3226; --ton2-hell: #2A3020; --akzent-text: #0E1A1D; }
  :root[data-theme="dark"] .fam-gold   { --akzent: #D6AE5F; --akzent-hell: #3A3020; --ton2-hell: #2F2A1E; --akzent-text: #1A1407; }
  :root[data-theme="dark"] .fam-petrol { --akzent: #5FB3BF; --akzent-hell: #1C3439; --ton2-hell: #1A2E33; --akzent-text: #0E1A1D; }
  :root[data-theme="dark"] .fam-olive   { --akzent: #B5CC7A; --akzent-hell: #28301A; --ton2-hell: #2F2E1A; --akzent-text: #151A0A; }
  :root[data-theme="dark"] .fam-rose    { --akzent: #E48CA5; --akzent-hell: #3A2029; --ton2-hell: #3A2A22; --akzent-text: #1A0A10; }
  :root[data-theme="dark"] .fam-schiefer { --akzent: #A3B3D1; --akzent-hell: #232B3A; --ton2-hell: #272C33; --akzent-text: #0E1420; }

/* Umschalter Hell/Dunkel in der Dachzeile */
.thema-knopf { margin-left: .6rem; display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--papier) 45%, transparent); background: transparent; color: var(--papier); cursor: pointer; flex: none; line-height: 1; }
.thema-knopf:hover { background: color-mix(in srgb, var(--papier) 14%, transparent); }
.thema-knopf svg { width: 1.125rem; height: 1.125rem; }
@media print { .thema-knopf { display: none; } }

/* Bezugsgröße für die Lesebreite: main und die breiten Kästen der Seiten (cqi = Breite des nächsten Containers) */
main.rahmen, main .panel, main .tab, main .feld, main .buehne, main .alle-karten, main .angebot, main .da-feld-gesamt, main .fahrplan { container-type: inline-size; }
@media (max-width: 900px) { :root { --lesebreite: 100%; } }
/* Kopf mit Infokasten (Quelle, Stand): Text über zwei Spalten, Kasten in der dritten */
.kopf.mit-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalte); align-items: end; }
.kopf.mit-info > h1, .kopf.mit-info > p { grid-column: 1 / span 2; max-width: none; }
.kopf.mit-info > .kopf-info { grid-column: 3; grid-row: 1 / span 2; align-self: end; margin: 0; padding: .65rem .8rem; border-radius: 12px; border: 1px solid var(--linie); background: var(--blatt); font-size: .85rem; color: var(--tinte-leise); display: grid; gap: .15rem; }
.kopf-info b { color: var(--tinte); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
.kopf-info > span:first-of-type { color: var(--tinte); }
.kopf-info > a { justify-self: start; margin-top: .2rem; font-size: .82rem; font-weight: 700; color: var(--akzent); }
.kopf-info span a { color: var(--tinte); font-weight: 600; }
@media (max-width: 900px) { .kopf.mit-info { display: block; } .kopf.mit-info > .kopf-info { margin-top: var(--spalte); } }

/* Schmale Kacheln: lange Wörter trennen statt überlaufen (beim Zoomen) */
:where(.kachel, .weg-empf a, .idee, .kat) :where(h3, h4, b, strong), h4 { hyphens: auto; }

/* Ruhige Lesespalte: Fließtext, Listen, Hinweise und Felder enden überall an derselben Kante.
   :where() hält die Regel ohne Gewicht, damit Raster und Karten mit eigener Breite sie überschreiben. */
:where(main) :where(p, ul, ol, dl, blockquote, textarea, .hinweis, .stand, .quelle, .blatt, details.kompetenzen) { max-width: var(--lesebreite); }
:where(main) :where(.lernlinie, .schritte-ais, .raster-ais, .methoden, .kat-raster, .filterleiste, .reiter, .gedanken, .beispiele) { max-width: none; }
/* Text in Hinweiskästen, Zitaten und Aufklappern füllt den Kasten bis zum Rand (AGENTS.md, Gestaltung 5); der Kasten selbst bestimmt die Breite */
:where(main) :where(.hinweis, .kasten, .stand, blockquote, .kopf-info, details) :where(p, ul, ol, dl) { max-width: none; }

/* Lange Listen kompakt: zwei Spalten, die Reihenfolge läuft von oben nach unten (erst links, dann rechts) */
.zweispaltig { columns: 2; column-gap: var(--spalte); max-width: none; }
.zweispaltig > li { break-inside: avoid; }
@media (max-width: 720px) { .zweispaltig { columns: 1; } }
.hinweis.breit { max-width: none; }