/* Artefakt Toolbox · Oberfläche (Ebenen: reset, tokens, base, components, views) */
@layer reset, tokens, base, components, views;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  img, svg { display: block; }
}

@layer tokens {
  :root {
    --skala: 1;
    --holz-1: #3b2a1d; --holz-2: #24180f; --holz-3: #17100a;
    --messing-1: #ebe3cf; --messing-2: #d6cbb0; --messing-3: #b3a483; --messing-4: #8a7c5e;
    --tinte: #2b2418; --tinte-2: #574c39;
    --display: #15120e; --display-2: #221d16; --display-text: #f1e7d2; --display-dim: #b4a78c;
    --amber: #f2b84b; --amber-glow: rgb(242 184 75 / .45);
    --led-aus: #4a4234; --gruen: #7bd88f; --rot: #e0684f;
    --radius: 14px; --radius-s: 9px;
    --ziel: 48px;
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, monospace;
    --sicher-unten: env(safe-area-inset-bottom, 0px);
    --tab-hoehe: calc(68px + var(--sicher-unten));
    --rail: 0px;
    /* Thema „Nussbaum“ (dunkel): Flächen, Schrift und Akzente rund um Paneele und Kassetten */
    --grund-text: var(--display-text);
    --grund-leise: var(--display-dim);
    --ueberschrift: var(--messing-2);
    --akzent-text: var(--amber);
    --tab-1: #2e2419; --tab-2: #1a120b; --tab-ring: #1f160e;
    --chip-grund: rgb(255 255 255 / .07); --chip-rand: rgb(255 255 255 / .14);
    --linie-leise: rgb(255 255 255 / .2);
    --streifen: rgb(255 255 255 / .018);
    color-scheme: dark;
  }
  /* Thema „Ahorn“ (hell): helles Holz, dunkle Schrift. Paneele, Kassetten und Display bleiben gleich. */
  :root[data-thema="hell"] {
    --holz-1: #f1e6d2; --holz-2: #e6d6b9; --holz-3: #d8c4a0;
    --grund-text: #2b2418;
    --grund-leise: #5e5039;
    --ueberschrift: #5e4c2e;
    --akzent-text: #8a5a0c;
    --tab-1: #f6eedf; --tab-2: #e3d3b4; --tab-ring: #e9dcc2;
    --chip-grund: rgb(255 255 255 / .55); --chip-rand: rgb(60 40 15 / .22);
    --linie-leise: rgb(60 40 15 / .3);
    --streifen: rgb(80 50 20 / .035);
    color-scheme: light;
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; background: var(--holz-3); overflow-x: clip; }
  body {
    min-height: 100dvh;
    font-family: var(--schrift);
    font-size: calc(16px * var(--skala));
    line-height: 1.4;
    color: var(--grund-text);
    background:
      repeating-linear-gradient(92deg, var(--streifen) 0 2px, transparent 2px 9px),
      linear-gradient(180deg, var(--holz-1), var(--holz-2) 60%, var(--holz-3));
    background-attachment: fixed;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }
  :focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
  .versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  }
}

@layer components {
  /* ---------- Messing-Paneel ---------- */
  .paneel {
    position: relative;
    color: var(--tinte);
    background:
      repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, var(--messing-1), var(--messing-2) 55%, var(--messing-3));
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -2px 0 rgb(0 0 0 / .18), 0 6px 18px rgb(0 0 0 / .45);
  }
  .paneel.schrauben::before, .paneel.schrauben::after {
    content: ""; position: absolute; top: 10px; width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff9, #9a8b6c 60%, #5b5040);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25);
  }
  .paneel.schrauben::before { left: 10px; }
  .paneel.schrauben::after { right: 10px; }

  .etikett {
    font-size: calc(13px * var(--skala)); font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--tinte-2);
  }

  /* ---------- LED ---------- */
  .led {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: var(--led-aus); box-shadow: inset 0 1px 2px rgb(0 0 0 / .5);
  }
  .led.an { background: var(--led, var(--amber)); box-shadow: 0 0 8px var(--led, var(--amber)), inset 0 -1px 1px rgb(0 0 0 / .3); }

  /* ---------- Tasten ---------- */
  .taste {
    min-height: var(--ziel); padding: 0 18px; border-radius: var(--radius-s);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-weight: 650; letter-spacing: .02em; white-space: nowrap; text-decoration: none;
    color: var(--tinte);
    background: linear-gradient(180deg, #f6f0e2, var(--messing-2));
    box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--messing-4), 0 4px 10px rgb(0 0 0 / .3);
    transition: transform .08s, box-shadow .08s;
  }
  .taste:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 0 0 var(--messing-4), 0 1px 4px rgb(0 0 0 / .3); }
  .taste.dunkel { color: var(--display-text); background: linear-gradient(180deg, #3a3126, #241d15); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 2px 0 #0d0a06, 0 4px 10px rgb(0 0 0 / .35); }
  .taste.akzent { color: #2a1a05; background: linear-gradient(180deg, #ffd27a, var(--amber)); box-shadow: inset 0 1px 0 #fff6, 0 2px 0 #a8741c, 0 4px 14px var(--amber-glow); }
  .taste.gefahr { color: #fff; background: linear-gradient(180deg, #ea7d66, #c4513a); box-shadow: inset 0 1px 0 #fff5, 0 2px 0 #7d2f20; }
  .taste.voll { width: 100%; }
  .taste svg { width: 20px; height: 20px; flex: none; }

  /* ---------- Display (dunkles Glas) ---------- */
  .display {
    background: radial-gradient(120% 140% at 30% 0%, var(--display-2), var(--display) 60%);
    border-radius: 10px; color: var(--display-text);
    box-shadow: inset 0 2px 10px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(0 0 0 / .6), 0 1px 0 rgb(255 255 255 / .5);
  }

  /* ---------- Formularfelder ---------- */
  .feld { display: grid; gap: 6px; }
  .feld > span { font-size: calc(13px * var(--skala)); font-weight: 650; color: var(--tinte-2); }
  .eingabe {
    width: 100%; min-height: var(--ziel); padding: 10px 14px; border-radius: var(--radius-s);
    border: 1px solid rgb(0 0 0 / .25); background: #fbf8f0; color: var(--tinte);
    box-shadow: inset 0 2px 4px rgb(0 0 0 / .12);
  }
  textarea.eingabe { font-family: var(--mono); font-size: calc(13px * var(--skala)); line-height: 1.5; resize: vertical; }

  /* ---------- Kassette (Tool-Kachel) ----------
     Metallrahmen mit Schrauben, Etikett mit Name und Symbol im Sichtfenster,
     dunkle Fußleiste mit Fach und LED (Favorit) – wie im Mockup. */
  .kassette {
    --fach: #9a8f7a; --fach-text: #1d170e;
    position: relative; display: flex; flex-direction: column; text-align: start;
    width: 100%; min-height: calc(164px * var(--skala));
    padding: 9px 9px 8px; border-radius: 12px;
    background:
      repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #a19c93, #6f6b64 42%, #4a4640);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -2px 0 rgb(0 0 0 / .4), 0 7px 14px rgb(0 0 0 / .5);
    color: var(--fach-text);
    transition: transform .12s ease-out, box-shadow .12s;
    touch-action: manipulation;
  }
  .kassette::before, .kassette::after {
    content: ""; position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 35% 35%, #f3eee4, #8b8476 60%, #4a4438);
    box-shadow: 0 0 0 1px rgb(0 0 0 / .25);
  }
  .kassette::before { left: 3px; }
  .kassette::after { right: 3px; }
  .kassette:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 3px 8px rgb(0 0 0 / .5); }
  .kassette-etikett {
    flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 10px 8px 10px 10px; border-radius: 6px; text-align: start;
    background:
      repeating-linear-gradient(0deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 4px),
      linear-gradient(180deg, color-mix(in srgb, var(--fach) 82%, #fff), var(--fach) 70%, color-mix(in srgb, var(--fach) 88%, #000));
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .35);
  }
  .kassette-name {
    font-weight: 750; font-size: calc(14px * var(--skala)); line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: break-word; hyphens: auto;
  }
  .kassette-fenster {
    margin-top: auto; align-self: center;
    width: calc(64px * var(--skala)); height: calc(52px * var(--skala)); border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, rgb(255 255 255 / .42), rgb(255 255 255 / .18));
    box-shadow: inset 0 2px 4px rgb(0 0 0 / .22), 0 1px 0 rgb(255 255 255 / .4);
  }
  .kassette-fenster svg { width: calc(32px * var(--skala)); height: calc(32px * var(--skala)); }
  .kassette-fuss {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    margin-top: 7px; padding: 6px 40px 6px 8px; border-radius: 5px;
    background: linear-gradient(180deg, #2c2925, #1d1b18); color: #ddd4c2;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / .6), 0 1px 0 rgb(255 255 255 / .12);
    font-size: calc(13px * var(--skala)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  }
  .kassette-fuss span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Im Regal nur ein Farbpunkt statt des (oft abgeschnittenen) Fachnamens (U10) */
  .fach-punkt { display: none; width: 12px; height: 12px; border-radius: 50%; background: var(--fach); box-shadow: 0 0 0 2px rgb(255 255 255 / .18); flex: none; }
  .regal .kassette-fuss .fach-text { display: none; }
  .regal .kassette-fuss .fach-punkt { display: inline-block; }
  .kassette:has(.neu-plakette) .kassette-name { padding-inline-end: 46px; }
  .neu-plakette { position: absolute; top: 12px; inset-inline-end: 12px; padding: 2px 7px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: #2a1a05; background: var(--amber); box-shadow: 0 0 10px var(--amber-glow); }
  .kassette-mehr {
    position: absolute; bottom: 0; inset-inline-end: 2px; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center; color: #ddd4c2;
  }
  .kassette-mehr svg { width: 22px; height: 22px; }
  .anordnen .kassette { touch-action: none; cursor: grab; animation: wackeln .9s ease-in-out infinite alternate; }
  .anordnen .kassette:nth-child(2n) { animation-delay: -.45s; }
  .anordnen .kassette.wird-gezogen { pointer-events: none; animation: none; transform: scale(1.06); z-index: 5; box-shadow: 0 16px 28px rgb(0 0 0 / .6); cursor: grabbing; }
  @keyframes wackeln { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
  .symbol { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- Chips ---------- */
  .chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .chips::-webkit-scrollbar { display: none; }
  .chip {
    flex: none; min-height: var(--ziel); padding: 0 16px; border-radius: 999px; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: calc(14px * var(--skala)); font-weight: 650;
    color: var(--grund-text); background: var(--chip-grund); border: 1px solid var(--chip-rand);
  }
  .chip[aria-pressed="true"] { color: #2a1a05; background: var(--amber); border-color: var(--amber); }
  .verknuepfung-tasten { display: flex; gap: 6px; align-items: center; flex: none; }
  .verknuepfung-tasten .taste { padding: 0 12px; }
  .chip.schlagwort { font-weight: 700; }
  .schlagwort-liste { display: flex; flex-wrap: wrap; gap: 8px; }
  .blatt .chip { color: var(--tinte); background: #fbf8f0; border-color: rgb(0 0 0 / .18); }
  .chip .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--fach); }

  /* ---------- Bottom Sheet & Toast ---------- */
  .schleier {
    position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / .55);
    display: flex; align-items: flex-end; justify-content: center;
    animation: einblenden .15s ease-out;
  }
  .blatt {
    width: min(560px, 100%); min-width: 0; max-height: 88dvh; overflow-y: auto; overflow-x: hidden;
    padding: 10px 18px calc(22px + var(--sicher-unten));
    border-radius: 20px 20px 0 0;
    animation: hochfahren .2s ease-out;
  }
  /* Blatt von oben (Schnellstart): die Tastatur verdeckt den unteren Rand */
  .schleier.oben { align-items: flex-start; }
  .blatt.oben { border-radius: 0 0 20px 20px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); animation-name: runterfahren; }
  .blatt.oben .blatt-griff { display: none; }
  @keyframes runterfahren { from { transform: translateY(-24px); opacity: 0; } }
  .ss-liste { display: grid; gap: 6px; list-style: none; }
  .ss-zeile { --fach: #9a8f7a; --fach-text: #1d170e; width: 100%; min-height: 60px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 12px; text-align: start; color: var(--tinte); background: #fbf8f0; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .1); }
  .ss-zeile:first-child { box-shadow: 0 0 0 2px var(--amber), inset 0 -2px 0 rgb(0 0 0 / .1); }
  .ss-hinweis { color: var(--tinte-2); font-size: calc(13px * var(--skala)); }
  .blatt-griff { width: 44px; height: 5px; border-radius: 3px; background: rgb(0 0 0 / .25); margin: 4px auto 14px; }
  .blatt h2 { font-size: calc(19px * var(--skala)); margin-bottom: 4px; }
  .blatt p.unter { color: var(--tinte-2); font-size: calc(14px * var(--skala)); margin-bottom: 16px; }
  .blatt h3 { font-size: calc(15px * var(--skala)); margin-top: 8px; }
  .blatt-liste { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .blatt-liste .taste { justify-content: flex-start; width: 100%; }
  /* Tool-Menü (A5) */
  .schnellreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .blatt-liste .taste.kachel { flex-direction: column; justify-content: center; gap: 4px; min-height: 68px; padding: 8px 6px; white-space: normal; text-align: center; font-size: calc(14px * var(--skala)); }
  .taste.kachel[aria-pressed="true"] svg { fill: var(--amber); color: #8a5a0c; }
  .menue-gruppe { margin-top: 8px; }
  .taste.text-gefahr { color: #8a2412; background: none; box-shadow: none; font-weight: 700; }
  .taste.text-gefahr:active { transform: none; background: rgb(138 36 18 / .1); }
  #r-hg { display: none; }
  .led.laeuft { background: var(--gruen); box-shadow: 0 0 8px var(--gruen); animation: atmen 2.4s ease-in-out infinite; }
  .led.blinkt { animation: blinken .9s ease-out; }
  @keyframes blinken { 0%, 60% { transform: scale(1.8); box-shadow: 0 0 16px var(--led, var(--amber)), 0 0 4px #fff; } }
  .toast {
    position: fixed; left: 50%; bottom: calc(var(--tab-hoehe) + 14px); z-index: 60;
    transform: translateX(-50%); width: min(520px, calc(100% - 32px));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 16px; border-radius: 12px;
    animation: hochfahren .18s ease-out;
  }
  .toast button { color: var(--amber); font-weight: 750; min-height: var(--ziel); padding: 0 12px; }
  @keyframes einblenden { from { opacity: 0; } }
  @keyframes hochfahren { from { transform: translateY(24px); opacity: 0; } }
  @keyframes hochfahren-toast { from { transform: translate(-50%, 24px); opacity: 0; } }
  .toast { animation-name: hochfahren-toast; }
}

@layer views {
  /* ---------- Rahmen ---------- */
  .kopf {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 10px;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .kopf h1 { font-size: calc(15px * var(--skala)); font-weight: 650; letter-spacing: .2em; color: var(--tinte); line-height: 1.15; transition: font-size .2s, letter-spacing .2s; }
  /* Kopfzeile schrumpft beim Scrollen (U6), der Fokus-Knopf bleibt */
  .kopf { transition: padding .2s; }
  .kopf.klein { padding-top: calc(4px + env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
  .kopf.klein h1 { font-size: calc(13px * var(--skala)); letter-spacing: .16em; }
  .fokus {
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 9px; min-height: var(--ziel); padding: 0 14px 0 12px;
    border-radius: 999px; font-size: calc(13px * var(--skala)); font-weight: 800; letter-spacing: .14em;
    color: var(--tinte); background: linear-gradient(180deg, #fbf6ea, var(--messing-2));
    box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--messing-4), 0 3px 8px rgb(0 0 0 / .25);
  }
  .fokus[aria-pressed="true"] { color: #2a1a05; background: linear-gradient(180deg, #ffd27a, var(--amber)); box-shadow: inset 0 1px 0 #fff6, 0 2px 0 #a8741c, 0 0 16px var(--amber-glow); }
  .fokus[aria-pressed="true"] .led { --led: #fff3c4; animation: atmen 2.4s ease-in-out infinite; }
  @keyframes atmen { 50% { box-shadow: 0 0 2px var(--led); opacity: .75; } }

  main { padding: 14px 0 calc(var(--tab-hoehe) + 24px); }
  .ansicht { display: grid; gap: 18px; }
  .abschnitt { display: grid; gap: 10px; }
  .abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; padding: 0 18px; }
  .abschnitt-kopf h2 { font-size: calc(13px * var(--skala)); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ueberschrift); }
  .abschnitt-kopf a, .abschnitt-kopf button { color: var(--akzent-text); font-size: calc(14px * var(--skala)); font-weight: 650; text-decoration: none; min-height: var(--ziel); display: inline-flex; align-items: center; }
  .rand { margin: 0 12px; }

  /* ---------- Tab-Leiste ---------- */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: var(--tab-hoehe); padding: 6px 8px var(--sicher-unten);
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.1fr) 64px minmax(0, .8fr) minmax(0, 1.25fr); align-items: center;
    background: linear-gradient(180deg, var(--tab-1), var(--tab-2));
    border-top: 1px solid var(--chip-rand);
    box-shadow: 0 -6px 18px rgb(0 0 0 / .45);
  }
  .tab {
    display: grid; justify-items: center; align-content: start; gap: 3px; min-height: 56px; padding-top: 6px; text-decoration: none;
    color: var(--grund-leise); font-size: calc(13px * var(--skala)); font-weight: 650;
    text-align: center; line-height: 1.2;
  }
  /* Lange Wörter („Einstellungen“) dürfen etwas in den Rand ragen statt mitten im Wort umzubrechen */
  .tab-text { max-width: calc(100% + 14px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tab-mitte { align-content: center; padding-top: 0; }
  .tab svg { width: 24px; height: 24px; }
  .tab[aria-current="page"] { color: var(--akzent-text); }
  /* Hinweis-Punkt (z. B. Backup fällig) */
  .tab { position: relative; }
  .tab.mit-hinweis::after { content: ""; position: absolute; top: 6px; inset-inline-start: calc(50% + 8px); width: 10px; height: 10px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 2px var(--tab-1); }
  .tab-mitte .rund {
    width: 52px; height: 52px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center;
    color: #2a1a05; background: radial-gradient(circle at 40% 30%, #ffe2a3, var(--amber) 60%, #c88b22);
    box-shadow: 0 0 0 5px var(--tab-ring), 0 4px 14px var(--amber-glow);
  }
  .tab-mitte .rund svg { width: 26px; height: 26px; }

  /* ---------- Start: Fortsetzen-Display ---------- */
  .fortsetzen { padding: 16px; display: grid; gap: 14px; }
  .fortsetzen .display { position: relative; overflow: hidden; padding: 14px; display: grid; gap: 12px; touch-action: pan-y; }
  /* VFD-Anmutung: feine Rasterlinien und Glasreflex über dem Display */
  .fortsetzen .display::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background:
      linear-gradient(165deg, rgb(255 255 255 / .09), transparent 38%),
      repeating-linear-gradient(0deg, rgb(0 0 0 / .22) 0 1px, transparent 1px 3px);
  }
  .fs-kopf { text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; font-size: calc(13px * var(--skala)); font-weight: 800; letter-spacing: .2em; color: var(--amber); text-shadow: 0 0 8px var(--amber-glow); }
  .fs-inhalt { display: flex; gap: 14px; align-items: center; min-height: 64px; }
  .fs-zeichen { flex: none; width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; color: var(--fach-text, #1d170e); background: var(--fach, #9a8f7a); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .25), 0 0 14px color-mix(in srgb, var(--fach) 45%, transparent); }
  .fs-zeichen svg { width: 32px; height: 32px; }
  .fs-titel { font-size: calc(18px * var(--skala)); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; text-shadow: 0 0 10px rgb(241 231 210 / .35); }
  .fs-zeit { font-size: calc(13px * var(--skala)); color: var(--display-dim); margin-top: 2px; }
  .fs-punkte { display: flex; gap: 6px; justify-content: center; }
  .fs-punkte i { width: 7px; height: 7px; border-radius: 50%; background: #4a4234; }
  .fs-punkte i.an { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
  .fs-leer { color: var(--display-dim); font-size: calc(15px * var(--skala)); }
  .fs-tasten { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
  .fs-tasten .taste.akzent { min-height: 56px; font-size: calc(17px * var(--skala)); }

  /* ---------- Regal ---------- */
  .regal {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(144px * var(--skala)); gap: 12px;
    overflow-x: auto; padding: 6px 16px 20px; scroll-snap-type: x mandatory; scrollbar-width: none;
    /* Regalbrett aus Holz mit heller Vorderkante */
    background:
      linear-gradient(180deg, transparent calc(100% - 22px), #a0764e calc(100% - 22px), #7a5535 calc(100% - 19px), #5a3c24 calc(100% - 9px), #2b1b10 100%),
      repeating-linear-gradient(91deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 7px);
  }
  .regal::-webkit-scrollbar { display: none; }
  .regal > * { scroll-snap-align: start; }
  .regal-leer { margin: 0 16px; padding: 18px; border-radius: 12px; border: 1px dashed var(--linie-leise); color: var(--grund-leise); font-size: calc(14px * var(--skala)); }

  /* ---------- Bibliothek ---------- */
  .suche { padding: 0 16px; display: flex; gap: 8px; align-items: center; }
  .suche .eingabe { flex: 1; min-width: 0; }
  .suche-knopf { flex: none; width: var(--ziel); height: var(--ziel); border-radius: var(--radius-s); display: grid; place-items: center; color: var(--grund-text); background: var(--chip-grund); border: 1px solid var(--chip-rand); }
  .suche-knopf svg { width: 22px; height: 22px; }
  .suche .ansicht-wahl { flex: none; }
  /* Chips laufen rechts sichtbar aus, damit man sieht, dass es weitergeht (U11) */
  .chips.mehr-rechts { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  [dir="rtl"] .chips.mehr-rechts { mask-image: linear-gradient(270deg, #000 calc(100% - 48px), transparent); }
  .sortierung-wahl .taste[aria-pressed="true"] { background: linear-gradient(180deg, #ffd27a, var(--amber)); }
  .suche .eingabe { background: #fbf8f0 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23574c39" stroke-width="2"%3E%3Ccircle cx="11" cy="11" r="7"/%3E%3Cpath d="m20 20-4-4"/%3E%3C/svg%3E') no-repeat 14px center / 20px; padding-inline-start: 44px; }
  .sortierleiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; color: var(--ueberschrift); font-size: calc(13px * var(--skala)); font-weight: 650; }
  .sortierleiste .eingabe { width: auto; min-width: 0; flex: 0 1 auto; min-height: var(--ziel); padding: 6px 12px; }
  .raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 16px; }
  @media (min-width: 640px) { .raster { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
  .leer { margin: 8px 16px; padding: 28px 20px; text-align: center; display: grid; gap: 14px; justify-items: center; }
  .leer p { color: var(--tinte-2); }

  /* ---------- Hinzufügen ---------- */
  .wege { display: grid; gap: 12px; padding: 0 12px; }
  .weg { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 16px; text-align: start; }
  .weg .symbol { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: var(--amber); }
  .weg .symbol svg { width: 26px; height: 26px; }
  .weg strong { display: block; font-size: calc(16px * var(--skala)); }
  .weg small { color: var(--tinte-2); font-size: calc(13px * var(--skala)); }

  /* ---------- Editor ---------- */
  .editor { margin: 0 12px; padding: 16px; display: grid; gap: 14px; }
  .editor-reiter { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 4px; border-radius: 10px; background: rgb(0 0 0 / .15); }
  .editor-reiter button { min-height: var(--ziel); border-radius: 7px; font-weight: 700; color: var(--tinte-2); }
  .editor-reiter button[aria-selected="true"] { background: #fbf8f0; color: var(--tinte); box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
  .code-werkzeuge { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .code-feld {
    display: grid; grid-template-columns: auto 1fr; height: 52dvh; border-radius: 10px; overflow: hidden;
    background: #1b1712; box-shadow: inset 0 2px 8px rgb(0 0 0 / .6);
    --code-schrift: 400 calc(13px * var(--skala)) / 1.55 var(--mono);
  }
  .code-zeilen {
    overflow: hidden; padding: 12px 8px 12px 10px; text-align: right; white-space: pre;
    font: var(--code-schrift); color: #8c8270; background: #15120e; border-right: 1px solid #2e2820; user-select: none;
  }
  .code-flaeche { position: relative; overflow: hidden; }
  .code-farbe, .code-eingabe {
    position: absolute; inset: 0; margin: 0; padding: 12px; border: 0;
    font: var(--code-schrift); white-space: pre; tab-size: 2; letter-spacing: normal; word-spacing: normal;
  }
  .code-farbe { overflow: hidden; color: #f1e7d2; pointer-events: none; }
  .code-eingabe { overflow: auto; resize: none; background: transparent; color: transparent; caret-color: var(--amber); outline: none; -webkit-text-fill-color: transparent; }
  .code-eingabe::selection { background: rgb(242 184 75 / .35); -webkit-text-fill-color: transparent; }
  /* Zeilenumbruch (A7): Nummern stehen als Zähler vor jeder echten Zeile, beide Ebenen umbrechen gleich */
  .code-farbe, .code-eingabe { scrollbar-gutter: stable; }
  .code-feld.umbruch { grid-template-columns: 1fr; --rand: 3ch; }
  .code-feld.umbruch .code-zeilen { display: none; }
  .code-feld.umbruch .code-flaeche { background: linear-gradient(90deg, #15120e calc(var(--rand) + 14px), #2e2820 calc(var(--rand) + 14px) calc(var(--rand) + 15px), transparent 0); }
  .umbruch .code-farbe, .umbruch .code-eingabe { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; padding-inline-start: calc(var(--rand) + 22px); }
  .umbruch .code-farbe code { counter-reset: zeile; }
  .umbruch .zl { display: block; position: relative; counter-increment: zeile; }
  .umbruch .zl::after { content: "\200b"; }
  .umbruch .zl::before { content: counter(zeile); position: absolute; inset-inline-start: calc(-1 * var(--rand) - 16px); width: var(--rand); text-align: right; color: #8c8270; font-style: normal; }
  .zeichenleiste .umbruch-knopf[aria-pressed="true"] { background: var(--amber); }
  .code-feld:focus-within { box-shadow: inset 0 2px 8px rgb(0 0 0 / .6), 0 0 0 3px var(--amber); }
  .t-tag { color: #f2b84b; } .t-attr { color: #a9cfa4; } .t-wert { color: #f0a97f; } .t-komm { color: #9a907c; font-style: italic; }
  .t-wort { color: #d5a8ec; } .t-zahl { color: #8fc9dd; } .t-eigen { color: #a9cfa4; }
  .zeichenleiste { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .zeichenleiste button { flex: none; min-width: var(--ziel); min-height: var(--ziel); border-radius: 8px; font: 700 17px var(--mono); color: var(--tinte); background: #fbf8f0; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .12); }
  .versionen { display: grid; gap: 8px; }
  .version-tasten { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .version-tasten .taste { padding: 0 12px; }
  /* Versionen vergleichen (B7) */
  .diff-summe { font-weight: 700; }
  .diff-summe .plus { color: #1f6b31; } .diff-summe .minus { color: #8a2412; }
  .diff { max-height: 52dvh; overflow: auto; border-radius: 10px; background: #1b1712; color: #f1e7d2; font: 13px/1.5 var(--mono); direction: ltr; }
  .diff-zeile { display: grid; grid-template-columns: 4ch 4ch 2ch 1fr; padding-inline-end: 8px; }
  .diff-zeile code { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
  .diff-nr { color: #8c8270; text-align: right; padding-inline-end: 6px; user-select: none; }
  .diff-art { text-align: center; }
  .diff-zeile.plus { background: rgb(80 170 100 / .22); }
  .diff-zeile.minus { background: rgb(224 104 79 / .24); }
  .diff-luecke { padding: 4px 10px; color: #b4a78c; font-style: italic; border-block: 1px dashed #3a3127; }
  .version { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 8px 12px; border-radius: 10px; background: #fbf8f0; }
  .version small { display: block; color: var(--tinte-2); }
  .vorlagen { display: grid; gap: 8px; }
  .vorlagen .taste { justify-content: flex-start; text-align: start; white-space: normal; padding: 10px 14px; }
  .vorlagen small { display: block; font-weight: 400; color: var(--tinte-2); }
  .vorschau { width: 100%; height: 46dvh; border: 0; border-radius: 10px; background: #fff; }
  .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Geteilte Ansicht (B3): Code oben, Vorschau unten, Trennlinie verschiebbar */
  .editor.geteilt .code-feld { height: var(--code-h, 34dvh); }
  .editor.geteilt .vorschau { height: max(16dvh, calc(72dvh - var(--code-h, 34dvh))); }
  .teiler { height: 32px; margin: -8px 0; display: grid; place-items: center; cursor: row-resize; touch-action: none; border-radius: 8px; }
  .teiler span { width: 56px; height: 6px; border-radius: 3px; background: var(--messing-4); box-shadow: inset 0 1px 1px rgb(0 0 0 / .3); }
  .teiler:focus-visible span, .teiler.zieht span { background: var(--amber); }
  .ed-fehler { padding: 10px 12px; border-radius: 10px; background: #fbeee9; color: #73200f; font-size: calc(13px * var(--skala)); }
  .ed-fehler pre { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.45 var(--mono); }
  /* Rückblick (C4) */
  .rueckblick { display: grid; gap: 10px; list-style: none; }
  .rueckblick li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
  .rb-name { font-weight: 700; overflow-wrap: anywhere; }
  .rb-wert { color: var(--tinte-2); font-size: calc(13px * var(--skala)); font-variant-numeric: tabular-nums; }
  .rb-balken { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--fach) var(--anteil), rgb(0 0 0 / .1) var(--anteil)); }
  .rueckblick-summe { font-weight: 700; }
  .bewertungsliste { display: grid; gap: 8px; list-style: none; max-height: 46dvh; overflow-y: auto; }
  .bewertungsliste li { padding: 8px 12px; border-radius: 10px; background: #fbf8f0; color: var(--tinte); font-size: calc(14px * var(--skala)); }
  .bewertungsliste li.schlecht { box-shadow: inset 4px 0 0 #b0391f; }
  .bewertungsliste li p { margin-top: 2px; color: var(--tinte-2); overflow-wrap: anywhere; }
  .bewertungsliste li span { color: var(--tinte-2); }
  .dnd-reiter { grid-template-columns: 1fr 1fr; display: grid; }
  .schritte { display: grid; gap: 6px; padding-inline-start: 22px; color: var(--tinte-2); font-size: calc(14px * var(--skala)); }
  .fehlerliste { display: grid; gap: 8px; list-style: none; max-height: 40dvh; overflow-y: auto; font: calc(13px * var(--skala))/1.45 var(--mono); overflow-wrap: anywhere; }
  .fehlerliste li { padding: 8px 10px; border-radius: 8px; background: #fbf8f0; }

  /* ---------- Einstellungen ---------- */
  .einst { margin: 0 12px; padding: 8px 16px; }
  .einst-zeile { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; border-bottom: 1px solid rgb(0 0 0 / .12); }
  .einst-zeile:last-child { border-bottom: 0; }
  .einst-zeile small { display: block; color: var(--tinte-2); font-size: calc(13px * var(--skala)); }
  .schalter { position: relative; width: 60px; height: var(--ziel); flex: none; }
  .schalter::before { content: ""; position: absolute; left: 2px; right: 2px; top: 8px; bottom: 8px; border-radius: 999px; background: #8f846c; box-shadow: inset 0 2px 4px rgb(0 0 0 / .35); }
  .schalter::after { content: ""; position: absolute; top: 11px; left: 5px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #fff, #ddd3bd); box-shadow: 0 2px 4px rgb(0 0 0 / .35); transition: transform .15s; }
  .schalter[aria-checked="true"]::before { background: var(--amber); }
  .schalter[aria-checked="true"]::after { transform: translateX(24px); }
  .segment { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 10px; background: rgb(0 0 0 / .15); }
  .segment button { min-width: var(--ziel); min-height: var(--ziel); border-radius: 7px; font-weight: 750; color: var(--tinte-2); }
  .segment button[aria-pressed="true"] { background: #fbf8f0; color: var(--tinte); box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
  .kpi { display: flex; align-items: center; gap: 14px; }
  .kpi .display { padding: 8px 12px; font-family: var(--mono); font-size: calc(20px * var(--skala)); color: var(--amber); min-width: 86px; text-align: center; }
  .balken { display: flex; gap: 3px; align-items: flex-end; height: 28px; }
  .balken i { width: 8px; border-radius: 2px; background: var(--messing-4); }
  .balken i.gut { background: #4f8a5b; }
  .einst-zeile small.warnung { color: #73200f; font-weight: 650; }
  .fusszeile { text-align: center; color: var(--grund-leise); font-size: calc(13px * var(--skala)); letter-spacing: .14em; text-transform: uppercase; padding: 8px 0; }

  /* ---------- Tool-Rahmen (Vollbild) ---------- */
  .rahmen { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: #000; }
  .rahmen-leiste {
    display: flex; align-items: center; gap: 8px; flex: none;
    min-height: calc(50px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 8px 0;
    background: linear-gradient(180deg, #2e2419, #1a120b); color: var(--display-text);
  }
  .rahmen-leiste .titel .marke { margin-inline-start: 8px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 999px; font-size: .8em; font-weight: 550; opacity: .75; }
  .blatt p.herkunft { display: flex; gap: 8px; align-items: flex-start; }
  .blatt p.herkunft svg { flex: none; width: 1.1em; height: 1.1em; margin-top: .15em; }
  .rahmen-leiste .titel { flex: 1; min-width: 0; text-align: center; font-weight: 650; font-size: calc(14px * var(--skala)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rahmen-leiste button { min-width: var(--ziel); min-height: var(--ziel); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--amber); font-weight: 700; }
  .rahmen-leiste svg { width: 22px; height: 22px; }
  .rahmen iframe { flex: 1; width: 100%; border: 0; background: var(--tool-grund, #fff); }
  /* „Kassette einlegen“ (S4): Der Rahmen wächst aus der Kassette, eine Blende in der Grundfarbe
     des Tools überdeckt das Laden und federt den Helligkeitssprung ab. Die Leiste nimmt die Farbe an. */
  .rahmen { --tool-grund: #fff; }
  .rahmen-leiste { position: relative; z-index: 2; }
  .rahmen.getoent .rahmen-leiste { background: var(--tool-grund); color: var(--tool-text); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--tool-text) 18%, transparent); }
  .rahmen.getoent .rahmen-leiste button { color: var(--tool-text); }
  /* Fokus: Die Leiste im Tool weicht, ein Wisch vom oberen Rand holt sie zurück (U13) */
  .leiste-zone { display: none; }
  .rahmen.fokus .rahmen-leiste { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-100%); transition: transform .2s ease-out; }
  .rahmen.fokus.leiste-da .rahmen-leiste { transform: none; }
  .rahmen.fokus .leiste-zone { display: block; position: absolute; top: 0; left: 0; right: 0; height: 20px; z-index: 3; touch-action: none; }
  .fehler-knopf { gap: 4px !important; padding: 0 10px; border-radius: 999px !important; color: #fff !important; background: #b0391f; font-variant-numeric: tabular-nums; }
  .fehler-knopf svg { width: 18px !important; height: 18px !important; }
  .blende { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--tool-grund); }

  /* ---------- Onboarding ---------- */
  .einfuehrung { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgb(15 10 6 / .82); animation: einblenden .2s ease-out; }
  .einfuehrung-karte { width: min(460px, 100%); padding: 22px 20px calc(18px + var(--sicher-unten)); display: grid; gap: 16px; }
  .einfuehrung-bild { justify-self: center; width: 96px; height: 96px; border-radius: 22px; display: grid; place-items: center; color: var(--amber); }
  .einfuehrung-bild svg { width: 52px; height: 52px; filter: drop-shadow(0 0 6px var(--amber-glow)); }
  .einfuehrung h2 { font-size: calc(21px * var(--skala)); text-align: center; }
  .einfuehrung p { color: var(--tinte-2); font-size: calc(16px * var(--skala)); line-height: 1.5; }
  .einfuehrung-punkte { display: flex; gap: 8px; justify-content: center; }
  .einfuehrung-punkte i { width: 9px; height: 9px; border-radius: 50%; background: rgb(0 0 0 / .2); }
  .einfuehrung-punkte i.an { background: var(--amber-tief, #a8741c); }

  /* ---------- Aussehen (Symbol & Farbe) ---------- */
  .symbolraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
  .symbolraster button { min-height: 52px; border-radius: 10px; display: grid; place-items: center; background: #fbf8f0; color: var(--tinte); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .12); }
  .symbolraster button[aria-pressed="true"] { background: var(--amber); }
  .symbolraster .symbol { width: 26px; height: 26px; }
  .farbraster { display: flex; flex-wrap: wrap; gap: 10px; }
  .farbraster button { width: 44px; height: 44px; border-radius: 50%; background: var(--f); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .2); }
  .farbraster button[aria-pressed="true"] { box-shadow: 0 0 0 3px #fbf8f0, 0 0 0 6px var(--tinte); }
  .vorschau-kassette { width: 150px; justify-self: center; pointer-events: none; }
  .sammlung { display: grid; gap: 10px; }
  .sammlung-liste { display: grid; gap: 10px; }
  .sammlung-reiter { display: grid; grid-template-columns: repeat(3, 1fr); }
  .symbolraster .emoji { font-size: 28px; }
  .taste:disabled { opacity: .5; }

  /* ---------- Bewertung ---------- */
  .sterne { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 6px 0 14px; }
  .sterne button { min-height: 56px; border-radius: 10px; font-size: 20px; font-weight: 800; color: var(--tinte); background: #fbf8f0; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .12); }
  .sterne button[aria-pressed="true"] { background: var(--amber); }

  /* ---------- Tool-Bild: Symbol, Emoji oder eigenes Foto ---------- */
  .emoji { font-size: calc(30px * var(--skala)); line-height: 1; font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
  .avatar { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
  .kassette-fenster:has(.avatar), .fs-zeichen:has(.avatar), .zeile-bild:has(.avatar) { padding: 0; overflow: hidden; }
  .fs-zeichen .emoji { font-size: 32px; }

  /* ---------- Bibliothek als Liste (U3) ---------- */
  .ansicht-wahl { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 3px; border-radius: 10px; background: var(--chip-grund); border: 1px solid var(--chip-rand); }
  .ansicht-wahl button { width: var(--ziel); height: var(--ziel); border-radius: 7px; display: grid; place-items: center; color: var(--grund-leise); }
  .ansicht-wahl button[aria-pressed="true"] { background: var(--amber); color: #2a1a05; }
  .ansicht-wahl svg { width: 22px; height: 22px; }
  .liste { display: grid; gap: 8px; padding: 0 16px; }
  .tool-zeile {
    --fach: #9a8f7a; --fach-text: #1d170e;
    position: relative; display: grid; grid-template-columns: 1fr var(--ziel); align-items: center;
    min-height: calc(64px * var(--skala)); border-radius: 12px; touch-action: manipulation;
  }
  .tool-zeile .zeile-start { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: inherit; padding: 8px 4px 8px 10px; text-align: start; color: var(--tinte); }
  .zeile-bild { width: calc(46px * var(--skala)); height: calc(46px * var(--skala)); border-radius: 10px; display: grid; place-items: center; color: var(--fach-text); background: var(--fach); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .35); }
  .zeile-bild .symbol { width: 26px; height: 26px; }
  .zeile-bild .emoji { font-size: calc(26px * var(--skala)); }
  .zeile-name { font-weight: 700; font-size: calc(16px * var(--skala)); line-height: 1.25; overflow-wrap: anywhere; }
  .zeile-name small { display: block; font-weight: 600; font-size: calc(13px * var(--skala)); color: var(--tinte-2); }
  .tool-zeile .kassette-mehr { position: static; color: var(--tinte-2); }
  .anordnen .tool-zeile { touch-action: none; cursor: grab; }
  .anordnen .tool-zeile.wird-gezogen { pointer-events: none; transform: scale(1.03); z-index: 5; box-shadow: 0 12px 24px rgb(0 0 0 / .45); }

  /* Grau ist ausgeblendeten Tools vorbehalten (U8) */
  .ist-ausgeblendet { filter: grayscale(1); opacity: .62; }

  /* ---------- Querformat: Navigation als Seitenleiste ----------
     Gesteuert über die Klasse .quer (siehe querSetzen), damit der Wechsel als
     View Transition animiert werden kann: Das Fortsetzen-Paneel schrumpft in den
     Fortsetzen-Knopf der Seitenleiste und wächst beim Zurückdrehen wieder heraus. */
  .tab-weiter { display: none; }
  .fortsetzen { view-transition-name: fortsetzen; }
  :root.quer { --rail: calc(116px + env(safe-area-inset-left, 0px)); --tab-hoehe: 0px; }
  .quer body { padding-inline-start: var(--rail); padding-inline-end: env(safe-area-inset-right, 0px); }
  .quer .tabs {
    top: 0; right: auto; width: var(--rail); height: auto;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 6px 8px env(safe-area-inset-left, 0px);
    grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: center; gap: 4px;
    border-top: 0; border-right: 1px solid var(--chip-rand); box-shadow: 6px 0 18px rgb(0 0 0 / .3);
  }
  .quer .tab { padding-top: 2px; min-height: 52px; }
  .quer .tab-mitte .rund { margin-top: 0; width: 46px; height: 46px; }
  .quer .tab-weiter { display: grid; view-transition-name: fortsetzen; color: var(--akzent-text); margin-bottom: 4px; }
  .quer .tab-weiter[hidden] { display: none; }
  .tab-weiter .weiter-bild {
    position: relative; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    color: var(--fach-text, #1d170e); background: var(--fach, #9a8f7a);
    box-shadow: inset 0 0 0 2px rgb(255 255 255 / .25), 0 0 12px color-mix(in srgb, var(--fach, #9a8f7a) 45%, transparent);
  }
  .tab-weiter .weiter-bild:has(.avatar) { overflow: hidden; }
  .tab-weiter .weiter-bild .symbol { width: 26px; height: 26px; }
  .tab-weiter .weiter-bild .emoji { font-size: 26px; }
  .tab-weiter .weiter-play { position: absolute; inset-inline-end: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #2a1a05; background: var(--amber); box-shadow: 0 0 0 2px var(--tab-1); }
  .tab-weiter .weiter-play svg { width: 11px; height: 11px; }
  .quer main { padding-bottom: 24px; }
  .quer .kopf { padding-top: calc(6px + env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .quer #v-start > .fortsetzen { display: none; }
  .quer .raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .quer .liste { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .quer .code-feld { height: 62dvh; }
  .quer .toast { left: calc(50% + var(--rail) / 2); bottom: 18px; }
  .quer .blatt { max-height: 94dvh; }
  .quer .einfuehrung-karte { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .quer .rahmen-leiste { min-height: calc(40px + env(safe-area-inset-top, 0px)); padding-left: env(safe-area-inset-left, 0px); }

  /* ---------- Schreibrichtung und Schriften ---------- */
  .sprache-laedt body { visibility: hidden; }
  .code-feld { direction: ltr; }
  :lang(ar), :lang(hi) { letter-spacing: normal !important; text-transform: none !important; }
  :lang(ar) *, :lang(hi) * { letter-spacing: normal !important; text-transform: none !important; }
  [dir="rtl"] #i-zurueck, [dir="rtl"] .rahmen-leiste #r-zurueck svg { transform: scaleX(-1); }
  [dir="rtl"] .suche .eingabe { background-position: calc(100% - 14px) center; }
  [dir="rtl"] .schalter::after { left: auto; right: 5px; }
  [dir="rtl"] .schalter[aria-checked="true"]::after { transform: translateX(-24px); }
  [dir="rtl"].quer .tabs { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--chip-rand); box-shadow: -6px 0 18px rgb(0 0 0 / .3); padding: calc(8px + env(safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) 8px 6px; }
  [dir="rtl"].quer .toast { left: calc(50% - var(--rail) / 2); }
  [dir="rtl"].quer .rahmen-leiste { padding-left: 0; padding-right: env(safe-area-inset-right, 0px); }
  ::view-transition-group(fortsetzen) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  ::view-transition-old(fortsetzen), ::view-transition-new(fortsetzen) { height: 100%; object-fit: cover; }
  ::view-transition-group(root) { animation-duration: .3s; }
}
/* Ungelayert: gewinnt gegen alle Layer, damit hidden immer greift */
[hidden] { display: none; }