/* Digglab – analoger Hardware-Look für Seitenleisten, Hub und Bedienelemente (alle Geräte).
   Wird NACH device.css / tracker.css / Hub-Styles geladen und überschreibt nur Seitenleiste, Karten, Hub-Leiste.
   Die Geräte selbst (#device) bleiben unangetastet. Widgets (Drehregler, LCD-Stepper, LED-Taster) baut analog.js. */
:root {
  --an-amber: #ffb347; --an-orange: #ff9a2e; --an-red: #ff4a40; --an-green: #6dff8a; --an-yellow: #ffe14a;
  --an-print: #d9d9d6; --an-dimprint: #a9aaa6; --an-keytxt: #e39a4f;
  --an-lcd: Menlo, Monaco, "SF Mono", monospace;
  --an-sans: "Helvetica Neue", -apple-system, Arial, sans-serif;
  /* gebürstetes, dunkel eloxiertes Aluminium */
  --an-brush:
    repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, rgba(0,0,0,.055) 1px 2px, rgba(255,255,255,0) 2px 3px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, rgba(255,255,255,0) 1px 7px),
    repeating-linear-gradient(180deg, rgba(0,0,0,.05) 0 2px, rgba(0,0,0,0) 2px 11px),
    linear-gradient(180deg, #37393e 0%, #2c2d32 45%, #25262a 100%);
  --an-brush-dark:
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,.06) 1px 2px, rgba(255,255,255,0) 2px 3px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, rgba(255,255,255,0) 1px 9px),
    linear-gradient(180deg, #232428 0%, #1b1c1f 100%);
  /* Kreuzschlitz-Schrauben (zwei Drehwinkel, wirkt echter) */
  --an-screw-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23c3c5c9'/%3E%3Cstop offset='.5' stop-color='%23686a6f'/%3E%3Cstop offset='1' stop-color='%23232428'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='6' cy='6' r='5.4' fill='%23000' opacity='.55'/%3E%3Ccircle cx='6' cy='5.8' r='5' fill='url(%23g)' stroke='%230a0a0b' stroke-width='.8'/%3E%3Cg transform='rotate(18 6 5.8)' stroke-linecap='round'%3E%3Cpath d='M3.4 5.8h5.2M6 3.2v5.2' stroke='%23141517' stroke-width='1.5'/%3E%3Cpath d='M3.7 6.5h4.6M6.7 3.5v4.6' stroke='%23ffffff' stroke-opacity='.18' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E");
  --an-screw-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23c3c5c9'/%3E%3Cstop offset='.5' stop-color='%23686a6f'/%3E%3Cstop offset='1' stop-color='%23232428'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='6' cy='6' r='5.4' fill='%23000' opacity='.55'/%3E%3Ccircle cx='6' cy='5.8' r='5' fill='url(%23g)' stroke='%230a0a0b' stroke-width='.8'/%3E%3Cg transform='rotate(57 6 5.8)' stroke-linecap='round'%3E%3Cpath d='M3.4 5.8h5.2M6 3.2v5.2' stroke='%23141517' stroke-width='1.5'/%3E%3Cpath d='M3.7 6.5h4.6M6.7 3.5v4.6' stroke='%23ffffff' stroke-opacity='.18' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E");
  /* Gummitaste */
  --an-key-bg: linear-gradient(180deg, #303135 0%, #232427 55%, #1b1c1f 100%);
  --an-key-sh: 0 3px 0 #0b0b0c, 0 4px 6px rgba(0,0,0,.6), 0 0 0 1px #060607, inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.5);
  --an-key-sh-down: 0 1px 0 #0b0b0c, 0 1px 2px rgba(0,0,0,.6), 0 0 0 1px #060607, inset 0 2px 4px rgba(0,0,0,.75);
  /* LEDs */
  --an-led-off: radial-gradient(circle at 40% 35%, #5b3c14, #2b1b09 70%);
  --an-led-amber: radial-gradient(circle at 40% 35%, #fff4d2 0%, #ffc066 30%, #ff9a1f 70%, #c76a06 100%);
  --an-led-yellow: radial-gradient(circle at 40% 35%, #fffbe0 0%, #ffe970 35%, #e2c21a 80%);
  --an-led-green: radial-gradient(circle at 40% 35%, #eaffef 0%, #8dffa4 35%, #2fcf55 80%);
  --an-led-green-off: radial-gradient(circle at 40% 35%, #234a2c, #0f2414 70%);
}

/* ================= Seitenleiste = Rack-Gehäuse ================= */
#side {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, rgba(0,0,0,0) 1px 4px),
    linear-gradient(180deg, #19191c, #141416);
  border-left: 2px solid #050506; box-shadow: inset 1px 0 0 rgba(255,255,255,.05), inset 8px 0 14px -10px #000;
}
#side .tab { padding: 14px 16px 18px; }
#side ::-webkit-scrollbar { width: 11px; height: 11px; }
#side ::-webkit-scrollbar-track { background: #0d0d0f; box-shadow: inset 0 0 3px #000; }
#side ::-webkit-scrollbar-thumb { border-radius: 6px; border: 2px solid #0d0d0f;
  background: repeating-linear-gradient(180deg, #4a4b50 0 2px, #33343a 2px 4px); }

/* Marke in der Seitenleiste (nur ohne Hub sichtbar) */
#side #brand { background: var(--an-brush-dark); padding: 11px 16px 8px; border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
#side #brand small { font: 700 9.5px/1.2 var(--an-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--an-dimprint); }

/* ================= Reiter = Reihe Hardware-Taster mit LED ================= */
#side #tabs {
  display: flex; gap: 7px; align-items: stretch; padding: 10px 12px 12px; border-bottom: 1px solid #000;
  background: var(--an-brush-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.04), 0 3px 6px rgba(0,0,0,.7); position: relative; z-index: 2;
}
#side #tabs > button {
  flex: 1 1 0; min-width: 0; position: relative; margin: 0; padding: 17px 4px 8px;
  border: 0; border-radius: 5px; background: var(--an-key-bg); box-shadow: var(--an-key-sh);
  color: #cfccc4; font: 700 10px/1.15 var(--an-sans); letter-spacing: .08em; text-transform: uppercase;
  white-space: normal; overflow: hidden; overflow-wrap: normal; text-shadow: 0 1px 0 #000;
  transition: transform .05s, box-shadow .05s, color .1s;
}
#side #tabs > button::before {          /* LED */
  content: ""; position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--an-led-off); box-shadow: 0 0 0 1px rgba(0,0,0,.8), inset 0 1px 1px rgba(0,0,0,.6);
}
#side #tabs > button:where(:hover) { color: #fff; }
#side #tabs > button.act { transform: translateY(2px); box-shadow: var(--an-key-sh-down); color: #ffdcae;
  background: linear-gradient(180deg, #27282c, #1a1b1e); }
#side #tabs > button.act::before { background: var(--an-led-amber); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 5px #ffb347, 0 0 12px rgba(255,179,71,.7); }
/* INFO-Taste: gelbe LED */
#side #tabs > #infoToggle { flex: 0 0 auto; padding: 17px 13px 8px; color: var(--an-yellow); border: 0; border-radius: 5px;
  background: var(--an-key-bg); box-shadow: var(--an-key-sh); font: 800 10.5px/1.1 var(--an-sans); letter-spacing: .14em; }
#side #tabs > #infoToggle::before { background: radial-gradient(circle at 40% 35%, #6a5a14, #2e2608 70%); }
#side #tabs > #infoToggle.on { transform: translateY(2px); box-shadow: var(--an-key-sh-down), inset 0 0 14px rgba(255,225,74,.18); color: #fff3a6;
  background: linear-gradient(180deg, #2b2a20, #1d1c15); }
#side #tabs > #infoToggle.on::before { background: var(--an-led-yellow); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 6px #ffe14a, 0 0 14px rgba(255,225,74,.7); }
/* HOVER-Taste (hover.js): kompakt wie INFO, nur die eine Reiter-LED oben – an = amber, aus = dunkel */
#side #tabs > #hoverToggle { flex: 0 0 auto; padding: 17px 11px 8px; color: #cfccc4; font: 800 10.5px/1.1 var(--an-sans); letter-spacing: .12em; }
#side #tabs > #hoverToggle.on { transform: translateY(2px); box-shadow: var(--an-key-sh-down); color: #ffdcae; background: linear-gradient(180deg, #27282c, #1a1b1e); }
#side #tabs > #hoverToggle.on::before { background: var(--an-led-amber); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 5px #ffb347, 0 0 12px rgba(255,179,71,.7); }
/* Tracker: DE/EN im Reiter-Streifen (nur ohne Hub sichtbar) */
#side #langSwitch { gap: 5px; margin-left: 6px; align-items: stretch; }
#side #langSwitch button { position: relative; padding: 17px 9px 8px; border: 0; border-radius: 5px; background: var(--an-key-bg); box-shadow: var(--an-key-sh);
  color: #cfccc4; font: 800 10px/1.1 var(--an-sans); letter-spacing: .1em; }
#side #langSwitch button::before { content: ""; position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--an-led-off); box-shadow: 0 0 0 1px rgba(0,0,0,.8); }
#side #langSwitch button.act { transform: translateY(2px); box-shadow: var(--an-key-sh-down); color: #ffdcae; background: linear-gradient(180deg, #27282c, #1a1b1e); }
#side #langSwitch button.act::before { background: var(--an-led-amber); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 5px #ffb347; }

/* ================= Karten = verschraubte Frontplatten ================= */
.card, #side .card {
  position: relative;
  background-color: #2b2c31;
  background-image: var(--an-screw-a), var(--an-screw-b), var(--an-screw-b), var(--an-screw-a), var(--an-brush);
  background-position: left 7px top 7px, right 7px top 7px, left 7px bottom 7px, right 7px bottom 7px, 0 0;
  background-size: 11px 11px, 11px 11px, 11px 11px, 11px 11px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  border: 1px solid #0b0b0c; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.04), inset -1px 0 0 rgba(0,0,0,.3),
    0 4px 8px rgba(0,0,0,.65), 0 1px 0 #000;
  padding: 15px 26px 16px; margin-bottom: 14px; color: #e4e2dc;
}
/* Siebdruck-Überschrift mit Gravur-Klammer */
.card h3, #side .card h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 11px;
  font: 700 10.5px/1.2 var(--an-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--an-print);
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
}
.card h3::after, #side .tut-list .chap::after {
  content: ""; flex: 1 1 auto; min-width: 20px; height: 6px; margin-top: 6px;
  border-top: 1.5px solid rgba(217,217,214,.55); border-right: 1.5px solid rgba(217,217,214,.55); border-radius: 0 3px 0 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.6);
}
#side .note, .card .note { color: var(--an-dimprint); }
#side .card.note { font-size: 11.5px; line-height: 1.55; }

/* ================= Taster (Knöpfe) ================= */
#side button, .card button {
  position: relative; border: 0; border-radius: 6px; margin: 0; padding: 8px 13px 7px;
  background: var(--an-key-bg); box-shadow: var(--an-key-sh); color: var(--an-keytxt);
  font: 700 10.5px/1.25 var(--an-sans); letter-spacing: .07em; text-transform: uppercase; text-shadow: 0 1px 0 #000;
  cursor: pointer; transition: transform .04s, box-shadow .04s, color .12s, text-shadow .12s;
}
#side button:where(:hover), .card button:where(:hover) { color: #ffb15c; text-shadow: 0 0 5px rgba(255,138,31,.55), 0 1px 0 #000; }
#side button:where(:active), .card button:where(:active) { transform: translateY(2px); box-shadow: var(--an-key-sh-down); }
#side button:where(:disabled), .card button:where(:disabled) { opacity: .45; cursor: default; transform: none; }
#side button:where(:focus-visible), .card button:where(:focus-visible) { outline: 2px solid rgba(255,179,71,.6); outline-offset: 2px; }
.card .row, #side .row { gap: 9px; row-gap: 11px; }
/* Tutorial: Weiter-Taste blinkt weiterhin gelb */
#side #tutNext.pulse { color: var(--an-yellow); box-shadow: var(--an-key-sh), 0 0 0 1px #6b5a1c, 0 0 10px rgba(255,225,74,.35); }
/* Tracker: „Zeig es mir“ mit blauer LED, Konzept-Chips als kleine Taster */
#side #tutShow { padding-left: 24px; color: #9fdcff; }
#side #tutShow::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e8f7ff, #5cc8ff 45%, #1f6ea8); box-shadow: 0 0 0 1px #000, 0 0 6px #5cc8ff; }
#side #conceptList { gap: 7px; }
#side #conceptList button { padding: 5px 9px 4px; font-size: 9.5px; color: #d9d9d6; border-radius: 4px; }
#side #conceptList button:where(:hover) { color: #ffb15c; }

/* ================= LED-Taster (Checkbox) ================= */
#side input[type=checkbox], .card input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-block; vertical-align: -1px;
  width: 9px; height: 9px; margin: 0 2px 0 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--an-led-off); box-shadow: 0 0 0 1px #000, inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.12);
}
#side input[type=checkbox]:checked, .card input[type=checkbox]:checked {
  background: var(--an-led-amber); box-shadow: 0 0 0 1px #000, 0 0 5px #ffb347, 0 0 12px rgba(255,179,71,.75);
}
#side input[type=checkbox]:disabled, .card input[type=checkbox]:disabled { opacity: .4; cursor: default; }
label.an-ledkey {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 6px; border-radius: 6px; cursor: pointer;
  background: var(--an-key-bg); box-shadow: var(--an-key-sh); color: var(--an-print) !important;
  font: 700 10.5px/1.2 var(--an-sans) !important; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 0 #000;
  -webkit-user-select: none; user-select: none; transition: transform .04s, box-shadow .04s;
}
label.an-ledkey:active { transform: translateY(2px); box-shadow: var(--an-key-sh-down); }
label.an-ledkey.an-on { color: #ffe2bb !important; }
label.an-ledrow { display: flex !important; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
label.an-ledrow.an-on { color: #fff; }

/* ================= LCD-Fenster (Text, Suche, Zahl, Auswahl) ================= */
#side select, #side input[type=number], #side input[type=text], #side input[type=search], #side input:not([type]),
.card select, .card input[type=number], .card input[type=text], .card input[type=search] {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  font: 600 12.5px/1.25 var(--an-lcd); color: var(--an-amber); text-shadow: 0 0 4px rgba(255,179,71,.55);
  background: linear-gradient(180deg, #08090a, #040506); border: 1px solid #000; border-radius: 3px;
  box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px rgba(255,255,255,.035), 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px #17181b;
  padding: 7px 9px; caret-color: var(--an-amber); outline: none;
}
#side input::placeholder, .card input::placeholder { color: #8a6a3a; text-shadow: none; opacity: 1; }
#side select:focus, #side input:not([type=checkbox]):not([type=range]):focus, .card select:focus, .card input:focus {
  box-shadow: inset 0 2px 6px #000, inset 0 0 0 1px rgba(255,179,71,.25), 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px #17181b, 0 0 0 3px rgba(255,179,71,.35);
}
#side select:disabled, .card select:disabled { opacity: .5; }
#side select option, .card select option { background: #101113; color: #ffcf8a; text-shadow: none; }
#side input[type=search]::-webkit-search-decoration, #side input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; }
#side input[type=search]::-webkit-search-cancel-button { filter: sepia(1) saturate(4) hue-rotate(-12deg); }
#side input[type=number], .card input[type=number] { -moz-appearance: textfield; text-align: right; }
#side input[type=number]::-webkit-inner-spin-button, #side input[type=number]::-webkit-outer-spin-button,
.card input[type=number]::-webkit-inner-spin-button, .card input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#side #srch { font-size: 13px !important; padding: 9px 11px !important; }

/* Zahl: LCD + ▲▼-Minitaster */
.an-num { display: inline-flex; align-items: stretch; gap: 4px; vertical-align: middle; }
.an-num > input { cursor: ns-resize; }
.an-num > input:focus { cursor: text; }
.an-spin { display: inline-flex; flex-direction: column; gap: 3px; justify-content: center; }
/* Auswahl: ◀ LCD ▶ */
.an-sel { display: inline-flex; align-items: center; gap: 5px; position: relative; vertical-align: middle; min-width: 0; max-width: 100%; }
.an-sel > select { flex: 1 1 auto; min-width: 0; padding-right: 22px !important; cursor: pointer; text-overflow: ellipsis; }
.an-sel > .an-caret { position: absolute; right: 36px; top: 50%; margin-top: -6px; font: 9px/12px var(--an-lcd); color: var(--an-amber); opacity: .8; pointer-events: none; text-shadow: 0 0 4px rgba(255,179,71,.6); }
#side button.an-mini, .card button.an-mini {
  flex: none; padding: 0; width: 22px; height: 22px; border-radius: 4px; font: 700 9px/22px var(--an-sans); letter-spacing: 0;
  color: var(--an-print); text-align: center;
}
#side .an-spin button.an-mini, .card .an-spin button.an-mini { width: 20px; height: 13px; font-size: 7px; line-height: 13px; border-radius: 3px; box-shadow: 0 2px 0 #0b0b0c, 0 0 0 1px #060607, inset 0 1px 0 rgba(255,255,255,.12); }
#side .an-spin button.an-mini:where(:active), .card .an-spin button.an-mini:where(:active) { transform: translateY(1px); box-shadow: 0 1px 0 #0b0b0c, 0 0 0 1px #060607, inset 0 1px 3px rgba(0,0,0,.7); }

/* ================= Drehregler (range) ================= */
.an-knob { position: relative; display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; -webkit-user-select: none; user-select: none; }
.an-knob > input[type=range] { position: absolute; left: 0; top: 50%; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.an-dial { position: relative; flex: none; width: 46px; height: 46px; cursor: ns-resize; touch-action: none; }
.an-scale { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.an-cap {
  position: absolute; left: 7px; top: 7px; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1c1c1e 0 50%, transparent 51%), repeating-conic-gradient(#2e2e31 0 6deg, #0c0c0d 6deg 12deg);
  box-shadow: 0 4px 7px rgba(0,0,0,.85), 0 0 0 1px #000, inset 0 1px 1px #5a5a5e;
}
.an-cap::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle at 42% 32%, #3c3c40, #141416 60%, #0a0a0b); }
.an-ptr { position: absolute; left: 50%; top: 2px; width: 2.5px; height: 11px; margin-left: -1.25px; background: #f2f2f2; border-radius: 2px; z-index: 1; box-shadow: 0 0 2px rgba(0,0,0,.6); }
.an-knob:focus-within .an-cap, .an-knob.an-drag .an-cap { box-shadow: 0 4px 7px rgba(0,0,0,.85), 0 0 0 1px #000, inset 0 1px 1px #5a5a5e, 0 0 0 3px rgba(255,179,71,.35); }
.an-knob.an-dis { opacity: .45; pointer-events: none; }
/* Wert-Anzeige (eigenes LCD oder vorhandenes <b>) */
.an-lcd, #side b.an-val, .card b.an-val {
  display: inline-block; min-width: 26px; padding: 3px 6px; text-align: right;
  font: 700 12px/1.2 var(--an-lcd) !important; color: var(--an-amber) !important; text-shadow: 0 0 4px rgba(255,179,71,.6);
  background: linear-gradient(180deg, #08090a, #040506); border-radius: 3px; border: 1px solid #000;
  box-shadow: inset 0 2px 4px #000, 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px #17181b;
}

/* ================= Listen = beschriftete Leisten mit LED ================= */
#side .tut-list .chap {
  display: flex; align-items: center; gap: 9px; margin: 16px 0 6px; padding: 0 2px;
  font: 700 10px/1.2 var(--an-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--an-print); text-shadow: 0 1px 0 #000;
}
#side .tut-list .chap:first-child { margin-top: 4px; }
#side .tut-list .les {
  position: relative; align-items: center; padding: 7px 10px 7px 27px; margin: 0; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.05));
  border-bottom: 1px solid rgba(0,0,0,.75); box-shadow: 0 1px 0 rgba(255,255,255,.045);
  color: #e4e2dc; transition: background .12s;
}
#side .tut-list .les::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--an-led-off); box-shadow: 0 0 0 1px #000, inset 0 1px 1px rgba(0,0,0,.6); transition: box-shadow .12s;
}
#side .tut-list .les:hover { background: linear-gradient(90deg, rgba(255,179,71,.08), rgba(255,179,71,0) 70%); }
#side .tut-list .les:hover::before { background: var(--an-led-amber); box-shadow: 0 0 0 1px #000, 0 0 5px #ffb347, 0 0 10px rgba(255,179,71,.6); }
#side .tut-list .les.done { color: #9ff0b2; }
#side .tut-list .les.done::before { background: var(--an-led-green); box-shadow: 0 0 0 1px #000, 0 0 5px rgba(109,255,138,.8); }
#side .tut-list .les > .note:last-child:not(:first-child) {
  flex: none; min-width: 30px; padding: 1px 6px; text-align: right; border-radius: 2px;
  font: 600 10.5px/1.35 var(--an-lcd); color: var(--an-amber); text-shadow: 0 0 4px rgba(255,179,71,.55);
  background: #050607; box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255,255,255,.08);
}
#side .tut-list .les span .note { color: var(--an-dimprint); }

/* ================= Tutorial-Box = hinterleuchtetes Anzeigefeld ================= */
#side #tutBox {
  background: linear-gradient(180deg, #211b0c, #17130a); border: 1px solid #000; border-radius: 4px; padding: 12px 14px;
  box-shadow: 0 0 0 3px #2a2b2f, 0 0 0 4px #000, 0 1px 0 4px rgba(255,255,255,.06), inset 0 2px 8px rgba(0,0,0,.8), inset 0 0 40px rgba(255,179,71,.06), 0 8px 16px rgba(0,0,0,.8);
  margin: 4px 4px 16px;
}
#side #tutBox .prog { height: 7px; border-radius: 1px; background: repeating-linear-gradient(90deg, #3a3218 0 7px, transparent 7px 9px); }
#side #tutBox .prog i { background: repeating-linear-gradient(90deg, var(--an-yellow) 0 7px, transparent 7px 9px); box-shadow: none; filter: drop-shadow(0 0 3px rgba(255,225,74,.7)); }
#side #tutDo { background: #0f0d07; border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 4px #000, 0 1px 0 rgba(255,255,255,.05); }

/* Tastenkappen */
#side .kbd, #side #keyHelp kbd {
  display: inline-block; padding: 0 5px; margin: 1px 1px; border: 0; border-radius: 3px;
  font: 700 10.5px/17px var(--an-lcd); color: #1b1b1c; text-shadow: none;
  background: linear-gradient(180deg, #f1efe9, #c8c6bf); box-shadow: 0 2px 0 #7a7871, 0 3px 3px rgba(0,0,0,.6), inset 0 1px 0 #fff;
}
#side span.kbd[data-l], #side span.kbd[data-c] { cursor: pointer; font-family: var(--an-sans); font-size: 10.5px; }

/* ================= Tabellen / Prüfliste = vertiefte Anzeige ================= */
#side .card table { background: #0c0d0f; border-radius: 3px; box-shadow: inset 0 2px 6px #000, 0 1px 0 rgba(255,255,255,.08); font: 11px/1.35 var(--an-lcd); }
#side .card th { font: 700 9px/1.2 var(--an-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--an-print); border-bottom: 1px solid #000; padding: 6px 6px 5px; box-shadow: 0 1px 0 rgba(255,255,255,.05); }
#side .card td { color: #e8dcc6; border-bottom: 1px solid rgba(255,255,255,.04); padding: 3px 6px; }
#side .card tr:hover td { background: rgba(255,179,71,.06); }
#side ul.issues { background: #0c0d0f; border-radius: 3px; padding: 4px 8px; box-shadow: inset 0 2px 5px #000, 0 1px 0 rgba(255,255,255,.08); }
#side ul.issues:empty { display: none; }
#side ul.issues li { border-bottom: 1px solid rgba(255,255,255,.05); font-family: var(--an-lcd); font-size: 11px; }
#side .status { font: 700 13px/1.3 var(--an-sans); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
#side .status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--an-led-off); box-shadow: 0 0 0 1px #000; }
#side .status.ok::before { background: var(--an-led-green); box-shadow: 0 0 0 1px #000, 0 0 6px rgba(109,255,138,.8); }
#side .status.bad::before { background: radial-gradient(circle at 40% 35%, #ffe0dc, #ff4a40 45%, #a8140c); box-shadow: 0 0 0 1px #000, 0 0 6px rgba(255,74,64,.8); }
#side .status.warnc::before { background: var(--an-led-amber); box-shadow: 0 0 0 1px #000, 0 0 6px rgba(255,179,71,.8); }

/* ================= Chop-Reiter (nur Rahmen/Einfassung; Inhalt zeichnet spchop.js) ================= */
#side #chDrop {
  border-color: #4a4b50; border-radius: 4px !important; background: repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 6px, rgba(0,0,0,0) 6px 12px), #141518;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.08);
  font: 700 10.5px/1.5 var(--an-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--an-dimprint);
}
#side #chDrop:hover { color: var(--an-amber); }
#side #chFiles span { font-family: var(--an-lcd); }
#side #chWave {
  border-radius: 3px !important; margin-top: 12px !important;
  box-shadow: 0 0 0 3px #08080a, 0 0 0 4px #3b3c41, 0 0 0 5px #0a0a0b, 0 2px 0 5px rgba(255,255,255,.07), 0 6px 12px 4px rgba(0,0,0,.6);
}
#side #chInfo { margin-top: 10px; }
#side #chHelp { margin-top: 8px; line-height: 1.45; }

/* Tracker: Projekt-Info, Tutorial-Animation */
#side #tutAnim canvas { border: 1px solid #000; box-shadow: 0 0 0 3px #2a2b2f, 0 0 0 4px #000; }

/* ================= Hub-Leiste = 1-HE-Rack-Blende ================= */
body > #bar {
  position: relative; height: 46px; box-sizing: border-box; gap: 12px; padding: 0 44px 0 46px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.06) 1px 2px, rgba(255,255,255,0) 2px 3px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, rgba(255,255,255,0) 1px 6px),
    linear-gradient(180deg, #3a3c41 0%, #2d2e33 50%, #232428 100%);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.8);
  z-index: 2;
}
/* Rack-Ohren mit Langloch und Schraube */
body > #bar::before, body > #bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 32px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 22 34'%3E%3Crect x='3' y='7' width='16' height='20' rx='8' fill='%23060607'/%3E%3Crect x='3' y='7' width='16' height='20' rx='8' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='.8' transform='translate(0 .6)'/%3E%3Cdefs%3E%3CradialGradient id='g' cx='.38' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23d0d2d6'/%3E%3Cstop offset='.5' stop-color='%23707277'/%3E%3Cstop offset='1' stop-color='%23262729'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='11' cy='17' r='6' fill='url(%23g)' stroke='%230a0a0b' stroke-width='.8'/%3E%3Cg transform='rotate(24 11 17)' stroke-linecap='round'%3E%3Cpath d='M8 17h6M11 14v6' stroke='%23141517' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") center / 22px 34px no-repeat,
    linear-gradient(180deg, #3e4045, #2a2b30);
}
body > #bar::before { left: 0; box-shadow: inset -1px 0 0 #000, inset -2px 0 0 rgba(255,255,255,.08); }
body > #bar::after { right: 0; box-shadow: inset 1px 0 0 #000, inset 2px 0 0 rgba(255,255,255,.08); }
body > #bar #logo { text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255,255,255,.08); }
body > #bar #tag { font: 700 9.5px/1 var(--an-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--an-dimprint); text-shadow: 0 1px 0 #000; margin-right: 6px; }
/* Gerätewahl = Taster mit LED */
body > #bar .dev, body > #bar .lang {
  position: relative; border: 0; border-radius: 5px; cursor: pointer;
  background: var(--an-key-bg); box-shadow: var(--an-key-sh); color: #d6d3cb; text-shadow: 0 1px 0 #000;
  transition: transform .05s, box-shadow .05s, color .1s;
}
body > #bar .dev { padding: 7px 14px 6px 26px; font: 800 11px/1.1 var(--an-sans); letter-spacing: .09em; }
body > #bar .dev small { font: 600 9px/1 var(--an-sans); letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin-left: 5px; }
body > #bar .dev::before, body > #bar .lang::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--an-led-off); box-shadow: 0 0 0 1px rgba(0,0,0,.85), inset 0 1px 1px rgba(0,0,0,.6);
}
body > #bar .dev:hover, body > #bar .lang:hover { color: #fff; }
body > #bar .dev.act, body > #bar .lang.act {
  transform: translateY(2px); box-shadow: var(--an-key-sh-down); color: #ffdcae; background: linear-gradient(180deg, #27282c, #1a1b1e);
}
body > #bar .dev.act::before, body > #bar .lang.act::before { background: var(--an-led-amber); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 6px #ffb347, 0 0 12px rgba(255,179,71,.7); }
/* DE/EN = zwei kleine LED-Taster */
body > #bar .lang { padding: 7px 9px 6px 20px; font: 800 10px/1.1 var(--an-sans); letter-spacing: .1em; margin-left: -4px; }
body > #bar .lang::before { left: 8px; width: 6px; height: 6px; margin-top: -3px; }
body > #bar .lang + .lang { margin-left: -6px; }

/* Beschriftungen an Reglern/Feldern als Siebdruck */
#side .card .row > label.note, .card .row > label.note {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 10px/1.2 var(--an-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--an-print); text-shadow: 0 1px 0 #000;
}
#side .card .row > label.note.an-ledkey { gap: 7px; }

/* Lektions-/Funktionslisten auf einer verschraubten Platte */
#side #tutList:not(:empty), #side #ctrlList:not(:empty), #side #srchRes:not(:empty) {
  background-color: #26272b;
  background-image: var(--an-screw-a), var(--an-screw-b), var(--an-screw-b), var(--an-screw-a), var(--an-brush);
  background-position: left 7px top 7px, right 7px top 7px, left 7px bottom 7px, right 7px bottom 7px, 0 0;
  background-size: 11px 11px, 11px 11px, 11px 11px, 11px 11px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  border: 1px solid #0b0b0c; border-radius: 4px; padding: 10px 24px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.65), 0 1px 0 #000;
}
#side #srchRes:not(:empty) { margin-top: 10px; }
#side .tut-list .les { background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.18)); }

/* Dialoge (Karte direkt im Body, z. B. „Neues Projekt?“): genug Rand für die Schrauben */
body > div > .card { padding: 18px 26px !important; }

/* Schmale Fenster: Reiter-Beschriftung enger setzen statt abschneiden */
@media (max-width: 1320px) {
  #side #tabs { gap: 5px; padding: 10px 8px 12px; }
  #side #tabs > button, #side #tabs > #infoToggle { font-size: 9px; letter-spacing: .03em; padding-left: 3px; padding-right: 3px; }
  #side #tabs > #infoToggle, #side #tabs > #hoverToggle { padding-left: 8px; padding-right: 8px; }
  #side #langSwitch button { padding-left: 6px; padding-right: 6px; }
  body > #bar { gap: 9px; }
  body > #bar .dev small { display: none; }
}
@media (max-width: 1100px) {
  #side #tabs > button, #side #tabs > #infoToggle { font-size: 8.5px; letter-spacing: 0; }
  #side .card { padding-left: 22px; padding-right: 22px; }
  body > #bar #tag { display: none; }
}

/* INFO + HOVER zusammengelegt: der eine Schalter heißt INFO (gelbe Schrift wie früher INFO, LED amber = an) */
#side #tabs > #hoverToggle { color: #ffe14a; }

/* INFO-Schalter: dieselbe LED blinkt, solange die Info-Ebene (ausführliche Karte, Klicks abgefangen) aktiv ist */
#side #tabs > #hoverToggle.infomode::before { animation: an-ledblink .9s steps(1, end) infinite; }
@keyframes an-ledblink { 50% { background: var(--an-led-off); box-shadow: 0 0 0 1px rgba(0,0,0,.8), inset 0 1px 1px rgba(0,0,0,.6); } }

/* Reiter nie abschneiden: gleich breit, aber kein Reiter schmaler als sein längstes Wort (z. B. „BEDIENELEMENTE“) – die anderen geben Platz ab */
#side #tabs > button[data-tab] { min-width: min-content; hyphens: manual; }

/* ---- Pads-Tabelle kompakt: alle Spalten bis MG/Len ohne horizontales Scrollen (auch bei 1100 px) ---- */
#side .card #padTable { width: 100%; }
#side .card #padTable th { padding: 5px 2px 4px; font-size: 8.5px; letter-spacing: 0; text-align: center; }
#side .card #padTable td { padding: 2px 2px; text-align: center; }
#side .card #padTable th:nth-child(3), #side .card #padTable td:nth-child(3) { text-align: left; }
#side .card #padTable td:first-child, #side .card #padTable td:last-child { font-size: 10.5px; }
#side .card #padTable input.padEd, #side .card #padTable select.padEd { font: 600 11px/1.2 var(--an-lcd); padding: 3px 4px; min-width: 0; }
#side .card #padTable .padName { width: 84px; text-overflow: ellipsis; }
#side .card #padTable .padLv { width: 36px; }
#side .card #padTable .padBpm { width: 50px; }
#side .card #padTable select.padEd { padding-right: 3px; }
#side .card #padTable .padPlay, #side .card #padTable .padSwap { min-width: 0; width: 22px; padding: 3px 0; font-size: 11px; }
#side .card #padTable .padFlag { width: 15px; height: 15px; }
@media (min-width: 1321px) { #side .card #padTable .padName { width: 124px; } }

/* ===== F24 Lesbarkeit (schrift, 02.11.2026) – Beschreibungstexte seitenweit (SP + Tracker): >= 14 px, Zeilenhöhe >= 1.45,
   Kontrast WCAG AA (>= 4.5:1). Gerät (#stage), OLED/LCD (.an-lcd …), Analog-Beschriftungen (label, h3, th, .chFdL) und Tasten bleiben unverändert.
   Steht absichtlich am Ende von analog.css (nach device.css / tracker.css geladen). Test: coord/t_schrift.mjs ===== */
#side .note, #side .msg, #side .card.note, #side #chDrop { font-size: 14px; line-height: 1.5; }
#side .note { color: #cdc8bc; }                                   /* vorher #8d8d88 / #9a9a96 – heller, ruhiger Papierton */
#side .note.keys, #side #keysNote { font-size: 14px !important; line-height: 1.8 !important; }   /* #keysNote: Inline-Stil in sp404.html */
#side .status { font-size: 14px; line-height: 1.45; }
#side .tut-list .les { font-size: 14px; line-height: 1.45; }
#side .tut-list .chap { font-size: 12px; line-height: 1.45; }     /* Kapitel-Überschrift (Analog-Druck), nur etwas größer */
#side #tutBox .t, #side #tutTitle { font-size: 15px; line-height: 1.45; }
#side #tutBox .s, #side #tutText { font-size: 15px; line-height: 1.55; }
#side #tutText .why { font-size: 14px; line-height: 1.5; color: #d6c995; }
#side #tutCount { font-size: 14px; line-height: 1.45; color: #ffe14a; }   /* Gelb wie in tutor.js (sonst von #side .note überschrieben) */
#side #tutDo { font-size: 14px; line-height: 1.5; }
#side #tutDo .nt { font-size: 14px; color: #c9c4b8; }
#side #tutDo .vb { font-size: 14px; }
#side .tut-live { font-size: 14px; line-height: 1.45; }
#side .ta-cap, #side #tutAnim .cap { font-size: 14px; line-height: 1.5; color: #ddd6c2; }
#side .tut-hint { font-size: 14px; line-height: 1.5; }
#side .tut-fin-sub { font-size: 14px; line-height: 1.5; }
#side .chRow .chMeta { font-size: 14px; line-height: 1.45; color: #bdb9ae; }
/* Info-Karte (Controls-Reiter / Info-Ebene) */
#infoCard { width: 400px; font-size: 14px; line-height: 1.5; }
#infoCard .ic-s, #infoCard .ic-tips li, #infoCard .ic-t { font-size: 14px; line-height: 1.5; }
#infoCard .ic-ref { font-size: 14px; }
#infoCard .ic-foot { font-size: 14px; line-height: 1.5; color: #bdb9ae; }
/* Hub-Leiste: Marke bleibt klein (Analog-Druck), aber AA-Kontrast */
body > #bar #by { color: #b9b6ad; }
/* F24: bei schmalem Fenster ragte der DE/EN-Schalter 4 px aus der Seitenleiste (vorbestehend, 1100 px) – etwas enger setzen */
@media (max-width: 1250px) { #side #langSwitch { margin-left: 2px; gap: 1px; } #side #langSwitch button { padding-left: 6px; padding-right: 6px; } }
/* F24: Datei-Zeilen im Chop-Reiter – bei größerer Schrift bricht die Meta-Angabe (Dauer · Slices · Bank) in eine zweite Zeile statt abgeschnitten zu werden */
#side .chRow { flex-wrap: wrap; row-gap: 2px; }
#side .chRow .chName { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#side .chRow .chMeta { margin-left: auto; }
/* Nr. 32: Tastatur-Übersicht („?“ / H) – Overlay im Analog-Look, Tastenkappen wie im Tastatur-Reiter */
#keyOverlay { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.62); }
#keyOverlay .ko-card { max-width: min(760px, 94vw); max-height: 88vh; overflow: auto; margin: 0 14px; padding: 14px 18px;
  background: linear-gradient(180deg, #2a2b30, #1e1f23); border: 1px solid #000; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); }
#keyOverlay h3 { margin: 0 0 10px; font: 700 13px var(--an-sans, Arial); letter-spacing: 1.5px; text-transform: uppercase; color: var(--an-yellow, #ffe14a); }
#keyOverlay .ko-body { font-size: 15px; line-height: 1.75; color: #e6e2d8; }
#keyOverlay .ko-foot { margin-top: 10px; font-size: 12.5px; color: #b9b4a8; }
#keyOverlay .kbd, #keyOverlay kbd { display: inline-block; padding: 0 6px; margin: 1px 1px; border: 0; border-radius: 3px;
  font: 700 12px/19px var(--an-lcd, Menlo, monospace); color: #1b1b1c; text-shadow: none;
  background: linear-gradient(180deg, #f1efe9, #c8c6bf); box-shadow: 0 2px 0 #7a7871, 0 3px 3px rgba(0,0,0,.6), inset 0 1px 0 #fff; }
/* N2 (n2pad): Lade-Menü am LEEREN Pad (Rechtsklick) + Drag-&-Drop-Markierung der Pads – Analog-Look (Rack-Blech, Gummitasten, LED, LCD) */
#padLoadPop { position: fixed; z-index: 10040; width: 262px; box-sizing: border-box; padding: 10px 11px 11px;
  background: var(--an-brush); border: 1px solid #000; border-radius: 6px; color: #e6e2d8; font: 500 14px/1.45 var(--an-sans);
  box-shadow: 0 12px 34px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.1); }
#padLoadPop.pl-sd { width: 360px; }
#padLoadPop.pl-msg, #padLoadPop.pl-busy { width: 320px; cursor: default; }
#padLoadPop .pl-h { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font: 800 11px/1.2 var(--an-sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--an-print); text-shadow: 0 1px 0 #000; }
#padLoadPop .pl-h b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
#padLoadPop .pl-pad { flex: 0 0 auto; padding: 3px 6px; border-radius: 3px; font: 700 11.5px/1 var(--an-lcd); letter-spacing: .04em; color: #ffcf8a;
  background: linear-gradient(180deg, #1d1206, #120b03); box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255,255,255,.08); text-shadow: 0 0 4px rgba(255,179,71,.6); }
#padLoadPop .pl-led { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--an-led-amber);
  box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 5px #ffb347, 0 0 11px rgba(255,179,71,.6); }
#padLoadPop .pl-led.pl-ok { background: var(--an-led-green); box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 6px #6dff8a; }
#padLoadPop .pl-led.pl-err { background: radial-gradient(circle at 40% 35%, #ffe0dc 0%, #ff7a70 35%, #d42a20 80%); box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 6px #ff4a40; }
#padLoadPop .pl-led.pl-blink { animation: plBlink .5s steps(2, end) infinite; }
@keyframes plBlink { 50% { background: var(--an-led-off); box-shadow: 0 0 0 1px rgba(0,0,0,.75); } }
#padLoadPop .pl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 8px; }
#padLoadPop button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 6px 8px; border: 0; border-radius: 4px;
  cursor: pointer; color: #e9e5da; background: var(--an-key-bg); box-shadow: var(--an-key-sh); font: 800 11px/1.15 var(--an-sans);
  letter-spacing: .07em; text-transform: uppercase; text-shadow: 0 1px 0 #000; }
#padLoadPop button:active { box-shadow: var(--an-key-sh-down); transform: translateY(2px); }
#padLoadPop button:focus-visible { outline: 2px solid var(--an-amber); outline-offset: 2px; }
#padLoadPop button[disabled] { opacity: .45; cursor: default; }
#padLoadPop button.pl-big { min-height: 46px; flex-direction: column; gap: 3px; color: #ffd9a6; font-size: 11.5px; }
#padLoadPop button.pl-big svg { width: 20px; height: 20px; color: var(--an-amber); filter: drop-shadow(0 0 3px rgba(255,179,71,.45)); }
#padLoadPop button.pl-sub { color: #cfccc4; font-size: 10.5px; }
#padLoadPop .pl-note { margin-top: 9px; font-size: 14px; line-height: 1.45; color: #cfcac0; }
#padLoadPop .pl-note.pl-top { margin: 0 0 8px; }
#padLoadPop .pl-list { max-height: 236px; overflow: auto; margin: 0 0 9px; padding: 3px; border-radius: 4px; background: #111214; box-shadow: inset 0 1px 4px #000, 0 1px 0 rgba(255,255,255,.06); }
#padLoadPop button.pl-it { display: grid; grid-template-columns: 10px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; justify-content: stretch;
  width: 100%; min-height: 0; padding: 5px 7px; margin: 0 0 2px; background: transparent; box-shadow: none; transform: none; text-align: left;
  text-transform: none; letter-spacing: 0; font: 600 14px/1.3 var(--an-sans); color: #e6e2d8; }
#padLoadPop button.pl-it:hover { background: rgba(255,255,255,.05); }
#padLoadPop button.pl-it .pl-led { grid-row: 1 / span 2; background: var(--an-led-off); box-shadow: 0 0 0 1px rgba(0,0,0,.8); }
#padLoadPop button.pl-it[aria-selected="true"] { background: rgba(255,179,71,.1); color: #ffe2b8; }
#padLoadPop button.pl-it[aria-selected="true"] .pl-led { background: var(--an-led-amber); box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 6px #ffb347; }
#padLoadPop .pl-fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#padLoadPop .pl-fm { grid-column: 2; font: 500 12px/1.3 var(--an-lcd); color: #b9b4a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#padLoadPop ul.pl-msg { margin: 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; }
#padLoadPop ul.pl-msg li { margin: 0 0 4px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
#padLoadPop ul.pl-msg li.pl-ok { color: #b9f5c6; }
#padLoadPop ul.pl-msg li.pl-err { color: #ffb4ab; }
#device .pad.pl-drop { outline: 3px solid var(--an-green); outline-offset: 3px; box-shadow: 0 0 18px rgba(109,255,138,.55); }
#device .pad.pl-nodrop { outline: 3px solid var(--an-red); outline-offset: 3px; cursor: no-drop; }
#device .pad .pl-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; padding: 2px 6px; border-radius: 3px;
  font: 800 10px/1.2 var(--an-sans); letter-spacing: .1em; color: #0c0c0d; background: var(--an-green); box-shadow: 0 1px 4px rgba(0,0,0,.6); white-space: nowrap; }
#device .pad.pl-nodrop .pl-tag { background: var(--an-red); color: #fff; }
/* n2pad: Meldungs-/Lese-Schild verdeckt nichts – Klicks und Drag & Drop gehen auf die Pads darunter (Schild schließt dabei) */
#padLoadPop.pl-msg, #padLoadPop.pl-busy { pointer-events: none; }
#padLoadPop.pl-msg ul.pl-msg.pl-scroll { pointer-events: auto; }

/* vis1 (N5): Live-Visualisierung mit echtem Zustand in Lektionen (tutanim.js .ta-vis) – seitenverhältnistreu wie .ta-card (F21), Schrift ≥ 14 px (F24) */
#side #tutVis .ta-vis { background: #141310; border: 1px solid #4a4220; border-radius: 8px; padding: 4px 6px; margin: 0; }
#side #tutVis .ta-vis canvas { display: block; width: 100%; height: auto; max-width: min(100%, calc(min(130px, 13vh) * var(--ta-ar, 2.286)));   /* Lektionsfenster bleibt gleich hoch: Bild skaliert mit der Fensterhöhe */ margin: 0 auto; border-radius: 4px; }
#tutVis:empty { display: none; }
#tutBox.show #tutVis { flex: 0 0 auto; margin: 6px 0 0; }
#side #tutVis .ta-vis-h { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; white-space: nowrap; overflow: hidden; font: 600 14px/1.45 var(--an-sans, Arial, sans-serif); color: #ddd6c2; }
#side #tutVis .ta-vis-h b { font-size: 14px; letter-spacing: .12em; color: #ffd27a; }
#side #tutVis .ta-vis-h .ta-led { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--an-led-red, #ff4d4d); box-shadow: 0 0 0 1px rgba(0,0,0,.8), 0 0 6px #ff4d4d; }
#side #tutVis .ta-ce { margin-top: 3px; font-size: 14px; line-height: 1.45; color: #cfcac0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* höchstens 2 Zeilen, ganzer Text im title */
#side #tutVis .ta-ce .ta-ce-k { color: #9fd8ff; }
#side #tutVis .ta-ce b { color: #ffe14a; }
#side #tutVis .ta-ce .ta-ce-w { color: #e8e4d4; }
@media (prefers-reduced-motion: reduce) { #side #tutVis .ta-vis-h .ta-led { box-shadow: 0 0 0 1px rgba(0,0,0,.8); } }

/* ===== padtab (02.11.): Pads-Tabelle ohne waagerechtes Scrollen (1100/1400/1600 px). Die Breite der Seitenleiste hängt auch von der
   Fensterhöhe ab (Gerät skaliert mit) → Container-Abfrage auf den Tabellen-Rahmen statt Media-Query. Spalte „Datei“ bekommt nur den
   Restplatz (Ellipse, voller Name im title); ist zu wenig Platz, steht die Datei als eigene Zeile unter dem Pad (F24: 14 px, Kontrast). ===== */
#side .card div:has(> #padTable) { container: padtab / inline-size; }
#side .card #padTable th, #side .card #padTable td { white-space: nowrap; }
#side .card #padTable th:last-child { text-align: left; padding-left: 6px; }
#side .card #padTable td.padSrc { width: 100%; max-width: 0; text-align: left; padding-left: 6px; }
#side .card #padTable .padSrcIn { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
  font: 500 14px/1.45 var(--an-sans); letter-spacing: 0; color: #cfcac0; }
#side .card #padTable tr.padSrcRow { display: none; }
#side .card #padTable tr.padSrcRow td { padding: 0 2px 4px; }
#side .card #padTable tr.padSrcRow td:last-child { text-align: left; }
#side .card #padTable tr[data-i]:hover + tr.padSrcRow td { background: rgba(255,179,71,.06); }
@container padtab (max-width: 640px) {
  #side .card #padTable th:last-child, #side .card #padTable td.padSrc { display: none; }
  #side .card #padTable tr.padSrcRow { display: table-row; }
  #side .card #padTable tr[data-i]:has(+ tr.padSrcRow) td { border-bottom-color: transparent; }
  #side .card #padTable th, #side .card #padTable td { padding-left: 1px; padding-right: 1px; }
  #side .card #padTable tr.padSrcRow td:last-child { padding-left: 4px; }
}
@container padtab (max-width: 480px) {   /* sehr schmal (hohes Fenster): Eingabefelder etwas enger, Schrift bleibt gleich */
  #side .card #padTable .padName { width: 68px; }
  #side .card #padTable .padLv { width: 31px; }
  #side .card #padTable .padBpm { width: 44px; }
  #side .card #padTable input.padEd, #side .card #padTable select.padEd { padding-left: 2px; padding-right: 2px; }
  #side .card #padTable .padPlay, #side .card #padTable .padSwap { width: 19px; }
}

/* ===== F31 (02.11., Hauptsitzung): Lektionsfenster ohne Abschneiden und ohne Überlappung =====
   Fenster bleibt gleich groß an derselben Stelle (Nutzervorgabe). Text + „Do this“ stehen oben und sind immer vollständig sichtbar
   (kein inneres Scrollen). Der restliche Platz gehört EINER Bildzeile (#tutVisRow): Erklär-Animation + LIVE-Bild nebeneinander,
   bei schmaler Seite untereinander; die Bilder skalieren seitenverhältnistreu in den Restplatz (Container-Einheiten), statt etwas zu
   verdecken. Nur wenn selbst das nicht reicht, scrollt das ganze Fenster (nie stilles Abschneiden). */
#side #tutBox.show { height: clamp(440px, 64vh, 640px); overflow-y: auto; }
#side #tutBody { flex: 0 0 auto; overflow: visible; min-height: 0; padding-right: 0; }
#side #tutVisRow { flex: 1 1 0; min-height: 150px; container-type: size; container-name: tvr; display: grid; gap: 10px; align-items: stretch;
  grid-template-columns: 1fr 1fr; grid-template-rows: 100%; margin: 8px 0 0; }
#side #tutVisRow:has(> #tutAnim:empty), #side #tutVisRow:not(:has(> #tutVis:not(:empty))) { grid-template-columns: 1fr; }
#side #tutVisRow:not(:has(> :not(:empty))) { display: none; }
#side #tutVisRow > #tutAnim, #side #tutVisRow > #tutVis { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#side #tutVisRow > #tutAnim:empty, #side #tutVisRow > #tutVis:empty { display: none; }
#side #tutVisRow .ta-show { margin: 0 0 6px; align-self: flex-start; flex: none; }
#side #tutVisRow .ta-card, #side #tutVisRow .ta-vis { flex: 1 1 auto; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; }
#side #tutVisRow .ta-card > *, #side #tutVisRow .ta-vis > * { flex: none; }
/* Bildhöhe = Resthöhe der Zeile abzüglich Kopf/Knopf/Beschriftung; Breite folgt dem Seitenverhältnis (--ta-ar) */
#side #tutVisRow .ta-card canvas { width: 100%; height: auto; margin: 0 auto; max-width: min(100%, calc(max(60px, var(--tvh, 220px) - 92px) * var(--ta-ar, 2.586))); }
#side #tutVis .ta-vis canvas { width: 100%; height: auto; margin: 0 auto; max-width: min(100%, calc(max(60px, var(--tvh, 220px) - 84px) * var(--ta-ar, 2.286))); }
#side #tutVis .ta-vis-h { white-space: normal; overflow: visible; flex-wrap: wrap; row-gap: 2px; }
#side #tutVis .ta-ce { -webkit-line-clamp: unset; display: block; overflow: visible; margin-top: auto; padding-top: 3px; }
/* schmale Seite (Lektionsfenster < 640 px): Bilder untereinander, je halbe Zeilenhöhe */
#side #tutBox.show { container-type: inline-size; container-name: tbox; }
@container tbox (max-width: 640px) {
  #side #tutVisRow { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  #side #tutVisRow:has(> #tutAnim:empty), #side #tutVisRow:not(:has(> #tutVis:not(:empty))) { grid-template-rows: 1fr; }
  #side #tutVisRow .ta-card canvas { max-width: min(100%, calc(max(46px, calc(var(--tvh, 220px) / 2) - 88px) * var(--ta-ar, 2.586))); }
  #side #tutVis .ta-vis canvas { max-width: min(100%, calc(max(46px, calc(var(--tvh, 220px) / 2) - 80px) * var(--ta-ar, 2.286))); }
  #side #tutVisRow:has(> #tutAnim:empty) .ta-vis canvas, #side #tutVisRow:not(:has(> #tutVis:not(:empty))) .ta-card canvas { max-width: min(100%, calc(max(60px, var(--tvh, 220px) - 90px) * var(--ta-ar, 2.4))); }
}
#side .tut-fin { align-items: flex-start; }
#side .tut-done-big { transform-origin: left center; max-width: 100%; }
/* F31: Erklär-Animation noch nicht gestartet (nur „SHOW ME“-Knopf) → keine leere halbe Bildzeile: Knopf als schmale Zeile oben, LIVE-Bild volle Breite */
#side #tutVisRow:not(:has(> #tutAnim .ta-card)) { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
#side #tutVisRow:not(:has(> #tutAnim .ta-card)) > #tutAnim { min-height: 0; }
#side #tutVisRow:not(:has(> #tutAnim .ta-card)) .ta-show { margin: 0; }
#side #tutVisRow:not(:has(> #tutAnim .ta-card)) .ta-vis canvas { max-width: min(100%, calc(max(60px, var(--tvh, 220px) - 124px) * var(--ta-ar, 2.286))); }
/* Nutzer 02.11.: Info-Karte schließen – analoger ×-Taster oben rechts */
#infoCard { position: fixed; }
#infoCard .ic-x { position: sticky; float: right; top: 0; margin: -4px -4px 4px 8px; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; z-index: 2;
  font: 700 20px/1 var(--an-sans, Arial, sans-serif); color: #f0d9a0; background: linear-gradient(#3a3b40, #232428); border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 3px rgba(0,0,0,.6); }
#infoCard .ic-x:hover { color: #ffe14a; }
#infoCard .ic-x:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
/* Nutzer 02.11.: Tracker Mini ist noch Beta – kleiner Stempel am Geräte-Taster im Hub */
body > #bar .dev .beta, body > #bar .dev.act .beta { display: inline-block; margin-left: 8px; padding: 2px 6px 1px; border: 1px solid #ff9a2e; border-radius: 3px; color: #ffb35c;
  font: 800 9px/1.2 var(--an-sans, Arial); letter-spacing: .14em; vertical-align: 1px; background: rgba(255,154,46,.08); text-shadow: none; }
/* F31 schmale Seite (Lektionsfenster < 640 px, Klasse tb-narrow von tutanim.js): Fenster nutzt die volle Höhe, Bilder per Umschalter LIVE | Erklärung */
#side #tutVis .ta-sw { display: none; }
#side #tutVisRow[data-mode="sw"] { display: flex; flex-direction: column; gap: 6px; }
#side #tutVisRow[data-mode="sw"] > #tutVis { order: -1; flex: 1 1 auto; min-height: 0; }
#side #tutVisRow[data-mode="sw"] > #tutAnim { flex: 1 1 auto; min-height: 0; }
#side #tutVisRow[data-mode="sw"][data-show="l"] > #tutAnim { display: none; }
#side #tutVisRow[data-mode="sw"][data-show="k"] > #tutVis { flex: 0 0 auto; }
#side #tutVisRow[data-mode="sw"][data-show="k"] > #tutVis .ta-vis { display: none; }
#side #tutVisRow[data-mode="sw"] #tutVis .ta-sw { display: flex; gap: 4px; flex: none; margin: 0 0 4px; }
#side #tutVis .ta-sw button { flex: 1 1 0; min-height: 30px; padding: 4px 8px; border-radius: 5px; cursor: pointer; font: 700 13px/1.2 var(--an-sans, Arial, sans-serif); letter-spacing: .08em;
  color: #cfc8b4; background: linear-gradient(#2c2d31, #1d1e21); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
#side #tutVis .ta-sw button.on { color: #1a1600; background: linear-gradient(#ffe68a, #ffd23b); box-shadow: 0 0 8px rgba(255,210,59,.45); }
#side #tutVisRow[data-mode="sw"] .ta-vis canvas { max-width: min(100%, calc(max(80px, var(--tvh, 220px) - 116px) * var(--ta-ar, 2.286))); }
#side #tutVisRow[data-mode="sw"] .ta-card canvas { max-width: min(100%, calc(max(80px, var(--tvh, 220px) - 128px) * var(--ta-ar, 2.586))); }
#side #tutBox.show.tb-narrow { height: clamp(440px, calc(100vh - 128px), 900px); }
/* walk (02.11.): reicht die Höhe nicht für Text + Bildzeile, blendet tutanim.js visMode() die Bildzeile aus (data-room="0") – Text, Rückmeldung und Knöpfe bleiben ganz sichtbar */
#side #tutVisRow[data-room="0"] { display: none !important; }
/* ===== F51 (02.11., Nutzer: „Layout vereinfachen – im Moment ist man von den Infos erschlagen; alles Step by Step“) =====
   Lektionsfenster = EIN ruhiger Schritt-Dialog (SP + Tracker, Klasse .f51 von tutor.js bzw. tracker/tutvis.js): Titel klein, Fortschrittspunkte,
   kurzer Text (Rest hinter „Mehr“), EINE große gelbe Handlungszeile (≥ 18 px), Rückmeldungen nur kurz, EIN Bild, unten „Weiter ▶“ groß bzw.
   „Überspringen“ klein. „Warum?“/„Status“ sind eingeklappt (Klick). Fenstergröße/-position wie bisher (F31). Variante B: Bild oben, Handlungsleiste unten. */
#side #tutBox.f51.show { display: flex; flex-direction: column; padding: 12px 16px; }
#side #tutBox.f51 > * { flex: none; }
#side #tutBox.f51 > .f51-head { display: flex; align-items: center; gap: 6px; margin: 0; justify-content: flex-start; }
#side #tutBox.f51 #tutTitle { flex: 1 1 auto; min-width: 0; font: 600 13px/1.35 var(--an-sans, Arial, sans-serif); color: #b4ad9b; letter-spacing: .03em; text-transform: none; }
#side #tutBox.f51 .f51-head > button { flex: none; min-height: 28px; padding: 3px 9px; font: 600 13px/1.2 var(--an-sans, Arial, sans-serif); }
#side #tutBox.f51 #tutQuit { width: 30px; padding: 0; font-size: 0 !important; letter-spacing: 0; }
#side #tutBox.f51 #tutQuit::after { content: "✕"; font: 700 14px/1 var(--an-sans, Arial, sans-serif); color: #d8d1bd; }
#side #tutBox.f51 #tutRepeat.f51-ico { width: 30px; padding: 0; font: 700 16px/1 var(--an-sans, Arial, sans-serif); }
#side #tutBox.f51 > .f51-dots { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
#side #tutBox.f51 .f51-pts { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; }
#side #tutBox.f51 .f51-pts i { flex: 0 1 14px; min-width: 4px; height: 6px; border-radius: 3px; background: #3b3526; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
#side #tutBox.f51 .f51-pts i.d { background: #b8941f; }
#side #tutBox.f51 .f51-pts i.c { background: #ffe14a; box-shadow: 0 0 6px rgba(255,225,74,.75); }
#side #tutBox.f51 #tutCount { flex: none; font: 600 12.5px/1.2 var(--an-sans, Arial, sans-serif); color: #a8a18e; letter-spacing: .02em; text-shadow: none; }
#side #tutBox.f51 #tutCount.last { color: #b9dcb9; }
#side #tutBox.f51 > .prog { display: none; }
#side #tutBox.f51 #tutBody { flex: none; margin: 0; }
#side #tutBox.f51 #tutText { font: 400 16px/1.5 var(--an-sans, Arial, sans-serif); color: #ece6d6; margin: 0; }
#side #tutBox.f51 #tutText b { color: #ffe9a0; }
#side #tutBox.f51 .f51-rest { display: none; }
#side #tutBox.f51 #tutText.open .f51-rest { display: inline; }
#side #tutBox.f51 .f51-more { display: inline; min-height: 0; margin: 0 0 0 2px; padding: 0 3px; border: 0; background: none; box-shadow: none; cursor: pointer;
  font: 600 13px/1.3 var(--an-sans, Arial, sans-serif); color: #ffd27a; text-decoration: underline; text-underline-offset: 2px; }
#side #tutBox.f51 #tutDo { background: none; border: 0; box-shadow: none; padding: 0; margin: 14px 0 0; }
#side #tutBox.f51 #tutDo .f51-do { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 6px; color: #1a1600;
  background: linear-gradient(#ffe68a, #ffd23b); box-shadow: 0 0 0 1px #6b5a1c, 0 0 14px rgba(255,210,59,.3); font: 800 20px/1.35 var(--an-sans, Arial, sans-serif); }
#side #tutBox.f51 #tutDo .f51-go { flex: none; font-size: 16px; }
#side #tutBox.f51 #tutDo .f51-do ol { display: inline; margin: 0; padding: 0; list-style: none; }
#side #tutBox.f51 #tutDo .f51-do li { display: inline; margin: 0; color: inherit; font-weight: 800; text-decoration: none; }
#side #tutBox.f51 #tutDo .f51-do li + li::before { content: " + "; }
#side #tutBox.f51 #tutDo .f51-do li.done { opacity: .5; }
#side #tutBox.f51 #tutDo .f51-do .vb { font: inherit; color: inherit; text-transform: none; }
#side #tutBox.f51 #tutDo .f51-do, #side #tutBox.f51 #tutDo .f51-look { text-transform: none; letter-spacing: normal; }
#side #tutBox.f51 .f51-foot #tutShow, #side #tutBox.f51 .f51-foot .ta-show { white-space: nowrap; }
#side #tutBox.f51 #tutDo .f51-do kbd { display: inline; padding: 0 6px; margin: 0; border-radius: 4px; font: 800 19px/1.3 var(--an-sans, Arial, sans-serif); color: #ffe14a; background: #1d1904; box-shadow: none; }
#side #tutBox.f51 #tutDo .f51-do b { color: #1a1600; }
#side #tutBox.f51 #tutDo .f51-do .nt { font: 600 14px/1.3 var(--an-sans, Arial, sans-serif); color: #4b3f05; }
#side #tutBox.f51 #tutDo .f51-sub { margin: 6px 2px 0; font: 400 13px/1.4 var(--an-sans, Arial, sans-serif); color: #a8a18e; }
#side #tutBox.f51 #tutDo .f51-look { font: 600 15px/1.45 var(--an-sans, Arial, sans-serif); color: #e2d7ae; }
#side #tutBox.f51 #tutDo .f51-look kbd { font: 700 14px/1.4 var(--an-sans, Arial, sans-serif); padding: 0 6px; border-radius: 3px; color: #1a1600; background: #e8dcb0; }
#side #tutBox.f51 .f51-fb { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; }
#side #tutBox.f51 .f51-fb:not(:has(> :not([style*="display: none"]))) { margin: 0; }
#side #tutBox.f51 .f51-fb > * { margin: 0; font-size: 14px; line-height: 1.4; padding: 4px 9px; }
#side #tutBox.f51 .f51-fb .tut-hint { color: #f0e2b0; background: #221c0c; border-left: 3px solid #c9a227; border-radius: 2px; }
#side #tutBox.f51:not(.f51-why) #tutWhy, #side #tutBox.f51:not(.f51-live) #tutLive { display: none !important; }
#side #tutBox.f51 #tutWhy { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
#side #tutBox.f51 #tutLive { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
/* EIN Bild: Rest der Höhe; Ursache → Wirkung, Umschalter und Legenden-Zeilen außerhalb des Bildes entfallen (usab K2) */
#side #tutBox.f51 > #tutVisRow { flex: 1 1 0; min-height: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 0; }
#side #tutBox.f51 #tutVisRow > #tutAnim, #side #tutBox.f51 #tutVisRow > #tutVis { flex: 1 1 auto; }
#side #tutBox.f51 #tutVisRow > #tutAnim:not(:has(.ta-card)) { display: none; }
#side #tutBox.f51 #tutVis .ta-ce, #side #tutBox.f51 #tutVis .ta-sw { display: none !important; }
#side #tutBox.f51 #tutVisRow .ta-card, #side #tutBox.f51 #tutVisRow .ta-vis { background: #121110; border: 1px solid #2f2b1d; border-radius: 6px; padding: 6px 8px; }
#side #tutBox.f51 #tutVisRow #tutVis .ta-vis-h { flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0 0 4px; font: 600 12.5px/1.3 var(--an-sans, Arial, sans-serif); color: #a8a18e; }
#side #tutBox.f51 #tutVisRow #tutVis .ta-vis-h b { font-size: 12px; color: #d9b864; }
#side #tutBox.f51 #tutVisRow #tutVis .ta-vis-h > span { flex: 1 1 auto; min-width: 0; }
#side #tutBox.f51 #tutVisRow .ta-cap { display: flex; align-items: center; gap: 8px; margin: 5px 0 0; font-size: 13px; line-height: 1.4; color: #a8a18e; }
#side #tutBox.f51 #tutVisRow #tutVis .ta-vis canvas { max-width: min(100%, calc(max(60px, min(var(--tvh, 220px) - 44px, 270px)) * var(--ta-ar, 2.286))); }   /* höchstens 270 px hoch: Bild unterstützt, die Handlungszeile bleibt das Wichtigste */
#side #tutBox.f51 #tutVisRow #tutAnim .ta-card canvas { max-width: min(100%, calc(max(60px, min(var(--tvh, 220px) - 62px, 270px)) * var(--ta-ar, 2.586))); }
#side #tutBox.f51 .ta-show { flex: none; margin: 0 0 0 auto; min-height: 24px; padding: 2px 9px; font: 600 12px/1.2 var(--an-sans, Arial, sans-serif); letter-spacing: .03em; }
/* Knöpfe unten: „◀ Zurück“ klein · „Warum?“/„Status“ · „Weiter ▶“ groß bzw. „Überspringen“ klein */
#side #tutBox.f51 > .f51-foot { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; row-gap: 8px; }
#side #tutBox.f51 #tutNext { max-width: 100%; }
#side #tutBox.f51 .f51-foot > span:not(.f51-pills) { flex: 1 1 auto; }
#side #tutBox.f51 #tutBack { flex: none; min-height: 30px; padding: 4px 10px; font: 600 13px/1.2 var(--an-sans, Arial, sans-serif); }
#side #tutBox.f51 .f51-pills { display: flex; gap: 6px; flex: none; }
#side #tutBox.f51 #tutBody .f51-pills { margin: 10px 0 0; }
#side #tutBox.f51 #tutBody .f51-pills:not(:has(button:not([style*="display: none"]))) { display: none; }
#side #tutBox.f51 .f51-pill { min-height: 26px; padding: 3px 10px; border-radius: 13px; font: 600 12.5px/1.2 var(--an-sans, Arial, sans-serif); color: #bdb6a2; letter-spacing: .02em; }
#side #tutBox.f51 .f51-pill.on { color: #1a1600; background: linear-gradient(#ffe68a, #ffd23b); }
#side #tutBox.f51 #tutNext.tut-big { flex: none; min-width: 150px; min-height: 44px; padding: 10px 24px; border-radius: 6px; font: 800 18px/1.2 var(--an-sans, Arial, sans-serif); letter-spacing: .03em;
  color: #1a1600; background: linear-gradient(#ffe68a, #ffd23b); border: 1px solid #6b5a1c; box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255,210,59,.35); }
#side #tutBox.f51 #tutNext.tut-skip { flex: none; min-height: 30px; padding: 4px 10px; font: 600 12.5px/1.2 var(--an-sans, Arial, sans-serif); opacity: .9; }
#side #tutBox.f51 #tutToList { flex: none; min-height: 34px; font-size: 13px; }
#side #tutBox.f51 .f51-foot .ta-show, #side #tutBox.f51 .f51-foot #tutShow { margin: 0; }
/* Variante B: Bild oben, darunter der Text, unten EINE Handlungsleiste (Lese-Schritt: die Leiste IST „Weiter ▶“) */
#side #tutBox.f51[data-v="B"] > .f51-head { order: 0; } #side #tutBox.f51[data-v="B"] > .f51-dots { order: 1; }
#side #tutBox.f51[data-v="B"] > #tutVisRow { order: 2; margin: 0 0 12px; }
#side #tutBox.f51[data-v="B"] > #tutBody { order: 3; } #side #tutBox.f51[data-v="B"] > .prog { order: 4; }
#side #tutBox.f51[data-v="B"] > .f51-foot { order: 5; align-items: stretch; }
#side #tutBox.f51[data-v="B"] .f51-foot > span:not(.f51-pills) { display: none; }
#side #tutBox.f51[data-v="B"] .f51-foot #tutDo { flex: 1 1 auto; min-width: 0; margin: 0; align-self: center; }
#side #tutBox.f51[data-v="B"] #tutNext.tut-big { flex: 1 1 auto; }
#side #tutBox.f51[data-v="B"] #tutNext.tut-skip { align-self: center; }
#side #tutBox.f51[data-v="B"] .f51-head .f51-pills { margin-left: auto; }
#side #tutBox.f51[data-v="B"] #tutTitle { flex: 1 1 0; }
#side #tutBox.f51 > #tutVisRow:not(:has(.ta-card, .ta-vis, .tv-card)) { display: none; }
#side #tutBox.f51 #tutWhy { color: #e6e1d6; background: #1a1610; border-left: 3px solid #e8a33a; border-radius: 2px; padding: 6px 10px; }
#side #tutBox.f51 #tutWhy b { color: #f0b54a; }
/* Variante B, schmales Fenster: Handlungsleiste eigene Zeile über „◀ Zurück“ / „Überspringen“ */
@container tbox (max-width: 640px) {
  #side #tutBox.f51[data-v="B"] > .f51-foot { flex-wrap: wrap; row-gap: 8px; }
  #side #tutBox.f51[data-v="B"] .f51-foot #tutDo { flex: 1 1 100%; order: -1; }
  #side #tutBox.f51[data-v="B"] .f51-foot > span:not(.f51-pills) { display: block; flex: 1 1 auto; }
}
/* F51/B: Bild nicht auf die ganze Zeilenhöhe strecken (kein leerer Kasten) – mittig im Bildbereich, Luft darum */
#side #tutBox.f51 > #tutVisRow { justify-content: center; }
#side #tutBox.f51 #tutVisRow > #tutAnim, #side #tutBox.f51 #tutVisRow > #tutVis { justify-content: center; }
#side #tutBox.f51 #tutVisRow .ta-card, #side #tutBox.f51 #tutVisRow .ta-vis { flex: 0 1 auto; }