/* FUTURIA GE Builder: MOST Design Release B.1 (brand.most.cloud/claude.md), Welt "gestaltet". */
@font-face{font-family:'Archivo';src:url('fonts/archivo-variabel-latin.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url('fonts/archivo-variabel-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --most-red:#c11412; --most-signal:#ff2214;
  --ink:#060606; --canvas:#f4f4f2; --surface:#fbfbf9; --rule:#d2d2ce; --muted:#676464;
  --stein:#e6e5e1; --graphit:#1a1919; --ink-rule:#2b2a2a; --stufe-1:#413e3e;
  --ink-muted:#a3a1a1; --stufe-2:#908b8b;
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --data:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --kopf:56px; --leiste:320px;
  --lauf:cubic-bezier(.25,1,.5,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--canvas);color:var(--ink);font:400 15px/1.5 var(--body);overflow:hidden}
button,input,label{font:inherit;color:inherit}
.etikett{font:400 11px/1.4 var(--data);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}

/* ---- Kopfzeile: weiß, Linie in Ink, rote Wortmarke 15 px, Produktname in Archivo */
.kopf{height:var(--kopf);display:flex;align-items:center;gap:16px;padding:0 24px;background:#fff;border-bottom:1px solid var(--ink)}
.wortmarke{height:15px;width:auto;display:block}
.kopf-linie{width:1px;height:24px;background:var(--rule)}
.produkt{font-family:var(--display);font-variation-settings:'wdth' 118;font-stretch:118%;font-weight:700;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase}
.kopf-meta{margin-left:auto;font:400 12px var(--data);color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- Fläche: Seitenleiste Graphit links, Bühne Papier rechts */
.flaeche{display:grid;grid-template-columns:var(--leiste) 1fr;height:calc(100% - var(--kopf))}
.leiste{background:var(--graphit);color:#fff;border-right:1px solid var(--stufe-1);overflow-y:auto;padding:8px 0 32px}
.buehne{position:relative;min-width:0;background:var(--canvas)}
.buehne canvas{display:block;width:100%;height:100%;outline:none}

/* ---- Gruppen in der Leiste: 12 px innen, 32 px zwischen den Gruppen, Haarlinie trennt */
.gruppe{padding:24px 24px 0}
.gruppe + .gruppe{margin-top:8px;border-top:1px solid var(--ink-rule)}
.gruppe-titel{margin:0 0 12px;font-family:var(--display);font-variation-settings:'wdth' 116;font-stretch:116%;
  font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.gruppe .etikett{color:var(--ink-muted);margin-top:12px}

/* Knöpfe auf Graphit: primär weiß gefüllt (Ink-Schrift), sekundär mit Rahmen Stufe 2. Keine Rundungen. */
.knopfreihe{display:flex;gap:8px;margin-bottom:12px}
.knopf{min-height:44px;padding:0 16px;background:transparent;border:1px solid var(--stufe-2);border-radius:0;color:#fff;
  font-weight:500;font-size:14px;cursor:pointer;transition:background-color .18s var(--lauf)}
.knopf:hover{background:var(--ink-rule)}
.knopf-primaer{background:#fff;border-color:#fff;color:var(--ink)}
.knopf-primaer:hover{background:var(--stein)}
.knopfreihe .knopf{flex:1;padding:0 12px;white-space:nowrap}
#zuruecksetzen{width:100%;margin-top:12px}
.knopf-text{display:inline-block;margin-top:12px;color:#fff;font-size:14px;text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.buehne :focus-visible{outline-color:var(--ink)}

/* Schalter: Zustand über Form (offen = aus, gefüllt = an, gestrichelt = läuft) und immer mit Wort */
.schalter,.auswahl{list-style:none;margin:0;padding:0}
.schalter button{width:100%;min-height:44px;display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:12px;
  padding:0 12px;background:transparent;border:0;border-left:2px solid transparent;color:#fff;text-align:left;cursor:pointer;
  transition:background-color .18s var(--lauf)}
.schalter button:hover{background:var(--ink-rule)}
.schalter .form{width:12px;height:12px;border:1.5px solid var(--ink-muted)}
.schalter .wort{font:400 11px var(--data);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.schalter button[aria-pressed="true"]{background:var(--stufe-1);border-left-color:var(--most-signal);font-weight:600}
.schalter button[aria-pressed="true"] .form{background:#fff;border-color:#fff}
.schalter button[aria-pressed="true"] .wort{color:#fff}
.schalter button.laeuft .form{background:transparent;border:1.5px dashed #fff}
.schalter button.laeuft .wort{color:#fff}

/* Einfachauswahl (Raum, Folierung): Liste, aktive Zeile auf Stufe 1 mit Signalrot-Kante */
.auswahl button,.auswahl .dateiwahl{display:flex;align-items:center;width:100%;min-height:44px;padding:0 12px;background:transparent;
  border:0;border-left:2px solid transparent;color:#fff;text-align:left;cursor:pointer;transition:background-color .18s var(--lauf)}
.auswahl button:hover,.auswahl .dateiwahl:hover{background:var(--ink-rule)}
.auswahl [aria-pressed="true"]{background:var(--stufe-1);border-left-color:var(--most-signal);font-weight:600}
.dateiwahl input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dateiwahl:focus-within{outline:2px solid #fff;outline-offset:-2px}
.hinweis{margin:12px 0 0;font-size:13px;color:var(--ink-muted)}
.hinweis.fehler{color:#fff}
.hinweis.fehler::before{content:'Fehler: ';color:var(--most-signal);font-weight:600}

/* Lack: Quadrate (Zustand eines Dings), 44 px Tastziel, Auswahl mit weißem Rahmen */
.farben{display:grid;grid-template-columns:repeat(5,44px);gap:8px}
.farbe{width:44px;height:44px;padding:0;border:1px solid var(--stufe-1);border-radius:0;cursor:pointer}
.farbe[aria-pressed="true"]{outline:2px solid #fff;outline-offset:3px}
.eigene-farbe{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:12px;font-size:14px;cursor:pointer}
.eigene-farbe input{width:44px;height:44px;padding:0;border:1px solid var(--stufe-2);border-radius:0;background:transparent;cursor:pointer}

/* ---- Bühne: Ladeanzeige und Bedienhinweis */
.laden{position:absolute;inset:0;display:grid;place-content:center;gap:12px;background:var(--canvas);transition:opacity .22s var(--lauf)}
.laden.fertig{opacity:0;pointer-events:none}
.ladebalken{width:240px;height:2px;background:var(--rule)}
.ladebalken span{display:block;height:100%;width:0;background:var(--ink);transition:width .18s var(--lauf)}
.bedienung{position:absolute;left:24px;bottom:16px;pointer-events:none}
.buehne.dunkel .bedienung{color:var(--ink-muted)}

@media (max-width:820px){
  body{overflow:auto}
  .flaeche{grid-template-columns:1fr;grid-template-rows:56vh auto;height:auto}
  .buehne{grid-row:1;height:56vh}
  .leiste{grid-row:2;border-right:0;overflow:visible}
  .kopf-meta{display:none}
  .bedienung{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}