/* hilfmirmal v11 · n8n-Lernpfad (n8n/index.html, n8n-uebungen.html, n8n-expression-baukasten.html, n8n-wissensbox.html).
   Erzeugt werden die Seiten von tools/kurs-n8n.py aus quellen/kurse/n8n/. Diese Datei wird NACH dem Inline-Stil der
   Kursseiten geladen: Sie liefert die Tokens (der alte :root-Block wird beim Bau entfernt), die Schriften aus fonts/,
   die v11-Anpassungen und die Bausteine, die der Bau ergänzt (Kurs-Untermenü, Autorenzeile, Abschluss mit Erik).
   Kopf, Menü, Brotkrumen und Fuß kommen aus schale.css (wird davor geladen und bringt Inter und Instrument Serif mit).

   Farben: nur designsystem/tokens.json plus die didaktischen Kursfarben --kurs-* unten.
   --kurs-* ist ein VORSCHLAG, FREIGABE ISABELL OFFEN. tokens.json hat keine Statusfarben; die Lernlogik braucht sie:
   Start (Trigger), Node, richtig, Achtung, falsch. Alle Paare sind für kleine Schrift auf mindestens 4,5:1 geprüft
   (tools/pruefen/kurs-n8n.cjs): Farbe auf paper, Farbe auf ihrer hellen Fläche, paper auf der Farbe. */

/* ---------- Schriften (zusätzlich zu schale.css) ---------- */
@font-face{font-family:'JetBrains Mono';font-weight:400;font-display:swap;src:url('../../fonts/JBMono-400.woff2?v=d3dcdccd') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url('../../fonts/JBMono-500.woff2?v=615a7673') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url('../../fonts/JBMono-700.woff2?v=28cbd0dd') format('woff2')}
@font-face{font-family:'Inter';font-weight:800;font-display:swap;src:url('../../fonts/Inter-800.woff2?v=713403e7') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light;
  /* v11 (designsystem/tokens.json) */
  --greige:#e7e4e0;
  --sand:#f1efec;
  --cream:#f7f6f4;
  --paper:#fdfdfc;
  --sky:#cfe7f8;
  --sky-2:#9fcdee;
  --sky-pale:#e8f4fd;
  --sky-air:#f3f9fe;
  --ink:#1d2b36;
  --ink-2:#3e4f5b;
  --ink-3:#5f6e79;
  --blue:#3f6f8f;
  --blue-deep:#2f5a76;
  --line:rgba(29,43,54,.12);
  --bubble-shadow:0 18px 40px -24px rgba(29,43,54,.5);
  --card-shadow:0 40px 90px -50px rgba(29,43,54,.38);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --kurs-rand:clamp(20px,6vw,110px);            /* wie --gutter der Schale */

  /* Kursfarben: Vorschlag, Freigabe Isabell offen */
  --kurs-start:#b23a52;        /* Trigger, Startpunkt (alt #E0475F) */
  --kurs-start-hell:#fbeced;   /* alt #FBE7EB */
  --kurs-ok:#2e7553;           /* richtig, erledigt, Output (alt #238C5E) */
  --kurs-ok-hell:#e4f2ea;      /* alt #DFF3E9 */
  --kurs-warn:#93600f;         /* Achtung (alt #C77D14) */
  --kurs-warn-hell:#f8eedb;    /* alt #FBEFD9 */
  --kurs-fehler:#a83a3f;       /* falsch, Fehler (alt #C3323E) */
  --kurs-fehler-hell:#faebea;  /* alt #F9E0E2 */
  --kurs-linie-2:rgba(29,43,54,.24);   /* kräftigere Haarlinie aus ink (alt #C5CBD6) */
  --kurs-punkt:rgba(29,43,54,.2);      /* Raster der Arbeitsfläche (alt #C9CED8) */
  /* Node ist das Markenblau: blue, hell sky-pale, Hover blue-deep (alt #2F6FD6, #E3ECFB, #245cb5) */

  /* Namen, die das Kurs-Markup und das Kurs-Skript benutzen, auf v11 abgebildet */
  --ground:var(--cream);
  --line-2:var(--kurs-linie-2);
  --trigger:var(--kurs-start);
  --trigger-soft:var(--kurs-start-hell);
  --node:var(--blue);
  --node-soft:var(--sky-pale);
  --kurs-node-tief:var(--blue-deep);
  --ok:var(--kurs-ok);
  --ok-soft:var(--kurs-ok-hell);
  --warn:var(--kurs-warn);
  --warn-soft:var(--kurs-warn-hell);
  --bad:var(--kurs-fehler);
  --bad-soft:var(--kurs-fehler-hell);
  --canvas:var(--sand);
  --canvas-dot:var(--kurs-punkt);
  --panel:var(--paper);
  --panel-hover:var(--sky-air);
  --code-bg:var(--sand);
  --kurs-buehne:var(--cream);
  --shadow:0 1px 2px rgba(29,43,54,.05),0 14px 32px -20px rgba(29,43,54,.32);
  --r:12px;
  --display:var(--sans);
  --body:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Grund ---------- */
html{-webkit-text-size-adjust:100%}
body{background:linear-gradient(180deg,var(--sky-pale) 0,var(--sky-air) 22rem,var(--cream) 46rem) no-repeat,var(--cream);color:var(--ink);font-family:var(--body)}
::selection{background:var(--sky);color:var(--ink)}
/* Inhalt bündig mit dem Kopf der Schale */
.wrap{box-sizing:content-box;max-width:1180px;padding-inline:var(--kurs-rand)}
/* Links im Kurstext (nicht in Navigationen, die ihre eigenen Stile haben) */
.wrap a:not([class]):not(nav a){color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.wrap a:not([class]):not(nav a):hover{color:var(--blue)}
nav.jump a,.topnav a{color:var(--blue-deep)}
.wrap a:focus-visible,.wrap input:focus-visible,.wrap select:focus-visible,.wrap textarea:focus-visible,.wrap summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Überschriften: Instrument Serif nur für h1 und h2 (es gibt nur Gewicht 400), alles andere Inter */
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.05}
h1{font-size:clamp(2.5rem,1.6rem + 3vw,4rem)}
.eyebrow+h1,.eyebrow+h2{margin-top:.35rem}
.lesson-head h2{font-size:clamp(1.9rem,1.3rem + 2vw,2.8rem)}
.card h2{font-size:clamp(1.5rem,1.3rem + .7vw,1.85rem)}
h3{font-family:var(--sans)}
.eyebrow{color:var(--blue-deep);letter-spacing:.14em}

/* Brotkrumen stehen im Kurs innerhalb von .wrap (bündig mit dem Inhalt) */
.wrap .hmm-krumen{padding:0;margin:0 0 .4rem}

/* ---------- Kurs-Untermenü (ersetzt die alte Reiterleiste) ---------- */
.kn-unter{margin:0 0 26px}
.kn-unter ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.kn-unter a{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.1rem;border:1.5px solid var(--line);border-radius:999px;color:var(--ink-2);font:500 .95rem/1.2 var(--sans);text-decoration:none}
.kn-unter a:hover{color:var(--ink);background:var(--paper);border-color:var(--kurs-linie-2)}
.kn-unter a[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--paper);border-color:var(--paper);box-shadow:var(--shadow)}
.kn-unter a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Autorenzeile ---------- */
.kn-autor{margin:12px 0 0;color:var(--ink-3);font-size:.86rem;line-height:1.45}

/* ---------- Abschluss: Erik spricht (gezeichneter Avatar, Name darüber) ---------- */
.kn-abschluss{box-sizing:content-box;max-width:1180px;margin:0 auto;padding:0 var(--kurs-rand) clamp(48px,8vh,88px)}
.kn-abschluss-innen{display:grid;gap:1.4rem;max-width:44rem;padding:clamp(1.4rem,1rem + 1.6vw,2.2rem);background:var(--sky-air);border-radius:26px;box-shadow:var(--card-shadow)}
.kn-erik{display:flex;align-items:flex-end;gap:.75rem;margin:0}
.kn-avatar{display:block;flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--paper),0 10px 24px -12px rgba(29,43,54,.5)}
.kn-erik-col{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0}
.kn-erik-name{padding-left:.5rem;color:var(--ink-3);font-size:.78rem;font-weight:600;letter-spacing:.04em}
.kn-blase{display:block;padding:.8rem 1.15rem;border-radius:20px 20px 20px 6px;background:var(--paper);color:var(--ink);font-size:clamp(1rem,.95rem + .3vw,1.12rem);font-weight:500;line-height:1.45;box-shadow:var(--bubble-shadow)}
.kn-aktion{margin:0}
.kn-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:44px;padding:.9rem 1.5rem;border:1.5px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:600 1rem/1.2 var(--sans);text-decoration:none}
.kn-knopf::after{content:"";flex:none;width:.42rem;height:.42rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.kn-knopf:hover{background:var(--blue);border-color:var(--blue)}
.kn-knopf:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- v11-Anpassungen der Kursbausteine ---------- */
.block,section.card,article.card{border-radius:24px}
.btn{border-radius:999px}
.btn.primary:hover{background:var(--kurs-node-tief);border-color:var(--kurs-node-tief)}
.merk{border-radius:0 12px 12px 0}
code{border-radius:6px}
/* Lernpfad: aktiver Lektionsknopf und Haken */
nav.lessons button[aria-current="true"]{border-color:var(--line);box-shadow:var(--shadow)}
nav.lessons button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.progress .bar i{background:var(--ok)}

/* ---------- Handy: kein waagrechter Überlauf ---------- */
/* Lernpfad: Die einspaltige Raster-Spur wuchs mit der waagrecht scrollenden Lektionsleiste auf (scrollWidth 730 bei 375). */
.layout>*{min-width:0}
@media (max-width:820px){.layout{grid-template-columns:minmax(0,1fr)}}
/* Übungen: Fallauswahl (select#u1case) war breiter als das Handy */
#u1case{max-width:100%;min-width:0}
/* Baukasten: lange Ergebnisse und Fehlermeldungen brechen um */
.res,.words{overflow-wrap:anywhere}
.row{min-width:0}
@media (max-width:480px){
  .kn-unter a{padding:.5rem .85rem;font-size:.9rem}
  .kn-abschluss-innen{border-radius:22px}
}

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion:no-preference){
  .kn-unter a,.kn-knopf{transition:background-color .25s,color .25s,border-color .25s}
}