/* ══════════════════════════════════════════════════════════════════
   TRUFFLE — die zehn Farbthemen.
   ERZEUGT von Website/farbthemen.py aus Sources/Farbthemen.swift.
   NICHT VON HAND ÄNDERN: der Bau schreibt diese Datei bei jedem Lauf
   neu, und die Farb-Wahrheit steht im Swift.
   ══════════════════════════════════════════════════════════════════ */

/* — die zehn Themen, je elf Marken, je hell und dunkel — */
[data-thema="wald"]{
  --brand-l:73 115 66; --brand-d:139 189 126;
  --brand-ink-l:49 90 45; --brand-ink-d:168 214 155;
  --paper-l:246 242 232; --paper-d:14 20 13;
  --surface-l:255 254 250; --surface-d:24 32 22;
  --surface-2-l:236 230 214; --surface-2-d:33 43 30;
  --ink-l:25 30 22; --ink-d:246 242 231;
  --good-l:46 135 62; --good-d:105 208 128;
  --bad-l:191 55 37; --bad-d:239 115 90;
  --honey-l:200 123 19; --honey-d:242 175 69;
  --lock-l:138 130 113; --lock-d:122 113 96;
  --on-accent-l:255 255 254; --on-accent-d:11 16 10;
}
[data-thema="rubin"]{
  --brand-l:170 37 55; --brand-d:230 90 105;
  --brand-ink-l:132 20 39; --brand-ink-d:245 130 140;
  --paper-l:249 243 242; --paper-d:19 12 14;
  --surface-l:255 252 252; --surface-d:30 20 22;
  --surface-2-l:241 231 231; --surface-2-d:41 27 30;
  --ink-l:29 22 23; --ink-d:248 241 241;
  --good-l:46 130 83; --good-d:109 210 150;
  --bad-l:200 74 22; --bad-d:245 140 82;
  --honey-l:189 135 27; --honey-d:242 186 81;
  --lock-l:146 130 132; --lock-d:122 105 107;
  --on-accent-l:255 249 249; --on-accent-d:14 8 10;
}
[data-thema="azur"]{
  --brand-l:27 95 179; --brand-d:96 165 246;
  --brand-ink-l:11 69 146; --brand-ink-d:138 193 252;
  --paper-l:242 245 249; --paper-d:11 15 22;
  --surface-l:252 253 255; --surface-d:19 25 35;
  --surface-2-l:229 236 244; --surface-2-d:27 34 47;
  --ink-l:20 25 33; --ink-d:241 245 249;
  --good-l:19 130 104; --good-d:90 216 177;
  --bad-l:201 52 69; --bad-d:248 117 126;
  --honey-l:186 130 20; --honey-d:248 186 81;
  --lock-l:130 138 150; --lock-d:109 117 130;
  --on-accent-l:255 255 255; --on-accent-d:9 12 18;
}
[data-thema="bernstein"]{
  --brand-l:180 122 8; --brand-d:248 189 56;
  --brand-ink-l:140 92 0; --brand-ink-d:252 212 106;
  --paper-l:250 246 236; --paper-d:20 16 9;
  --surface-l:255 253 246; --surface-d:30 25 14;
  --surface-2-l:243 236 218; --surface-2-d:41 34 19;
  --ink-l:33 27 14; --ink-d:250 246 236;
  --good-l:54 130 62; --good-d:122 210 127;
  --bad-l:189 52 39; --bad-d:242 115 96;
  --honey-l:156 102 14; --honey-d:230 162 61;
  --lock-l:150 138 115; --lock-d:126 113 90;
  --on-accent-l:25 19 5; --on-accent-d:19 15 8;
}
[data-thema="tinte"]{
  --brand-l:33 34 37; --brand-d:216 218 224;
  --brand-ink-l:8 9 11; --brand-ink-d:239 241 246;
  --paper-l:248 248 249; --paper-d:11 11 12;
  --surface-l:255 255 255; --surface-d:22 22 24;
  --surface-2-l:236 236 238; --surface-2-d:33 33 36;
  --ink-l:14 14 16; --ink-d:248 248 249;
  --good-l:28 115 61; --good-d:109 211 139;
  --bad-l:177 37 37; --bad-d:242 109 109;
  --honey-l:135 103 22; --honey-d:224 180 81;
  --lock-l:138 138 143; --lock-d:115 115 120;
  --on-accent-l:255 255 255; --on-accent-d:11 11 12;
}
[data-thema="schnee"]{
  --brand-l:66 81 115; --brand-d:177 189 214;
  --brand-ink-l:46 60 90; --brand-ink-d:211 218 234;
  --paper-l:255 255 255; --paper-d:14 15 18;
  --surface-l:255 255 255; --surface-d:25 27 32;
  --surface-2-l:242 244 248; --surface-2-d:36 38 44;
  --ink-l:16 20 28; --ink-d:249 250 252;
  --good-l:19 122 79; --good-d:102 208 163;
  --bad-l:191 46 56; --bad-d:242 113 121;
  --honey-l:175 122 19; --honey-d:237 186 85;
  --lock-l:135 143 156; --lock-d:115 122 135;
  --on-accent-l:255 255 255; --on-accent-d:11 12 15;
}
[data-thema="achtbit"]{
  --brand-l:22 138 53; --brand-d:56 255 103;
  --brand-ink-l:8 102 33; --brand-ink-d:122 255 152;
  --paper-l:237 242 236; --paper-d:5 14 8;
  --surface-l:250 255 250; --surface-d:11 25 14;
  --surface-2-l:224 236 224; --surface-2-d:16 34 19;
  --ink-l:11 25 14; --ink-d:211 255 216;
  --good-l:22 156 61; --good-d:79 255 118;
  --bad-l:189 27 56; --bad-d:255 90 109;
  --honey-l:175 140 0; --honey-d:255 212 55;
  --lock-l:115 130 118; --lock-d:96 122 102;
  --on-accent-l:250 255 250; --on-accent-d:4 11 6;
}
[data-thema="retro"]{
  --brand-l:186 92 19; --brand-d:242 150 68;
  --brand-ink-l:139 62 8; --brand-ink-d:250 180 105;
  --paper-l:246 236 217; --paper-d:25 18 12;
  --surface-l:254 248 234; --surface-d:35 27 18;
  --surface-2-l:236 221 196; --surface-2-d:45 35 24;
  --ink-l:49 33 18; --ink-d:246 236 218;
  --good-l:90 122 39; --good-d:156 201 90;
  --bad-l:170 50 39; --bad-d:233 111 90;
  --honey-l:177 138 27; --honey-d:234 189 79;
  --lock-l:150 130 105; --lock-d:126 105 81;
  --on-accent-l:255 250 242; --on-accent-d:19 14 9;
}
[data-thema="neon"]{
  --brand-l:191 19 135; --brand-d:252 77 186;
  --brand-ink-l:146 8 102; --brand-ink-d:254 122 208;
  --paper-l:246 242 248; --paper-d:11 8 22;
  --surface-l:255 252 255; --surface-d:20 15 37;
  --surface-2-l:237 230 241; --surface-2-d:28 22 50;
  --ink-l:25 18 33; --ink-d:246 242 254;
  --good-l:8 135 138; --good-d:66 240 240;
  --bad-l:200 41 68; --bad-d:255 104 130;
  --honey-l:177 122 19; --honey-d:252 199 74;
  --lock-l:135 126 145; --lock-d:115 105 130;
  --on-accent-l:255 252 255; --on-accent-d:9 6 18;
}
[data-thema="kupfer"]{
  --brand-l:163 81 43; --brand-d:229 138 90;
  --brand-ink-l:122 54 25; --brand-ink-d:242 169 126;
  --paper-l:245 240 237; --paper-d:20 14 12;
  --surface-l:255 252 250; --surface-d:30 22 19;
  --surface-2-l:236 228 224; --surface-2-d:40 30 26;
  --ink-l:32 24 21; --ink-d:245 240 237;
  --good-l:56 126 81; --good-d:122 207 150;
  --bad-l:186 47 46; --bad-d:240 111 105;
  --honey-l:180 132 39; --honey-d:239 186 95;
  --lock-l:143 130 122; --lock-d:118 105 98;
  --on-accent-l:255 252 250; --on-accent-d:14 10 8;
}

/* — welche Hälfte gilt: Standard hell — */
[data-thema]{
  --brand-rgb:var(--brand-l);
  --brand-ink-rgb:var(--brand-ink-l);
  --paper-rgb:var(--paper-l);
  --surface-rgb:var(--surface-l);
  --surface-2-rgb:var(--surface-2-l);
  --ink-rgb:var(--ink-l);
  --good-rgb:var(--good-l);
  --bad-rgb:var(--bad-l);
  --honey-rgb:var(--honey-l);
  --lock-rgb:var(--lock-l);
  --on-accent-rgb:var(--on-accent-l);
  --brand:rgb(var(--brand-rgb));
  --brand-ink:rgb(var(--brand-ink-rgb));
  --paper:rgb(var(--paper-rgb));
  --surface:rgb(var(--surface-rgb));
  --surface-2:rgb(var(--surface-2-rgb));
  --ink:rgb(var(--ink-rgb));
  --good:rgb(var(--good-rgb));
  --bad:rgb(var(--bad-rgb));
  --honey:rgb(var(--honey-rgb));
  --lock:rgb(var(--lock-rgb));
  --on-accent:rgb(var(--on-accent-rgb));
  --line:rgb(var(--ink-rgb) / 0.13);
  --line-2:rgb(var(--ink-rgb) / 0.22);
  --ink-2:rgb(var(--ink-rgb) / 0.66);
  --ink-3:rgb(var(--ink-rgb) / 0.46);
  --brand-soft:rgb(var(--brand-rgb) / 0.1);
  --brand-line:rgb(var(--brand-rgb) / 0.3);
  --good-bg:rgb(var(--good-rgb) / 0.12);
  --bad-bg:rgb(var(--bad-rgb) / 0.1);
  --honey-soft:rgb(var(--honey-rgb) / 0.12);
  --scrim:rgb(var(--paper-rgb) / 0.84);
  --ground:
    radial-gradient(980px 780px at 10% -8%, rgb(var(--brand-rgb) / .22), transparent 70%),
    radial-gradient(820px 660px at 102% 106%, rgb(var(--honey-rgb) / .13), transparent 70%),
    radial-gradient(640px 540px at 92% 18%, rgb(var(--brand-ink-rgb) / .10), transparent 70%);
  --leiste:linear-gradient(180deg,rgb(255 255 255 / .18) 0%,rgb(var(--brand-rgb) / .24) 2%,rgb(var(--brand-rgb) / .10) 45%,rgb(var(--surface-2-rgb) / .94) 100%);
  --flaeche:linear-gradient(180deg,var(--surface) 0%,var(--surface) 6%,var(--surface-2) 100%);
  --akzent:linear-gradient(180deg,rgb(var(--brand-rgb) / .92) 0%,var(--brand-ink) 42%,var(--brand-ink) 80%,rgb(var(--brand-rgb) / .80) 100%);
  --glaskante:linear-gradient(180deg,rgb(255 255 255 / .30),rgb(255 255 255 / .06),transparent);
  --shadow:0 1px 2px rgb(var(--ink-rgb) / .05),0 14px 34px -18px rgb(var(--ink-rgb) / .22);
  --shadow-lg:0 2px 4px rgb(var(--ink-rgb) / .06),0 40px 82px -32px rgb(var(--ink-rgb) / .34);
}

/* — System steht auf dunkel und niemand hat ausdrücklich hell gewählt — */
@media (prefers-color-scheme:dark){
  [data-thema]:not([data-erscheinung="hell"]){
    --brand-rgb:var(--brand-d);
    --brand-ink-rgb:var(--brand-ink-d);
    --paper-rgb:var(--paper-d);
    --surface-rgb:var(--surface-d);
    --surface-2-rgb:var(--surface-2-d);
    --ink-rgb:var(--ink-d);
    --good-rgb:var(--good-d);
    --bad-rgb:var(--bad-d);
    --honey-rgb:var(--honey-d);
    --lock-rgb:var(--lock-d);
    --on-accent-rgb:var(--on-accent-d);
    --brand:rgb(var(--brand-rgb));
    --brand-ink:rgb(var(--brand-ink-rgb));
    --paper:rgb(var(--paper-rgb));
    --surface:rgb(var(--surface-rgb));
    --surface-2:rgb(var(--surface-2-rgb));
    --ink:rgb(var(--ink-rgb));
    --good:rgb(var(--good-rgb));
    --bad:rgb(var(--bad-rgb));
    --honey:rgb(var(--honey-rgb));
    --lock:rgb(var(--lock-rgb));
    --on-accent:rgb(var(--on-accent-rgb));
    --line:rgb(var(--ink-rgb) / 0.14);
    --line-2:rgb(var(--ink-rgb) / 0.24);
    --ink-2:rgb(var(--ink-rgb) / 0.7);
    --ink-3:rgb(var(--ink-rgb) / 0.48);
    --brand-soft:rgb(var(--brand-rgb) / 0.14);
    --brand-line:rgb(var(--brand-rgb) / 0.34);
    --good-bg:rgb(var(--good-rgb) / 0.14);
    --bad-bg:rgb(var(--bad-rgb) / 0.14);
    --honey-soft:rgb(var(--honey-rgb) / 0.14);
    --scrim:rgb(var(--paper-rgb) / 0.82);
    --ground:
      radial-gradient(980px 780px at 10% -8%, rgb(var(--brand-rgb) / .22), transparent 70%),
      radial-gradient(820px 660px at 102% 106%, rgb(var(--honey-rgb) / .13), transparent 70%),
      radial-gradient(640px 540px at 92% 18%, rgb(var(--brand-ink-rgb) / .10), transparent 70%);
    --leiste:linear-gradient(180deg,rgb(255 255 255 / .18) 0%,rgb(var(--brand-rgb) / .24) 2%,rgb(var(--brand-rgb) / .10) 45%,rgb(var(--surface-2-rgb) / .94) 100%);
    --flaeche:linear-gradient(180deg,var(--surface) 0%,var(--surface) 6%,var(--surface-2) 100%);
    --akzent:linear-gradient(180deg,rgb(var(--brand-rgb) / .92) 0%,var(--brand-ink) 42%,var(--brand-ink) 80%,rgb(var(--brand-rgb) / .80) 100%);
    --glaskante:linear-gradient(180deg,rgb(255 255 255 / .30),rgb(255 255 255 / .06),transparent);
    --shadow:0 1px 0 rgb(255 255 255 / .03),0 20px 48px -24px rgb(0 0 0 / .72);
    --shadow-lg:0 1px 0 rgb(255 255 255 / .04),0 56px 112px -38px rgb(0 0 0 / .86);
  }
}

/* — ausdrücklich dunkel gewählt, auch wenn das System hell steht — */
[data-thema][data-erscheinung="dunkel"]{
  --brand-rgb:var(--brand-d);
  --brand-ink-rgb:var(--brand-ink-d);
  --paper-rgb:var(--paper-d);
  --surface-rgb:var(--surface-d);
  --surface-2-rgb:var(--surface-2-d);
  --ink-rgb:var(--ink-d);
  --good-rgb:var(--good-d);
  --bad-rgb:var(--bad-d);
  --honey-rgb:var(--honey-d);
  --lock-rgb:var(--lock-d);
  --on-accent-rgb:var(--on-accent-d);
  --brand:rgb(var(--brand-rgb));
  --brand-ink:rgb(var(--brand-ink-rgb));
  --paper:rgb(var(--paper-rgb));
  --surface:rgb(var(--surface-rgb));
  --surface-2:rgb(var(--surface-2-rgb));
  --ink:rgb(var(--ink-rgb));
  --good:rgb(var(--good-rgb));
  --bad:rgb(var(--bad-rgb));
  --honey:rgb(var(--honey-rgb));
  --lock:rgb(var(--lock-rgb));
  --on-accent:rgb(var(--on-accent-rgb));
  --line:rgb(var(--ink-rgb) / 0.14);
  --line-2:rgb(var(--ink-rgb) / 0.24);
  --ink-2:rgb(var(--ink-rgb) / 0.7);
  --ink-3:rgb(var(--ink-rgb) / 0.48);
  --brand-soft:rgb(var(--brand-rgb) / 0.14);
  --brand-line:rgb(var(--brand-rgb) / 0.34);
  --good-bg:rgb(var(--good-rgb) / 0.14);
  --bad-bg:rgb(var(--bad-rgb) / 0.14);
  --honey-soft:rgb(var(--honey-rgb) / 0.14);
  --scrim:rgb(var(--paper-rgb) / 0.82);
  --ground:
    radial-gradient(980px 780px at 10% -8%, rgb(var(--brand-rgb) / .22), transparent 70%),
    radial-gradient(820px 660px at 102% 106%, rgb(var(--honey-rgb) / .13), transparent 70%),
    radial-gradient(640px 540px at 92% 18%, rgb(var(--brand-ink-rgb) / .10), transparent 70%);
  --leiste:linear-gradient(180deg,rgb(255 255 255 / .18) 0%,rgb(var(--brand-rgb) / .24) 2%,rgb(var(--brand-rgb) / .10) 45%,rgb(var(--surface-2-rgb) / .94) 100%);
  --flaeche:linear-gradient(180deg,var(--surface) 0%,var(--surface) 6%,var(--surface-2) 100%);
  --akzent:linear-gradient(180deg,rgb(var(--brand-rgb) / .92) 0%,var(--brand-ink) 42%,var(--brand-ink) 80%,rgb(var(--brand-rgb) / .80) 100%);
  --glaskante:linear-gradient(180deg,rgb(255 255 255 / .30),rgb(255 255 255 / .06),transparent);
  --shadow:0 1px 0 rgb(255 255 255 / .03),0 20px 48px -24px rgb(0 0 0 / .72);
  --shadow-lg:0 1px 0 rgb(255 255 255 / .04),0 56px 112px -38px rgb(0 0 0 / .86);
}

/* — der Wirt (Artifact-Ansicht) oder runtime.js hat dunkel gestempelt — */
:root[data-theme="dark"] [data-thema]:not([data-erscheinung="hell"]):not([data-erscheinung="dunkel"]),
:root[data-theme="dark"][data-thema]:not([data-erscheinung="hell"]):not([data-erscheinung="dunkel"]){
  --brand-rgb:var(--brand-d);
  --brand-ink-rgb:var(--brand-ink-d);
  --paper-rgb:var(--paper-d);
  --surface-rgb:var(--surface-d);
  --surface-2-rgb:var(--surface-2-d);
  --ink-rgb:var(--ink-d);
  --good-rgb:var(--good-d);
  --bad-rgb:var(--bad-d);
  --honey-rgb:var(--honey-d);
  --lock-rgb:var(--lock-d);
  --on-accent-rgb:var(--on-accent-d);
  --brand:rgb(var(--brand-rgb));
  --brand-ink:rgb(var(--brand-ink-rgb));
  --paper:rgb(var(--paper-rgb));
  --surface:rgb(var(--surface-rgb));
  --surface-2:rgb(var(--surface-2-rgb));
  --ink:rgb(var(--ink-rgb));
  --good:rgb(var(--good-rgb));
  --bad:rgb(var(--bad-rgb));
  --honey:rgb(var(--honey-rgb));
  --lock:rgb(var(--lock-rgb));
  --on-accent:rgb(var(--on-accent-rgb));
  --line:rgb(var(--ink-rgb) / 0.14);
  --line-2:rgb(var(--ink-rgb) / 0.24);
  --ink-2:rgb(var(--ink-rgb) / 0.7);
  --ink-3:rgb(var(--ink-rgb) / 0.48);
  --brand-soft:rgb(var(--brand-rgb) / 0.14);
  --brand-line:rgb(var(--brand-rgb) / 0.34);
  --good-bg:rgb(var(--good-rgb) / 0.14);
  --bad-bg:rgb(var(--bad-rgb) / 0.14);
  --honey-soft:rgb(var(--honey-rgb) / 0.14);
  --scrim:rgb(var(--paper-rgb) / 0.82);
  --ground:
    radial-gradient(980px 780px at 10% -8%, rgb(var(--brand-rgb) / .22), transparent 70%),
    radial-gradient(820px 660px at 102% 106%, rgb(var(--honey-rgb) / .13), transparent 70%),
    radial-gradient(640px 540px at 92% 18%, rgb(var(--brand-ink-rgb) / .10), transparent 70%);
  --leiste:linear-gradient(180deg,rgb(255 255 255 / .18) 0%,rgb(var(--brand-rgb) / .24) 2%,rgb(var(--brand-rgb) / .10) 45%,rgb(var(--surface-2-rgb) / .94) 100%);
  --flaeche:linear-gradient(180deg,var(--surface) 0%,var(--surface) 6%,var(--surface-2) 100%);
  --akzent:linear-gradient(180deg,rgb(var(--brand-rgb) / .92) 0%,var(--brand-ink) 42%,var(--brand-ink) 80%,rgb(var(--brand-rgb) / .80) 100%);
  --glaskante:linear-gradient(180deg,rgb(255 255 255 / .30),rgb(255 255 255 / .06),transparent);
  --shadow:0 1px 0 rgb(255 255 255 / .03),0 20px 48px -24px rgb(0 0 0 / .72);
  --shadow-lg:0 1px 0 rgb(255 255 255 / .04),0 56px 112px -38px rgb(0 0 0 / .86);
}

/* — hell gestempelt, auch auf einem dunklen System — */
:root[data-theme="light"] [data-thema]:not([data-erscheinung="hell"]):not([data-erscheinung="dunkel"]),
:root[data-theme="light"][data-thema]:not([data-erscheinung="hell"]):not([data-erscheinung="dunkel"]){
  --brand-rgb:var(--brand-l);
  --brand-ink-rgb:var(--brand-ink-l);
  --paper-rgb:var(--paper-l);
  --surface-rgb:var(--surface-l);
  --surface-2-rgb:var(--surface-2-l);
  --ink-rgb:var(--ink-l);
  --good-rgb:var(--good-l);
  --bad-rgb:var(--bad-l);
  --honey-rgb:var(--honey-l);
  --lock-rgb:var(--lock-l);
  --on-accent-rgb:var(--on-accent-l);
  --brand:rgb(var(--brand-rgb));
  --brand-ink:rgb(var(--brand-ink-rgb));
  --paper:rgb(var(--paper-rgb));
  --surface:rgb(var(--surface-rgb));
  --surface-2:rgb(var(--surface-2-rgb));
  --ink:rgb(var(--ink-rgb));
  --good:rgb(var(--good-rgb));
  --bad:rgb(var(--bad-rgb));
  --honey:rgb(var(--honey-rgb));
  --lock:rgb(var(--lock-rgb));
  --on-accent:rgb(var(--on-accent-rgb));
  --line:rgb(var(--ink-rgb) / 0.13);
  --line-2:rgb(var(--ink-rgb) / 0.22);
  --ink-2:rgb(var(--ink-rgb) / 0.66);
  --ink-3:rgb(var(--ink-rgb) / 0.46);
  --brand-soft:rgb(var(--brand-rgb) / 0.1);
  --brand-line:rgb(var(--brand-rgb) / 0.3);
  --good-bg:rgb(var(--good-rgb) / 0.12);
  --bad-bg:rgb(var(--bad-rgb) / 0.1);
  --honey-soft:rgb(var(--honey-rgb) / 0.12);
  --scrim:rgb(var(--paper-rgb) / 0.84);
  --ground:
    radial-gradient(980px 780px at 10% -8%, rgb(var(--brand-rgb) / .22), transparent 70%),
    radial-gradient(820px 660px at 102% 106%, rgb(var(--honey-rgb) / .13), transparent 70%),
    radial-gradient(640px 540px at 92% 18%, rgb(var(--brand-ink-rgb) / .10), transparent 70%);
  --leiste:linear-gradient(180deg,rgb(255 255 255 / .18) 0%,rgb(var(--brand-rgb) / .24) 2%,rgb(var(--brand-rgb) / .10) 45%,rgb(var(--surface-2-rgb) / .94) 100%);
  --flaeche:linear-gradient(180deg,var(--surface) 0%,var(--surface) 6%,var(--surface-2) 100%);
  --akzent:linear-gradient(180deg,rgb(var(--brand-rgb) / .92) 0%,var(--brand-ink) 42%,var(--brand-ink) 80%,rgb(var(--brand-rgb) / .80) 100%);
  --glaskante:linear-gradient(180deg,rgb(255 255 255 / .30),rgb(255 255 255 / .06),transparent);
  --shadow:0 1px 2px rgb(var(--ink-rgb) / .05),0 14px 34px -18px rgb(var(--ink-rgb) / .22);
  --shadow-lg:0 2px 4px rgb(var(--ink-rgb) / .06),0 40px 82px -32px rgb(var(--ink-rgb) / .34);
}


/* ══════════════════════════════════════════════════════════════════
   TRUFFLE — die Marken, die KEIN Farbthema anfasst.

   DIE FARBEN STEHEN NICHT MEHR HIER. Sie kommen aus Sources/
   Farbthemen.swift, geholt über farbthemen.py beim Bau (themen.css,
   zehn Themen, je elf Marken, je hell und dunkel) — der Bau schreibt
   sie vor diese Datei. Hier stand eine Kopie der Palette „Sage", die
   „1:1 aus der App" sein wollte und es nach dem Audit vom August in
   acht von elf Marken nicht mehr war. Eine Kopie veraltet; eine
   Ableitung nicht.

   Was bleibt: Schrift, Radien, Breite, die macOS-Ampel — genau die
   Marken, die laut Farbthemen.swift in keinem Thema wechseln.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Die Ampel des Fensters ist macOS, nicht Truffle — sie bleibt in jedem
     Thema dieselbe. Ein grünes Schliessen-Knöpfchen im Thema „achtbit"
     wäre eine Lüge über das Betriebssystem. */
  --tl-r:#EC6A5E; --tl-y:#F0B94A; --tl-g:#63C257;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,
         "Helvetica Neue",Roboto,"Noto Sans","Noto Sans Arabic",sans-serif;
  --font-round:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,
         "Segoe UI Variable Display","Segoe UI",system-ui,"Noto Sans",sans-serif;
  --font-brand:"Outfit","Avenir Next",ui-rounded,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1180px;
  --r:14px;   /* Karten, wie in der App */
  --r-lg:16px;
  --r-sm:10px;
}

/* ══════════════════════════════════════════════════════════════════
   BASE + COMPONENTS
   Everything here mirrors a recipe that exists in the app:
   card() · Leuchten.grund/flaeche/leiste/akzent/balken · Schein ·
   the before→after diff · the completeness meter · source pills.
   Rule taken from the app (Leuchten): gradients are free, glow only
   on a few elements at once, motion only as an answer to a click.
   ══════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ground),var(--paper);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0;font-family:var(--font-round);
  line-height:1.1;letter-spacing:-.02em;text-wrap:balance;font-weight:640;
}
h1{font-size:clamp(2.25rem,5vw,3.65rem);letter-spacing:-.03em;font-weight:680}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.1rem;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:var(--brand);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* Die Wortmarke — OUTFIT, genau die Werte aus Sources/BrandFont.swift.
   Bis zum 17.09.2026 stand hier Fraunces; die App hatte am 02.09.2026 auf
   Outfit gewechselt, die Website war stehen geblieben, und im Kopf der Seite
   stand eine andere Marke als im Kopf des Programms (Marians Befund). Die
   Achsen opsz/SOFT/WONK gab es nur bei Fraunces — Outfit hat allein wght. */
@font-face{
  font-family:"Outfit";
  src:url(data:font/woff2;base64,d09GMgABAAAAAArIABMAAAAAFDQAAApcAAEZmgAAAAAAAAAAAAAAAAAAAAAAAAAAGoEwG4MOHII8P0hWQVJ1P01WQVJQBmA/U1RBVIEeAFQvbBEICocUhTUwiz4BNgIkAzQLHAAEIAWFLAcgG/ERUZSQ1uhQ/EzI3PTQrMlwUiI2vbl+di0uaor3R0gy6z/Rpr0/s8YKuhHfEmICEaOUaMVIVTkRh4Zz86qSuoL//H7ubJ4WsktSSa7IN78PCY0SSZES4OH5e3fuX02BDAJdNIdNjUMOMPFApr0EaP2/fr/U3t77GyB+M0+ekbEROhPhD3hD/ANMksDljItwG+AiCcOKdCtTl6kwFb5CqEK5sfuRiog0CTEt62VT96Jc5CJGinbsz6ffIAjnBtQCAOBibgJCiEBAJDZEpWNUnMmnEeFUGh0R8OiBH2C7CYXsr4lxQtQBvYb8cQws4eA76IEOYAD67xck1a6bdtPpd+eb1WYgc2RhbdEouAAqnwDWnUy3CB1eSEeIAMD7bP6es3UEAVgiAfsYjOp0LroeAHEjRGYjpNVaiWmzECntBsjpsK5gQjaKUEkbk+73AnQjwQG/jYmhB3Af3oFA1hU0vd1f3jp9uv9vsfKnAADSH1n/D5IApFfaKU8FgGz4TAAAIDLCCEQKlY4QHcMAAAcABOAAHpLU60Q8LOIQRB1g+kgdC0nIQgHBfk3y9vj1jxulClzWWsnkz06Wpy8qIT9fqJmohqNri3MlAb2j7QWTI+Xk6dEp+zEBQBAAAYskEEzwIkFTHUhvegvsKs3z46AWKSOwDxINE+g0ekqVocrHHAeoE47pRMBBtJpWy7aUC+wVqLEijciKQAIi0SCE+YAJiEJH8H+1EwNYgPBT4qf9y385jnpOhUS/7jMOuSZkBbMXFs6vWAg3whDgvhoPhHBGCVYnSZW54HTZQABAwfnmF4oEgB3JNgDgyo1AAOgx9ePP3PaYVrYPQuZHlA/YPZsGYDQopZF8hIkuN3H9ewEWfyZh+dbUSbhWk0D8AejJXgBYbAhREMBkA+RjV0EkFwFwK1SpWZ+1O9kHFwBwifI15/gF6SqoGjqms7gH2IPQXNHBIL7Gpq2uE+Mb3PpyTZ4AAAzAASaOACZBGKBTMIJJeCobSwMm4epbv5/+sR/8fgTAjUCk26toDsR7QxQcd1AQQwMp9/6irxxI26gEqmegCqA3UA1gQ4Dqik+kBsA7ADUBxmchlNIcAMAAALmjQCoMvUUAAAECEBoI8y3RyItvhtCVlbpOU3vGELfg0gShVjXEnHY2OYCz0YBZjzb/tqVLKb5smXb7kiWIPWLqZJjP3yjqbYsXI2a+Hb+sruKNxZo4s/fXivLXPlsYDWEGGdA+maxxjfHSeAm/eScva5nZl7DB3YsXuzqkJlp5RvZr68RVVXwx6c9voT71X+zTgWmr22cXZ8vAaesapff0jdUa0Ett4F6rDd9U4C0A3PeNmwz/sTkFjpteKHoBXlvvuaHQub09wXPODnWH5jQ3zQ8LyH+x4N6b2qumTwi0BWc0BmaFwo1z5zaF6yPF7/dsnlOJR6urfV2dJZXWlMae4meymzq628ofeSevOw+RT4o+QeSPoj9yeqfNmtPnffnWvj5uDR09AWlb86RA3YygXqQ1lI7rq67tmzx/rFakd9TNnBhAoa377GGh83q6Q2Lee9PMis09PSXNzXT7iKLq9lnNTbODQ5vmzmppbxhRuKbHNcmLR73VJV2dJVVViwvLsmtvaG3p6G4rfPSdvJF5v7xTvbAqLBHaXRsn7aRlffwdedo7PxX9tOWNeu1OjNp7p0XnzFqQd8bEiXfnarz/i+pvYb0RSL+qYZiDz3CIVOqmG+hf1sYuZD9aCCPGYEIPAwgDepgshCEKxBhjwm8FgxgUspD9B4T3Z66rdwgt8D0MSzS1rECbYu+8ivWY9Q2nMk8pDCtY5m4M4zZmnxtSFrOO7C06NHeoLHmlRF9dlS2jPDsejz+4rhMJLBQT7ItjRJswAmXHDu/d6cq+I8dSksbblOLiTd9/+fvgUbWslUcqsx3ctuxfljqGo/G4l8k23WXSY/DU4d2bIyoq9FPr/pCy5pha0DaKCTfxdKJMP5FcjZI8wlzlTXxDfU7OiVdf/GqHXDLpQh5tkk85sW5FqZUFT7wklYLiyCz0wufqwrFt69e0dhjH//8M5d/DevGY0ydMH8dOpQa0Y71WX4vMpNj9cqa30p+WMrJ8TfC7duXnwxWPeQ6kHDlkuLUV//7FDB7F76b5+0DmP7CbtOqe085XM6taJl/GqGRywgRM2GpZvNVepoxc15vPPjz56w143LIed42yppZzduATdwUrkB3HARfhcLEyJDCv1LNr2eyXVVUVVdVUVx8jd0F1EFkvApxmy/40M5Xhdqz+//d5mwfsBjGi3JoSX/7dkFBD0YsvPnOO6GmZEjQs7As2WlZ5w1tPP/QQBGIhNbvth91gnM2es9zYt7Ojo8q189dfs/1Kj2hw0yjoGDeuxDBtItvxIPZzEoj5l/EcedeaTizCIjln69uTnO31i6kU1y2jE7eECaJhOVXuHPuCR4RHwMuO7dlpl+49esqdnz8ib+OWPSytl7bySKUGHdmdzMqUoMfjBVy26U6TsacG3UH+wy93T+JRW24L0xu2ywlvBt++Rpcmj0nlvV0RedvSZFqyxp/Hfac1DzEO7R3aWARf3Eql6MaZceL/QyHjxTfekfLXqezaCWd2zZvtku4ZnIhnGMtZLa+6rb2dic68kkaZS21rKxNrFAdCfWPzvP6GcART1MRjvsFDWo6i7V27ds2/FRv33Ebr4d6qTcj/2IyNem3k+k48EEbanJ7yrpmXyjSZ7MR9uE90PpF39LldSOBFvMVHTTnnim48iA98LhbGffGY77dNRpkU55H9/3/7bOGPd99B/D94SxYmVGFVSM08MPsP2It9FecT4PPds78foXjMuW2fkpPz11+rdm99rKomDB3UJTLGmUetMzbZ/ZMuTc5wZsOHFTHbUzDh4Q3W45lxl9gT0h/2Wne0+4CzKbO4riWke7w+fyd3MVhVlT+kosJTEURhPEamGc95/lpP2nQzm61j9wCtu7lLjXW6YV9ux8RLr8spae+LdmMgvqsJORQ99+L58zvnhZGIYX48RpYVz3lAW44NbRpihsc/6V8DIACU89i31r875jqChxTOtwLA6lVbUgCwvj2rMn1jmhnP8VcBSGAAAAJ+GkuN/U8CUk/5ACHgDPYCFrIE/MKEHMh284UI0CIU4WtE6D5GMKCXDk0C2C1lzK7bexIREAADH8COsZCYiaP1HmyHiwQbgFeAVBIy8YpksOMrycVV+2O1QJSidkelJDMCOS5KjCgjCCOSoMe01cyXHGZEpQA1rlwlCikj6QdcJGU44y6pQImnpA3ueOn1VajxiW4G0zebRCAiYQH1Avy9Z9IYuPnjMYQnkeoi7N1+GecNpU6KR5yMtznCytnqiDmqa6hr+hkk2s8zr4oWMmhK3L4kBl5X0JcO1xFHxmwX55Hq37jGETCqF7aKWn716nU4ne2FoGnvX4C9VTJJjtaEGSwGvMdofxKV46KsVptaAS1mszqBx7HpZX5TccfaP/aFRBVPDSshP8N5J2E0mxRIo4GAknfQP/aFdDlxGigf90bh0eWXfkIA) format("woff2");
  font-weight:100 900;font-display:swap;
}
.wordmark{
  font-family:var(--font-brand);font-weight:600;
  /* BrandFont.tracking: minus zwei Prozent der Schriftgroesse — in CSS ist
     em genau das, also gilt eine Zahl fuer jede Groesse. */
  letter-spacing:-.02em;
}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.tnum{font-variant-numeric:tabular-nums}

/* small-caps label — the app's column heads and source labels */
.caps{
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-family:var(--font-round);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-ink);font-family:var(--font-round);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}
.lede{color:var(--ink-2);font-size:1.08rem;line-height:1.62}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-round);font-size:.97rem;font-weight:640;
  padding:.72em 1.35em;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .14s ease,box-shadow .2s ease,border-color .18s ease,background .18s ease;
  white-space:nowrap;
}
/* phones: long CTA labels (Greek, Ukrainian …) may wrap instead of overflowing */
@media (max-width:480px){.btn{white-space:normal}}
/* exactly one saturated primary action per context (Von-Restorff, DESIGN.md §5) */
.btn-primary{
  background:linear-gradient(180deg,var(--brand-ink),var(--brand));
  color:var(--on-accent);box-shadow:0 8px 20px -10px var(--brand);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -11px var(--brand)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn-lg{padding:.85em 1.7em;font-size:1.04rem}

/* ── nav ─────────────────────────────────────────────────────────── */
nav.top{
  position:sticky;top:0;z-index:60;background:var(--scrim);
  backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-size:1.32rem}
.brand .tile{width:28px;height:28px;flex:none}
.nav-links{display:flex;gap:22px;margin-inline-start:14px}
.nav-links a{
  font-family:var(--font-round);font-size:.86rem;font-weight:560;color:var(--ink-2);
  padding-block:4px;border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s;
}
.nav-links a:hover{color:var(--brand-ink);border-color:var(--brand)}
.nav-act{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
/* Das Trüffelschwein im Kopf (06.10.2026): fester Platz, kein Verschieben; das Schild darunter schwebt über der Seite. */
.kopfschwein{position:relative;flex:none;width:40px;height:40px;margin-inline-start:-6px}
.kopfschwein canvas{display:block;width:40px;height:40px;cursor:pointer}
.kopfschwein-tag{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-4px);white-space:nowrap;pointer-events:none;
  font:600 .74rem/1 var(--font-round);color:var(--on-accent);background:var(--brand);padding:.38em .62em;border-radius:999px;
  box-shadow:0 4px 14px -6px var(--brand);opacity:0;transition:opacity .25s,transform .25s}
.kopfschwein-tag.an{opacity:1;transform:translate(-50%,0)}
@media (max-width:389px){.kopfschwein{display:none}}
@media (max-width:1000px){.nav-links{display:none}}
/* very narrow screens: the tile stands for the brand — the bar must never
   overflow, in any of the 20 languages (Greek's CTA is the widest) */
@media (max-width:430px){
  .nav-in{gap:10px;padding-inline:18px}
  .nav-act{gap:6px}
  .brand-name{display:none}
  .langbtn{padding-inline:9px;gap:5px}
  .nav-cta{padding:.5em .78em}
}

.icon-btn{
  width:38px;height:34px;display:grid;place-items:center;border:1px solid var(--line-2);
  background:var(--surface);border-radius:999px;cursor:pointer;color:var(--ink-2);
}
.icon-btn:hover{color:var(--brand-ink);border-color:var(--brand)}
.icon-btn svg{width:17px;height:17px}
.icon-btn .moon{display:none}
:root[data-theme="dark"] .icon-btn .moon{display:block}
:root[data-theme="dark"] .icon-btn .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .icon-btn .moon{display:block}
  :root:not([data-theme="light"]) .icon-btn .sun{display:none}
}

.lang-wrap{position:relative;display:inline-flex}
.langbtn{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding-inline:12px;
  border:1px solid var(--line-2);background:var(--surface);border-radius:999px;cursor:pointer;
  color:var(--ink-2);font-family:var(--font-round);font-size:.8rem;font-weight:600;
}
.langbtn:hover{color:var(--brand-ink);border-color:var(--brand)}
.langbtn svg{width:15px;height:15px;flex:none}
.langbtn .caret{width:9px;height:9px;opacity:.7}
.lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:90;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:6px;min-width:230px;max-height:min(66vh,420px);
  overflow:auto;display:grid;gap:1px;max-width:calc(100vw - 20px);
}
/* Siehe components.css, gleicher Abschnitt: auf dem Telefon spannt das Blatt
   unter der ganzen Kopfzeile statt unter seinem Knopf. */
@media (max-width:700px){
  .lang-wrap{position:static}
  .lang-menu{inset-inline:12px;top:calc(100% + 6px);
    min-width:0;max-width:none;max-height:min(62vh,420px)}
}
.lang-menu[hidden]{display:none}
.lang-menu button{
  display:flex;justify-content:space-between;gap:14px;width:100%;text-align:start;
  background:none;border:0;border-radius:9px;padding:8px 11px;
  font-family:var(--font);font-size:.88rem;color:var(--ink);cursor:pointer;
}
.lang-menu button:hover{background:var(--brand-soft);color:var(--brand-ink)}
.lang-menu button .nat{color:var(--ink-3)}
.lang-menu button[aria-current="true"]{color:var(--brand-ink);font-weight:650}
.lang-menu button[aria-current="true"] .nat{color:var(--brand-ink);opacity:.7}

/* ── sections ────────────────────────────────────────────────────── */
section{position:relative;padding-block:clamp(56px,7.5vw,100px)}
.band{background:var(--surface);border-block:1px solid var(--line)}
.sec-head{max-width:660px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2{margin:.35em 0 .4em}
.sec-head p{color:var(--ink-2);font-size:1.05rem}

/* card recipe = surfaceUp + hairline + radius 14 (DesignSystem.card) */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
}

/* ── the diff motif — the app's core motif, drawn identically ────── */
.diff-row{
  display:grid;grid-template-columns:minmax(72px,auto) 1fr;gap:6px 14px;align-items:start;
  padding-block:9px;border-top:1px dashed var(--line);
}
.diff-row:first-of-type{border-top:0}
.diff-row .f{padding-top:4px;max-width:11ch;line-height:1.25}
.diff-row .b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px}
.old{
  color:var(--bad);text-decoration:line-through;text-decoration-thickness:1.5px;
  background:var(--bad-bg);padding:1px 7px;border-radius:5px;font-size:.9rem;
}
.old.empty{text-decoration:none;font-style:italic;background:transparent;color:var(--ink-3)}
.arw{color:var(--ink-3);font-size:.85rem}
.new{color:var(--ink);font-weight:700;font-size:.94rem;background:var(--good-bg);padding:1px 8px;border-radius:5px}

/* source pill — brand or secondary, never a rainbow (DESIGN.md §5) */
.pill{
  display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--font-round);font-size:.65rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand-ink);border:1px solid var(--brand-line);
  background:var(--brand-soft);padding:2px 8px;border-radius:999px;white-space:nowrap;
}
.pill.mut{color:var(--ink-3);border-color:var(--line-2);background:transparent}
.pill.ok{color:var(--good);border-color:var(--good);background:var(--good-bg)}
.pill.lock{color:var(--lock);border-color:var(--lock);background:transparent}

/* completeness meter — one colour, no traffic light */
.meter{
  position:relative;height:7px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;overflow:hidden;min-width:56px;flex:1;
}
.meter i{
  position:absolute;inset-block:0;inset-inline-start:0;width:var(--v,0%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 75%,transparent),var(--brand));
}

/* ── reveal on scroll ────────────────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important}
  .btn:hover{transform:none}
}
@media (max-width:640px){body{font-size:16px}}

/* ══════════════════════════════════════════════════════════════════
   COMPONENTS — Kopfleiste, Sprach- und Farbmenü, die Seite „Der Strom"
   (Gewinner der Makeover-Runde, 26.08.2026), Fussbereich, Rechtsseiten.

   Die Sektionen der Seite kommen 1:1 aus Website/entwuerfe/makeover/
   4k-strom.html — dort unter der ID #m4k entwickelt, hier unter der
   Klasse .m4k am <main>, damit die Spezifität eine Klasse bleibt.
   Farben ausschliesslich über die Marken aus dem Swift; die Cover-
   Skizzen und die Ampel sind bewusst die einzigen festen Farben.
   ══════════════════════════════════════════════════════════════════ */

/* ── Kopfleiste ────────────────────────────────────────────────── */
.icon-btn{
  width:38px;height:34px;display:grid;place-items:center;border:1px solid var(--line-2);
  background:var(--surface);border-radius:999px;cursor:pointer;color:var(--ink-2);
}
.icon-btn:hover{color:var(--brand-ink);border-color:var(--brand)}
.icon-btn svg{width:17px;height:17px}
.icon-btn .moon{display:none}
:root[data-theme="dark"] .icon-btn .moon{display:block}
:root[data-theme="dark"] .icon-btn .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .icon-btn .moon{display:block}
  :root:not([data-theme="light"]) .icon-btn .sun{display:none}
}

.lang-wrap{position:relative;display:inline-flex}
.langbtn{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding-inline:12px;
  border:1px solid var(--line-2);background:var(--surface);border-radius:999px;cursor:pointer;
  color:var(--ink-2);font-family:var(--font-round);font-size:.8rem;font-weight:600;
}
.langbtn:hover{color:var(--brand-ink);border-color:var(--brand)}
.langbtn svg{width:15px;height:15px;flex:none}
.langbtn .caret{width:9px;height:9px;opacity:.7}
.lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:90;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:6px;min-width:230px;max-height:min(66vh,420px);
  overflow:auto;display:grid;gap:1px;
  max-width:calc(100vw - 20px);
}
/* DAS SPRACHBLATT HING LINKS AUS DEM BILD (Marians Befund, 17.09.2026).
   Es hängt am rechten Rand SEINES KNOPFES und wächst nach links. Auf dem
   Telefon steht der Knopf aber nicht am rechten Rand, sondern als zweites
   Ding in der Zeile — 230 px nach links davon liegen ausserhalb des
   Bildschirms, und die Spalte mit den englischen Namen war abgeschnitten.
   Ein Deckel allein half nicht: das Blatt war schon schmal genug, es stand
   nur an der falschen Stelle.
   Deshalb unter 700 px: `.lang-wrap` wird `static`, damit der Bezugsrahmen
   die KOPFZEILE ist (sie ist `sticky` und damit positioniert), und das Blatt
   spannt von Rand zu Rand mit 12 px Luft. `top:calc(100% + 6px)` heisst dann
   „unter der Kopfzeile" statt „unter dem Knopf" — dasselbe Ergebnis, nur
   sicher im Bild. */
@media (max-width:700px){
  .lang-wrap{position:static}
  .lang-menu{inset-inline:12px;top:calc(100% + 6px);
    min-width:0;max-width:none;max-height:min(62vh,420px)}
}
.lang-menu[hidden]{display:none}
.lang-menu button{
  display:flex;justify-content:space-between;gap:14px;width:100%;text-align:start;
  background:none;border:0;border-radius:9px;padding:8px 11px;
  font-family:var(--font);font-size:.88rem;color:var(--ink);cursor:pointer;
}
.lang-menu button:hover{background:var(--brand-soft);color:var(--brand-ink)}
.lang-menu button .nat{color:var(--ink-3)}
.lang-menu button[aria-current="true"]{color:var(--brand-ink);font-weight:650}
.lang-menu button[aria-current="true"] .nat{color:var(--brand-ink);opacity:.7}

/* das Farbthema: ein Knöpfchen, ein Blatt mit zehn Punkten */
.thema-wrap{position:relative;display:inline-flex}
.thema-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:90;
  width:196px;padding:11px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line-2);box-shadow:var(--shadow-lg);text-align:start}
.thema-menu[hidden]{display:none}
.thema-menu .caps{display:block;margin-bottom:8px}
.thema-punkte{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.thema-punkte button{width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgb(0 0 0 / .16);transition:transform .14s}
.thema-punkte button:hover{transform:scale(1.14)}
.thema-punkte button[aria-pressed="true"]{transform:scale(1.08);
  box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px currentColor}

.nav-cta{padding:.55em 1.1em;font-size:.88rem}
@media (max-width:560px){.nav-cta{padding:.5em .9em;font-size:.82rem}}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--brand);
  color:var(--on-accent);padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{inset-inline-start:0}

/* ══════════════ DIE SEITE: DER STROM ══════════════ */
.m4k{font-size:15px;line-height:1.6;color:var(--ink)}
.m4k section{padding-block:0}
.m4k h1,.m4k h2,.m4k h3{font-family:var(--font-round)}

.m4k .hero{padding-block:clamp(28px,4vw,48px) clamp(12px,1.8vw,20px);
  text-align:center;position:relative}
.m4k .hero::before{content:"";position:absolute;pointer-events:none;
  left:50%;top:0;width:min(900px,88%);height:130%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgb(var(--honey-rgb) / .08),transparent 75%)}
.m4k h1{position:relative;font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800;
  line-height:1.04;letter-spacing:-.03em}
.m4k .hero .satz{position:relative;margin:12px auto 0;max-width:54ch;
  color:var(--ink-2);line-height:1.65}
.m4k .hero .satz b{color:var(--ink);font-weight:700}

/* DER AUFHÄNGER — die mittlere Stufe im Kopf der Seite (17.09.2026).
   Kleiner als die Überschrift, grösser und dunkler als die Reglerzeile:
   genau so viel Gewicht, dass das Auge ihn liest, bevor es zum Fenster
   springt.

   DIE BREITE IST ENGER GESETZT ALS DIE ZEILE DARUNTER — 46 Zeichen gegen 54.
   Das ist kein Zufall: Ein Satz, der in zwei kurze Zeilen fällt, liest sich
   in einem Atemzug; derselbe Satz über die volle Breite liest sich wie ein
   Absatz. `text-wrap:balance` hält die zwei Zeilen dabei gleich lang. */
.m4k .hero .aufhaenger{
  margin:14px auto 0;max-width:46ch;
  font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.5;
  font-weight:500;letter-spacing:-.005em;color:var(--ink);
  text-wrap:balance}
/* Die Reglerzeile rückt eine Stufe zurück, sonst stehen zwei Sätze mit
   gleichem Gewicht untereinander und keiner führt. */
.m4k .hero .aufhaenger ~ .satz{margin-top:10px;font-size:.94rem}

/* ── das Fenster: nach dem Foto der App, als Demo ── */
.m4k .split{padding-bottom:clamp(24px,3.6vw,44px)}
.m4k .fenster{position:relative;max-width:1080px;margin-inline:auto;
  border-radius:12px;border:1px solid rgb(var(--ink-rgb) / .25);
  background:var(--surface);box-shadow:var(--shadow-lg)}
.m4k .fensterinnen{border-radius:12px;overflow:hidden}
/* „Anfassen erlaubt" — die leise Nachfolge des Aufklebers (17.09.2026).
   Sie steht ueber dem Fenster statt darauf, nimmt die Markenfarbe statt des
   Honigs und traegt weder Flaeche noch Schatten noch Drehung. Der Zeiger
   davor tut die Arbeit, die beim Aufkleber die Farbe tun musste.
   Rechtsbuendig, damit sie mit der oberen Fensterkante eine Linie bildet;
   auf dem Telefon linksbuendig, weil dort rechts der Rand knapp wird. */
.m4k .anfassen{display:flex;align-items:center;justify-content:flex-end;gap:6px;
  /* Dieselbe Breite wie `.fenster`, sonst haengt die Zeile auf breiten
     Schirmen neben dem Fenster statt an seiner Kante. */
  max-width:1080px;margin:0 auto 8px;padding-inline:4px;
  font-size:.7rem;letter-spacing:.02em;color:var(--ink-3)}
.m4k .anfassen svg{display:block;color:var(--brand);flex:0 0 auto}
@media (max-width:700px){
  .m4k .anfassen{justify-content:flex-start;padding-inline:2px}
}
.m4k .f-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;
  border-bottom:1px solid rgb(var(--ink-rgb) / .18);background:var(--leiste)}
.m4k .ampel{display:flex;gap:6px;flex:0 0 auto}
.m4k .ampel i{width:11px;height:11px;border-radius:50%;display:block}
/* zwei Symbole ohne Wort, in Markenfarbe — wie die App seit 0.7.6 */
.m4k .tbg{display:flex;align-items:center;gap:2px;color:var(--brand);
  white-space:nowrap}
.m4k .tbg svg{display:block}
.m4k .tbg .tbk{padding:5px 7px;border-radius:6px;display:flex;
  align-items:center}
.m4k .f-bar .rechtsg{display:flex;align-items:center;gap:7px;flex:0 0 auto;
  position:relative;margin-inline-start:auto}
.m4k .pill-tb{font-size:.7rem;font-weight:650;border-radius:7px;
  padding:5px 11px;white-space:nowrap;border:0;font-family:inherit;
  cursor:pointer;transition:box-shadow .25s,background .25s,color .25s}
.m4k .pill-tb.ruht{background:rgb(var(--ink-rgb) / .08);color:var(--ink-2)}
.m4k .pill-tb.ruht:hover{background:rgb(var(--ink-rgb) / .14)}
.m4k .pill-tb.primaer{background:var(--ink);color:var(--paper)}
.m4k .pill-tb.primaer.bereit{background:var(--honey);color:rgb(0 0 0 / .82);
  box-shadow:0 0 16px 2px rgb(var(--honey-rgb) / .55)}
@media (prefers-reduced-motion:no-preference){
  .m4k .pill-tb.primaer.bereit{animation:m4kbereit 1.4s ease-in-out infinite}
  @keyframes m4kbereit{50%{box-shadow:0 0 22px 5px rgb(var(--honey-rgb) / .7)}}
}
.m4k .suchfeld{display:flex;align-items:center;gap:6px;font-size:.68rem;
  color:var(--ink-3);background:rgb(var(--ink-rgb) / .06);
  border-radius:7px;padding:5px 10px;white-space:nowrap}
.m4k .suchfeld svg{display:inline-block}
@media (max-width:1000px){.m4k .suchfeld,.m4k .tbg .weg{display:none}}
@media (max-width:760px){.m4k .tbg{display:none}}
.m4k .rumpf{display:grid;grid-template-columns:222px minmax(0,1fr)}
/* HIER STAND `132px` FUER alles unter 760 px. Diese Regel hat seit dem
   17.09.2026 keinen Bereich mehr: unter 700 px stapelt das Fenster (siehe
   ganz unten, „DAS FENSTER AUF DEM TELEFON"), und zwischen 700 und 1000 gilt
   das Tablet-Band gleich darunter. Zwei Regeln fuer denselben Bereich haetten
   sich nur gegenseitig ueberschrieben. */

/* ── DAS FENSTER AUF DEM TABLET (700…1000 px) ─────────────────────────
   Hochkant misst ein iPad 768 px, quer 1024; das aufgeklappte iPhone Duo
   liegt mit 890 px genau dazwischen. In diesem Band stand die Seitenleiste
   mit 222 px so breit da wie auf einem 1440-px-Schirm — sie nahm knapp ein
   Drittel des Fensters, und die Tabelle musste sich den Rest teilen.
   176 px reichen fuer die Bestandsnamen (der laengste, „Apple Music /
   iTunes", braucht mit Symbol und Pfeil 168 px) und geben der Titelspalte
   rund 50 px zurueck. */
@media (min-width:701px) and (max-width:1000px){
  .m4k .rumpf{grid-template-columns:176px minmax(0,1fr)}
  .m4k .seite{padding:10px 8px}
  .m4k .qkarte{padding:9px 9px}
}
.m4k .seite{border-inline-end:1px solid rgb(var(--ink-rgb) / .16);
  background:var(--surface-2);padding:12px 10px;font-size:.76rem}
/* DER KOPF DER SEITENLEISTE — wie in der App (ContentView.swift, der
   safeAreaInset der Bestandsschiene): Kachel und Wortmarke MITTIG, auf der
   Leistenfarbe, darunter eine Haarlinie, und er geht bis an die Ränder der
   Spalte. Bis zum 17.09.2026 stand hier eine dunkle Pille mit einer
   gestrichelten Wellenform und „Truffle" in Fraunces — beides kannte die App
   da schon nicht mehr (Knolle seit 03.09.2026, Outfit seit 02.09.2026).
   Die negativen Ränder heben die Polsterung von `.seite` (12px 10px) auf. */
.m4k .logokachel{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:-12px -10px 12px;padding:11px 10px;color:var(--ink);
  background:var(--leiste);border-bottom:1px solid rgb(var(--ink-rgb) / .12)}
.m4k .logokachel .tile{display:block;line-height:0}
.m4k .logokachel .wm{font-family:var(--font-brand);font-weight:600;
  letter-spacing:-.02em;font-size:1.1rem}
/* Die Bestandskarte nach 0.7.6: Kopf (Symbol, Name, Herkunft, Pfeil), im
   offenen Bestand darunter eine Haarlinie in Markenfarbe und die drei
   Zahlen. Die offene Karte trägt Markenfläche und einen Schein. */
.m4k .qkarte{position:relative;display:block;
  border-radius:11px;width:100%;text-align:start;font:inherit;
  cursor:pointer;border:1px solid rgb(var(--ink-rgb) / .16);
  background:var(--surface-2);padding:10px 11px;margin-bottom:9px;
  color:var(--ink-2);transition:border-color .2s,box-shadow .2s,transform .2s}
.m4k .qkarte:hover{transform:translateY(-1px);
  border-color:rgb(var(--honey-rgb) / .55)}
.m4k .qkopf{display:flex;align-items:center;gap:9px}
.m4k .qkarte svg{flex:0 0 auto;opacity:.8;display:inline-block}
.m4k .qkarte.an svg{color:var(--brand);opacity:1}
.m4k .qkarte .qt{min-width:0;flex:1}
.m4k .qkarte .qt b{display:block;font-size:.74rem;font-weight:700;
  color:var(--ink);letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.m4k .qkarte .qh{display:block;font-size:.62rem;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
.m4k .qkarte.an .qh{color:var(--brand)}
.m4k .qkarte .chev{color:var(--ink-3);font-size:.8rem}
.m4k .qkarte.an .chev{color:var(--brand)}
.m4k .qkarte.an{background:rgb(var(--brand-rgb) / .14);
  border:1.5px solid rgb(var(--brand-rgb) / .55);padding:9.5px 10.5px;
  box-shadow:0 0 14px -2px rgb(var(--brand-rgb) / .45)}
.m4k .qz{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-top:10px;padding-top:9px;
  border-top:1px solid rgb(var(--brand-rgb) / .22)}
.m4k .qz:empty{display:none}
.m4k .qz>span{min-width:0}
.m4k .qz b{display:block;font-family:var(--font-round);font-size:.8rem;
  font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.m4k .qz b.honig{color:var(--honey)}
.m4k .qz b.gut{color:var(--good)}
.m4k .qz small{display:block;font-size:.52rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.m4k .qkarte .qh,.m4k .qz{display:none}}
.m4k .hot{position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--honey);z-index:6;pointer-events:none;
  box-shadow:0 0 0 2px var(--surface)}
/* HIER PULSIERTEN DIE HINWEISPUNKTE — raus am 17.09.2026 auf Marians Wunsch
   („Bitte die pulsierende Animation raus aus der interaktiven Demo").
   Der Punkt bleibt, sein Ring ist weg: Ein Punkt, der endlos pulsiert, zieht
   das Auge auch dann noch, wenn man ihn längst gesehen hat — und im Fenster
   stehen drei davon gleichzeitig. Als ruhender Punkt sagt er dasselbe und
   hört auf zu rufen. */
.m4k .hot[hidden]{display:none}
.m4k .hot.h-quelle{top:-4px;right:-4px}
.m4k .hot.h-analyse{top:-4px;left:-4px}
.m4k .hot.h-griff{top:-5px;left:50%;transform:translateX(-50%)}

/* Die Zone bleibt auch unter dir="rtl" physisch links-nach-rechts: Die
   Lichtlinie sitzt bei --x von links, und ein <input type=range> würde in
   RTL seinen Wert nach links wachsen lassen — Zeiger nach rechts, Licht
   nach links. Die Texte in den Zeilen richten sich per unicode-bidi selbst. */
.m4k .zone{position:relative;--x:50%;min-width:0;direction:ltr}
.m4k .lage{min-width:0}
.m4k .lage.nachher{position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--x)) 0 0);background:var(--surface)}
.m4k .zk,.m4k .zr{display:grid;
  grid-template-columns:40px minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.8fr) 34px 46px;
  gap:11px;padding:0 14px;align-items:center;height:44px}
@media (max-width:900px){.m4k .zk,.m4k .zr{
  grid-template-columns:40px minmax(0,1.7fr) minmax(0,1.1fr) 34px 46px}
  .m4k .zk .schmalweg,.m4k .zr .schmalweg{display:none}}


.m4k .zk{height:30px;border-bottom:1px solid rgb(var(--ink-rgb) / .2);
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.m4k .zr{border-bottom:1px solid rgb(var(--ink-rgb) / .1);font-size:.8rem}
.m4k .zr:nth-child(odd){background:rgb(var(--ink-rgb) / .025)}
.m4k .ibar{display:block;height:4px;border-radius:2px;
  background:rgb(var(--ink-rgb) / .15);position:relative;overflow:hidden}
.m4k .ibar i{position:absolute;inset:0 auto 0 0;width:var(--f,20%);
  border-radius:2px;background:var(--honey)}
.m4k .lage.nachher .ibar i{background:var(--good);width:100%}
.m4k .zr .ub{text-align:center}
.m4k .lage.nachher .zr .ub{color:var(--good);font-weight:700}
.m4k .lage.vorher .zr .ub{color:var(--ink-3)}
.m4k .lage.nachher .zr .ub.merk2{color:var(--honey)}
.m4k .zr>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.m4k .zr .zahl{font-variant-numeric:tabular-nums}
.m4k .lage.vorher .zr .t{font-family:var(--font-mono);font-size:.76rem;
  color:var(--ink-2)}
.m4k .lage.vorher .zr .fehlt{color:rgb(var(--bad-rgb) / .8);
  font-family:var(--font-mono);font-size:.72rem}
.m4k .lage.vorher .zr .fleck{color:var(--bad)}
.m4k .lage.vorher .zr .falsch{color:var(--bad);
  text-decoration:underline wavy rgb(var(--bad-rgb) / .7) 1px;
  text-underline-offset:3px}
.m4k .lage.vorher .zk .marke{color:var(--bad)}
.m4k .cvleer{width:20px;height:20px;border-radius:4px;
  border:1px dashed rgb(var(--bad-rgb) / .5)}
.m4k .lage.nachher .zr .t{font-weight:650}
.m4k .lage.nachher .zr .gut{color:var(--good)}
.m4k .lage.nachher .zr .merk{color:var(--honey);font-family:var(--font-round);
  font-weight:650;font-size:.76rem}
.m4k .lage.nachher .zk .marke{color:var(--good)}

/* Fantasie-Cover: Skizzen nach Archetypen — eigene Farben mit Absicht,
   wie die Ampel; Anspielungen, keine Kopien. */
.m4k .cvda{width:20px;height:20px;border-radius:4px;background-size:cover;
  background-position:center;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .14)}
.m4k .c1{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23101014'/%3E%3Cpath d='M4 17 12 7l8 10Z' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='m14.5 10.2 5.5 2' stroke='%23e5484d' stroke-width='1.1'/%3E%3Cpath d='m14.5 10.2 5.2 3.6' stroke='%23f5a524' stroke-width='1.1'/%3E%3Cpath d='m14.5 10.2 4.6 5' stroke='%2317c964' stroke-width='1.1'/%3E%3C/svg%3E")}
.m4k .c2{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23565b61'/%3E%3Cg fill='%23e9e9e6'%3E%3Crect x='1.5' y='5.5' width='21' height='2.6'/%3E%3Crect x='1.5' y='10.7' width='21' height='2.6'/%3E%3Crect x='1.5' y='15.9' width='21' height='2.6'/%3E%3C/g%3E%3Cg fill='%2323262a'%3E%3Ccircle cx='5.5' cy='9.4' r='1.5'/%3E%3Ccircle cx='10' cy='9.4' r='1.5'/%3E%3Ccircle cx='14.5' cy='9.4' r='1.5'/%3E%3Ccircle cx='19' cy='9.4' r='1.5'/%3E%3C/g%3E%3C/svg%3E")}
.m4k .c3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8a5c'/%3E%3Cstop offset='1' stop-color='%23e34f8c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='24' height='24' fill='url(%23g)'/%3E%3Ccircle cx='12' cy='13.5' r='5.6' fill='%23ffd166'/%3E%3Crect y='16.4' width='24' height='7.6' fill='%23652a55'/%3E%3Crect y='14.6' width='24' height='1' fill='%23e34f8c'/%3E%3C/svg%3E")}
.m4k .c4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23ffd21f'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.7' fill='%23131313'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.7' fill='%23131313'/%3E%3Cpath d='M7 14c1.6 2.6 8.4 2.6 10 0' stroke='%23131313' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.m4k .c5{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23efe9dd'/%3E%3Ccircle cx='12' cy='12' r='8.8' fill='%23191919'/%3E%3Ccircle cx='12' cy='12' r='3.1' fill='%23efe9dd'/%3E%3Ccircle cx='12' cy='12' r='.9' fill='%23191919'/%3E%3C/svg%3E")}
.m4k .c6{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%237bb8d9'/%3E%3Crect x='3.2' y='6.8' width='17.6' height='10.4' rx='1.4' fill='%23f5f2ea'/%3E%3Crect x='5' y='8.4' width='14' height='2' fill='%23e2574c'/%3E%3Ccircle cx='8.6' cy='13.4' r='1.8' fill='none' stroke='%23333' stroke-width='1.1'/%3E%3Ccircle cx='15.4' cy='13.4' r='1.8' fill='none' stroke='%23333' stroke-width='1.1'/%3E%3C/svg%3E")}
.m4k .c7{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23131316'/%3E%3Cg stroke='%23e8e8e6' stroke-width='.9' fill='none'%3E%3Cpath d='M4 8h4l2-3 2 4 2-2 2 1h4'/%3E%3Cpath d='M4 12.5h4l2-4 2 5 2-3 2 2h4'/%3E%3Cpath d='M4 17h4l2-3 2 4 2-2 2 1h4'/%3E%3C/g%3E%3C/svg%3E")}

/* ── der Strom ── */
.m4k .linie{position:absolute;top:0;bottom:0;left:var(--x);width:4px;
  background:linear-gradient(180deg,
    rgb(var(--honey-rgb) / .55),var(--honey) 30%,var(--honey) 70%,
    rgb(var(--honey-rgb) / .55));
  transform:translateX(-2px);pointer-events:none;z-index:3;
  box-shadow:0 0 26px 3px rgb(var(--honey-rgb) / .55);overflow:hidden;
  transition:box-shadow .25s}
@media (prefers-reduced-motion:no-preference){
  .m4k .linie::before{content:"";position:absolute;left:0;right:0;
    top:-30%;height:22%;
    background:linear-gradient(180deg,transparent,
      rgb(var(--ink-rgb) / .85) 50%,transparent);
    animation:m4kstrom 2.1s linear infinite}
  .m4k .linie::after{content:"";position:absolute;left:0;right:0;
    top:-70%;height:55%;
    background:linear-gradient(180deg,transparent,
      rgb(var(--honey-rgb) / .5) 50%,transparent);
    animation:m4kstrom 5.6s linear infinite}
  @keyframes m4kstrom{to{transform:translateY(560%)}}
  /* Der Knauf pulsierte hier mit demselben Ring — auch raus (17.09.2026).
     Sein fester Schatten steht in der Regel darüber und bleibt. DER STROM
     bleibt ebenfalls: die beiden Lichter, die durch die Linie laufen, sind
     keine Pulse, sondern eine Bewegung in eine Richtung — sie rufen nicht,
     sie zeigen, wohin. */
}
.m4k .zone.zieht .linie{box-shadow:0 0 34px 5px rgb(var(--honey-rgb) / .8)}
.m4k .fahne{position:absolute;top:-12px;left:var(--x);transform:translateX(-50%);
  background:var(--honey);color:rgb(0 0 0 / .8);border-radius:5px;
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
  padding:2px 7px;pointer-events:none;white-space:nowrap;z-index:4}
.m4k .knaufhalter{position:absolute;top:0;bottom:0;left:var(--x);width:0;
  pointer-events:none;z-index:3}
/* DER GRIFF SAGT ES SELBST (29.09.2026). Der Satz über dem Fenster
   („Zieh den Regler …") ist weg; also ist der Knauf gross genug, um ohne
   ihn als Griff erkannt zu werden: 48 statt 32 px, mit hellem Rand und
   Schatten. Er pulsiert NICHT — die Endlospulse sind seit dem 17.09.2026
   aus der Demo raus. Was ihn zeigt, ist seine Ruhelage in der Mitte und das
   einmalige Einpendeln nach dem Aufblitzen (runtime.js). */
.m4k .knauf{position:absolute;top:46%;left:50%;
  transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;
  background:var(--honey);display:grid;place-items:center;
  border:3px solid var(--surface);
  box-shadow:0 6px 18px -4px rgb(0 0 0 / .35),0 0 0 1px rgb(var(--honey-rgb) / .6);
  color:rgb(0 0 0 / .8);font-size:1.25rem;font-weight:800;font-style:normal;
  transition:transform .2s}
.m4k .zone.zieht .knauf{transform:translate(-50%,-50%) scale(1.08)}
@media (max-width:620px){.m4k .knauf{width:42px;height:42px;font-size:1.1rem}}
.m4k .griff{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;z-index:4}
.m4k .zone:focus-within .linie{box-shadow:0 0 0 2px var(--surface),
  0 0 0 4px var(--honey),0 0 28px 4px rgb(var(--honey-rgb) / .7)}
/* DIE STATUSZEILE BRICHT UM, STATT ZU QUETSCHEN.
   Sie hält drei Dinge: den Satz, die Zahl der geschriebenen Titel und die
   Fassung. Die hinteren zwei stehen auf `nowrap`; der Satz hatte
   `flex:0 1 auto` und war damit der Einzige, der nachgab — auf schmalen
   Fenstern schrumpfte er auf die Breite seines längsten Wortes und schrieb
   sich Wort für Wort untereinander. Ein Umbruch war nie vorgesehen, weil
   `flex-wrap` fehlte.
   Jetzt: umbrechen erlaubt, und der Satz bekommt eine Grundbreite von 18 em
   statt „so schmal wie nötig". Passt alles in eine Reihe, sieht es aus wie
   vorher; passt es nicht, rutschen Zahl und Fassung in die nächste Zeile —
   was auf jeder Breite besser ist als eine Spalte von vier Buchstaben. */
.m4k .f-fuss{padding:9px 16px;background:rgb(var(--surface-2-rgb) / .8);
  border-top:1px solid rgb(var(--ink-rgb) / .14);
  font-size:.76rem;color:var(--ink-3);min-height:2.1em;display:flex;
  flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:4px}
.m4k .f-fuss .sag{flex:1 1 18em;min-width:0}
.m4k .f-fuss .sag b{color:var(--honey);font-weight:700}
.m4k .f-fuss .sag .fertig{color:var(--good);font-weight:700}
/* „✓ 3.912 geschrieben in dieser Sitzung" — erscheint erst ab eins, wie in
   der App; danach der Abstand, dann die Fassung. */
.m4k .f-fuss .sess{color:var(--good);font-weight:650;
  font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.72rem}
.m4k .f-fuss .sess:empty{display:none}
/* HIESS EINMAL `.beta` (02.09.2026, Blocker 5): Das Wort ist mit dem
   Beta-Etikett aus dem Demo-Fenster gegangen, der Klassenname sollte es
   nicht überleben — sonst liest die nächste Runde ihn als Absicht. */
.m4k .f-fuss .fassung{margin-inline-start:auto;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.16em;color:var(--ink-3);white-space:nowrap;
  padding-inline-start:12px}
.m4k .unterschrift{max-width:1080px;margin:12px auto 0;text-align:center;
  font-size:.74rem;color:var(--ink-3)}

/* ── gemeinsame Sektions-Sprache ── */
.m4k .sek{border-top:1px solid rgb(var(--ink-rgb) / .14);
  padding-block:clamp(34px,5vw,64px);position:relative}
.m4k .sek .kicker{font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--honey)}
.m4k .sek h2{margin-top:8px;font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:800;letter-spacing:-.02em}
.m4k .sek .satz2{margin-top:8px;font-size:.92rem;color:var(--ink-2);
  max-width:56ch;line-height:1.6}
.m4k .sek.glut-a::before{content:"";position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(640px 320px at 12% 0%,
    rgb(var(--honey-rgb) / .07),transparent 70%)}
.m4k .sek.glut-b::before{content:"";position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(640px 320px at 88% 0%,
    rgb(var(--brand-rgb) / .09),transparent 70%)}
.m4k .sek .wrap{position:relative}

/* ── DAS AUFBLITZEN BEIM ÖFFNEN ───────────────────────────────────────
   Die Scheiben, die runtime.js für die 2,7 Sekunden anlegt und danach wieder
   wegräumt. Die Herleitung steht dort im Kopf des Abschnitts.

   DER SCHLEIER LIEGT HINTER DEM INHALT. Ein negativer `z-index` legt ihn
   zwischen den Seitenhintergrund und alles andere: Der Grund bekommt die
   volle Farbe, die Schrift bekommt gar nichts und behält in jedem einzelnen
   Bild den vollen Kontrast ihres Themas. Die undurchsichtigen Flächen (das
   Demo-Fenster, die Karten) decken ihn ab — dort macht der Themenwechsel die
   Farbe, und der stimmt von sich aus.

   DER GLANZ liegt umgekehrt darüber und färbt über `backdrop-filter` nur,
   was hinter ihm liegt. Als `filter` auf `body` wäre dieser zum Bezugsrahmen
   für alles `position:fixed` geworden, und die Kopfzeile spränge für die
   Dauer des Blitzes an den Fuss des Dokuments. */
.blitz-schleier{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0}
.blitz-glanz{position:fixed;inset:0;z-index:89;pointer-events:none}
/* Geschnitten, nicht geschmolzen: Die Seite blendet an vielen Stellen über
   (Karten, Knöpfe, die Bestandsliste). Bei vier Bildern à 450 ms schleifen
   genau diese Übergänge die Kante wieder rund. Der Holzhammer ist hier das
   richtige Werkzeug, weil er nach 1,35 Sekunden wieder weg ist. */
:root.blitzt-hart *{transition:none !important}

/* ── Flip-Karten ── */
.m4k .fkarten{margin-top:24px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:960px){.m4k .fkarten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.m4k .fkarten{grid-template-columns:1fr}}
.m4k .fk{position:relative;text-align:start;border-radius:12px;
  padding:16px 17px 15px;cursor:pointer;overflow:hidden;font:inherit;color:inherit;
  background:var(--surface);border:1px solid rgb(var(--ink-rgb) / .16);
  transition:transform .2s,border-color .2s,box-shadow .2s}
.m4k .fk[aria-pressed="true"]{transform:translateY(-3px);
  border-color:rgb(var(--honey-rgb) / .6);
  box-shadow:0 14px 34px -22px rgb(var(--honey-rgb) / .55)}
.m4k .fk .kw{display:block;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--honey)}
.m4k .fk .buehne-k{display:block;position:relative;height:58px;margin-top:10px}
.m4k .fk .lg{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:3px;transition:opacity .3s}
.m4k .fk .lg .gross{font-size:1.02rem;font-weight:750;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums;unicode-bidi:plaintext}
.m4k .fk .lg .klein-k{font-size:.72rem;color:var(--ink-3);
  font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.m4k .fk .lg.v .gross{font-family:var(--font-mono);font-size:.9rem;
  color:rgb(var(--bad-rgb) / .95)}
.m4k .fk.still .lg.v .gross{color:var(--ink-2)}
.m4k .fk .lg.n{opacity:0}
.m4k .fk .lg.n .gross{color:var(--ink)}
.m4k .fk .lg.n .gut{color:var(--good)}
.m4k .fk:focus-visible .lg.n,
.m4k .fk[aria-pressed="true"] .lg.n{opacity:1}
.m4k .fk:focus-visible .lg.v,
.m4k .fk[aria-pressed="true"] .lg.v{opacity:0}
.m4k .fk .wisch{position:absolute;top:0;bottom:0;left:-40%;width:24%;
  pointer-events:none;transform:skewX(-14deg);
  background:linear-gradient(90deg,transparent,
    rgb(var(--honey-rgb) / .22),transparent);
  transition:left .45s ease}
.m4k .fk:focus-visible .wisch,
.m4k .fk[aria-pressed="true"] .wisch{left:116%}

/* DIE MAUS DREHT DIE KARTE NUR, WO ES EINE MAUS GIBT (21.09.2026).
   Bis zum 17.09. standen die `:hover`-Regeln mit denen für `aria-pressed`
   in einer Zeile, und ein `@media (hover:hover)` darum herum war als
   „fügt nichts hinzu" wieder gegangen. Seit dem 21.09. fügt es etwas hinzu:
   Auf dem Telefon dreht die Karte beim SCROLLEN (runtime.js, „Auf dem
   Telefon rollt die Hand"), und dort darf `:hover` nicht mitreden — iOS
   lässt es kleben, sobald man zum Scrollen eine Karte berührt, und eine
   geklebte Karte bliebe auf „nachher", obwohl sie das Band längst verlassen
   hat. Also: Hover nur, wo es Hover gibt. Tippen dreht weiterhin überall. */
/* SEIT DEM 29.09.2026 SETZT DIE MAUS DEN ZUSTAND, NICHT `:hover`
   (runtime.js, „Flip-Karten"): Drüberfahren repariert, und die Karte BLEIBT
   repariert; ein Klick setzt sie zurück. Stünde „nachher" weiter an
   `:hover`, zeigte eine eben zurückgesetzte Karte unter der Maus trotzdem
   repariert. `:hover` hebt die Karte nur noch an. */
@media (hover:hover){
  .m4k .fk:hover{transform:translateY(-3px);
    border-color:rgb(var(--honey-rgb) / .6);
    box-shadow:0 14px 34px -22px rgb(var(--honey-rgb) / .55)}
}
.m4k .fk .satz3{display:block;margin-top:8px;font-size:.78rem;
  color:var(--ink-2);line-height:1.55}
.m4k .fk .cvmini{width:40px;height:40px;border-radius:5px;flex:0 0 auto}
.m4k .fk .cvmini.leer{border:1px dashed rgb(var(--bad-rgb) / .5)}
.m4k .fk .cvmini.da{background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .14)}
.m4k .fk .zeile-k{display:flex;align-items:center;gap:10px}

/* ── das Orchester der Acht ── */
.m4k .orchester{margin-top:26px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(12px,2vw,24px);align-items:center}
@media (max-width:880px){.m4k .orchester{grid-template-columns:1fr;gap:14px}}
.m4k .qgrp{display:grid;gap:10px}
.m4k .qc{position:relative;text-align:start;font:inherit;cursor:pointer;
  border-radius:10px;border:1px solid rgb(var(--ink-rgb) / .18);
  background:var(--surface);padding:9px 12px;color:var(--ink-2);
  transition:border-color .25s var(--dq,0s),box-shadow .25s var(--dq,0s),
    transform .2s,opacity .3s}
.m4k .qc b{display:block;font-size:.78rem;font-weight:700;color:var(--ink);
  letter-spacing:-.01em}
.m4k .qc .rolle-q{display:block;font-size:.66rem;color:var(--ink-3);
  line-height:1.45;margin-top:1px}
@media (hover:hover){.m4k .qc:hover{transform:translateY(-1px)}}
.m4k .gefragt .qc.tat{border-color:rgb(var(--honey-rgb) / .65);
  box-shadow:0 0 14px -3px rgb(var(--honey-rgb) / .55)}
.m4k .gefragt .qc.tat .rolle-q{color:var(--good)}
.m4k .qc.stillq{opacity:.75}
.m4k .gefragt .qc.stillq{opacity:.55}
.m4k .qc.hell{border-color:var(--honey);
  box-shadow:0 0 16px -2px rgb(var(--honey-rgb) / .6)}
.m4k .qc::after{content:"";position:absolute;top:50%;height:2px;width:16px;
  opacity:0;transition:opacity .3s}
.m4k .qgrp.links .qc::after{left:100%;
  background:linear-gradient(90deg,var(--honey),transparent)}
.m4k .qgrp.rechts .qc::after{right:100%;
  background:linear-gradient(270deg,var(--honey),transparent)}
.m4k .gefragt .qc.tat::after{opacity:1}
@media (max-width:880px){.m4k .qc::after{display:none}}
.m4k .werkk{border-radius:12px;border:1px solid rgb(var(--ink-rgb) / .2);
  background:var(--surface);box-shadow:var(--shadow);
  padding:14px 16px;display:grid;grid-template-columns:56px 1fr;gap:12px}
.m4k .werkk .cvslot{width:56px;height:56px;border-radius:6px;
  border:1px dashed rgb(var(--bad-rgb) / .5);position:relative;display:block}
.m4k .werkk .cvslot .cvbild{position:absolute;inset:-1px;border-radius:6px;
  background-size:cover;opacity:0;transition:opacity .4s}
.m4k .gefragt .werkk .cvslot .cvbild{opacity:1}
.m4k .werkk .cvslot .okc{position:absolute;right:-6px;bottom:-6px;
  width:16px;height:16px;border-radius:50%;background:var(--good);
  color:#fff;font-size:.6rem;display:grid;place-items:center;opacity:0;
  transition:opacity .3s}
.m4k .gefragt .werkk .cvslot .okc{opacity:1}
.m4k .wfz{display:grid;gap:5px;min-width:0}
.m4k .wf-z{display:flex;gap:8px;align-items:baseline;min-width:0;
  border-radius:6px;padding:1px 4px;transition:background .2s}
.m4k .wf-z.hell{background:rgb(var(--honey-rgb) / .14)}
.m4k .wf-z .wfl{flex:0 0 88px;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.m4k .wf-z .wwert{position:relative;flex:1;min-width:0;height:1.35em;
  font-size:.84rem}
.m4k .wf-z .wwert i{position:absolute;inset:0;font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext;
  transition:opacity .35s,transform .35s}
.m4k .wf-z .w-alt{font-family:var(--font-mono);font-size:.76rem;
  color:rgb(var(--bad-rgb) / .9)}
.m4k .wf-z .w-alt.leerf{color:var(--ink-3)}
.m4k .wf-z .w-neu{font-weight:650;opacity:0;transform:translateY(8px)}
.m4k .gefragt .wf-z .w-alt{opacity:0;transform:translateY(-8px)}
.m4k .gefragt .wf-z .w-neu{opacity:1;transform:none}
.m4k .wf-z .wok{flex:0 0 auto;font-size:.66rem;color:var(--good);
  font-weight:700;opacity:0;transition:opacity .3s}
.m4k .gefragt .wf-z .wok{opacity:1}

/* ── EINZELN STATT ALLES AUF EINMAL ─────────────────────────────────────
   Bis zum 17.09.2026 konnte das Orchester genau zwei Dinge: beim Fahren über
   eine Quelle bekam ihr Feld einen Farbstich (`.hell`), und der Knopf füllte
   alles gleichzeitig (`.gefragt`). Dazwischen fehlte das Naheliegende —
   Marian: „Sobald ich über die Flächen fahre, wird in der Mitte beim Feld
   das neue Ergebnis ausgefüllt … sobald ich mit der Maus wieder runtergehe,
   verschwindet es wieder. Wenn ich allerdings draufklicke, dann bleibt es."

   Dafür trägt jetzt jede ZEILE ihren eigenen Zustand (`.voll`), statt dass
   nur der ganze Kasten einen hat. `.gefragt` bleibt daneben bestehen: Der
   Knopf schaltet weiterhin alles auf einmal, mit seiner gestaffelten
   Reihenfolge. */
.m4k .wf-z.voll .w-alt{opacity:0;transform:translateY(-8px)}
.m4k .wf-z.voll .w-neu{opacity:1;transform:none}
.m4k .wf-z.voll .wok{opacity:1}
.m4k .werkk .cvslot.voll .cvbild{opacity:1}
.m4k .werkk .cvslot.voll .okc{opacity:1}
/* Eine angeklickte Quelle bleibt sichtbar markiert — sonst weiss man nach
   dem dritten Klick nicht mehr, was man schon geholt hat. */
.m4k .qc.fest{border-color:var(--good);
  box-shadow:0 0 14px -3px rgb(var(--good-rgb) / .5)}
.m4k .qc.fest .rolle-q{color:var(--good)}

/* DIE STAFFELUNG, jetzt an einer Stelle und nur fuer den grossen Auftritt.
   `--dq` steht als Stilangabe an jedem Element und gibt die Reihenfolge vor,
   in der die acht Felder erscheinen. Als Teil der Uebergaenge verzoegerte es
   auch das Verschwinden — beim Fahren ueber eine Quelle blieb das Feld nach
   dem Verlassen der Maus noch bis zu 1,05 Sekunden stehen. Hier gilt es nur,
   wenn der Knopf alles holt. */
.m4k .gefragt .qc.tat::after,
.m4k .gefragt .werkk .cvslot .cvbild,
.m4k .gefragt .werkk .cvslot .okc,
.m4k .gefragt .wf-z .wwert i,
.m4k .gefragt .wf-z .wok{transition-delay:var(--dq,0s)}
.m4k .orchester-fuss{margin-top:14px;display:flex;gap:16px;
  align-items:center;flex-wrap:wrap}
.m4k .frag{font-family:var(--font-round);font-weight:700;
  font-size:.9rem;cursor:pointer;border-radius:999px;padding:10px 22px;
  border:1px solid rgb(var(--honey-rgb) / .7);color:var(--honey);
  background:transparent;transition:background .2s,box-shadow .2s}
.m4k .frag:hover{background:rgb(var(--honey-rgb) / .12);
  box-shadow:0 0 18px -4px rgb(var(--honey-rgb) / .6)}
.m4k .orchester-schluss{font-size:.8rem;color:var(--ink-2);opacity:0;
  transition:opacity .5s 1.4s;max-width:44ch;line-height:1.5}
.m4k .gefragt-s .orchester-schluss{opacity:1}

/* ── drei Bestände nebeneinander ── */
.m4k .arten{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.m4k .arten{grid-template-columns:1fr}}
.m4k .art{position:relative;border-radius:12px;padding:18px 20px 20px;
  background:var(--surface);border:1px solid rgb(var(--ink-rgb) / .16);min-width:0}
.m4k .art::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgb(255 255 255 / .22),transparent)}
.m4k .art h3{font-size:1rem;font-weight:750;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px}
.m4k .art h3 .pktq{width:7px;height:7px;border-radius:50%;
  background:var(--good);flex:0 0 auto}
.m4k .art p{margin-top:9px;font-size:.84rem;color:var(--ink-2);line-height:1.6}
.m4k .art p b{color:var(--ink);font-weight:650}
.m4k .art .kleing2{display:block;margin-top:9px;font-size:.72rem;
  color:var(--ink-3);line-height:1.55}

/* ── Aufräumen: drei Kacheln mit Vorher und Nachher (24.09.2026) ──
   Entwurf B aus Website/entwuerfe/aufraeumen/. Jedes Bild hat zwei Lagen
   übereinander; `.an` an der Kachel zeigt „nachher". Gesetzt wird es beim
   Hinscrollen (runtime.js, „Aufräumen dreht beim Hinscrollen"), am
   Schreibtisch zusätzlich unter der Maus. Die Höhe ist fest, damit die
   Kachel beim Umschalten nicht springt: fünf Zeilen passen hinein, und jede
   Zeile kürzt mit „…", statt umzubrechen. Nichts überschneidet sich, auch
   nicht bei 320 px oder in langen Sprachen. */
.m4k .aufr-bild{position:relative;overflow:hidden;margin-top:12px;height:198px;
  border-radius:9px;background:rgb(var(--ink-rgb) / .045);
  border:1px solid rgb(var(--ink-rgb) / .1);font-size:.74rem;cursor:pointer}
.m4k .aufr-lage{position:absolute;inset:10px 11px;transition:opacity .3s}
.m4k .aufr-lage.n{opacity:0}
.m4k .aufr-k.an .aufr-lage.v{opacity:0}
.m4k .aufr-k.an .aufr-lage.n{opacity:1}
.m4k .aufr-bild .wisch{position:absolute;top:0;bottom:0;left:-40%;width:24%;
  pointer-events:none;transform:skewX(-14deg);
  background:linear-gradient(90deg,transparent,rgb(var(--honey-rgb) / .22),transparent);
  transition:left .45s ease}
.m4k .aufr-k.an .aufr-bild .wisch{left:116%}
@media (hover:hover){
  .m4k .aufr-k:hover .aufr-lage.v{opacity:0}
  .m4k .aufr-k:hover .aufr-lage.n{opacity:1}
  .m4k .aufr-k:hover .aufr-bild .wisch{left:116%}
}
@media (prefers-reduced-motion:reduce){
  .m4k .aufr-lage,.m4k .aufr-bild .wisch{transition:none}
}
.m4k .aufr-kopf{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.m4k .aufr-zeile{display:flex;align-items:center;gap:6px;margin-top:5px;padding:4px 7px;
  border-radius:6px;background:var(--surface);border:1px solid rgb(var(--ink-rgb) / .08);
  white-space:nowrap;overflow:hidden;min-width:0}
.m4k .aufr-zeile > span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.m4k .aufr-zeile .zahl{margin-inline-start:auto;flex:0 0 auto;font-family:var(--font-mono);
  color:var(--honey);font-variant-numeric:tabular-nums}
.m4k .aufr-zeile.gut{border-color:rgb(var(--good-rgb) / .45)}
.m4k .aufr-zeile.gut .zahl{color:var(--good)}
.m4k .aufr-zeile.weg{opacity:.45;text-decoration:line-through;
  text-decoration-color:rgb(var(--bad-rgb) / .6)}
.m4k .aufr-tag{flex:0 0 auto;font-family:var(--font-mono);font-size:.55rem;padding:1px 5px;
  border-radius:4px;color:var(--ink-2);background:rgb(var(--ink-rgb) / .1)}
.m4k .aufr-tag.mac{color:var(--good);background:rgb(var(--good-rgb) / .16)}
.m4k .aufr-dup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.m4k .aufr-dup .bleibt .aufr-kopf{color:var(--good)}
.m4k .aufr-dup .geht .aufr-kopf{color:rgb(var(--bad-rgb))}
/* Drei Spalten: Die Kacheln teilen sich die Zeilen (Titel, Bild, Satz,
   Fußnote). Bricht ein Titel um (griechisch „Διπλότυπες λίστες
   αναπαραγωγής" bei 1024 px), rutscht sonst nur das Bild dieser Kachel
   tiefer; so beginnen alle drei Bilder auf einer Höhe. */
@media (min-width:981px){
  @supports (grid-template-rows:subgrid){
    .m4k .arten.aufr{row-gap:0}
    .m4k .arten.aufr .aufr-k{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
    .m4k .arten.aufr .aufr-k h3{align-self:start}
  }
}

/* ── für DJs gebaut ── */
.m4k .djregeln-h{margin-top:26px;font-size:.92rem;font-weight:750;letter-spacing:-.01em}
.m4k .djregeln{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.m4k .djregeln li{position:relative;padding:10px 14px 10px 30px;border-radius:10px;
  background:var(--surface);border:1px solid rgb(var(--ink-rgb) / .12);
  font-size:.84rem;color:var(--ink-2);line-height:1.6}
.m4k .djregeln li::before{content:"";position:absolute;left:13px;top:17px;width:7px;height:7px;
  border-radius:50%;background:var(--brand)}
.m4k .djregeln li b{color:var(--ink);font-weight:650}

/* ── der Verlauf ── */
.m4k .rk{margin-top:22px;max-width:640px;border-radius:12px;
  border:1px solid rgb(var(--ink-rgb) / .16);background:var(--surface);overflow:hidden}
/* Auf dem Schreibtisch steht der Verlauf mittig unter seiner Überschrift
   (Marian, 18.09.2026). Die Karte ist 640 px breit, der Rahmen 1080: links
   gebunden liess sie rechts ein Loch, zwischen dem vollbreiten DJ-Abschnitt
   davor und dem mittigen Kaufabschnitt danach. Auf dem Telefon füllt sie die
   Breite ohnehin und bleibt links wie ihre Nachbarn. */
@media (min-width:701px){
  .m4k #verlauf .wrap{text-align:center}
  .m4k #verlauf .satz2{margin-inline:auto}
  .m4k #verlauf .rk{margin-inline:auto;text-align:start}
}
.m4k .rk .rkopf{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid rgb(var(--ink-rgb) / .14);
  background:rgb(var(--surface-2-rgb) / .7)}
.m4k .rk .rkopf svg{flex:0 0 auto;color:var(--ink-3);display:inline-block}
.m4k .rsuche{flex:1;min-width:0;font:inherit;font-size:.82rem;
  border:0;background:none;color:var(--ink);outline:none}
.m4k .rsuche::placeholder{color:var(--ink-3)}
/* DIESELBE FALLE WIE IN DER STATUSZEILE: eine Reihe aus drei Dingen ohne
   `flex-wrap`. Der Knopf „ganze Sitzung zurückholen" ist 189 px breit und
   bricht nicht um; auf 320 px hingen 71 px davon ausserhalb der Karte und
   die Beschriftung war abgeschnitten (gefunden beim Durchmessen aller zwölf
   Breiten, 17.09.2026). Umbruch erlaubt, dann rutscht der Knopf auf eine
   eigene Zeile und bleibt rechtsbündig. */
.m4k .sitzkopf{display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:10px;row-gap:4px;margin:0;
  padding:9px 16px 5px;font-size:.7rem;color:var(--ink-3)}
.m4k .sitzkopf b{font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.m4k .sitzkopf .alle{margin-inline-start:auto;font:inherit;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  color:var(--honey);background:none;border:1px solid rgb(var(--honey-rgb) / .5);
  border-radius:999px;padding:2px 9px;cursor:pointer;white-space:nowrap}
.m4k .sitzkopf .alle:hover{background:rgb(var(--honey-rgb) / .1)}
.m4k .rk .rz2{position:relative;overflow:hidden;display:flex;gap:12px;
  align-items:center;width:100%;text-align:start;background:none;border:0;
  cursor:pointer;font:inherit;color:inherit;padding:10px 16px;
  font-size:.84rem;border-bottom:1px solid rgb(var(--ink-rgb) / .1);
  transition:background .2s}
.m4k .rk .rz2:hover{background:rgb(var(--honey-rgb) / .07)}
.m4k .rk .rz2 .feldn{flex:0 0 66px;font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.m4k .rk .rz2 .wv{position:relative;flex:1;min-width:0;height:1.6em}
.m4k .rk .rz2 .wv i{position:absolute;inset:0;font-style:normal;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  overflow:hidden;transition:opacity .35s,transform .35s}
.m4k .rk .sitz .rz2:nth-of-type(2) .wv i{transition-delay:.1s}
.m4k .rk .sitz .rz2:nth-of-type(3) .wv i{transition-delay:.2s}
.m4k .rk .rz2 .wv .neu2{color:var(--good);font-weight:650}
.m4k .rk .rz2 .wv .alt2{color:var(--ink);font-weight:650;opacity:0;
  transform:translateY(10px)}
/* Auf dem Telefon fällt der Zusatz „— wie vorher“ weg (29.09.2026): Seit im
   Verlauf „ONE MORE TIME (ORIGNAL MIX!!)“ steht, schnitt die Zeile ihn bei
   390 px mitten im Wort ab. Der alte Wert selbst sagt es schon. */
@media (max-width:480px){.m4k .rk .rz2 .wv .alt2 [data-t="wie_vorher"]{display:none}}
.m4k .rz2[aria-pressed="true"] .wv .neu2{opacity:0;transform:translateY(-10px)}
.m4k .rz2[aria-pressed="true"] .wv .alt2{opacity:1;transform:none}
.m4k .rk .rz2 .tu{font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.14em;color:var(--honey);white-space:nowrap}
.m4k .rk .rz2[aria-pressed="true"] .tu{color:var(--good)}
.m4k .rk .rz2 .wisch{position:absolute;top:0;bottom:0;left:-40%;width:24%;
  pointer-events:none;transform:skewX(-14deg);
  background:linear-gradient(90deg,transparent,
    rgb(var(--honey-rgb) / .25),transparent);
  transition:left .5s ease}
.m4k .rk .rz2[aria-pressed="true"] .wisch{left:116%}
.m4k .rk .cvmini2{width:20px;height:20px;border-radius:4px;flex:0 0 auto;
  background-size:cover;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .14)}
.m4k .rk .cvleer2{width:20px;height:20px;border-radius:4px;flex:0 0 auto;
  border:1px dashed rgb(var(--ink-rgb) / .4)}
.m4k .rk .rfuss{padding:9px 16px;margin:0;font-size:.74rem;color:var(--ink-3);
  background:rgb(var(--surface-2-rgb) / .7)}
.m4k .rk .rfuss b{color:var(--ink-2);font-variant-numeric:tabular-nums}
.m4k .rk .leer-hinweis{padding:14px 16px;margin:0;font-size:.8rem;
  color:var(--ink-3);display:none}
.m4k .rk.nichts .leer-hinweis{display:block}

/* ── das Finale ── */
.m4k .kaufen{border-top:1px solid rgb(var(--ink-rgb) / .14);
  padding-block:clamp(44px,6.6vw,84px) clamp(50px,8vw,100px);
  position:relative;overflow:hidden}
.m4k .kaufen::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 380px at 50% 118%,rgb(var(--honey-rgb) / .16),transparent 72%),
    radial-gradient(560px 300px at 12% 108%,rgb(var(--brand-rgb) / .12),transparent 70%)}
.m4k .kaufen .wrap{position:relative;text-align:center}
/* Das Trüffelschwein über dem Preis (06.10.2026): fester Platz von Anfang an, gezeichnet von runtime.js. Der Platz
   steht auch vor dem Skript, sonst rutscht der Preis nach, wer per #pricing hierher springt (Layout-Verschiebung). */
.m4k .kaufen .schwein{display:block;width:120px;height:120px;margin:-12px auto 2px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.m4k .kaufen .kicker{font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--honey)}
.m4k .kaufen .preis{margin-top:10px;font-family:var(--font-round);
  font-size:clamp(3rem,6.4vw,4.8rem);font-weight:800;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums}
.m4k .kaufen .preis-ca{margin-top:6px;font-size:.8rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;max-width:48ch;margin-inline:auto}
.m4k .kaufen .preis-ca[hidden]{display:none}
.m4k .kaufen .einmal{margin-top:8px;font-size:1.02rem;color:var(--ink-2)}
.m4k .kaufen .einmal b{color:var(--ink);font-weight:750}
.m4k .kaufen .knopf{margin-top:22px;font-size:1.02rem;padding:.85em 2.1em;
  box-shadow:0 10px 34px -10px rgb(var(--honey-rgb) / .55)}
.m4k .kaufen .knopf[aria-disabled="true"]{opacity:.7;cursor:default;pointer-events:none}
.m4k .kaufen .bald{display:block;margin-top:10px;font-size:.78rem;color:var(--ink-3)}
.m4k .kaufen .demo{margin-top:18px;font-size:.9rem;color:var(--ink-2)}
.m4k .kaufen .demo b{color:var(--ink);font-weight:700}
.m4k .statchips{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap;
  justify-content:center}
.m4k .statchips span{font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.08em;color:var(--ink-2);
  border:1px solid rgb(var(--honey-rgb) / .4);border-radius:999px;padding:5px 13px}
.m4k .schlusszeile{margin-top:24px;font-size:.74rem;color:var(--ink-3);
  max-width:74ch;margin-inline:auto;line-height:1.7}
/* Der Datensicherungshinweis (15.09.2026): im Preisblock und beim
   Sicherheitsnetz, gleicher Schlüssel, gleicher Ton — Fliesstext mit
   fettem Vorsatz, der Link zum Lizenzvertrag daneben. */
.m4k .hinweis{max-width:70ch;margin-inline:auto;line-height:1.6}
.m4k .hinweis b{color:var(--ink);font-weight:700}
.m4k .hinweis a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.m4k .sek .satz2.hinweis{margin-top:22px;font-size:.88rem;color:var(--ink-2)}

/* ── Fussbereich ─────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line-2);background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;padding-block:36px 26px}
@media (max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-top>*{min-width:0}
.foot-top h4{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.foot-top a,.foot-top p{display:block;font-size:.88rem;color:var(--ink-2);padding-block:4px}
.foot-top a:hover{color:var(--brand-ink)}
.foot-brand p{color:var(--ink-3);font-size:.86rem;max-width:34ch;margin-top:8px}
.foot-top a.foot-social{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 12px 6px 10px;border:1px solid var(--line-2);border-radius:99px;color:var(--ink-2)}
.foot-top a.foot-social:hover{color:var(--brand-ink);border-color:var(--brand-ink)}
.foot-bot{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;padding-block:18px 30px;
  border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-3)}

/* ── Rechtsseiten ────────────────────────────────────────────────── */
.legal{max-width:74ch;padding:104px 20px 72px}
.legal h1{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);line-height:1.15;letter-spacing:-.02em}
.legal h2{font-size:1.16rem;margin:38px 0 10px;letter-spacing:-.01em}
.legal h3{font-size:1rem;margin:24px 0 6px;color:var(--ink)}
.legal p,.legal li{color:var(--ink-2);line-height:1.68;margin:9px 0}
.legal ul{padding-left:1.15em;margin:9px 0}
.legal li{margin:5px 0}
.legal a{color:var(--brand-ink);text-underline-offset:3px}
.legal strong{color:var(--ink)}
.legal .ph{background:var(--honey-soft);border-bottom:1px dashed var(--honey);
  padding:1px 4px;border-radius:4px;color:var(--ink);white-space:nowrap}
.legal .entwurf{background:var(--bad-bg);border:1px solid var(--bad);color:var(--ink);
  border-radius:var(--r-sm);padding:12px 16px;font-weight:600;margin:0 0 30px}
.legal .stand{margin-top:44px;color:var(--ink-3);font-size:.88rem}
.legal .box{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 20px;margin:16px 0;box-shadow:var(--shadow)}
.legal dl{margin:10px 0}
.legal dt{color:var(--ink);font-weight:600;margin-top:14px}
.legal dd{color:var(--ink-2);margin:4px 0 0;line-height:1.68}

/* ══ ZWEI SPIELEREIEN (18.09.2026) ══════════════════════════════════════
   „Egal, wo deine Musik liegt" und „Für DJs gebaut" waren die zwei
   Abschnitte ohne etwas zum Anfassen. Jetzt hat jeder eines: der Ordner,
   der ins Fenster fällt und einen Bestand liefert, und das Deck, auf dem
   Cues, Loop, Sterne und Farbe stehen bleiben, während die Tags wechseln.
   Entwurf, Wahl und die verworfene dritte („Der Härtetest"):
   Website/entwuerfe/spielereien/. Alles aus den Marken der Seite: Fläche,
   Haarlinie, Honig als „hier", Grün als „so stimmt es". Richtungsangaben
   logisch (inline-start/-end), damit Arabisch die Spiegelung bekommt. */
.m4k .spiel{position:relative;margin-top:16px;border-radius:12px;padding:16px 18px 14px;
  background:var(--surface);border:1px solid rgb(var(--ink-rgb) / .16);min-width:0}
.m4k .spiel::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgb(255 255 255 / .22),transparent)}
.m4k .sp-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
/* Die Zeile „Interaktiv" ist dieselbe wie über dem Demo-Fenster, nur steht
   sie hier IM Kopf der Karte statt rechtsbündig darüber. */
.m4k .sp-kopf .anfassen{margin:0;max-width:none;padding-inline:0;justify-content:flex-start;align-self:center}
.m4k .sp-kopf>b{font-size:.98rem;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.m4k .sp-erk{font-size:.8rem;color:var(--ink-3)}
.m4k .sp-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;
  font-size:.82rem;color:var(--ink-2);line-height:1.5}
.m4k .sp-fuss .sp-status{flex:1 1 20em;min-width:0}
.m4k .sp-fuss .sp-status b{color:var(--ink);font-weight:650}
/* Die Knöpfe sind die des Orchesters (`.frag`), eine Stufe kleiner. */
.m4k .sp-fuss .frag{font-size:.8rem;padding:8px 16px}
.m4k .sp-fuss .frag:disabled{opacity:.4;cursor:default;background:transparent;box-shadow:none}
.m4k .sp-fuss .sp-reset{border-color:rgb(var(--ink-rgb) / .25);color:var(--ink-2)}
.m4k .sp-fuss .sp-reset:hover{background:rgb(var(--ink-rgb) / .06);box-shadow:none}
.m4k .sp-fuss .frag:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── Der Ordner ── */
.m4k .sp-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:18px;align-items:stretch}
@media (max-width:640px){.m4k .sp-buehne{grid-template-columns:minmax(0,1fr)}}
.m4k .sp-baum{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-2);
  padding:10px 12px;border-radius:9px;background:var(--surface-2);
  display:grid;gap:4px;align-content:start}
.m4k .sp-knoten{display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:6px;position:relative}
.m4k .sp-knoten.tief1{margin-inline-start:16px}
.m4k .sp-knoten.tief2{margin-inline-start:32px}
.m4k .sp-oi{width:14px;height:11px;border-radius:2px 2px 3px 3px;background:var(--honey);
  position:relative;flex:0 0 auto;opacity:.75}
.m4k .sp-oi::before{content:"";position:absolute;inset-inline-start:0;top:-3px;width:6px;height:4px;
  border-radius:2px 2px 0 0;background:inherit}
.m4k .sp-token{cursor:grab;background:var(--surface);color:var(--ink);font-weight:700;
  border:1px solid rgb(var(--honey-rgb) / .55);touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .2s;z-index:2}
.m4k .sp-token .sp-oi{opacity:1}
.m4k .sp-token:hover{box-shadow:0 0 0 3px rgb(var(--honey-rgb) / .18)}
.m4k .sp-token.greift{cursor:grabbing;transition:none;box-shadow:0 8px 24px -8px rgb(var(--ink-rgb) / .4);z-index:5}
.m4k .sp-token.fliegt{transition:transform .42s cubic-bezier(.2,.8,.2,1);z-index:5}
.m4k .sp-token.schnappt{transition:transform .38s cubic-bezier(.2,.9,.3,1.25)}
.m4k .sp-token.zuhause{cursor:default;border-color:var(--good);box-shadow:0 0 0 3px rgb(var(--good-rgb) / .18)}
.m4k .sp-token:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.m4k .sp-ziel{position:relative;border-radius:10px;border:1.5px dashed rgb(var(--ink-rgb) / .28);
  background:var(--surface);min-height:150px;display:flex;flex-direction:column;
  transition:border-color .2s,background .2s,box-shadow .2s}
.m4k .sp-ziel.drueber{border-color:var(--honey);background:rgb(var(--honey-rgb) / .06);
  box-shadow:0 0 0 4px rgb(var(--honey-rgb) / .12)}
.m4k .sp-ziel.liest{border-style:solid;border-color:rgb(var(--honey-rgb) / .6)}
.m4k .sp-ziel-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;
  border-bottom:1px solid rgb(var(--ink-rgb) / .12);background:var(--leiste);border-radius:10px 10px 0 0}
.m4k .sp-ziel-bar i{width:8px;height:8px;border-radius:50%;background:rgb(var(--ink-rgb) / .2)}
.m4k .sp-ziel-bar span{margin-inline-start:6px;font-family:var(--font-brand);font-weight:600;
  font-size:.74rem;letter-spacing:-.02em;color:var(--ink)}
.m4k .sp-bestaende{display:grid;gap:6px;padding:8px 8px 0}
.m4k .sp-bestaende:empty{display:none}
.m4k .sp-bestand{border-radius:8px;padding:8px 10px;background:var(--surface-2);
  border:1px solid rgb(var(--ink-rgb) / .1);animation:sp-auf .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes sp-auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.m4k .sp-be-kopf{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.m4k .sp-be-kopf b{font-size:.8rem;color:var(--ink)}
.m4k .sp-be-end{display:flex;gap:4px;margin-inline-start:auto}
.m4k .sp-chip{font-family:var(--font-mono);font-size:.6rem;padding:2px 6px;border-radius:5px;
  background:rgb(var(--brand-rgb) / .1);color:var(--brand-ink)}
.m4k .sp-be-zahlen{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px}
.m4k .sp-bz{display:grid;line-height:1.15}
.m4k .sp-bz b{font-family:var(--font-round);font-size:.92rem;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.m4k .sp-bz.honig b{color:var(--honey)}
.m4k .sp-bz small{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.m4k .sp-ziel-hinweis{margin:auto 10px 8px;font-size:.72rem;color:var(--ink-3)}
.m4k .sp-summe{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;padding:8px 12px;
  border-top:1px solid rgb(var(--ink-rgb) / .1)}
.m4k .sp-summe .honig{margin-inline-start:auto}
/* `display:flex` schlüge das Attribut, und die Summe stünde mit drei Nullen
   da, bevor ein Ordner gelesen ist. */
.m4k .sp-summe[hidden]{display:none}

/* ── Deine Arbeit bleibt ── */
.m4k .sp-deck{display:grid;gap:8px;position:relative;padding-inline-start:10px}
.m4k .sp-farbleiste{position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;border-radius:2px;
  background:rgb(var(--ink-rgb) / .1);transition:background .25s}
.m4k .sp-welle{position:relative;height:88px;border-radius:9px;overflow:hidden;cursor:crosshair;
  background:linear-gradient(180deg,rgb(var(--ink-rgb) / .06),rgb(var(--ink-rgb) / .1));
  border:1px solid rgb(var(--ink-rgb) / .14);touch-action:none;user-select:none;-webkit-user-select:none}
.m4k .sp-welle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.m4k .sp-wf{position:absolute;inset:4px 0;width:100%;height:calc(100% - 8px);fill:rgb(var(--brand-rgb) / .75)}
.m4k .sp-grid{position:absolute;inset:0;pointer-events:none}
.m4k .sp-grid i{position:absolute;top:0;bottom:0;width:1px;background:rgb(var(--ink-rgb) / .1)}
.m4k .sp-grid i.takt{background:rgb(var(--ink-rgb) / .22)}
/* Loop und Cues liegen in Prozent von links, wie der Zeiger sie misst —
   physisch, nicht logisch, sonst stünde der Cue in Arabisch gespiegelt
   zum Klick. */
.m4k .sp-loop{position:absolute;top:0;bottom:0;pointer-events:none;
  background:rgb(var(--good-rgb) / .16);border-left:2px solid var(--good);border-right:2px solid var(--good)}
.m4k .sp-loop b{position:absolute;left:4px;bottom:4px;font:800 .56rem/1 var(--font-mono);letter-spacing:.08em;
  color:var(--good)}
.m4k .sp-loop.ring{animation:sp-loopring .9s ease-out both}
@keyframes sp-loopring{0%{box-shadow:0 0 0 0 rgb(var(--good-rgb) / .5)}100%{box-shadow:0 0 0 14px rgb(var(--good-rgb) / 0)}}
.m4k .sp-cues{position:absolute;inset:0;pointer-events:none}
.m4k .sp-cue-m{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--honey)}
.m4k .sp-cue-m b{position:absolute;top:4px;left:-9px;width:18px;height:18px;border-radius:4px;
  background:var(--honey);color:rgb(0 0 0 / .8);font:800 .62rem/18px var(--font-mono);text-align:center}
.m4k .sp-cue-m.ring::after{content:"";position:absolute;top:4px;left:-9px;width:18px;height:18px;
  border-radius:4px;border:2px solid var(--honey);animation:sp-ring .9s ease-out both}
@keyframes sp-ring{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
.m4k .sp-welle-hinweis{position:absolute;inset-inline-end:10px;bottom:6px;margin:0;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.m4k .sp-regler{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:2px 4px}
.m4k .sp-sterne button{font-size:1.05rem;line-height:1;padding:2px;border:0;background:none;cursor:pointer;
  color:rgb(var(--ink-rgb) / .22);transition:color .15s,transform .15s}
.m4k .sp-sterne button:hover{transform:scale(1.15)}
.m4k .sp-sterne button.an{color:var(--honey)}
.m4k .sp-farben{display:flex;gap:6px}
.m4k .sp-farben button{width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  background:var(--f);padding:0;transition:transform .15s,border-color .15s;opacity:.85}
.m4k .sp-farben button:hover{transform:scale(1.2)}
.m4k .sp-farben button.an{border-color:var(--ink);opacity:1;transform:scale(1.15)}
.m4k .sp-sterne button:focus-visible,.m4k .sp-farben button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.m4k .sp-gesetzt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink-3);margin-inline-start:auto}
.m4k .sp-ebene{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:8px 12px;border-radius:8px;font-size:.78rem;
  background:var(--surface-2);border:1px solid rgb(var(--ink-rgb) / .1);transition:border-color .3s}
@media (max-width:560px){.m4k .sp-ebene{grid-template-columns:minmax(0,1fr);gap:4px}.m4k .sp-ebene .sp-schloss{justify-self:start}}
.m4k .sp-eb-l{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.m4k .sp-eb-w{color:var(--ink-2)}
.m4k .sp-schloss{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;white-space:nowrap;
  padding:3px 8px;border-radius:5px;color:var(--ink-3);border:1px solid rgb(var(--ink-rgb) / .16);transition:color .3s,border-color .3s}
.m4k .sp-schloss.sp-offen{color:var(--honey);border-color:rgb(var(--honey-rgb) / .5)}
.m4k .sp-felder{display:flex;gap:16px;flex-wrap:wrap}
.m4k .sp-feld{position:relative;min-width:7em;height:1.4em}
.m4k .sp-feld i{position:absolute;inset:0;font-style:normal;white-space:nowrap;transition:opacity .4s,transform .4s}
.m4k .sp-feld .alt{font-family:var(--font-mono);font-size:.74rem;color:rgb(var(--bad-rgb) / .9)}
.m4k .sp-feld .alt.leer{color:var(--ink-3)}
.m4k .sp-feld .neu{font-weight:650;color:var(--ink);opacity:0;transform:translateY(8px)}
/* Zwei Takte (Marian, 18.09.2026: „deutlicher, dass die Tags geschrieben
   wurden, aber Cues, Loop etc. noch da sind"). Erster Takt, `schreibt`: ein
   Strahl zieht einmal über die Tag-Zeile, die drei Felder kippen in seinem
   Windschatten, das Etikett wird grün und sagt „geschrieben". Zweiter Takt,
   das Nachzählen: jedes Gesetzte bekommt einzeln seinen Haken, auf dem Deck
   (Ring um den Cue, Ring um den Loop, Hüpfer der Sterne, Aufleuchten der
   Farbleiste) und in der Zeile des DJ-Programms, die dabei zu bleibt.
   `repariert` ist der Schlusszustand. */
.m4k .sp-tags{position:relative;overflow:hidden}
.m4k .sp-strahl{position:absolute;top:0;bottom:0;left:-30%;width:30%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgb(var(--honey-rgb) / .3),transparent)}
.m4k .schreibt .sp-strahl{animation:sp-strahl .9s cubic-bezier(.4,0,.2,1) forwards}
@keyframes sp-strahl{0%{left:-30%;opacity:1}100%{left:100%;opacity:1}}
.m4k .schreibt .sp-tags{border-color:rgb(var(--honey-rgb) / .6)}
.m4k .schreibt .sp-feld .alt{opacity:0;transform:translateY(-8px)}
.m4k .schreibt .sp-feld .neu{opacity:1;transform:none}
.m4k .schreibt .sp-feld:nth-child(1) i{transition-delay:.15s}
.m4k .schreibt .sp-feld:nth-child(2) i{transition-delay:.35s}
.m4k .schreibt .sp-feld:nth-child(3) i{transition-delay:.55s}
.m4k .geschrieben .sp-tags{border-color:rgb(var(--good-rgb) / .5)}
.m4k .geschrieben .sp-tags .sp-schloss{color:var(--good);border-color:rgb(var(--good-rgb) / .55)}
.m4k .geschrieben .sp-tags .sp-schloss::before{content:"✓ "}
.m4k .sp-dbw i{font-style:normal;transition:color .25s}
.m4k .sp-dbw i.ok,.m4k .sp-teil.ok{color:var(--good);font-weight:650}
.m4k .sp-dbw i.ok::after,.m4k .sp-teil.ok::after{content:" ✓"}
.m4k .sp-cue-m.ok b{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--good)}
.m4k .sp-sterne.ok button.an{animation:sp-hops .5s ease-out both}
@keyframes sp-hops{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.m4k .sp-sterne.ok button.an:nth-child(2){animation-delay:.05s}
.m4k .sp-sterne.ok button.an:nth-child(3){animation-delay:.1s}
.m4k .sp-sterne.ok button.an:nth-child(4){animation-delay:.15s}
.m4k .sp-sterne.ok button.an:nth-child(5){animation-delay:.2s}
.m4k .sp-farbleiste.ok{animation:sp-loopring .9s ease-out both}
.m4k .repariert .sp-db{border-color:rgb(var(--good-rgb) / .4)}
.m4k .repariert .sp-db .sp-schloss{color:var(--good);border-color:rgb(var(--good-rgb) / .55)}
@media (prefers-reduced-motion:reduce){
  .m4k .sp-bestand,.m4k .sp-loop.ring,.m4k .sp-cue-m.ring::after,.m4k .schreibt .sp-strahl,
  .m4k .sp-sterne.ok button.an,.m4k .sp-farbleiste.ok{animation:none}
  .m4k .sp-token,.m4k .sp-feld i{transition:none}
}

/* ── Fragen, die immer kommen (21.09.2026) ──────────────────────────────
   Eine Lesespalte von 68 Zeichen, mittig wie der Verlauf und der Kauf
   darueber; die Fragen selbst linksbuendig, weil man sie liest. `<details>`
   ohne Skript, der Marker ist ein Pluszeichen in Honig, offen ein Minus. */
.m4k .fragen{max-width:68ch;margin:22px auto 0;text-align:start}
.m4k .fq{border-top:1px solid rgb(var(--ink-rgb) / .16)}
.m4k .fq:last-child{border-bottom:1px solid rgb(var(--ink-rgb) / .16)}
.m4k .fq summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:14px;
  padding:14px 2px;font-size:.98rem;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.m4k .fq summary::-webkit-details-marker{display:none}
.m4k .fq summary::before{content:"+";flex:0 0 auto;width:1.1em;font-family:var(--font-mono);
  font-weight:700;color:var(--honey)}
.m4k .fq[open] summary::before{content:"\2013"}
.m4k .fq summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.m4k .fq p{margin:0 0 16px calc(1.1em + 14px);font-size:.9rem;line-height:1.65;color:var(--ink-2)}
@media (min-width:701px){
  .m4k #faq .wrap{text-align:center}
  .m4k #faq .satz2{margin-inline:auto}
}
@media (max-width:700px){.m4k .fq p{margin-inline-start:0}}

/* ── DAS FENSTER AUF DEM TELEFON ──────────────────────────────────────
   Bis zum 17.09.2026 stand die Seitenleiste auch auf 375 px NEBEN der
   Tabelle. Die Rechnung für ein iPhone: 375 px Fenster, davon 132 px
   Seitenleiste, bleiben 243 px. Davon gehen 120 px feste Spalten (Zustand,
   Cover, Übernommen), 44 px Spaltenabstände und 28 px Polsterung ab — es
   blieben 51 px für Titel UND Interpret, also für beide nichts. Marians
   Befund: „horizontal alles gequetscht, man sieht nichts."

   Jetzt STAPELT das Fenster unter 700 px: die Bestände über der Tabelle,
   zwei nebeneinander, und die Tabelle bekommt die ganze Breite. Sie zeigt
   dann drei Spalten statt fünf — Zustand, Titel, Übernommen. Die Wahl auf
   einem Telefon ist nicht „fünf Spalten oder drei", sondern „drei Spalten
   lesbar oder fünf Spalten unlesbar"; und der Titel ist die Spalte, an der
   man den Unterschied sieht, um den es hier geht.
   Gerechnet bleiben so 375 − 22 Polsterung − 64 feste Spalten − 18
   Abstände = 271 px für den Titel, statt 51 für zwei Spalten. */
@media (max-width:700px){
  /* Die Leiste kommt nach oben und wird zum Block. `.logokachel` geht über
     beide Spalten; ihre negativen Ränder heben weiter die Polsterung von
     `.seite` auf, deshalb bleibt der Kopf randlos. */
  .m4k .rumpf{grid-template-columns:minmax(0,1fr)}
  /* `1fr` heisst `minmax(auto,1fr)`, und `auto` ist hier der Inhalt: „Apple
     Music / iTunes" steht mit `white-space:nowrap` in der Karte, also konnte
     die Spalte nicht unter dessen Breite schrumpfen und hing auf 320 px um
     50 px aus dem Fenster. `minmax(0,1fr)` erlaubt das Schrumpfen, und dann
     greift die Auslassung in der Karte. */
  .m4k .seite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 8px;
    align-content:start;border-inline-end:0;
    border-bottom:1px solid rgb(var(--ink-rgb) / .16)}
  .m4k .logokachel{grid-column:1 / -1}
  .m4k .qkarte{margin-bottom:8px}
  .m4k .qkarte:last-child{margin-bottom:2px}

  /* ZWEI STUFEN IM GESTAPELTEN FENSTER. Die Tabelle hat hier die ganze
     Breite, und die hängt am Gerät: ein iPhone SE gibt ihr 270 px, das
     aufgeklappte iPhone Duo 578. Eine einzige Spaltenaufteilung für beide
     wäre entweder auf dem SE gequetscht oder auf dem Duo eine Titelspalte
     von 470 px neben viel Nichts.
     Die Ziffern zählen die Kinder einer Zeile: 1 Zustand · 2 Titel ·
     3 Interpret · 4 Album · 5 Genre · 6 Cover · 7 Übernommen — dieselbe
     Reihenfolge wie in page.html (`.zk`) und in runtime.js (`zrV`/`zrN`).
     Interpret und Genre sind ab 900 px ohnehin weg (`.schmalweg`). */
  .m4k .zr{font-size:.78rem}

  /* DIESE FÜNF REGELN STANDEN BIS ZUM 17.09.2026 IM FALSCHEN BLOCK. Beim
     Aufteilen der Tabellenregeln in zwei Stufen wurde der 700er Block eine
     Zeile zu früh geschlossen; sie landeten im Band 520…700 und galten damit
     auf dem Telefon NICHT — dort, wo sie gebraucht werden. Gefunden hat es
     Marian, an einer Statuszeile, die ihren Satz Wort für Wort untereinander
     schrieb. */
  /* „INFO" braucht gesperrt 32 px und stand in einer 30-px-Spalte — ein
     Buchstabe hing draussen. Im gestapelten Fenster läuft die Kopfzeile
     deshalb enger und eine Spur kleiner; sie ist eine Beschriftung, kein
     Text, und verträgt das. */
  .m4k .zk>:nth-child(7){visibility:hidden}
  .m4k .zk{letter-spacing:.06em;font-size:.55rem}
  /* Auf dem Telefon stehen die drei Teile der Statuszeile untereinander, und
     die Fassungsnummer entfällt — sie ist eine Fussnote, kein Inhalt. */
  .m4k .f-fuss{padding:9px 12px;line-height:1.5}
  .m4k .f-fuss .sag{flex-basis:100%}
  .m4k .f-fuss .fassung{display:none}

  /* Dieselbe Falle ein drittes Mal: die Feldzeile im Orchester ist eine
     Reihe aus Etikett (88 px fest), Wert und Haken. Auf 320 px bleiben
     hinter dem Etikett 74 px für beide, und der Haken stand 29 px ausserhalb
     seiner Karte. Etikett schmaler, Umbruch erlaubt. */
  .m4k .wf-z{flex-wrap:wrap}
  .m4k .wf-z .wfl{flex:0 0 70px}
}
/* bis 519 px — Telefon: drei Spalten, sonst wird der Titel unleserlich */
@media (max-width:519px){
  .m4k .zk,.m4k .zr{grid-template-columns:30px minmax(0,1fr) 34px;
    gap:9px;padding:0 11px}
  .m4k .zk>:nth-child(4),.m4k .zr>:nth-child(4),
  .m4k .zk>:nth-child(6),.m4k .zr>:nth-child(6){display:none}
}
/* 520…700 px — grosses Telefon und das aufgeklappte Duo hochkant: Album und
   Cover kommen zurück, der Titel behält über 180 px */
@media (min-width:520px) and (max-width:700px){
  .m4k .zk,.m4k .zr{grid-template-columns:36px minmax(0,1.6fr) minmax(0,1fr) 34px 44px;
    gap:9px;padding:0 11px}

  /* Die Kopfzeile der letzten Spalte passt in 34 px nicht („APPLIED" braucht
     gesperrt rund 49 px) und stand halb ausserhalb des Fensters. Die Spalte
     bleibt, ihre Beschriftung geht: was dort steht, ist ein Haken oder ein
     Strich, und das erklärt sich neben dem Titel von selbst. */
}