/* ==========================================================================
   Design-Bibliothek · micro:bit + Scratch
   --------------------------------------------------------------------------
   Gewachsen aus zwei Referenzen: dem Gesten-Studio (hardware/tools/) und der
   Präsentation (material/). Beide teilen dieselbe Sprache:

     · cremefarbener Grund, tintenblaue Konturen
     · dicke Kanten (4px) und harte Schatten statt Weichzeichner
     · grosse Schrift, wenig Text, Farbe trägt die Aussage
     · Sticker statt Flächen — leicht schief, zum Anfassen

   ZWEI SCHRIFT-EBENEN, bewusst getrennt:
     --schrift-spiel  Comic Sans / Trebuchet — alles, was Kinder oder ein
                      Publikum sieht (Bühne, Karten, Poster, Werkzeug-Oberfläche)
     --schrift-sach   System-Sans — alles zum Nachschlagen (Doku, Betreuungs-
                      Bereiche, Datentabellen). Nüchtern ist hier ein Feature.

   EINBINDEN:
     <link rel="stylesheet" href="../design/design.css">      aus material/
     <link rel="stylesheet" href="design/design.css">          aus dem Wurzelordner
     <link rel="stylesheet" href="../../design/design.css">    aus hardware/tools/

   Damit die Werkzeuge in hardware/tools/ die Datei erreichen, läuft der
   lokale Server im PROJEKTORDNER, nicht im tools-Ordner:
     python3 -m http.server 8000
     → http://localhost:8000/hardware/tools/gesten_studio.html

   Styleguide mit allen Bausteinen: design/index.html
   ========================================================================== */

:root {
    /* ---- Grundfarben ---- */
    --creme:        #FFF3DC;   /* Grundfläche Kinder/Bühne */
    --creme-tief:   #FFE9C4;   /* abgesetzte Zone auf Creme */
    --papier:       #FFFFFF;   /* Sticker, Karten */
    --tinte:        #1B2A38;   /* Text, Konturen, dunkler Grund */
    --nacht:        #16283C;   /* dunkle Flächen */
    --nacht-tief:   #101C2A;   /* Nachschlage-Panels */

    /* ---- Signalfarben ---- */
    --gruen:        #2ECC71;
    --gruen-hell:   #57E08A;
    --gruen-tief:   #16A05C;
    --gold:         #FFD34E;
    --gold-warm:    #FFD27A;
    --rot:          #FF7B6B;
    --rot-tief:     #C0392B;
    --blau:         #5DADE2;
    --blau-hell:    #A8D8F0;

    /* ---- Textfarben ---- */
    --text:         #1B2A38;
    --text-leise:   #55677A;
    --text-still:   #8A99A8;
    --text-hell:    #F1F1F1;   /* auf dunklem Grund */
    --text-hell-leise: #B8C9D9;
    --text-hell-still: #8FA3B8;

    /* ---- Schrift ---- */
    --schrift-spiel: "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
    --schrift-sach:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --schrift-code:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ---- Form ---- */
    --kante:        4px solid var(--tinte);
    --kante-fein:   3px solid var(--tinte);
    --rund-gross:   22px;
    --rund:         14px;
    --rund-klein:   10px;
    --schatten:       0 6px 0 var(--tinte);
    --schatten-klein: 0 4px 0 var(--tinte);

    /* ---- Masse ---- */
    --blatt-breite: 210mm;
    --blatt-hoehe:  297mm;
}

/* ==========================================================================
   1 · Grundlagen
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body.spiel, body.sach { margin: 0; }

body.spiel {
    font-family: var(--schrift-spiel);
    background: var(--creme);
    color: var(--text);
    line-height: 1.45;
}
body.sach {
    font-family: var(--schrift-sach);
    background: var(--nacht);
    color: var(--text-hell);
    line-height: 1.5;
}

.titel      { font-size: clamp(28px, 5vw, 62px); font-weight: 900; line-height: 1.05; }
.untertitel { font-size: clamp(20px, 3vw, 40px); font-weight: 900; line-height: 1.15; }
.satz       { font-size: clamp(15px, 1.9vw, 24px); font-weight: 700; color: var(--text-leise); }
.leise      { font-size: clamp(12px, 1.3vw, 17px); font-weight: 700; color: var(--text-still); }

code, .code {
    font-family: var(--schrift-code); font-size: .9em;
    background: rgba(27,42,56,.08); padding: 1px 6px; border-radius: 4px;
}
.dunkel code, .blatt--dunkel code, body.sach code {
    background: rgba(255,255,255,.10); color: inherit;
}

/* ==========================================================================
   2 · Sticker — der Grundbaustein
   ========================================================================== */
.sticker {
    background: var(--papier);
    border: var(--kante);
    border-radius: var(--rund-gross);
    box-shadow: var(--schatten);
    padding: 14px 20px;
}
.sticker--klein { border: var(--kante-fein); border-radius: var(--rund);
                  box-shadow: var(--schatten-klein); padding: 9px 13px; }
.sticker--gruen { background: var(--gruen); }
.sticker--gold  { background: var(--gold); }
.sticker--rot   { background: #FF9E92; }
.sticker--blau  { background: var(--blau-hell); }
.sticker--creme { background: var(--creme-tief); }

/* leicht schief — nur in Reihen und Rastern, nie einzeln */
.reihe > .sticker:nth-child(2n),
.raster > .sticker:nth-child(3n) { transform: rotate(-1deg); }
.reihe > .sticker:nth-child(3n),
.raster > .sticker:nth-child(2n) { transform: rotate(1deg); }

.sticker .kopf { font-size: clamp(15px, 1.8vw, 24px); font-weight: 900; }
.sticker .txt  { font-size: clamp(12px, 1.3vw, 18px); font-weight: 700;
                 color: var(--text-leise); line-height: 1.35; margin-top: 3px; }

/* ==========================================================================
   3 · Knöpfe
   ========================================================================== */
.knopf {
    font-family: inherit; font-weight: 900; cursor: pointer;
    background: var(--papier); color: var(--tinte);
    border: var(--kante); border-radius: var(--rund-gross);
    box-shadow: var(--schatten);
    padding: 14px 26px; font-size: 19px;
    transition: transform .06s, box-shadow .06s;
}
.knopf:hover:not(:disabled) { filter: brightness(1.04); }
.knopf:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 0 0 var(--tinte); }
.knopf:disabled { opacity: .3; cursor: not-allowed; }
.knopf--riesig { font-size: clamp(22px, 3.4vw, 40px); padding: 22px 50px; border-radius: 30px; }
.knopf--klein  { font-size: 15px; padding: 9px 17px; border: var(--kante-fein);
                 border-radius: var(--rund-klein); box-shadow: var(--schatten-klein); }
.knopf--gruen  { background: var(--gruen); }
.knopf--gold   { background: var(--gold); }
.knopf--blau   { background: var(--blau); }
.knopf--rund   { border-radius: 999px; }
.knopf--nackt {
    background: none; border: none; box-shadow: none; color: var(--text-still);
    font-size: 16px; padding: 7px 11px; font-weight: 700; text-decoration: underline;
}
.knopf--nackt:active { transform: none; }
.knopf--nackt:hover { color: var(--tinte); }

/* ==========================================================================
   4 · Anordnung
   ========================================================================== */
.reihe  { display: flex; gap: clamp(10px, 1.8vw, 24px); flex-wrap: wrap;
          align-items: stretch; justify-content: center; }
.reihe > * { flex: 1 1 0; min-width: 210px; }
.reihe--eng { gap: 10px; }
.reihe--links { justify-content: flex-start; }
.reihe--links > * { flex: 0 0 auto; min-width: 0; }

.raster    { display: grid; gap: clamp(8px, 1.3vw, 18px); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) {
    .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   5 · Ampel — die Evidenz-Kennzeichnung des Projekts
   ========================================================================== */
.punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%;
         flex: none; vertical-align: middle; }
.punkt--gruen { background: var(--gruen); }   /* mit Menschen erprobt */
.punkt--gelb  { background: #F1C40F; }        /* Labor verifiziert */
.punkt--rot   { background: var(--rot-tief); }
.punkt--grau  { background: #7D8E9D; }        /* Idee mit Prüfweg */

.ampelzeile { display: flex; gap: 10px; align-items: flex-start; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
           font-size: 11px; font-weight: 700; color: var(--text-hell-leise); }
.legende .punkt { margin-right: 4px; }

/* Geräte-Nummer: Kreis mit Zahl in der Gerätefarbe statt des Worts "Gerät N" */
.gnr { display: inline-flex; align-items: center; justify-content: center;
       width: 1.55em; height: 1.55em; border-radius: 50%; flex: none;
       border: 2px solid var(--tinte); background: var(--papier);
       color: var(--tinte); font-weight: 900; line-height: 1;
       vertical-align: middle; }
.gnr--1 { background: #F2836B; }
.gnr--2 { background: #6BBF7A; }
.gnr--3 { background: #6BA6F2; }
.gnr--4 { background: #FFD34E; }

/* ==========================================================================
   6 · Druckblatt A4 — hell (Kinder, Bastelvorlagen, Stationskarten)
   ========================================================================== */
@page { size: A4 portrait; margin: 0; }

.blatt {
    width: var(--blatt-breite); height: var(--blatt-hoehe);
    margin: 0 auto 6mm; padding: 8mm 10mm;
    display: flex; flex-direction: column; gap: 3mm;
    background: var(--papier); color: var(--text);
    page-break-after: always;
}
.blatt:last-child { page-break-after: auto; }
.blatt h1 { font-size: 25px; font-weight: 900; margin: 0; }
.blatt h1 .nr { font-size: 14px; color: var(--text-still); margin-left: 6px; font-weight: 700; }
.blatt .leitsatz { font-size: 13px; font-weight: 700; color: var(--text-leise); line-height: 1.35; }

/* Druckblatt A4 — dunkel (Betreuung, Referenz, Poster) */
.blatt--dunkel {
    background: linear-gradient(170deg, var(--tinte) 0%, #22384E 100%);
    color: var(--text-hell);
}
.blatt--dunkel h1 { color: var(--gold-warm); }
.blatt--dunkel .leitsatz { color: var(--text-hell-leise); }
.blatt--dunkel .leitsatz b { color: var(--gold-warm); }

/* Abschnitts-Label auf dem Blatt */
.gruppe { font-size: 12.5px; font-weight: 900; color: var(--gold-warm);
          letter-spacing: .5px; margin-top: 1.5mm; }
.gruppe span { font-weight: 700; color: var(--text-hell-still);
               letter-spacing: 0; font-size: 10.5px; }
.blatt:not(.blatt--dunkel) .gruppe { color: var(--tinte); }
.blatt:not(.blatt--dunkel) .gruppe span { color: var(--text-still); }

/* Goldene Fusszeile — die Merksatz-Leiste */
.fuss {
    margin-top: auto; background: var(--gold-warm); color: var(--tinte);
    border-radius: var(--rund-klein); padding: 7px 12px;
    font-size: 12px; font-weight: 800; text-align: center; line-height: 1.3;
}

/* Weiche Karte auf dunklem Blatt */
.karte {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px; padding: 8px 11px;
}
.karte + .karte { margin-top: 2mm; }
.karte h3 { font-size: 12px; font-weight: 900; color: var(--gold-warm); margin: 0 0 2px; }
.karte p  { font-size: 10px; color: #C9D6E2; line-height: 1.35; margin: 0; }
.karte p + p { margin-top: 3px; }
.karte b  { color: #FFF; }
.blatt:not(.blatt--dunkel) .karte {
    background: #F3F7FA; border-color: #D8E2EA;
}
.blatt:not(.blatt--dunkel) .karte h3 { color: var(--tinte); }
.blatt:not(.blatt--dunkel) .karte p  { color: var(--text-leise); }
.blatt:not(.blatt--dunkel) .karte b  { color: var(--tinte); }

/* Warnkasten */
.warnkasten {
    background: rgba(241,196,15,.14); border: 1px solid rgba(241,196,15,.45);
    border-radius: 9px; padding: 6px 9px; font-size: 10.2px;
    color: #FFE9B0; line-height: 1.35;
}
.warnkasten b { color: var(--gold-warm); }
.blatt:not(.blatt--dunkel) .warnkasten {
    background: #FFF3D6; border: 2px solid #E8B84B; color: #6B4E10; font-size: 12px;
}
.blatt:not(.blatt--dunkel) .warnkasten b { color: #8A5B00; }

/* ==========================================================================
   7 · Tabellen
   ========================================================================== */
.tabelle { width: 100%; border-collapse: collapse; font-size: 10px; }
.tabelle th {
    background: rgba(255,210,122,.16); color: var(--gold-warm); font-weight: 900;
    text-align: left; padding: 3px 6px; font-size: 9.2px; letter-spacing: .3px;
}
.tabelle td {
    padding: 3px 6px; border-top: 1px solid rgba(255,255,255,.10);
    vertical-align: top; color: #DCE6EF; line-height: 1.32;
}
.tabelle td b { color: #FFF; }
.tabelle td.z { color: var(--gold-warm); font-weight: 800; white-space: nowrap; }

.blatt:not(.blatt--dunkel) .tabelle th { background: #EEF3F7; color: var(--tinte); }
.blatt:not(.blatt--dunkel) .tabelle td { border-color: #DDE5EC; color: var(--text-leise); }
.blatt:not(.blatt--dunkel) .tabelle td b { color: var(--tinte); }
.blatt:not(.blatt--dunkel) .tabelle td.z { color: var(--tinte); }

/* ==========================================================================
   8 · Werkzeug-Oberfläche (Browser-Apps in hardware/tools/)
   --------------------------------------------------------------------------
   Kinder-Ebene: body.spiel + .sticker/.knopf
   Betreuungs-Ebene: .werkbank — dunkel, sachlich, darf technisch aussehen
   ========================================================================== */
.werkbank {
    background: #172433; color: #E8EEF3;
    font-family: var(--schrift-sach);
    padding: 22px clamp(16px, 5vw, 60px) 60px;
}
.werkbank h2 { font-size: 22px; color: var(--gold-warm); margin: 0 0 4px; }
.werkbank h3 { font-size: 13px; letter-spacing: 1px; color: var(--gold-warm);
               margin: 0 0 8px; text-transform: uppercase; }
.werkbank .kasten {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px; padding: 16px 18px;
}
.werkbank .kasten + .kasten { margin-top: 12px; }
.werkbank p, .werkbank li { font-size: 14px; line-height: 1.55; color: #C3D2DF; }
.werkbank button, .knopf--sach {
    font-family: var(--schrift-sach); font-size: 14px; font-weight: 600;
    background: #24384E; color: #fff; border: 1px solid #3C556E;
    border-radius: 8px; box-shadow: none; padding: 9px 16px; cursor: pointer;
}
.werkbank button:hover { background: #31485F; }
.werkbank button.stark, .knopf--sach.stark {
    background: #1ABC9C; border-color: #17A689; color: #06231D; font-weight: 800;
}
.werkbank button.warn, .knopf--sach.warn { background: #7E2C22; border-color: #A93226; }
.werkbank select, .werkbank input[type=text], .werkbank input[type=number] {
    background: #142235; color: #fff; border: 1px solid #3C556E;
    border-radius: 7px; padding: 7px 10px; font-size: 14px; font-family: inherit;
}
.werkbank canvas { width: 100%; display: block; background: var(--nacht-tief); border-radius: 8px; }
.werkbank table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.werkbank table th { text-align: left; color: var(--gold-warm); font-size: 11px;
                     letter-spacing: .8px; padding: 5px 8px; }
.werkbank table td { padding: 5px 8px; border-top: 1px solid rgba(255,255,255,.10); }

.status { font-size: 12.5px; color: var(--text-hell-still); font-family: var(--schrift-code); }
.status.ok  { color: var(--gruen); }
.status.err { color: #E74C3C; }

/* ==========================================================================
   9 · Nachschlage-Panel (dicht, dreispaltig, bewusst nüchtern)
   ========================================================================== */
.panel {
    background: var(--nacht-tief); color: #DDE7F0;
    font-family: var(--schrift-sach); padding: 20px 26px 40px;
}
.panel .kopfzeile {
    display: flex; align-items: baseline; gap: 14px;
    border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 14px;
}
.panel .kopfzeile h3 { font-size: 20px; font-weight: 800; color: var(--gold); margin: 0; }
.panel .kopfzeile .hint { font-size: 12.5px; color: #7F93A6; margin-left: auto; }
.panel .spalten { column-count: 3; column-gap: 26px; }
@media (max-width: 1250px) { .panel .spalten { column-count: 2; } }
@media (max-width: 800px)  { .panel .spalten { column-count: 1; } }
.panel section { break-inside: avoid; margin-bottom: 16px; }
.panel h4 {
    font-size: 11px; letter-spacing: 1.1px; font-weight: 800; color: var(--gold);
    text-transform: uppercase; margin: 0 0 5px;
    border-bottom: 1px solid rgba(255,211,78,.28); padding-bottom: 3px;
}
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { font-size: 12.7px; line-height: 1.42; padding: 2px 0 2px 13px; position: relative; }
.panel li::before { content: "▪"; position: absolute; left: 0; color: #4E6A82; }
.panel li b { color: #FFF; }
.panel li i { font-style: normal; color: #7F93A6; }
.panel table { width: 100%; border-collapse: collapse; font-size: 12.3px; }
.panel td { padding: 2.5px 5px; border-top: 1px solid rgba(255,255,255,.08); vertical-align: top; }
.panel td:first-child { color: #FFF; font-weight: 700; white-space: nowrap; }
.panel .merk {
    background: rgba(255,211,78,.10); border-left: 3px solid var(--gold);
    padding: 7px 11px; font-size: 12.7px; line-height: 1.45; color: #F0E4C4;
}

/* ==========================================================================
   10 · Bildschirm-Dokument (Sessionplan, Einstiegsseiten)
   ========================================================================== */
.seite { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }
.seite--eng { max-width: 820px; }

/* ==========================================================================
   11 · Druck
   ========================================================================== */
@media print {
    html, body { background: #fff; }
    .nur-bildschirm { display: none !important; }
    .blatt { margin: 0; box-shadow: none; }
}
.nur-druck { display: none; }
@media print { .nur-druck { display: block; } }

/* ==========================================================================
   8b · Werkzeug-Grundgerüst (die Browser-Apps in hardware/tools/)
   --------------------------------------------------------------------------
   Gemeinsame Basis aller Werkzeuge: <body class="werkzeug">. Die Apps
   ergänzen nur noch ihre eigenen Bausteine (Diagramme, Balken, Raster).
   ========================================================================== */
body.werkzeug {
    font-family: var(--schrift-sach);
    background: var(--nacht-tief); color: var(--text-hell);
    margin: 0 auto; padding: 22px 20px 60px; line-height: 1.5; max-width: 980px;
}
body.werkzeug h1 { color: var(--gold-warm); margin: 0 0 4px; font-size: 25px; font-weight: 800; }
body.werkzeug h2 { color: var(--gold-warm); margin: 26px 0 8px; font-size: 15px;
                   letter-spacing: .6px; text-transform: uppercase; }
body.werkzeug .subtitle { color: var(--text-hell-still); font-size: 13.5px; margin-bottom: 18px; }

body.werkzeug button {
    background: #24384E; color: #fff; border: 1px solid #3C556E;
    padding: 9px 16px; border-radius: 8px; cursor: pointer;
    font-size: 14px; font-family: inherit; font-weight: 600;
}
body.werkzeug button:hover:not(:disabled) { background: #31485F; }
body.werkzeug button:disabled { opacity: .4; cursor: not-allowed; }
body.werkzeug button.primary { background: #1ABC9C; border-color: #17A689;
                               color: #06231D; font-weight: 800; }
body.werkzeug button.danger  { background: #7E2C22; border-color: #A93226; }

body.werkzeug select,
body.werkzeug input[type=text],
body.werkzeug input[type=number],
body.werkzeug textarea {
    background: #142235; color: var(--text-hell); border: 1px solid #3C556E;
    border-radius: 7px; padding: 7px 10px; font-family: inherit; font-size: 14px;
}

body.werkzeug .bar {
    display: flex; gap: 12px; align-items: center; margin-bottom: 14px;
    padding: 12px 14px; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12); border-radius: 12px; flex-wrap: wrap;
}
body.werkzeug .help {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    padding: 12px 15px; border-radius: 12px; margin-bottom: 14px;
    font-size: 13.5px; color: #C3D2DF; line-height: 1.55;
}
body.werkzeug .help strong { color: var(--gold-warm); }
body.werkzeug .help code { background: var(--nacht-tief); color: var(--gold-warm); }
body.werkzeug .foot {
    margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14);
    display: flex; gap: 10px; flex-wrap: wrap;
}
body.werkzeug canvas { background: var(--nacht-tief); border-radius: 10px; display: block; }
body.werkzeug table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
body.werkzeug th { text-align: left; color: var(--gold-warm); font-size: 11.5px;
                   letter-spacing: .6px; padding: 5px 8px; background: rgba(255,210,122,.12); }
body.werkzeug td { padding: 5px 8px; border-top: 1px solid rgba(255,255,255,.10); color: #C3D2DF; }
body.werkzeug code { font-family: var(--schrift-code); background: rgba(255,255,255,.10); }

/* ==========================================================================
   12 · Druckblätter am Bildschirm
   --------------------------------------------------------------------------
   Ein .blatt ist exakt A4 — im Browser also 794 px breit, unabhängig davon,
   wie gross das Fenster ist. Auf einem 1600er-Monitor wirkt das winzig.
   design/blatt-zoom.js rechnet den Faktor aus und setzt --blatt-skala;
   `zoom` skaliert im Gegensatz zu `transform` auch das Layout, deshalb
   ueberlappen die Blätter nicht.

   Beim DRUCKEN greift das nicht: die Regel steht in @media screen, das PDF
   bleibt millimetergenau A4.
   ========================================================================== */
@media screen {
    html.blatt-zoom body { zoom: var(--blatt-skala, 1); }
}