/* =========================================================
   EDGETRAIL — Design-System v3  ·  "Instrument"
   Vorgabe ist "Edge": Nachtblau, Cyan, und ein Verlauf aus Magenta, Violett
   und Orange. Marke an EINER Stelle: const BRAND / CURRENCY im JS.
   Aufbau: 01 Tokens · 02 Basis · 03 Steuerelemente · 04 App-Rahmen
           05 Daten · 06 Dialoge · 07 Startseite · 08 Breite · 09 Bewegung
           10 Look (Kerzen, Verlauf, Ringe)
   ========================================================= */

/* ---------- 01 · Tokens ------------------------------------------------ */
:root{
  /* Edge ist die Vorgabe — dieselben Werte wie [data-theme="edge"] weiter unten. */
  --bg:#05070f; --surface:#0a0f1e; --surface-2:#101728; --surface-3:#182038;
  --border:#1d2b47; --border-soft:rgba(148,197,255,.09);
  --text:#eaeefb; --text-dim:#aab5d3; --text-faint:#8d99bd;
  --accent:#22d3ee; --accent-2:#b14cff; --accent-soft:rgba(34,211,238,.14);
  --pos:#4ade80; --pos-soft:rgba(74,222,128,.13);
  --neg:#fb7185; --neg-soft:rgba(251,113,133,.13);
  --on-accent:#031318; --glow:rgba(34,211,238,.16);
  --shadow:0 24px 60px -18px rgba(0,0,0,.8); --card-shadow:0 18px 44px -26px rgba(0,0,0,.95);
  --topbar-bg:rgba(5,7,15,.76);
  /* Das warme Dreigestirn jeder Ansicht — daraus entstehen alle Verläufe. */
  --t1:#ff2d9b; --t2:#b14cff; --t3:#ff9a3c;
  --licht-1:rgba(34,211,238,.11); --licht-2:rgba(177,76,255,.09);

  --font-ui:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:'Archivo','Inter Tight',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-num:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-mono:var(--font-num);

  --radius:12px; --radius-sm:9px; --radius-lg:18px;

  /* ---------- Schrift: sechs Textarten, eine Regel ----------
     Etikett   kleine Überschrift über Feldern und Kennzahlen (Mono, Grossbuchstaben)
     Mini      Hinweise, Anmerkungen, Metazeilen
     Klein     kleine Knöpfe, Nebentext
     Text      Fliesstext, Tabellen, Eingaben, Knöpfe
     Titel     Kartentitel, Namen, kleinere Zahlen
     Kopf      Seiten- und Dialogtitel
     Grösser als Kopf sind nur die grossen Zahlen und die Schlagzeilen der Startseite —
     die stehen weiter für sich. Neue Texte nehmen eine dieser sechs, keine eigene Grösse. */
  --fs-etikett:11px; --fs-mini:12px; --fs-klein:13px; --fs-text:14px; --fs-titel:16px; --fs-kopf:20px;
  /* Grosse Zahlen: drei feste Stufen — Kennzahl in einer Karte, Hauptzahl, grösste Zahl eines Ergebnisses */
  --fs-zahl-m:24px; --fs-zahl-l:30px; --fs-zahl-xl:34px;

  /* Abgeleitet — gilt für alle Farbschemen, nirgends doppelt gepflegt. */
  --hair:color-mix(in srgb,var(--text) 9%,transparent);
  --hair-strong:color-mix(in srgb,var(--text) 15%,transparent);
  --tint:color-mix(in srgb,var(--text) 4%,transparent);
  --tint-2:color-mix(in srgb,var(--text) 7%,transparent);
  --accent-line:color-mix(in srgb,var(--accent) 42%,transparent);
  --accent-wash:color-mix(in srgb,var(--accent) 8%,transparent);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Verläufe: senkrecht für Schlagzeilen, quer für alles, was man anklickt. */
  --verlauf:linear-gradient(180deg,var(--t1) 0%,var(--t2) 44%,var(--t3) 100%);
  --verlauf-quer:linear-gradient(120deg,var(--t1),var(--t2) 48%,var(--t3));
  /* Etikettenfarben: HIER einmal ausrechnen, nicht je Etikett. Bei einer Liste mit
     zehntausend Trades kostete das pro Element gerechnete color-mix messbar Zeit. */
  --tag1-bg:color-mix(in srgb,var(--accent) 14%,transparent); --tag1-fg:color-mix(in srgb,var(--accent) 88%,var(--text));
  --tag2-bg:color-mix(in srgb,var(--t2) 15%,transparent);     --tag2-fg:color-mix(in srgb,var(--t2) 82%,var(--text));
  --tag3-bg:color-mix(in srgb,var(--t3) 15%,transparent);     --tag3-fg:color-mix(in srgb,var(--t3) 84%,var(--text));
  --tag4-bg:color-mix(in srgb,var(--t1) 14%,transparent);     --tag4-fg:color-mix(in srgb,var(--t1) 82%,var(--text));
  /* Der Hintergrund-Chart (erzeugt von tools/kerzen.mjs) */
  --kerzen:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%222400%22%20height%3D%221000%22%20viewBox%3D%220%200%202400%201000%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22f%22%20x1%3D%220%22%20x2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.82%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%222400%22%20height%3D%221000%22%20fill%3D%22url(%23f)%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%22url(%23m)%22%3E%3Cpath%20d%3D%22M10.2%20875.2V885.8M111.9%20900.1V914.9M132.2%20890.2V907.4M152.5%20871.9V893.3M172.9%20868.4V878.5M193.2%20867.1V876.3M213.6%20858.3V871.0M254.2%20856.7V877.7M274.6%20840.3V860.9M294.9%20674.0V846.9M335.6%20661.9V706.0M376.3%20652.2V694.5M396.6%20620.4V675.8M416.9%20605.1V649.9M457.6%20583.4V626.9M498.3%20581.1V638.0M579.7%20605.2V659.8M620.3%20595.8V631.6M661.0%20586.6V623.1M681.4%20550.5V597.4M803.4%20647.8V682.2M844.1%20625.0V684.7M884.7%20602.0V643.5M905.1%20542.7V603.6M945.8%20556.6V584.7M966.1%20536.4V576.6M1006.8%20507.3V550.6M1027.1%20489.0V523.0M1128.8%20528.1V574.5M1169.5%20516.9V554.5M1189.8%20505.6V521.7M1230.5%20486.5V519.3M1291.5%20492.1V547.0M1352.5%20477.4V526.7M1372.9%20453.0V480.6M1393.2%20410.3V466.3M1413.6%20384.0V435.1M1433.9%20322.0V396.1M1454.2%20308.3V355.5M1515.3%20347.2V385.9M1576.3%20373.3V418.9M1596.6%20343.5V378.8M1657.6%20355.6V423.0M1678.0%20311.1V374.7M1739.0%20318.5V350.5M1800.0%20312.1V367.3M1820.3%20278.2V327.4M1861.0%20265.1V312.0M1922.0%20277.4V324.2M1942.4%20255.5V293.4M1962.7%20239.2V266.4M1983.1%2093.9V256.2M2023.7%2082.7V138.1M2206.8%20386.3V435.4M2288.1%20420.4V452.0M2308.5%20404.8V447.0M2328.8%20390.4V424.1%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4.5%20876.7h11.4v4.3h-11.4zM106.2%20905.6h11.4v8.0h-11.4zM126.5%20891.7h11.4v14.0h-11.4zM146.8%20878.1h11.4v13.6h-11.4zM167.2%20873.1h11.4v5.0h-11.4zM187.5%20867.7h11.4v5.4h-11.4zM207.9%20861.9h11.4v5.8h-11.4zM248.5%20858.4h11.4v13.4h-11.4zM268.9%20842.1h11.4v16.3h-11.4zM289.2%20678.3h11.4v163.8h-11.4zM329.9%20670.9h11.4v27.1h-11.4zM370.6%20664.7h11.4v24.0h-11.4zM390.9%20629.4h11.4v35.3h-11.4zM411.3%20606.3h11.4v23.0h-11.4zM451.9%20595.6h11.4v25.8h-11.4zM492.6%20583.5h11.4v37.6h-11.4zM574.0%20614.9h11.4v31.3h-11.4zM614.6%20603.6h11.4v22.7h-11.4zM655.3%20594.2h11.4v25.2h-11.4zM675.7%20568.3h11.4v25.9h-11.4zM797.7%20653.0h11.4v21.6h-11.4zM838.4%20631.9h11.4v44.2h-11.4zM879.1%20602.9h11.4v30.5h-11.4zM899.4%20558.0h11.4v44.9h-11.4zM940.1%20560.8h11.4v19.2h-11.4zM960.4%20536.9h11.4v23.8h-11.4zM1001.1%20514.2h11.4v28.6h-11.4zM1021.4%20495.4h11.4v18.8h-11.4zM1123.1%20536.2h11.4v22.7h-11.4zM1163.8%20521.2h11.4v26.5h-11.4zM1184.1%20506.2h11.4v15.0h-11.4zM1224.8%20490.0h11.4v27.1h-11.4zM1285.8%20509.5h11.4v22.6h-11.4zM1346.8%20478.4h11.4v46.8h-11.4zM1367.2%20454.1h11.4v24.3h-11.4zM1387.5%20427.0h11.4v27.1h-11.4zM1407.9%20387.9h11.4v39.1h-11.4zM1428.2%20338.2h11.4v49.7h-11.4zM1448.5%20315.7h11.4v22.5h-11.4zM1509.6%20352.0h11.4v16.9h-11.4zM1570.6%20375.3h11.4v27.0h-11.4zM1590.9%20344.6h11.4v30.7h-11.4zM1651.9%20366.6h11.4v55.0h-11.4zM1672.3%20320.0h11.4v46.5h-11.4zM1733.3%20321.4h11.4v28.0h-11.4zM1794.3%20323.2h11.4v41.2h-11.4zM1814.6%20288.0h11.4v35.2h-11.4zM1855.3%20281.3h11.4v28.0h-11.4zM1916.3%20285.3h11.4v33.1h-11.4zM1936.7%20257.2h11.4v28.1h-11.4zM1957.0%20254.8h11.4v2.4h-11.4zM1977.4%20101.4h11.4v153.4h-11.4zM2018.0%2095.3h11.4v29.8h-11.4zM2201.1%20392.2h11.4v36.3h-11.4zM2282.4%20435.7h11.4v10.2h-11.4zM2302.8%20415.6h11.4v20.1h-11.4zM2323.1%20395.8h11.4v19.8h-11.4z%22%20fill%3D%22%2322d3ee%22%2F%3E%3Cpath%20d%3D%22M30.5%20875.9V887.6M50.8%20880.2V889.5M71.2%20886.5V903.6M91.5%20903.4V918.2M233.9%20861.3V873.5M315.3%20672.0V712.5M355.9%20669.1V693.6M437.3%20602.1V622.1M478.0%20594.8V626.4M518.6%20563.1V615.9M539.0%20592.1V628.3M559.3%20610.2V646.3M600.0%20614.4V630.1M640.7%20602.6V623.7M701.7%20567.1V602.4M722.0%20588.2V599.5M742.4%20596.1V626.7M762.7%20622.5V647.9M783.1%20646.3V675.9M823.7%20653.0V691.7M864.4%20626.6V635.5M925.4%20547.8V583.8M986.4%20535.3V543.8M1047.5%20494.1V510.1M1067.8%20493.8V519.2M1088.1%20499.7V545.7M1108.5%20529.9V564.3M1149.2%20525.7V553.4M1210.2%20502.4V517.6M1250.8%20484.2V527.6M1271.2%20513.6V536.1M1311.9%20507.5V526.9M1332.2%20509.1V531.1M1474.6%20313.3V341.0M1494.9%20333.1V374.5M1535.6%20346.4V380.7M1555.9%20357.3V403.3M1616.9%20341.9V397.9M1637.3%20370.2V427.6M1698.3%20306.7V340.3M1718.6%20321.7V356.9M1759.3%20305.9V363.7M1779.7%20327.6V387.0M1840.7%20276.5V316.9M1881.4%20278.7V302.2M1901.7%20290.1V318.8M2003.4%2081.8V126.8M2044.1%2093.9V155.0M2064.4%20145.0V217.5M2084.7%20197.9V253.7M2105.1%20229.2V292.8M2125.4%20273.5V317.0M2145.8%20292.9V355.7M2166.1%20331.7V379.6M2186.4%20371.2V430.9M2227.1%20384.2V425.6M2247.5%20405.9V434.3M2267.8%20423.0V456.9M2349.2%20392.0V404.6M2369.5%20397.9V434.1M2389.8%20411.8V451.8%22%20stroke%3D%22%23f0325f%22%20stroke-width%3D%222%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M24.8%20876.7h11.4v4.8h-11.4zM45.2%20881.5h11.4v6.8h-11.4zM65.5%20888.3h11.4v15.1h-11.4zM85.8%20903.4h11.4v10.3h-11.4zM228.2%20861.9h11.4v9.9h-11.4zM309.6%20678.3h11.4v19.7h-11.4zM350.2%20670.9h11.4v17.8h-11.4zM431.6%20606.3h11.4v15.1h-11.4zM472.3%20595.6h11.4v25.5h-11.4zM512.9%20583.5h11.4v23.9h-11.4zM533.3%20607.4h11.4v11.4h-11.4zM553.6%20618.8h11.4v27.4h-11.4zM594.3%20614.9h11.4v11.4h-11.4zM635.0%20603.6h11.4v15.7h-11.4zM696.0%20568.3h11.4v22.3h-11.4zM716.3%20590.6h11.4v8.0h-11.4zM736.7%20598.7h11.4v26.3h-11.4zM757.0%20625.0h11.4v22.4h-11.4zM777.4%20647.4h11.4v27.2h-11.4zM818.0%20653.0h11.4v23.0h-11.4zM858.7%20631.9h11.4v1.6h-11.4zM919.7%20558.0h11.4v22.0h-11.4zM980.7%20536.9h11.4v5.9h-11.4zM1041.8%20495.4h11.4v6.8h-11.4zM1062.1%20502.3h11.4v8.0h-11.4zM1082.4%20510.3h11.4v24.1h-11.4zM1102.8%20534.3h11.4v24.6h-11.4zM1143.5%20536.2h11.4v11.4h-11.4zM1204.5%20506.2h11.4v10.9h-11.4zM1245.2%20490.0h11.4v28.7h-11.4zM1265.5%20518.7h11.4v13.5h-11.4zM1306.2%20509.5h11.4v12.7h-11.4zM1326.5%20522.3h11.4v2.9h-11.4zM1468.9%20315.7h11.4v19.0h-11.4zM1489.2%20334.7h11.4v34.2h-11.4zM1529.9%20352.0h11.4v24.1h-11.4zM1550.2%20376.1h11.4v26.1h-11.4zM1611.3%20344.6h11.4v43.8h-11.4zM1631.6%20388.4h11.4v33.2h-11.4zM1692.6%20320.0h11.4v9.7h-11.4zM1712.9%20329.7h11.4v19.7h-11.4zM1753.6%20321.4h11.4v23.9h-11.4zM1774.0%20345.3h11.4v19.1h-11.4zM1835.0%20288.0h11.4v21.3h-11.4zM1875.7%20281.3h11.4v14.3h-11.4zM1896.0%20295.6h11.4v22.8h-11.4zM1997.7%20101.4h11.4v23.7h-11.4zM2038.4%2095.3h11.4v56.7h-11.4zM2058.7%20152.0h11.4v46.9h-11.4zM2079.1%20198.9h11.4v53.8h-11.4zM2099.4%20252.7h11.4v31.0h-11.4zM2119.7%20283.7h11.4v26.0h-11.4zM2140.1%20309.6h11.4v31.9h-11.4zM2160.4%20341.5h11.4v36.5h-11.4zM2180.7%20378.0h11.4v50.4h-11.4zM2221.4%20392.2h11.4v16.3h-11.4zM2241.8%20408.4h11.4v17.1h-11.4zM2262.1%20425.5h11.4v20.4h-11.4zM2343.5%20395.8h11.4v6.9h-11.4zM2363.8%20402.7h11.4v17.5h-11.4zM2384.1%20420.2h11.4v20.1h-11.4z%22%20fill%3D%22%23f0325f%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
/* ---------- Die sieben Ansichten ---------------------------------------
   Jede hat einen eigenen Charakter, nicht nur eine andere Akzentfarbe: eigener
   Grund, eigene Schriftfarben, ein eigenes warmes Dreigestirn für Verläufe.
   Vier dunkle, drei helle. "Edge" ist die Vorgabe.

   Zwei Regeln gelten überall:
   · Die Akzentfarbe ist nie grün und nie rot — sonst verwechselt man sie mit Geld.
   · --pos und --neg heben sich in jeder Ansicht klar voneinander und vom Akzent ab.
   ------------------------------------------------------------------------ */

/* EDGE — Nachtblau und Cyan. Verlauf: Magenta, Violett, Orange. (Vorgabe) */
[data-theme="edge"]{
  --bg:#05070f; --surface:#0a0f1e; --surface-2:#101728; --surface-3:#182038;
  --border:#1d2b47; --border-soft:rgba(148,197,255,.09);
  --text:#eaeefb; --text-dim:#aab5d3; --text-faint:#8d99bd;
  --accent:#22d3ee; --accent-2:#b14cff; --accent-soft:rgba(34,211,238,.14);
  --pos:#4ade80; --pos-soft:rgba(74,222,128,.13);
  --neg:#fb7185; --neg-soft:rgba(251,113,133,.13);
  --on-accent:#031318; --glow:rgba(34,211,238,.16);
  --shadow:0 24px 60px -18px rgba(0,0,0,.8); --card-shadow:0 18px 44px -26px rgba(0,0,0,.95);
  --topbar-bg:rgba(5,7,15,.76);
  --t1:#ff2d9b; --t2:#b14cff; --t3:#ff9a3c;
  --licht-1:rgba(34,211,238,.11); --licht-2:rgba(177,76,255,.09);
}

/* PHOSPHOR — Bernstein auf Schwarz, wie ein altes Handelsterminal. */
[data-theme="phosphor"]{
  --bg:#070604; --surface:#100e09; --surface-2:#181510; --surface-3:#231f17;
  --border:#3a3323; --border-soft:rgba(255,176,0,.11);
  --text:#f4ecd8; --text-dim:#bfb192; --text-faint:#a29476;
  --accent:#ffb000; --accent-2:#ff6a00; --accent-soft:rgba(255,176,0,.14);
  --pos:#7bd88f; --pos-soft:rgba(123,216,143,.13);
  --neg:#ff4d6d; --neg-soft:rgba(255,77,109,.14);
  --on-accent:#1d1200; --glow:rgba(255,176,0,.17);
  --shadow:0 24px 60px -18px rgba(0,0,0,.85); --card-shadow:0 18px 44px -26px rgba(0,0,0,.95);
  --topbar-bg:rgba(7,6,4,.78);
  --t1:#ffe066; --t2:#ff9500; --t3:#ff4d00;
  --licht-1:rgba(255,176,0,.10); --licht-2:rgba(255,77,0,.07);
}

/* ORCHIDEE — Aubergine, Violett und Pink. Nachtstück. */
[data-theme="orchidee"]{
  --bg:#0c0513; --surface:#150c21; --surface-2:#1e1331; --surface-3:#2a1b43;
  --border:#3d2a5c; --border-soft:rgba(192,132,252,.13);
  --text:#f4ecff; --text-dim:#c9b8e2; --text-faint:#ab99c7;
  --accent:#c084fc; --accent-2:#ff4fa3; --accent-soft:rgba(192,132,252,.16);
  --pos:#4ade80; --pos-soft:rgba(74,222,128,.13);
  --neg:#ff4d6d; --neg-soft:rgba(255,77,109,.14);
  --on-accent:#1b0a29; --glow:rgba(192,132,252,.18);
  --shadow:0 24px 60px -18px rgba(0,0,0,.8); --card-shadow:0 18px 44px -26px rgba(0,0,0,.95);
  --topbar-bg:rgba(12,5,19,.78);
  --t1:#ff4fa3; --t2:#c084fc; --t3:#ffb86b;
  --licht-1:rgba(192,132,252,.12); --licht-2:rgba(255,79,163,.08);
}

/* BETON — Grauer Sichtbeton, Signalorange. Werkstatt statt Wohnzimmer. */
[data-theme="beton"]{
  --bg:#0e0e11; --surface:#17171b; --surface-2:#1f1f25; --surface-3:#2b2b33;
  --border:#3c3c46; --border-soft:rgba(255,212,0,.11);
  --text:#eeeef2; --text-dim:#b8b8c2; --text-faint:#9c9ca8;
  --accent:#ffd400; --accent-2:#ff6b00; --accent-soft:rgba(255,212,0,.14);
  --pos:#3ddc84; --pos-soft:rgba(61,220,132,.13);
  --neg:#ff3b30; --neg-soft:rgba(255,59,48,.13);
  --on-accent:#1b1600; --glow:rgba(255,212,0,.15);
  --shadow:0 24px 60px -18px rgba(0,0,0,.8); --card-shadow:0 18px 44px -26px rgba(0,0,0,.95);
  --topbar-bg:rgba(14,14,17,.78);
  --t1:#ffd400; --t2:#ff6b00; --t3:#ff2d55;
  --licht-1:rgba(255,212,0,.08); --licht-2:rgba(255,107,0,.07);
}

/* PAPIER — Creme, Tinte, Indigo. Wie ein sauber geführtes Kassenbuch. */
[data-theme="papier"]{
  --bg:#f7f3ea; --surface:#fffdf8; --surface-2:#f2ede1; --surface-3:#e7e0d0;
  --border:#ddd4c2; --border-soft:#ece5d7;
  --text:#1c1814; --text-dim:#51483c; --text-faint:#6e6455;
  --accent:#3a3a96; --accent-2:#8c2f39; --accent-soft:rgba(58,58,150,.10);
  --pos:#1f7a4d; --pos-soft:rgba(31,122,77,.11);
  --neg:#b3261e; --neg-soft:rgba(179,38,30,.10);
  --on-accent:#ffffff; --glow:rgba(58,58,150,.05);
  --shadow:0 24px 54px -20px rgba(60,48,30,.22); --card-shadow:0 1px 2px rgba(60,48,30,.06);
  --topbar-bg:rgba(247,243,234,.84);
  --t1:#3a3a96; --t2:#8c2f39; --t3:#b07d2a;
  --licht-1:rgba(58,58,150,.05); --licht-2:rgba(176,125,42,.05);
}

/* EIS — Kühles Weiss, Elektroblau, Koralle. */
[data-theme="eis"]{
  --bg:#eef2f8; --surface:#ffffff; --surface-2:#f5f8fc; --surface-3:#e4eaf3;
  --border:#d5dde8; --border-soft:#e7edf5;
  --text:#0f1722; --text-dim:#465366; --text-faint:#64718a;
  --accent:#2563eb; --accent-2:#ff5c5c; --accent-soft:rgba(37,99,235,.10);
  --pos:#047857; --pos-soft:rgba(4,120,87,.10);
  --neg:#d11a2a; --neg-soft:rgba(209,26,42,.09);
  --on-accent:#ffffff; --glow:rgba(37,99,235,.06);
  --shadow:0 24px 54px -20px rgba(18,28,45,.20); --card-shadow:0 1px 2px rgba(18,28,45,.05);
  --topbar-bg:rgba(238,242,248,.84);
  --t1:#2563eb; --t2:#7c3aed; --t3:#ff5c5c;
  --licht-1:rgba(37,99,235,.06); --licht-2:rgba(124,58,237,.05);
}

/* SAND — Warmes Beige, Terrakotta, Petrol. */
[data-theme="sand"]{
  --bg:#f4eee4; --surface:#fffaf2; --surface-2:#efe7da; --surface-3:#e3d8c6;
  --border:#dccfba; --border-soft:#eae1d2;
  --text:#211a13; --text-dim:#544a3d; --text-faint:#726554;
  --accent:#11657d; --accent-2:#c4511f; --accent-soft:rgba(17,101,125,.10);
  --pos:#2f7d32; --pos-soft:rgba(47,125,50,.11);
  --neg:#b03024; --neg-soft:rgba(176,48,36,.10);
  --on-accent:#ffffff; --glow:rgba(17,101,125,.05);
  --shadow:0 24px 54px -20px rgba(70,54,34,.22); --card-shadow:0 1px 2px rgba(70,54,34,.06);
  --topbar-bg:rgba(244,238,228,.84);
  --t1:#c4511f; --t2:#11657d; --t3:#d99a2b;
  --licht-1:rgba(17,101,125,.05); --licht-2:rgba(196,81,31,.05);
}

/* ---------- 02 · Basis -------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:var(--fs-text);line-height:1.55;
  font-feature-settings:"ss01" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Ein einziger, ruhiger Lichtschein — kein Farbverlauf-Teppich. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 42% at 78% -6%,var(--glow),transparent 62%),
    radial-gradient(46% 38% at 8% 4%,color-mix(in srgb,var(--accent-2) 7%,transparent),transparent 66%);
}
img,svg,canvas{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:var(--fs-text);color:inherit}
a{color:inherit}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--text)}

.tnum{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:600}
.pos-t{color:var(--pos)} .neg-t{color:var(--neg)}
.pos{color:var(--pos)} .neg{color:var(--neg)}

/* Typografie — Grösse, Gewicht und Laufweite gehören zusammen. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
h3,h4{letter-spacing:-.018em;line-height:1.25}

/* Kleine Etiketten sprechen Mono — sie beschriften Messwerte. */
.nav-label,.stat .lbl,.det-sec-t,.det-tl,.sum-l,.ic-label,.sys-stat .l,.det-stat .l,
.theme-group-label,.settings-label,.range-label,.cal-dow,.cal-week .wl,.sec-title,.tbl th{
  font-family:var(--font-num);font-weight:600;text-transform:uppercase;
}

/* ---------- 03 · Steuerelemente ---------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border-radius:var(--radius-sm);
  font-weight:600;font-size:var(--fs-text);letter-spacing:-.01em;white-space:nowrap;
  border:1px solid transparent;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .1s var(--ease),box-shadow .16s var(--ease);
}
.btn:active{transform:scale(.985)}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 1px 0 color-mix(in srgb,#fff 22%,transparent) inset,0 6px 18px -8px var(--accent);
}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#fff);box-shadow:0 1px 0 color-mix(in srgb,#fff 26%,transparent) inset,0 10px 24px -10px var(--accent)}
.btn-ghost{background:var(--tint);color:var(--text);border-color:var(--hair)}
.btn-ghost:hover{background:var(--tint-2);border-color:var(--hair-strong)}
.btn-danger{background:var(--neg);color:var(--on-neg)}
.btn-danger:hover{background:color-mix(in srgb,var(--neg) 88%,#fff)}
.btn-danger-soft{background:var(--neg-soft);color:var(--neg);border-color:color-mix(in srgb,var(--neg) 26%,transparent)}
.btn-danger-soft:hover{background:color-mix(in srgb,var(--neg) 20%,transparent)}
.btn-sm{padding:6px 11px;font-size:var(--fs-klein);border-radius:8px}

.icon-btn{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:transparent;color:var(--text-dim);border:1px solid transparent;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.icon-btn:hover{color:var(--text);background:var(--tint-2);border-color:var(--hair)}
.icon-btn svg{width:16px;height:16px}

.link-sm{color:var(--accent);font-size:var(--fs-klein);font-weight:600;background:none}
.link-sm:hover{text-decoration:underline;text-underline-offset:3px}

/* Segmentierte Schalter — ein Gleis, ein laufender Reiter. */
.seg{display:flex;gap:6px}
.seg button{
  flex:1;padding:10px;border-radius:9px;background:var(--tint);border:1px solid var(--hair);
  font-weight:600;color:var(--text-dim);font-size:var(--fs-text);
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.seg button:hover{color:var(--text);border-color:var(--hair-strong)}
.seg button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.seg button.on.long,.seg button.on.good{background:var(--pos-soft);border-color:color-mix(in srgb,var(--pos) 45%,transparent);color:var(--pos)}
.seg button.on.short,.seg button.on.bad{background:var(--neg-soft);border-color:color-mix(in srgb,var(--neg) 45%,transparent);color:var(--neg)}
.seg.five button{padding:9px 0;font-size:var(--fs-klein)}

.range-wrap{display:flex;align-items:center;gap:12px;margin-bottom:20px;min-width:0}
.range-label{font-size:var(--fs-etikett);letter-spacing:.14em;color:var(--text-faint)}
.range-seg{display:inline-flex;gap:2px;background:var(--tint);border:1px solid var(--hair);border-radius:10px;padding:3px}
.range-seg button{padding:5px 12px;border-radius:7px;font-size:var(--fs-klein);font-weight:600;color:var(--text-dim);transition:background .15s var(--ease),color .15s var(--ease)}
.range-seg button:hover{color:var(--text)}
.range-seg button.on{background:var(--surface-3);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.2)}

.lang-grid{display:flex;gap:7px;flex-wrap:wrap}
.lang-opt{
  padding:8px 16px;border-radius:9px;border:1px solid var(--hair);background:var(--tint);
  color:var(--text-dim);font-size:var(--fs-klein);font-weight:600;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.lang-opt:hover{border-color:var(--hair-strong);color:var(--text)}
.lang-opt.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

.tag{display:inline-block;padding:3px 9px;border-radius:7px;font-size:var(--fs-mini);font-weight:600;background:var(--tint-2);color:var(--text-dim);letter-spacing:-.005em}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:7px;font-size:var(--fs-mini);font-weight:600}
.pill.long{background:var(--pos-soft);color:var(--pos)}
.pill.short{background:var(--neg-soft);color:var(--neg)}
.open-badge{
  display:inline-block;padding:2px 8px;border-radius:999px;font-family:var(--font-num);
  font-size:var(--fs-etikett);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);white-space:nowrap;
}
.chip{
  padding:7px 13px;border-radius:999px;background:var(--tint);border:1px solid var(--hair);
  font-size:var(--fs-klein);font-weight:500;color:var(--text-dim);
  transition:background .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease);
}
.chip:hover{border-color:var(--hair-strong);color:var(--text)}
.chip.on{background:var(--neg-soft);border-color:color-mix(in srgb,var(--neg) 42%,transparent);color:var(--neg)}
.chip.ind{display:inline-flex;align-items:center;gap:8px;background:var(--tint-2);border-color:var(--hair);color:var(--text)}
.chip.ind button{color:var(--text-faint);font-weight:700;font-size:var(--fs-titel);line-height:1;padding:0}
.chip.ind button:hover{color:var(--neg)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--pos);display:inline-block;margin-right:7px;vertical-align:middle;box-shadow:0 0 0 3px var(--pos-soft)}
.dot.off{background:var(--text-faint);box-shadow:0 0 0 3px var(--tint-2)}

*:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
a:focus-visible,button:focus-visible,summary:focus-visible,.tp-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--hair-strong);border-radius:8px;border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint);background-clip:padding-box}

/* ---------- 04 · App-Rahmen -------------------------------------------- */
.app{display:flex;min-height:100dvh}

.sidebar{
  width:236px;flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--border-soft);
  display:flex;flex-direction:column;padding:18px 12px 14px;
  position:sticky;top:0;height:100dvh;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 24px}
.brand-mark{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;
  box-shadow:0 4px 14px -6px var(--accent);
}
.brand-mark svg{width:17px;height:17px}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-titel);letter-spacing:-.03em}
.brand-name b{color:var(--accent);font-weight:700}

.nav{display:flex;flex-direction:column;gap:1px}
.nav-label{font-size:var(--fs-etikett);letter-spacing:.16em;color:var(--text-faint);padding:6px 12px 9px}
.nav-item{
  position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-radius:var(--radius-sm);color:var(--text-dim);font-weight:500;font-size:var(--fs-text);
  width:100%;text-align:left;letter-spacing:-.01em;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.7;transition:opacity .15s var(--ease)}
.nav-item:hover{background:var(--tint);color:var(--text)}
.nav-item:hover svg{opacity:1}
.nav-item.active{background:var(--tint-2);color:var(--text);font-weight:600}
.nav-item.active svg{opacity:1;color:var(--accent)}
.nav-item.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:2px;background:var(--accent);
}
.sidebar-foot{margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--border-soft)}
.sidebar-foot .small{font-family:var(--font-num);font-size:var(--fs-etikett);color:var(--text-faint);line-height:1.7;letter-spacing:.01em}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  /* Gleiche Satzkante wie der Inhalt darunter, auch auf breiten Schirmen. */
  padding:16px max(28px,calc((100% - 1280px)/2 + 28px));
  position:sticky;top:0;z-index:20;
  background:var(--topbar-bg);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
}
/* Kante statt Linie: der Inhalt verläuft unter der Leiste, er stösst nicht an. */
.topbar::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:20px;pointer-events:none;
  background:linear-gradient(var(--bg),transparent);
}
.topbar h1{font-family:var(--font-display);font-size:var(--fs-kopf);font-weight:700;letter-spacing:-.032em}
.topbar .sub{color:var(--text-dim);font-size:var(--fs-klein);margin-top:1px;letter-spacing:-.01em}
.topbar-actions{display:flex;gap:8px;align-items:center}
.content{padding:20px 28px 80px;max-width:1280px;width:100%;margin:0 auto}
.menu-btn{display:none}
.scrim{display:none}
.topbar-mark{display:none}

/* Untere Reiterleiste — nur auf kleinen Geräten sichtbar (siehe 08). */
.tabbar{display:none}

/* ---------- 05 · Daten -------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:20px;box-shadow:var(--card-shadow);
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.card-head h3{font-size:var(--fs-text);font-weight:600;letter-spacing:-.015em;font-family:var(--font-ui)}
.card-head .hint{font-size:var(--fs-mini);color:var(--text-faint);letter-spacing:-.005em}

.row{display:grid;gap:16px;margin-bottom:16px}
.row.r-2{grid-template-columns:1.62fr 1fr}
.row>*{min-width:0}

/* Kennzahlen-Kacheln: die Zahl ist die Hauptsache, nicht der Rahmen. */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.stat{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:16px 18px 17px;box-shadow:var(--card-shadow);
}
.stat::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(120% 90% at 100% 0,var(--tint),transparent 70%);
}
.stat.pos::before{background:radial-gradient(120% 90% at 100% 0,var(--pos-soft),transparent 70%)}
.stat.neg::before{background:radial-gradient(120% 90% at 100% 0,var(--neg-soft),transparent 70%)}
.stat.accent::before{background:radial-gradient(120% 90% at 100% 0,var(--accent-soft),transparent 70%)}
.stat .lbl{position:relative;font-size:var(--fs-etikett);letter-spacing:.15em;color:var(--text-faint)}
.stat .val{
  position:relative;font-family:var(--font-num);font-variant-numeric:tabular-nums;
  font-size:clamp(17px,1.3vw + .4rem,27px);font-weight:600;letter-spacing:-.045em;
  margin-top:9px;line-height:1;white-space:nowrap;
}
.stat .val .arr{font-size:.5em;margin-right:5px;vertical-align:.25em;opacity:.8}
.stat .meta{position:relative;font-size:var(--fs-mini);color:var(--text-faint);margin-top:9px;letter-spacing:-.005em}

.chart-wrap{position:relative;overflow:hidden}
.chart-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 80% at 100% -10%,var(--accent-wash),transparent 58%);
}
.chart-wrap>*{position:relative}

/* Tabelle */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-text)}
.tbl th{
  text-align:left;font-size:var(--fs-etikett);letter-spacing:.14em;color:var(--text-faint);
  padding:0 12px 12px;border-bottom:1px solid var(--border-soft);white-space:nowrap;
}
.tbl th.r,.tbl td.r{text-align:right}
.tbl td{padding:12px;border-bottom:1px solid var(--border-soft);letter-spacing:-.005em}
.tbl tbody tr{transition:background .12s var(--ease)}
.tbl tbody tr:hover{background:var(--tint)}
.tbl tbody tr:last-child td{border-bottom:none}
.sym{font-weight:600;letter-spacing:-.015em}
.tbl tr.open-tr td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.row-actions{display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .14s var(--ease)}
.tbl tbody tr:hover .row-actions,.tbl tbody tr:focus-within .row-actions{opacity:1}
.cam{display:inline-grid;place-items:center;width:16px;height:16px;color:var(--text-faint);vertical-align:-3px;margin-left:2px}
.cam svg{width:13px;height:13px}

.empty{text-align:center;padding:62px 24px;color:var(--text-dim);max-width:420px;margin:0 auto}
.empty svg{width:32px;height:32px;opacity:.3;margin:0 auto 18px;color:var(--text)}
.empty h4{color:var(--text);font-size:var(--fs-kopf);margin-bottom:8px;font-weight:600;font-family:var(--font-display);letter-spacing:-.025em}
.empty p{font-size:var(--fs-text);line-height:1.6}

/* Kennzahlen-Zeilen (per JS gesetzte Inline-Reihen) brauchen Luft zwischen
   Beschriftung und Wert, sonst stossen lange Beträge an die Schrift an. */
.card div[style*="justify-content:space-between"]{gap:16px}
.card div[style*="justify-content:space-between"]>span:first-child{min-width:0}
/* Die leere Aktionsspalte darf der Tabelle keine halbe Breite wegnehmen. */
.tbl thead th:last-child:empty{width:86px}

/* Kalender */
.cal-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:14px}
.cal-nav{display:flex;align-items:center;gap:4px}
.cal-month{font-family:var(--font-display);font-size:var(--fs-titel);font-weight:600;letter-spacing:-.02em;min-width:148px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr) minmax(56px,.76fr);gap:6px}
.cal-dow{font-size:var(--fs-etikett);letter-spacing:.14em;color:var(--text-faint);text-align:center;padding-bottom:6px}
.cal-cell{
  aspect-ratio:1/.84;border-radius:9px;border:1px solid var(--border-soft);
  background:var(--tint);padding:7px 9px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:transform .14s var(--ease),border-color .14s var(--ease);
}
.cal-cell.empty-cell{background:transparent;border:none}
.cal-cell.pos{background:var(--pos-soft);border-color:color-mix(in srgb,var(--pos) 28%,transparent)}
.cal-cell.neg{background:var(--neg-soft);border-color:color-mix(in srgb,var(--neg) 28%,transparent)}
.cal-cell .d{font-family:var(--font-num);font-size:var(--fs-mini);color:var(--text-faint);font-weight:500}
.cal-cell.pos .d,.cal-cell.neg .d{color:var(--text-dim)}
.cal-cell .pnl{font-family:var(--font-num);font-size:var(--fs-mini);font-weight:600;margin-top:auto;letter-spacing:-.03em}
.cal-cell .cnt{font-size:var(--fs-etikett);color:var(--text-faint);margin-top:2px}
.cal-today{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent)}
.cal-cell.cal-clickable{cursor:pointer}
.cal-cell.cal-clickable:hover{transform:translateY(-2px);z-index:1;border-color:var(--hair-strong)}
.cal-week{
  border-radius:9px;border:1px dashed var(--hair);background:transparent;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  padding:7px 9px;text-align:right;
}
.cal-week.pos{background:var(--pos-soft);border-style:solid;border-color:color-mix(in srgb,var(--pos) 28%,transparent)}
.cal-week.neg{background:var(--neg-soft);border-style:solid;border-color:color-mix(in srgb,var(--neg) 28%,transparent)}
.cal-week .wl{font-size:var(--fs-etikett);letter-spacing:.14em;color:var(--text-faint);margin-bottom:auto}
.cal-week.empty-cell{background:transparent;border:none}

/* Balken */
.bar-row{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.bar-row .name{width:132px;font-size:var(--fs-klein);font-weight:500;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.bar-track{flex:1;height:22px;background:var(--tint-2);border-radius:6px;overflow:hidden;position:relative;min-width:0}
.bar-fill{height:100%;border-radius:6px;transition:width .6s var(--ease-out)}
.bar-row .num{width:94px;text-align:right;font-family:var(--font-num);font-size:var(--fs-klein);font-weight:600;flex-shrink:0;letter-spacing:-.03em}

/* Analyse */
.an-dims{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.an-dims button{
  padding:6px 13px;border-radius:999px;border:1px solid var(--hair);background:transparent;
  color:var(--text-dim);font-size:var(--fs-klein);font-weight:500;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.an-dims button:hover{color:var(--text);border-color:var(--hair-strong)}
.an-dims button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.an-hl{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-wash),var(--card-shadow)}
.an-hl>.card-head h3{color:var(--accent)}

/* Zellen statt Karten-in-Karten: ein Raster aus Haarlinien. */
.an-sum{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:11px;overflow:hidden;
}
.sum-tile{background:var(--surface);border:none;border-radius:0;padding:15px 16px}
.sum-v{font-family:var(--font-num);font-size:clamp(15px,1.1vw,17.5px);font-weight:600;line-height:1.15;letter-spacing:-.05em;white-space:nowrap}
.sum-l{font-size:var(--fs-etikett);letter-spacing:.13em;color:var(--text-faint);margin-top:7px}

.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:12px;overflow:hidden}
.insight{background:var(--surface);border:none;border-radius:0;padding:20px}
.insight.best{box-shadow:inset 0 2px 0 var(--pos)}
.insight.worst{box-shadow:inset 0 2px 0 var(--neg)}
.ic-label{font-size:var(--fs-etikett);letter-spacing:.14em;color:var(--text-faint);margin-bottom:11px}
.ic-main{font-size:var(--fs-titel);font-weight:600;color:var(--text);line-height:1.35;letter-spacing:-.015em}
.ic-main .ic-dim{color:var(--text-dim);font-weight:400}
.ic-val{font-family:var(--font-num);font-size:var(--fs-zahl-m);font-weight:600;margin-top:11px;letter-spacing:-.045em}
.ic-sub{font-size:var(--fs-mini);color:var(--text-faint);margin-top:5px}
.ic-disc{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:var(--fs-text)}
.ic-disc .l{color:var(--text-dim)}

/* Systeme */
.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;align-items:stretch}
.sys-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;cursor:pointer;box-shadow:var(--card-shadow);
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.sys-card:hover{transform:translateY(-2px);border-color:var(--hair)}
.sys-card.inactive{opacity:.55}
.sys-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.sys-name{font-family:var(--font-display);font-size:var(--fs-titel);font-weight:700;letter-spacing:-.025em}
.sys-badges{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 13px}
.sys-desc{font-size:var(--fs-klein);color:var(--text-dim);margin-bottom:14px;line-height:1.55}
.sys-rules{display:flex;flex-direction:column;gap:1px;margin-bottom:14px;min-height:86px;max-height:150px;overflow:hidden;position:relative;background:var(--border-soft);border-radius:9px}
.sys-card.clamped .sys-rules::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.sys-more{display:none;align-items:center;gap:5px;font-size:var(--fs-mini);font-weight:600;color:var(--accent);margin:-8px 0 13px}
.sys-card.clamped .sys-more{display:flex}
.sys-more svg{width:13px;height:13px}
.rule-block{background:var(--surface-2);border-radius:0;padding:10px 12px}
.sys-rules .rule-block:first-child{border-radius:9px 9px 0 0}
.sys-rules .rule-block:last-child{border-radius:0 0 9px 9px}
.rule-block .rl{font-family:var(--font-num);font-size:var(--fs-etikett);text-transform:uppercase;letter-spacing:.13em;color:var(--text-faint);font-weight:600;margin-bottom:4px}
.rule-block .rt{font-size:var(--fs-klein);color:var(--text);line-height:1.5}
.sys-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--border-soft)}
.sys-stat{text-align:left}
.sys-stat .v{font-family:var(--font-num);font-size:var(--fs-titel);font-weight:600;letter-spacing:-.05em;white-space:nowrap}
.sys-stat .l{font-size:var(--fs-etikett);letter-spacing:.1em;color:var(--text-faint);margin-top:4px}

/* Trade-Detail */
.det-hero{text-align:center;padding:2px 0 20px;border-bottom:1px solid var(--border-soft);margin-bottom:4px}
.det-hero .pill{vertical-align:middle}
.det-asset{color:var(--text-dim);font-size:var(--fs-klein);margin-left:8px;font-weight:500}
.det-pnl{font-family:var(--font-num);font-size:clamp(28px,7vw,36px);font-weight:600;margin:14px 0 3px;letter-spacing:-.05em}
.det-sub{color:var(--text-dim);font-size:var(--fs-klein);font-weight:500}
.det-sec{margin-top:22px}
.det-sec-t{font-size:var(--fs-etikett);letter-spacing:.14em;color:var(--text-faint);margin-bottom:11px}
.det-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:11px;overflow:hidden}
.det-f{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;background:var(--surface)}
.det-f span{color:var(--text-dim);font-size:var(--fs-klein)}
.det-f b{font-family:var(--font-num);font-weight:600;font-size:var(--fs-klein);text-align:right;letter-spacing:-.03em}
.det-text{margin-top:14px}
.det-tl{font-size:var(--fs-etikett);letter-spacing:.13em;color:var(--text-faint);margin-bottom:6px}
.det-text p{color:var(--text);font-size:var(--fs-text);line-height:1.65;white-space:pre-wrap}
.det-chips{display:flex;flex-wrap:wrap;gap:7px}
.det-shot img{width:100%;border-radius:11px;border:1px solid var(--border-soft);display:block}
.det-sysbox{border:1px solid var(--border-soft);border-radius:11px;padding:14px;background:var(--surface-2)}
.det-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:11px;overflow:hidden}
.det-stat{text-align:center;background:var(--surface);border:none;border-radius:0;padding:15px 8px}
.det-stat .v{font-family:var(--font-num);font-size:clamp(14px,3.6vw,17px);font-weight:600;letter-spacing:-.05em;white-space:nowrap}
.det-stat .l{font-size:var(--fs-etikett);letter-spacing:.1em;color:var(--text-faint);margin-top:4px}
.det-sysbox .rule-block{background:var(--surface);margin-top:8px;border-radius:8px}
.det-sysbox .rule-block:first-child{margin-top:0}

/* Meldung */
.toast{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%) translateY(90px);
  background:var(--surface-3);border:1px solid var(--hair);border-radius:11px;padding:12px 18px;
  font-weight:500;font-size:var(--fs-text);box-shadow:var(--shadow);z-index:450;opacity:0;
  transition:transform .35s var(--ease-out),opacity .25s ease;
  display:flex;align-items:center;gap:10px;max-width:min(90vw,420px);
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast svg{width:17px;height:17px;color:var(--pos);flex-shrink:0}

/* Beschriftung mit Nebenaktion rechts — ohne Float, der ins Feld rutscht. */
.field label.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.field label.label-row .link-sm{flex:0 0 auto}
/* Der Zusatz in einer Abschnittsüberschrift ist ein Zusatz, keine Überschrift. */
.sec-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sec-title .opt{
  font-family:var(--font-ui);font-size:var(--fs-mini);font-weight:400;letter-spacing:-.005em;
  text-transform:none;color:var(--text-faint);
}
#multHint{margin:-8px 0 16px}
#multHint.warn-t{color:var(--neg)}

.size-notice{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:210;
  max-width:min(92vw,620px);display:flex;align-items:flex-start;gap:10px;padding:13px 12px 13px 16px;border-radius:12px;
  background:var(--surface-3);border:1px solid var(--hair);box-shadow:var(--shadow);font-size:var(--fs-klein);line-height:1.5;color:var(--text-dim)}
.size-notice b{color:var(--text);white-space:nowrap}
.size-notice.block{border-color:color-mix(in srgb,var(--neg) 50%,transparent)}
.size-notice.block b{color:var(--neg)}
@media(max-width:760px){.size-notice{bottom:calc(84px + env(safe-area-inset-bottom))}}
/* Ausgeblendete Felder bleiben ausgeblendet — auch gegen display:flex der Feldreihen. */
[hidden]{display:none!important}
/* Ausstiegszeilen */
.exit-row{border:1px solid var(--border-soft);background:var(--surface-2);border-radius:12px;padding:12px 14px 4px;margin-bottom:10px}
.exit-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.exit-n{font-family:var(--font-num);font-size:var(--fs-etikett);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-weight:600}
.exit-net{margin-left:auto;font-size:var(--fs-klein);font-weight:600;letter-spacing:-.03em}
.exit-rm{width:26px;height:26px}
.exit-rm svg{width:13px;height:13px}
.exit-grid{display:grid;grid-template-columns:1.2fr 1fr 1.25fr .9fr;gap:10px}
.exit-grid-2{grid-template-columns:1.2fr 1fr 1.6fr}
.exit-grid-net{grid-template-columns:1.4fr 1fr}
.exit-grid-net .field{display:flex;flex-direction:column}
.exit-grid-net .field>input{margin-top:auto}
.exit-grid-net input[data-k="pnl"]{font-family:var(--font-num);font-size:var(--fs-titel);font-weight:600}
.pnl-mode{margin-bottom:12px}
.pnl-mode .seg{max-width:420px}
.exit-grid .field{margin-bottom:10px}
.add-exit{margin:2px 0 18px}
.fee-block{margin-top:4px}
.excl-note{font-size:var(--fs-klein);color:var(--text-dim);background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid var(--accent-line);border-radius:10px;padding:10px 14px;margin-bottom:14px;line-height:1.5}
.open-badge.partial{color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 14%,transparent)}
.open-badge.warn{color:var(--neg);background:var(--neg-soft)}
.tbl tr.other-acct td{opacity:.5}
.leg-tbl td,.leg-tbl th{white-space:nowrap}
@media(max-width:760px){
  .exit-grid{grid-template-columns:1fr 1fr}
  .exit-grid-2{grid-template-columns:1fr 1fr}
  .exit-grid-2 .fx-only{grid-column:1/-1}
  .fee-block{grid-template-columns:1fr}
}
/* Live-Rechnung im Formular — sie zeigt in jeder Phase genau das, was aus den
   bereits eingetragenen Feldern belegbar folgt. Nichts wird geschätzt. */
.calc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
  background:var(--border-soft);border:1px solid var(--border-soft);
  border-radius:11px;overflow:hidden;margin:2px 0 18px;
}
.calc-tile{background:var(--surface-2);padding:12px 13px 13px}
.calc-l{font-family:var(--font-num);font-size:var(--fs-etikett);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint);font-weight:600}
.calc-v{font-family:var(--font-num);font-size:var(--fs-titel);font-weight:600;letter-spacing:-.045em;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calc-h{font-size:var(--fs-etikett);color:var(--text-faint);margin-top:5px;line-height:1.35}
.calc-open{
  background:var(--surface-2);border:1px dashed var(--hair);border-radius:11px;
  padding:14px 16px;font-size:var(--fs-klein);color:var(--text-dim);margin:2px 0 18px;
}
.sum-h{font-size:var(--fs-etikett);color:var(--text-faint);margin-top:5px;line-height:1.35}
.an-note{font-size:var(--fs-mini);color:var(--text-faint);margin-top:14px;line-height:1.5;max-width:74ch}

/* ---------- 06 · Dialoge, Formulare, Konto ----------------------------- */
.modal-overlay{
  position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 64%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);
  display:none;align-items:flex-start;justify-content:center;z-index:100;
  padding:32px 16px;overflow-y:auto;
}
.modal-overlay.open{display:flex;animation:scrimIn .22s ease}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-lg);
  width:100%;max-width:660px;box-shadow:var(--shadow);
  /* Der Dialog scrollt in sich selbst — so klebt die Fusszeile nie über dem Text. */
  max-height:min(900px,calc(100dvh - 64px));display:flex;flex-direction:column;
  animation:sheetIn .34s var(--ease-out);
}
.modal-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}
.modal-head,.modal-foot{flex:0 0 auto}
@keyframes sheetIn{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--border-soft);
  background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-head h3{font-family:var(--font-display);font-size:var(--fs-kopf);font-weight:700;letter-spacing:-.028em}
.modal-body{padding:22px}
.modal-foot{
  display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;
  border-top:1px solid var(--border-soft);
  background:var(--surface);border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

.sec-title{
  font-size:var(--fs-etikett);letter-spacing:.16em;color:var(--accent);
  margin:26px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border-soft);
}
.sec-title:first-child{margin-top:0}

.field{margin-bottom:15px}
.field label{display:block;font-size:var(--fs-mini);font-weight:600;color:var(--text-dim);margin-bottom:7px;letter-spacing:-.005em}
.field .opt{color:var(--text-faint);font-weight:400}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;background:var(--tint);
  border:1px solid var(--hair);border-radius:9px;color:var(--text);
  transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--hair-strong)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface-2);
  box-shadow:0 0 0 3px var(--accent-wash);
}
.field textarea{resize:vertical;min-height:64px;line-height:1.55}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.field-row .field,.field-row-3 .field{display:flex;flex-direction:column}
.field-row .field>input,.field-row .field>select,.field-row .field>.seg,.field-row .field>.fee-wrap,
.field-row-3 .field>input,.field-row-3 .field>select{margin-top:auto}
.add-inline{display:flex;gap:8px;margin-top:10px}
.add-inline input{flex:1}
.exit-hint{
  font-size:var(--fs-klein);color:var(--text-dim);background:var(--tint);
  border:1px solid var(--hair);border-left:2px solid var(--accent);
  border-radius:8px;padding:10px 13px;margin:-2px 0 15px;line-height:1.55;
}
.calc-out{font-size:var(--fs-klein);color:var(--text-dim);margin-top:5px}
.calc-out b{font-family:var(--font-num);font-size:var(--fs-klein);letter-spacing:-.03em}
.fee-wrap{display:flex;gap:8px;align-items:stretch}
.fee-wrap input{flex:1;min-width:0}
.fee-seg{flex:0 0 auto}
.fee-seg button{padding:0 14px;font-size:var(--fs-klein)}
.fee-hint{font-size:var(--fs-mini);color:var(--text-faint);margin-top:6px;min-height:14px}
/* Ein leerer Hinweis zwischen zwei Feldreihen soll keine Lücke reissen */
.modal-body>.fee-hint:empty{display:none}
.math-row{display:flex;align-items:center;gap:12px}
.math-row .q{font-family:var(--font-num);font-size:var(--fs-kopf);font-weight:600;letter-spacing:-.04em}
.math-row input{width:112px;text-align:center;font-family:var(--font-num);font-size:var(--fs-kopf);font-weight:600}
.wipe-err,.auth-err{display:none;color:var(--neg);font-size:var(--fs-klein);font-weight:600;margin-top:8px}
.auth-err{margin:2px 0 10px}
.warn{font-size:var(--fs-mini);color:var(--text-faint);margin-top:7px}

.img-area{
  border:1px dashed var(--hair-strong);border-radius:11px;padding:18px;text-align:center;
  color:var(--text-dim);font-size:var(--fs-klein);cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease);
}
.img-area:hover{border-color:var(--accent);color:var(--text);background:var(--accent-wash)}
.img-prev{position:relative;border-radius:11px;overflow:hidden;border:1px solid var(--hair)}
.img-prev img{display:block;width:100%;max-height:240px;object-fit:contain;background:#000}
.img-prev .rm{position:absolute;top:8px;right:8px;background:color-mix(in srgb,var(--bg) 80%,#000);border-radius:8px}

.imp-intro{font-size:var(--fs-text);color:var(--text-dim);line-height:1.6;margin-bottom:18px}
.imp-map{display:flex;flex-direction:column;gap:9px}
.imp-row{display:flex;align-items:center;gap:12px}
.imp-lbl{flex:0 0 135px;font-size:var(--fs-klein);font-weight:500;color:var(--text)}
.imp-row select{flex:1;min-width:0}
.imp-hint{font-size:var(--fs-mini);color:var(--text-faint);line-height:1.6;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft)}
.imp-preview{margin-top:15px;font-size:var(--fs-text);font-weight:600}

/* Aufklappbares */
.adv-sec{margin-top:12px;border-top:1px solid var(--border-soft)}
.adv-sec summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:15px 2px 7px;
  font-family:var(--font-num);font-size:var(--fs-etikett);text-transform:uppercase;letter-spacing:.15em;
  color:var(--text-dim);font-weight:600;user-select:none;
}
.adv-sec summary::-webkit-details-marker{display:none}
.adv-sec summary:hover{color:var(--text)}
.adv-sec .chev{display:inline-flex;transition:transform .2s var(--ease);color:var(--text-faint)}
.adv-sec[open] .chev{transform:rotate(90deg)}

/* Einstellungen */
.settings-section{padding:24px 0;border-bottom:1px solid var(--border-soft)}
.settings-section:first-child{padding-top:2px}
.settings-section:last-child{border-bottom:none;padding-bottom:2px}
.settings-label{font-size:var(--fs-etikett);letter-spacing:.16em;color:var(--accent);margin-bottom:16px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-row b{color:var(--text);font-weight:600}
.settings-row .muted{font-size:var(--fs-mini);color:var(--text-faint);margin-top:3px}
.settings-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.theme-group-label{font-size:var(--fs-etikett);letter-spacing:.14em;color:var(--text-faint);margin-bottom:12px}
.theme-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
.theme-fold>summary::-webkit-details-marker{display:none}
.fold-right{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:var(--fs-klein)}
.fold-name{font-weight:600;color:var(--text)}
.fold-prev{width:36px;height:24px;border-radius:7px;position:relative;overflow:hidden;border:1px solid var(--hair);flex:0 0 auto}
.fold-prev span{position:absolute;right:5px;top:5px;width:11px;height:11px;border-radius:3px}
.fold-chev{width:16px;height:16px;color:var(--text-faint);transition:transform .2s var(--ease)}
.theme-fold[open] .fold-chev{transform:rotate(90deg)}
.theme-swatch{
  border:1px solid var(--hair);border-radius:11px;padding:10px;background:transparent;
  cursor:pointer;text-align:left;
  transition:border-color .15s var(--ease),background .15s var(--ease),transform .15s var(--ease);
}
.theme-swatch:hover{border-color:var(--hair-strong);transform:translateY(-1px)}
.theme-swatch.on{border-color:var(--accent);background:var(--accent-wash);box-shadow:0 0 0 1px var(--accent)}
.theme-prev{height:42px;border-radius:8px;position:relative;overflow:hidden;margin-bottom:9px;border:1px solid var(--hair)}
.theme-prev .acc{position:absolute;left:8px;bottom:8px;width:16px;height:16px;border-radius:5px}
.theme-name{font-size:var(--fs-klein);font-weight:600;color:var(--text)}
.theme-mode{font-size:var(--fs-etikett);color:var(--text-faint);font-weight:500;margin-top:2px}

/* Anmeldung */
.auth-screen{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  padding:24px;background:var(--bg);
}
.auth-screen::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 44% at 50% -6%,var(--glow),transparent 66%);
}
.auth-card{
  position:relative;width:100%;max-width:390px;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--radius-lg);padding:30px 28px;box-shadow:var(--shadow);
}
.auth-back{
  background:none;border:none;color:var(--text-dim);font-size:var(--fs-klein);font-weight:500;
  cursor:pointer;padding:0;margin-bottom:20px;font-family:inherit;
  transition:color .15s var(--ease);
}
.auth-back:hover{color:var(--accent)}
.auth-brand{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:6px}
.auth-tag{text-align:center;font-size:var(--fs-klein);color:var(--text-dim);margin:0 0 24px;font-weight:400}
.auth-tabs{display:flex;gap:4px;background:var(--tint);padding:4px;border-radius:11px;margin-bottom:22px;border:1px solid var(--hair)}
.auth-tabs button{flex:1;padding:9px;border-radius:8px;font-weight:600;font-size:var(--fs-klein);color:var(--text-dim);transition:background .15s var(--ease),color .15s var(--ease)}
.auth-tabs button.on{background:var(--surface-3);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.auth-note{font-size:var(--fs-mini);color:var(--text-faint);line-height:1.6;margin-top:18px;text-align:center}
.auth-hint{font-size:var(--fs-mini);color:var(--text-faint);margin:-4px 0 0 2px;text-align:left}
.auth-consent{display:flex;align-items:flex-start;gap:9px;font-size:var(--fs-klein);color:var(--text-dim);margin-top:15px;line-height:1.5;cursor:pointer;text-align:left}
.auth-consent input{margin-top:0;flex-shrink:0}
.auth-consent a{color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.auth-lang{margin-top:20px;padding-top:18px;border-top:1px solid var(--border-soft);display:flex;justify-content:center}
.auth-lang .lang-grid{gap:8px}
.auth-lang .lang-opt{padding:7px 16px;font-size:var(--fs-klein)}

/* Rechtliches */
.legal-ov{
  position:fixed;inset:0;z-index:400;background:color-mix(in srgb,var(--bg) 64%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;
}
.legal-box{width:100%;max-width:760px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin:auto}
.legal-head{
  display:flex;align-items:center;justify-content:space-between;padding:20px 26px;
  border-bottom:1px solid var(--border-soft);position:sticky;top:0;background:var(--surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;z-index:1;
}
.legal-head h3{font-family:var(--font-display);font-size:var(--fs-kopf);font-weight:700;letter-spacing:-.03em}
.legal-body{padding:26px 30px;line-height:1.7;color:var(--text-dim);font-size:var(--fs-text);max-width:72ch}
.legal-body h4{color:var(--text);font-family:var(--font-display);font-size:var(--fs-titel);font-weight:700;letter-spacing:-.02em;margin:26px 0 9px}
.legal-body h4:first-child{margin-top:0}
.legal-body p{margin-bottom:13px}
.legal-body ul{margin:0 0 13px 20px}
.legal-body li{margin-bottom:7px}
.legal-body .legal-note{background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:10px;padding:13px 15px;color:var(--text);font-size:var(--fs-text);margin-bottom:22px}
.legal-body .legal-ph{color:var(--accent);font-weight:600}
.legal-foot{padding:16px 26px 22px;text-align:right;border-top:1px solid var(--border-soft)}

/* ---------- 07 · Startseite -------------------------------------------- */
/* Konzept „Nordlicht": eine mittige, symmetrische Seite mit genau einer
   Lichtquelle. Alles ordnet sich um die Mitte und um das Produkt.          */

/* Ein Raster für alle Abstände. Jeder Abschnitt greift darauf zu, damit die
   Seite von oben bis unten denselben Takt hat. */
:root{
  --lp-w:1140px;--lp-pad:clamp(20px,4vw,40px);
  --s-sec:clamp(76px,9.5vw,136px);   /* Abstand oben/unten je Abschnitt   */
  --s-head:clamp(40px,5vw,64px);     /* Kopf  ->  Inhalt                  */
  --s-block:clamp(52px,6.5vw,88px);  /* Block ->  Block innerhalb eines   */
  --s-item:clamp(20px,2.4vw,30px);   /* Element -> Element                */
  --grid-line:color-mix(in srgb,var(--text) 6%,transparent);
}

.lp{
  position:fixed;inset:0;z-index:250;overflow-y:auto;overflow-x:clip;
  background:var(--bg);color:var(--text);display:block;scroll-behavior:smooth;
}
/* Das Nordlicht selbst — zwei sehr weiche Schleier, die kaum merklich wandern. */
/* Bleibt bewusst innerhalb der Seitenbreite — ein Schleier, der über den Rand
   hinausragt, erzeugt sonst eine Querscrollleiste. */
.lp::before{
  content:"";position:absolute;left:0;right:0;top:-300px;
  height:1460px;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 30% at 50% 20%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 68%),
    radial-gradient(38% 26% at 16% 36%,color-mix(in srgb,var(--accent-2) 22%,transparent),transparent 70%),
    radial-gradient(40% 24% at 84% 30%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 72%);
  filter:blur(46px);opacity:.72;
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%  {transform:translateY(0);opacity:.66}
  50% {transform:translateY(-30px);opacity:.82}
  100%{transform:translateY(16px);opacity:.7}
}
/* Ein Hauch Korn nimmt den Flächen das Digitale. */
.lp::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lp>*{position:relative;z-index:1}
#landingScreen{overflow-x:clip}

/* Navigation: eine schwebende Kapsel, kein Balken über die ganze Breite. */
/* Eine durchgehende Leiste — ein Werkzeug trägt keine schwebende Kapsel.
   Eigen macht sie die Haarlinie, die an den Rändern ausläuft, und der
   Fortschrittsbalken, der genau auf dieser Linie liegt. */
.lp-nav{
  position:sticky;top:0;z-index:6;padding:0 var(--lp-pad);
  background:color-mix(in srgb,var(--surface) 62%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(175%);backdrop-filter:blur(20px) saturate(175%);
  transition:background .3s var(--ease);
}
.lp-nav.scrolled{background:color-mix(in srgb,var(--surface) 88%,transparent)}
/* auslaufende Trennlinie */
.lp-nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent);
}
/* Fortschritt auf derselben Linie */
.lp-nav::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;z-index:2;
  width:calc(var(--lp-prog,0) * 100%);background:var(--accent);
  box-shadow:0 0 10px var(--accent);pointer-events:none;
}
.lp-nav-in{
  max-width:var(--lp-w);margin:0 auto;padding:0;height:62px;
  display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);
  transition:height .3s var(--ease);
}
.lp-nav.scrolled .lp-nav-in{height:56px}
.lp-logo{display:flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.035em}
.lp-logo b{color:var(--accent);font-weight:700}
.lp-logo .brand-mark{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--on-accent);box-shadow:0 4px 14px -6px var(--accent)}
.lp-logo .brand-mark svg{width:16px;height:16px}
.lp-nav-links{display:flex;gap:clamp(18px,2.2vw,30px);white-space:nowrap;margin-left:auto}
.lp-nav-links a{
  cursor:pointer;color:var(--text-dim);font-family:var(--font-ui);
  font-size:14.5px;font-weight:600;letter-spacing:-.012em;padding:6px 0;position:relative;
  transition:color .18s var(--ease);
}
.lp-nav-links a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1.5px;border-radius:2px;background:var(--accent);transition:left .28s var(--ease),right .28s var(--ease)}
.lp-nav-links a:hover{color:var(--text)}
.lp-nav-links a:hover::after{left:0;right:0}
/* Eine Haarlinie trennt Wegweiser von Aktionen — wie in einem Werkzeugfenster. */
.lp-nav-right{display:flex;align-items:center;gap:9px;position:relative;padding-left:clamp(16px,2vw,26px)}
.lp-nav-right::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:22px;background:var(--hair)}
.lp-lang{display:flex;gap:1px;background:var(--tint);border:1px solid var(--hair);border-radius:10px;padding:2px}
.lp-lang-opt{
  border:none;background:transparent;color:var(--text-dim);font-family:var(--font-num);
  font-weight:600;font-size:var(--fs-etikett);letter-spacing:.06em;padding:5px 9px;border-radius:999px;
  cursor:pointer;line-height:1;transition:background .15s var(--ease),color .15s var(--ease);
}
.lp-lang-opt{border-radius:8px}
.lp-lang-opt.on{background:var(--surface-3);color:var(--text)}
.lp-lang-opt:hover:not(.on){color:var(--text)}

.lp-btn-ghost,.lp-btn-solid{
  border-radius:11px;font-weight:600;font-size:14px;cursor:pointer;padding:9px 18px;
  border:1px solid transparent;font-family:inherit;white-space:nowrap;letter-spacing:-.012em;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .12s var(--ease),box-shadow .22s var(--ease);
}
.lp-btn-ghost{background:transparent;border-color:var(--hair);color:var(--text)}
.lp-btn-ghost:hover{background:var(--tint);border-color:var(--hair-strong)}
.lp-btn-solid{
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 1px 0 color-mix(in srgb,#fff 26%,transparent) inset,0 8px 24px -12px var(--accent);
}
.lp-btn-solid:hover{
  background:color-mix(in srgb,var(--accent) 88%,#fff);
  box-shadow:0 1px 0 color-mix(in srgb,#fff 30%,transparent) inset,0 16px 40px -14px var(--accent);
  transform:translateY(-1px);
}
.lp-btn-ghost:active,.lp-btn-solid:active{transform:scale(.985)}
.lp-btn-lg{padding:15px 30px;font-size:16px;border-radius:13px}

/* ---- Held: mittig, ein Satz, ein Knopf, darunter das Produkt ---- */
.lp-hero{max-width:var(--lp-w);margin:0 auto;padding:clamp(52px,6vw,84px) var(--lp-pad) 0;text-align:center;position:relative}
.lp-hero-in{max-width:960px;margin:0 auto}
/* Der Eyebrow sagt in einer Zeile, für wen das hier gebaut ist. Genau dafür
   ist er da — und deshalb steht er wieder über der Überschrift. */
.lp-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-num);font-size:var(--fs-mini);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  border:1px solid var(--accent-line);
  padding:8px 16px 8px 13px;border-radius:999px;
  margin:0 0 var(--s-item);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 5%,transparent),
             0 12px 34px -16px var(--accent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.lp-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);animation:badgePulse 2.6s infinite;flex:0 0 auto;
}
@keyframes badgePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.lp-h1{
  font-family:var(--font-display);
  font-size:clamp(38px,6.2vw,76px);line-height:.98;font-weight:700;
  letter-spacing:-.048em;margin:0 auto var(--s-item);max-width:15ch;text-wrap:balance;
}
.lp-sub{
  font-size:clamp(17px,1.7vw,21px);color:var(--text-dim);
  max-width:50ch;margin:0 auto calc(var(--s-item) * 1.15);line-height:1.55;letter-spacing:-.014em;text-wrap:balance;
}
.lp-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--s-item)}
.lp-hero-note{
  text-wrap:balance;
  font-family:var(--font-num);font-size:var(--fs-mini);letter-spacing:.06em;
  color:var(--text-faint);font-weight:500;margin:0;
}

/* Messstreifen: vier Werte, dazwischen Linien, die an den Enden verlaufen. */
.lp-stats{
  max-width:var(--lp-w);margin:0 auto;padding:0 var(--lp-pad);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center;position:relative;
}
.lp-stats::before,.lp-stats::after{
  content:"";position:absolute;left:var(--lp-pad);right:var(--lp-pad);height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-strong) 22%,var(--hair-strong) 78%,transparent);
}
.lp-stats::before{top:0}.lp-stats::after{bottom:0}
.lp-stat{padding:28px 10px 30px;position:relative}
.lp-stat+.lp-stat::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:linear-gradient(var(--hair-strong),transparent)}
.lp-stat-v{
  font-family:var(--font-num);font-size:clamp(21px,2.4vw,30px);font-weight:600;
  letter-spacing:-.05em;color:var(--accent);line-height:1.05;
  text-shadow:0 0 26px color-mix(in srgb,var(--accent) 35%,transparent);
}
.lp-stat-l{font-size:12.5px;color:var(--text-faint);font-weight:500;margin-top:10px;letter-spacing:-.005em}

/* ---- Abschnitte: Kopf mittig, Inhalt darunter ---- */
.lp-sec{max-width:var(--lp-w);margin:0 auto;padding:var(--s-sec) var(--lp-pad)}
.lp-sec-alt{
  max-width:none;
  padding-left:max(var(--lp-pad),calc((100% - var(--lp-w))/2 + var(--lp-pad)));
  padding-right:max(var(--lp-pad),calc((100% - var(--lp-w))/2 + var(--lp-pad)));
  background:color-mix(in srgb,var(--surface) 45%,var(--bg));
  border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
}
.lp-sec-head{margin:0 auto var(--s-head);text-align:center;max-width:720px}
.lp-sec-head h2{
  font-family:var(--font-display);font-size:clamp(30px,4.3vw,52px);font-weight:700;
  letter-spacing:-.042em;margin:0 auto 16px;line-height:1.02;max-width:18ch;text-wrap:balance;
}
.lp-sec-head p{color:var(--text-dim);font-size:clamp(16px,1.4vw,18.5px);max-width:52ch;margin:0 auto;line-height:1.6;letter-spacing:-.012em;text-wrap:balance}
.lp-eyebrow{display:none}

/* Problem: drei Spalten, mittig, getrennt durch verlaufende Linien. */
.lp-prob{max-width:var(--lp-w);margin:0 auto;padding:var(--s-sec) var(--lp-pad) 0;text-align:center;position:relative}
.lp-prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.lp-prob-card,.lp-prob-card.lp-card{
  padding:clamp(10px,2vw,22px) clamp(16px,2.6vw,34px);text-align:center;position:relative;
  background:none;border:none;border-radius:0;box-shadow:none;
}
.lp-prob-card+.lp-prob-card::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;background:linear-gradient(transparent,var(--hair-strong) 24%,var(--hair-strong) 76%,transparent)}
.lp-prob-card.lp-card .lp-ic{
  width:44px;height:44px;margin:0 auto 18px;border-radius:14px;display:grid;place-items:center;
  color:var(--neg);background:color-mix(in srgb,var(--neg) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--neg) 22%,transparent);
}
.lp-prob-card.lp-card .lp-ic svg{width:21px;height:21px}
.lp-prob-card.lp-card h3{font-family:var(--font-display);font-size:clamp(18px,1.9vw,22px);font-weight:700;letter-spacing:-.03em;margin:0 0 10px}
.lp-prob-card.lp-card p{color:var(--text-dim);font-size:15px;line-height:1.62;max-width:34ch;margin:0 auto;letter-spacing:-.01em}
.lp-prob-turn::before{
  content:"";display:block;width:40px;height:1px;margin:0 auto clamp(30px,4vw,44px);
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.lp-prob-turn{
  /* Unten derselbe Abstand wie zwischen Kopf und Inhalt weiter oben — sonst
     stösst der nächste Abschnitt ohne Luft an die Zeile. */
  margin:var(--s-block) auto var(--s-head);
  font-family:var(--font-display);font-size:clamp(22px,3.2vw,38px);
  font-weight:700;letter-spacing:-.04em;color:var(--text);max-width:22ch;line-height:1.1;text-wrap:balance;
}
/* Der Strich liegt unter der Grundlinie, nicht auf den Unterlängen. */
.lp-prob-turn span{
  background:linear-gradient(
    transparent 83%,
    color-mix(in srgb,var(--accent) 38%,transparent) 83%,
    color-mix(in srgb,var(--accent) 38%,transparent) 96%,
    transparent 96%);
  padding:0 .06em;
}

/* Merkmale: Wechselseiten, Kopf mittig. */
.lp-feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);align-items:center;margin-bottom:var(--s-block)}
.lp-feat:last-child{margin-bottom:0}
.lp-feat.rev .lp-feat-txt{order:2}
.lp-feat-txt .lp-ic{
  width:42px;height:42px;margin:0 0 18px;border-radius:13px;display:grid;place-items:center;
  color:var(--accent);background:var(--accent-wash);border:1px solid var(--accent-line);
}
.lp-feat-txt .lp-ic svg{width:21px;height:21px}
.lp-feat-txt h3{font-family:var(--font-display);font-size:clamp(23px,2.5vw,31px);font-weight:700;letter-spacing:-.038em;margin:0 0 13px}
.lp-feat-txt p{color:var(--text-dim);font-size:16.5px;line-height:1.65;max-width:42ch;letter-spacing:-.012em}
.lp-feat-vis{
  background:linear-gradient(165deg,color-mix(in srgb,var(--surface) 82%,var(--accent)) 0%,var(--surface) 58%);
  border:1px solid var(--hair);border-radius:22px;
  padding:clamp(28px,3.6vw,50px);min-height:230px;display:grid;place-items:center;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);position:relative;overflow:hidden;
}
.lp-feat-vis::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(74% 56% at 50% 0,var(--accent-wash),transparent 70%)}
.lp-feat-vis::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 26%,transparent),transparent)}
.fv-bars{display:flex;align-items:flex-end;gap:12px;height:140px;width:100%;justify-content:center;position:relative}
.fv-bars i{width:32px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 22%,transparent));border-radius:6px 6px 0 0}
.fv-num{text-align:center;position:relative;padding:10px 0}
.fv-num::before{
  content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:230px;height:230px;max-width:82%;
  background:radial-gradient(circle,var(--pos) 0%,transparent 68%);
  opacity:.12;filter:blur(6px);animation:fvGlow 4.6s ease-in-out infinite;pointer-events:none;
}
@keyframes fvGlow{0%,100%{opacity:.08;transform:translate(-50%,-50%) scale(.94)}50%{opacity:.16;transform:translate(-50%,-50%) scale(1.06)}}
.fv-check{position:relative;width:40px;height:40px;margin:0 auto 15px;border-radius:50%;background:var(--pos-soft);border:1px solid color-mix(in srgb,var(--pos) 30%,transparent);display:grid;place-items:center;color:var(--pos)}
.fv-check svg{width:20px;height:20px}
.fv-big{position:relative;display:flex;align-items:baseline;justify-content:center;gap:1px;line-height:1}
.fv-big b{font-size:clamp(46px,7vw,66px);font-weight:600;font-family:var(--font-num);color:var(--pos);letter-spacing:-.06em}
.fv-big i{font-size:25px;font-weight:600;font-family:var(--font-num);color:var(--pos);opacity:.28;font-style:normal;letter-spacing:-.06em}
.fv-lbl{position:relative;font-size:14px;color:var(--text-dim);font-weight:500;margin-top:14px}
.fv-note{position:relative;font-size:var(--fs-mini);color:var(--text-faint);font-weight:500;margin-top:6px}
.fv-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;width:100%;max-width:236px;position:relative}
.fv-cal i{aspect-ratio:1;border-radius:7px}
.fv-cal i.p{background:var(--pos-soft)}
.fv-cal i.p2{background:var(--pos);opacity:.6}
.fv-cal i.n{background:var(--neg-soft)}
.fv-cal i.n2{background:var(--neg);opacity:.55}
.fv-cal i.f{background:var(--tint-2)}
.fv-imp{display:flex;align-items:center;gap:18px;font-weight:700;position:relative}
.fv-imp svg{width:32px;height:32px;color:var(--accent)}
.fv-csv{background:var(--tint-2);border:1px solid var(--hair);border-radius:10px;padding:12px 17px;font-family:var(--font-num);font-size:15px;color:var(--text-dim);letter-spacing:.02em}
.fv-eb{font-family:var(--font-display);font-size:20px;letter-spacing:-.035em}
.fv-eb b{color:var(--accent)}

/* Weitere Merkmale: Matrix aus Haarlinien, mit einem Licht unter dem Zeiger. */
.lp-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:20px;overflow:hidden;
}
.lp-grid-more{margin-top:var(--s-block)}
.lp-card{
  background:var(--surface);border:none;border-radius:0;position:relative;
  padding:clamp(24px,2.6vw,34px);
}
.lp-grid .lp-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),var(--accent-wash),transparent 72%);
  transition:opacity .35s var(--ease);
}
.lp-grid:hover .lp-card::before{opacity:1}
.lp-card>*{position:relative}
.lp-card .lp-ic{
  width:40px;height:40px;margin:0 0 17px;border-radius:12px;display:grid;place-items:center;
  color:var(--accent);background:var(--accent-wash);border:1px solid var(--accent-line);
}
.lp-card .lp-ic svg{width:19px;height:19px}
.lp-card h3{font-family:var(--font-display);font-size:17.5px;font-weight:700;letter-spacing:-.03em;margin-bottom:10px}
.lp-card p{color:var(--text-dim);font-size:14.5px;line-height:1.62;letter-spacing:-.008em}

/* Kennzahlen: vier Zeichen, mittig, mit verlaufenden Trennlinien. */
.lp-ins{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.lp-ins-card{
  background:none;border:none;border-radius:0;text-align:center;position:relative;
  padding:clamp(8px,1.6vw,18px) clamp(14px,2vw,26px);
}
.lp-ins-card+.lp-ins-card::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:linear-gradient(transparent,var(--hair-strong) 24%,var(--hair-strong) 76%,transparent)}
.lp-ins-g{
  width:58px;height:58px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;
  font-family:var(--font-num);font-weight:600;font-size:22px;letter-spacing:-.04em;
  background:var(--accent-wash);color:var(--accent);border:1px solid var(--accent-line);
  box-shadow:0 10px 30px -16px var(--accent);
}
.lp-ins-card h3{font-family:var(--font-display);font-size:16.5px;font-weight:700;letter-spacing:-.028em;margin-bottom:9px}
.lp-ins-card p{font-size:13.5px;color:var(--text-dim);line-height:1.6;letter-spacing:-.008em;max-width:26ch;margin:0 auto}

/* Vergleich */
.lp-cmp{
  max-width:860px;margin:0 auto;background:color-mix(in srgb,var(--surface) 70%,transparent);
  border:1px solid var(--hair);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.lp-cmp table{width:100%;border-collapse:collapse}
.lp-cmp th,.lp-cmp td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--border-soft);font-size:14.5px}
.lp-cmp tr:last-child td{border-bottom:none}
.lp-cmp thead th{font-family:var(--font-num);font-size:var(--fs-etikett);letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--text-faint);background:var(--tint);padding-top:14px;padding-bottom:14px}
.lp-cmp th.us,.lp-cmp td.us{text-align:center;width:128px}
.lp-cmp thead th.us{color:var(--accent)}
.lp-cmp tbody td:not(.us):not(:first-child){text-align:center;width:150px;color:var(--text-faint)}
.lp-cmp td:first-child{color:var(--text);font-weight:500}
.lp-cmp td.us{background:var(--accent-wash)}
.lp-cmp tbody tr{transition:background .15s var(--ease)}
.lp-cmp tbody tr:hover{background:var(--tint)}
.cmp-t{font-weight:600;font-size:15px;color:var(--text);letter-spacing:-.015em}
.cmp-d{font-size:12.5px;color:var(--text-dim);margin-top:5px;line-height:1.5;font-weight:400;max-width:52ch}
.lp-cmp-note{margin:var(--s-item) auto 0;font-size:12.5px;color:var(--text-faint);max-width:58ch;text-align:center}
.ck{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:var(--fs-mini);font-weight:700}
.ck.yes{background:var(--pos-soft);color:var(--pos);box-shadow:0 0 0 1px color-mix(in srgb,var(--pos) 26%,transparent)}
.ck.no{background:var(--tint-2);color:var(--text-faint)}
.ck.mid{background:var(--tint-2);color:var(--text-faint)}

/* Farbschemen */
.lp-zapsec{max-width:var(--lp-w);margin:0 auto;padding:var(--s-sec) var(--lp-pad) 0;text-align:center}
.tp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0}
.tp-card{
  border:1px solid var(--hair);border-radius:18px;overflow:hidden;
  background:var(--surface);padding:0;text-align:left;position:relative;
  box-shadow:0 20px 44px -28px rgba(0,0,0,.85);
}
.tp-mock{background:var(--bg);padding:16px 17px 14px}
.tp-top{display:flex;gap:5px;margin-bottom:14px}
.tp-dot{width:6px;height:6px;border-radius:50%;background:var(--border)}
.tp-kpi{font-family:var(--font-num);font-weight:600;font-size:17px;color:var(--pos);letter-spacing:-.045em}
.tp-sub{font-family:var(--font-num);font-size:var(--fs-etikett);color:var(--text-faint);margin:6px 0 12px;letter-spacing:.1em}
.tp-eq{width:100%;height:54px;display:block}
.tp-meta{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;background:var(--surface);border-top:1px solid var(--border-soft)}
.tp-name{font-weight:600;font-size:14px;color:var(--text);letter-spacing:-.015em}
.tp-mode{font-family:var(--font-num);font-size:var(--fs-etikett);color:var(--text-faint);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.tp-swatches{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:var(--s-item)}
.tp-sw{width:15px;height:15px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 3px var(--bg),0 0 0 3.5px var(--hair)}
.tp-sw.shown{width:19px;height:19px}
.tp-hint{margin-top:var(--s-item);font-family:var(--font-num);font-size:var(--fs-mini);color:var(--text-faint);font-weight:500;letter-spacing:.05em}

/* Drei Schritte */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.lp-step{text-align:center;padding:clamp(8px,1.6vw,18px) clamp(16px,2.6vw,32px);position:relative}
.lp-step+.lp-step::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:linear-gradient(transparent,var(--hair-strong) 24%,var(--hair-strong) 76%,transparent)}
.lp-step-n{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--accent);
  border:1px solid var(--accent-line);
  font-family:var(--font-num);font-size:17px;font-weight:600;letter-spacing:-.03em;
  box-shadow:0 12px 30px -18px var(--accent);
}
.lp-step h3{font-family:var(--font-display);font-size:clamp(19px,2vw,23px);font-weight:700;letter-spacing:-.032em;margin-bottom:11px}
.lp-step p{color:var(--text-dim);font-size:15.5px;line-height:1.62;max-width:30ch;margin:0 auto;letter-spacing:-.01em}

/* Fragen */
.lp-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.lp-fq{background:none;border:none;border-bottom:1px solid var(--hair);border-radius:0;overflow:hidden}
.lp-fq summary{
  list-style:none;cursor:pointer;padding:22px 8px 22px 0;font-family:var(--font-display);
  font-weight:700;font-size:clamp(16.5px,1.6vw,19.5px);letter-spacing:-.03em;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:color .15s var(--ease);
}
.lp-fq summary:hover{color:var(--accent)}
.lp-fq summary::-webkit-details-marker{display:none}
.lp-fq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.lp-fq[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.lp-fq p{padding:0 46px 24px 0;color:var(--text-dim);font-size:15px;line-height:1.7;max-width:62ch;letter-spacing:-.01em}

/* Gründer */
.lp-founder{max-width:var(--lp-w);margin:0 auto;padding:var(--s-sec) var(--lp-pad)}
.lp-founder-in{
  max-width:840px;margin:0 auto;text-align:center;background:none;border:none;border-radius:0;padding:0;
  position:relative;
}
.lp-founder-in::before{
  content:"";display:block;width:36px;height:1px;margin:0 auto var(--s-item);
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.lp-founder-quote{
  font-family:var(--font-display);font-size:clamp(22px,3.1vw,38px);font-weight:700;
  line-height:1.26;letter-spacing:-.04em;color:var(--text);margin:0 0 24px;text-wrap:balance;
}
.lp-founder-sign{font-family:var(--font-num);font-size:var(--fs-mini);color:var(--text-faint);font-weight:500;letter-spacing:.08em}

/* Abschluss */
.lp-cta-sec{
  text-align:center;position:relative;overflow:hidden;
  padding:calc(var(--s-sec) * 1.15) var(--lp-pad);
  background:color-mix(in srgb,var(--surface) 45%,var(--bg));
  border-top:1px solid var(--border-soft);
}
.lp-cta-sec::before{
  content:"";position:absolute;left:50%;top:-30%;transform:translateX(-50%);
  width:min(1200px,140%);height:150%;pointer-events:none;
  background:radial-gradient(40% 42% at 50% 40%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 68%);
  filter:blur(30px);
}
.lp-cta-sec>*{position:relative;max-width:760px;margin-left:auto;margin-right:auto}
.lp-cta-sec h2{font-family:var(--font-display);font-size:clamp(30px,5vw,58px);font-weight:700;letter-spacing:-.048em;margin-bottom:18px;line-height:1;text-wrap:balance}
.lp-cta-sec p{color:var(--text-dim);font-size:clamp(16.5px,1.5vw,19px);margin-bottom:var(--s-item);line-height:1.55;text-wrap:balance}
.lp-cta-note{text-wrap:balance;margin-top:20px;font-family:var(--font-num);font-size:var(--fs-mini);color:var(--text-faint);font-weight:500;letter-spacing:.06em}

/* Fuss */
.lp-foot{border-top:1px solid var(--border-soft);background:var(--bg)}
.lp-foot-in{max-width:var(--lp-w);margin:0 auto;padding:40px var(--lp-pad) 44px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.lp-foot-brand{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.03em}
.lp-foot-brand b{color:var(--accent)}
.lp-foot-brand span{color:var(--text-dim);font-weight:400;font-family:var(--font-ui);letter-spacing:-.01em}
.lp-foot-links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.lp-foot-links a{color:var(--text-dim);font-size:13.5px;cursor:pointer;font-weight:500;transition:color .15s var(--ease)}
.lp-foot-links a:hover{color:var(--accent)}
.lp-foot-copy{font-family:var(--font-num);color:var(--text-faint);font-size:var(--fs-mini);width:100%;padding-top:20px;border-top:1px solid var(--border-soft);letter-spacing:.04em}

/* ---- Produktfilm: das Gerät kippt beim Scrollen in die Senkrechte ---- */
.lp-tour{
  max-width:calc(var(--lp-w) + 60px);margin:0 auto;position:relative;
  padding:clamp(38px,4.4vw,62px) var(--lp-pad) 0;perspective:1800px;
}
.lp-tour-cap{
  display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:20px;
  font-family:var(--font-num);font-size:var(--fs-mini);font-weight:600;color:var(--text);
  letter-spacing:.05em;flex-wrap:wrap;
}
.lp-tour-cap em{font-style:normal;color:var(--text-faint);font-size:var(--fs-mini)}
.lp-tour-dot{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 0 var(--pos);animation:tourPulse 2.4s infinite;flex:0 0 auto}
@keyframes tourPulse{0%{box-shadow:0 0 0 0 var(--pos-soft)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.film{
  position:relative;transform-style:preserve-3d;
  transform:rotateX(calc(var(--unfurl,0) * 12deg)) scale(calc(1 - var(--unfurl,0) * 0.045));
  transform-origin:50% 100%;
  will-change:transform;
}
.film::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-8%;height:36%;z-index:-1;
  background:radial-gradient(60% 100% at 50% 0,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);
  filter:blur(48px);opacity:.7;
}
.browser{
  position:relative;background:var(--surface);
  border:1px solid color-mix(in srgb,#fff 12%,transparent);
  border-radius:20px;overflow:hidden;
  box-shadow:
    0 1px 0 color-mix(in srgb,#fff 14%,transparent) inset,
    0 60px 120px -40px rgba(0,0,0,.95),
    0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);
}
.film-stage{position:relative;aspect-ratio:16/9.4;max-height:640px;overflow:hidden;background:var(--bg);contain:paint}
.slide{position:absolute;inset:0;background-size:cover;background-position:0% 0%;background-repeat:no-repeat;opacity:0;transition:opacity .7s ease;transform:scale(1.005);transform-origin:0% 50%;backface-visibility:hidden}
.slide.kb-a{transform-origin:2% 26%}
.slide.kb-b{transform-origin:2% 50%}
.slide.kb-c{transform-origin:2% 74%}
.slide.on{opacity:1;z-index:1;will-change:transform,opacity}
.slide.nxt{will-change:opacity;transform:translateZ(0)}
.slide.kb-a.on{animation:kenIn 5.2s cubic-bezier(.33,0,.2,1) forwards}
.slide.kb-b.on{animation:kenOut 5.2s cubic-bezier(.33,0,.2,1) forwards}
.slide.kb-c.on{animation:kenIn 5.2s cubic-bezier(.33,0,.2,1) forwards}
@keyframes kenIn{from{transform:scale(1.005)}to{transform:scale(1.05)}}
@keyframes kenOut{from{transform:scale(1.05)}to{transform:scale(1.005)}}
.film:hover .slide.on{animation-play-state:paused}
.film-scrim{position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 94%,#000));z-index:3;pointer-events:none}
.film-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px -24px rgba(0,0,0,.55);z-index:4}
.film-caption{
  position:absolute;left:0;right:0;bottom:clamp(22px,3vw,38px);z-index:5;text-align:center;
  font-family:var(--font-display);font-size:clamp(18px,2.4vw,30px);font-weight:700;
  letter-spacing:-.04em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.85);
  padding:0 clamp(20px,4vw,60px);line-height:1.1;
  opacity:0;transform:translateY(18px);filter:blur(6px);
}
.film-caption.in{opacity:1;transform:none;filter:blur(0);transition:opacity .6s ease,transform .7s var(--ease-out),filter .6s ease}
.film-ui{display:flex;justify-content:center;margin-top:22px}
.film-dots{display:flex;gap:7px}
.film-dot{position:relative;width:8px;height:8px;border-radius:50%;border:none;background:var(--border);cursor:pointer;padding:0;overflow:hidden;transition:width .32s var(--ease),background .3s var(--ease)}
.film-dot:hover{background:var(--hair-strong)}
.film-dot.on{background:var(--border-soft);width:34px;border-radius:4px}
.film-dot.on::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:4px}
.film-dot.on.run::after{animation:dotFill var(--dur,4200ms) linear forwards}
@keyframes dotFill{to{width:100%}}


/* ---------- 07b · Hintergründe und Scroll-Auftritte --------------------- */
/* Millimeterpapier. Es erklärt in einer Geste, worum es geht: ein Chart-Raster. */
/* Der Heldenbereich hatte hier ein eigenes Raster mit elliptischer Maske. Seit dort
   der Kerzenchart steht, der sein eigenes Raster mitbringt, stiessen zwei Raster in
   verschiedenen Massen aufeinander und die Maske schnitt sichtbar mitten im Bild ab.
   Das Raster bleibt deshalb nur noch in den Abschnitten ohne Chart. */
.lp-hero::before,
.lp-sec-alt::before,
.lp-cta-sec::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:74px 74px;
}
/* Das Raster blendet nach unten aus — dieselbe Art wie in den anderen Abschnitten,
   damit die ganze Seite ein einziges Raster im selben Mass zeigt. */
.lp-hero::before{
  inset:-62px 0 0;opacity:.8;
  -webkit-mask-image:linear-gradient(#000,#000 34%,transparent 62%);
          mask-image:linear-gradient(#000,#000 34%,transparent 62%);
}
.lp-hero>*{position:relative;z-index:1}

.lp-sec-alt{position:relative}
.lp-sec-alt::before{
  -webkit-mask-image:linear-gradient(#000,transparent 62%);
          mask-image:linear-gradient(#000,transparent 62%);
  opacity:.75;
}
.lp-sec-alt>*{position:relative;z-index:1}

.lp-cta-sec::after{
  -webkit-mask-image:radial-gradient(86% 78% at 50% 50%,#000 18%,transparent 72%);
          mask-image:radial-gradient(86% 78% at 50% 50%,#000 18%,transparent 72%);
  opacity:.8;
}
.lp-cta-sec>*{z-index:2}

/* Der Problemabschnitt bekommt seinen eigenen, roten Grundton. */
.lp-prob::before{
  content:"";position:absolute;left:50%;top:14%;transform:translateX(-50%);
  width:min(980px,100%);height:64%;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--neg) 10%,transparent),transparent 70%);
  filter:blur(46px);
}
.lp-prob>*{position:relative;z-index:1}

/* ---- Symbolband: zeigt in einer Zeile, wie breit das Werkzeug greift ---- */
.lp-ticker{max-width:var(--lp-w);margin:0 auto;padding:var(--s-block) var(--lp-pad) 0;text-align:center}
.lp-ticker-lbl{
  font-family:var(--font-num);font-size:var(--fs-mini);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:18px;
}
.lp-ticker-rail{
  display:flex;gap:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.lp-ticker-track{
  display:flex;align-items:center;gap:clamp(20px,2.6vw,34px);flex:0 0 auto;
  padding-right:clamp(20px,2.6vw,34px);
  animation:tickerRoll 46s linear infinite;
}
.lp-ticker-rail:hover .lp-ticker-track{animation-play-state:paused}
@keyframes tickerRoll{to{transform:translateX(-100%)}}
.lp-ticker-track i{
  font-style:normal;font-family:var(--font-num);font-size:13.5px;font-weight:500;
  letter-spacing:-.01em;color:var(--text-dim);white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;
}
.lp-ticker-track i::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--hair-strong)}
.lp-ticker-track i:nth-child(4n+1){color:var(--accent)}

/* ---- Scroll-Auftritte -------------------------------------------------
   Erst wenn das Skript lebt (.anim-ready) wird etwas versteckt. Ohne
   JavaScript steht alles sofort da.                                       */
.anim-ready .fv-bars i{transform:scaleY(.05);transform-origin:50% 100%;opacity:.2}
.anim-ready.in-view .fv-bars i{transform:none;opacity:1}
.anim-ready .fv-bars i{transition:transform .95s var(--ease-out),opacity .5s ease}
.anim-ready .fv-bars i:nth-child(1){transition-delay:.00s}
.anim-ready .fv-bars i:nth-child(2){transition-delay:.07s}
.anim-ready .fv-bars i:nth-child(3){transition-delay:.14s}
.anim-ready .fv-bars i:nth-child(4){transition-delay:.21s}
.anim-ready .fv-bars i:nth-child(5){transition-delay:.28s}
.anim-ready .fv-bars i:nth-child(6){transition-delay:.35s}

.anim-ready .fv-cal i{transform:scale(.35);opacity:0;transition:transform .55s var(--ease-out),opacity .4s ease}
.anim-ready.in-view .fv-cal i{transform:none;opacity:1}
.anim-ready .fv-cal i:nth-child(n){transition-delay:calc((var(--i,0)) * 26ms)}

.anim-ready .fv-check,.anim-ready .fv-big,.anim-ready .fv-imp{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s var(--ease-out)}
.anim-ready.in-view .fv-check,.anim-ready.in-view .fv-big,.anim-ready.in-view .fv-imp{opacity:1;transform:none}
.anim-ready.in-view .fv-big{transition-delay:.1s}

.anim-ready.lp-grid .lp-card{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .75s var(--ease-out)}
.anim-ready.lp-grid.in-view .lp-card{opacity:1;transform:none}
.anim-ready.lp-grid.in-view .lp-card:nth-child(1){transition-delay:.00s}
.anim-ready.lp-grid.in-view .lp-card:nth-child(2){transition-delay:.07s}
.anim-ready.lp-grid.in-view .lp-card:nth-child(3){transition-delay:.14s}
.anim-ready.lp-grid.in-view .lp-card:nth-child(4){transition-delay:.21s}
.anim-ready.lp-grid.in-view .lp-card:nth-child(5){transition-delay:.28s}
.anim-ready.lp-grid.in-view .lp-card:nth-child(6){transition-delay:.35s}

/* Die drei Schritte hängen an einer Linie, die sich beim Scrollen zieht. */
.lp-steps{position:relative}
.lp-steps::before{
  content:"";position:absolute;left:17%;right:17%;top:calc(clamp(8px,1.6vw,18px) + 26px);
  height:1px;background:linear-gradient(90deg,transparent,var(--accent-line) 14%,var(--accent-line) 86%,transparent);
  transform:scaleX(0);transform-origin:0 50%;
}
.lp-steps.anim-ready.in-view::before{transform:none;transition:transform 1.2s var(--ease-out) .1s}
.lp-steps:not(.anim-ready)::before{transform:none}
.lp-step{position:relative;z-index:1}
.lp-step-n{background:var(--bg)}
.anim-ready.lp-steps .lp-step-n{opacity:0;transform:scale(.7);transition:opacity .5s ease,transform .6s var(--ease-out)}
.anim-ready.lp-steps.in-view .lp-step-n{opacity:1;transform:none}
.anim-ready.lp-steps.in-view .lp-step:nth-child(2) .lp-step-n{transition-delay:.22s}
.anim-ready.lp-steps.in-view .lp-step:nth-child(3) .lp-step-n{transition-delay:.44s}

/* Kennzahlen-Zeichen kommen einzeln. */
.anim-ready.lp-ins .lp-ins-g{opacity:0;transform:translateY(12px) scale(.9);transition:opacity .55s ease,transform .7s var(--ease-out)}
.anim-ready.lp-ins.in-view .lp-ins-g{opacity:1;transform:none}
.anim-ready.lp-ins.in-view .lp-ins-card:nth-child(2) .lp-ins-g{transition-delay:.09s}
.anim-ready.lp-ins.in-view .lp-ins-card:nth-child(3) .lp-ins-g{transition-delay:.18s}
.anim-ready.lp-ins.in-view .lp-ins-card:nth-child(4) .lp-ins-g{transition-delay:.27s}

@media(prefers-reduced-motion:reduce){
  .lp-ticker-track{animation:none}
  .anim-ready .fv-bars i,.anim-ready .fv-cal i,.anim-ready .fv-check,.anim-ready .fv-big,
  .anim-ready .fv-imp,.anim-ready.lp-grid .lp-card,.anim-ready.lp-steps .lp-step-n,
  .anim-ready.lp-ins .lp-ins-g{opacity:1!important;transform:none!important}
  .lp-steps::before{transform:none!important}
}

/* ---------- 08 · Breite ------------------------------------------------ */
@media(max-width:1080px){
  .lp-nav-links{display:none}
}
@media(max-width:1000px){
  .lp-grid{grid-template-columns:repeat(2,1fr)}
  .lp-ins{grid-template-columns:repeat(2,1fr);row-gap:clamp(30px,4vw,44px)}
  .lp-ins-card:nth-child(2n+1)::before{content:none}
}
@media(max-width:940px){
  /* Zwischen Seitenleiste und Telefon bleibt der Tabelle zu wenig Breite —
     die Nebenspalten gehen früher, nicht erst am Umbruchpunkt der Navigation. */
  .hide-sm{display:none}
  .tbl td{padding:11px 8px}
  .tbl th{padding:0 8px 10px}
  .tbl .tnum{white-space:nowrap}
  .tbl .row-actions{opacity:1}
}
@media(max-width:980px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .row.r-2{grid-template-columns:1fr}
  .settings-two{grid-template-columns:1fr;gap:22px}
  .an-sum{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  /* Aus Spalten werden Zeilen — die senkrechten Linien legen sich um. */
  .lp-feat{grid-template-columns:1fr;gap:28px}
  .lp-feat.rev .lp-feat-txt{order:0}
  .lp-feat-txt p{max-width:58ch}
  .lp-stats{grid-template-columns:repeat(2,1fr)}
  .lp-stat{padding:22px 8px 24px}
  .lp-stat+.lp-stat::before{content:none}
  .lp-stat:nth-child(2n)::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:linear-gradient(var(--hair-strong),transparent)}
  .lp-stat:nth-child(n+3)::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent)}
  .lp-steps,.lp-prob-grid{grid-template-columns:1fr}
  .lp-step,.lp-prob-card{padding-left:0;padding-right:0;padding-top:clamp(28px,5vw,38px);padding-bottom:clamp(28px,5vw,38px)}
  .lp-step+.lp-step::before,.lp-prob-card+.lp-prob-card::before{
    content:"";left:14%;right:14%;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--hair),transparent);
  }
  .lp-step p,.lp-prob-card p{max-width:48ch}
  .an-sum{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  /* Unten die Reiterleiste — sie ersetzt die Seitenleiste vollständig.
     Zwei Navigationen nebeneinander wären eine zu viel. */
  .sidebar,.scrim,.menu-btn{display:none!important}
  .topbar-mark{display:grid;width:32px;height:32px;border-radius:9px}
  .topbar-mark svg{width:18px;height:18px}

  .topbar{padding:12px 16px;gap:10px}
  .topbar h1{font-size:var(--fs-kopf)}
  .topbar .sub{display:none}
  .topbar .icon-btn{width:38px!important;height:38px!important;background:var(--tint);border-color:var(--hair)}
  .content{padding:16px 16px calc(96px + env(safe-area-inset-bottom))}

  /* Reiterleiste unten — dieselbe .nav-item-Verdrahtung wie die Schublade. */
  .tabbar{
    display:grid;grid-template-columns:repeat(7,1fr);gap:0;
    position:fixed;left:0;right:0;bottom:0;z-index:88;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:var(--topbar-bg);
    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
    border-top:1px solid var(--border-soft);
  }
  .tabbar .nav-item{
    flex-direction:column;gap:4px;padding:7px 2px 6px;border-radius:10px;
    font-size:var(--fs-etikett);font-weight:600;letter-spacing:-.005em;text-align:center;
    justify-content:center;align-items:center;
  }
  .tabbar .nav-item span{display:block;line-height:1;white-space:nowrap}
  .tabbar .nav-item svg{width:19px;height:19px}
  .tabbar .nav-item.active{background:transparent;color:var(--accent)}
  .tabbar .nav-item.active svg{color:var(--accent)}
  .tabbar .nav-item.active::before{content:none}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}

  /* Beträge dürfen umbrechen, aber niemals abgeschnitten werden. */
  .stat{padding:15px 15px 16px}
  .stat .val{font-size:clamp(17px,4.6vw,22px);white-space:normal;line-height:1.14}
  .sys-grid{grid-template-columns:1fr}
  /* Zeilenaktionen brauchen einen Zeigerdruck — auf dem Telefon führt der
     Tipp auf die Zeile in die Detailansicht, dort stehen Ändern und Löschen. */
  .tbl .row-actions{display:none}
  .tbl .tnum{white-space:nowrap}
  .tbl thead th:last-child:empty{width:0;padding-left:0;padding-right:0}
  .tbl tbody td:last-child:has(.row-actions){width:0;padding-left:0;padding-right:0}
  .field-row-3{grid-template-columns:1fr;row-gap:0}
  .field-row.row-ad{grid-template-columns:1fr;row-gap:0}
  .field input,.field select,.field textarea{font-size:var(--fs-titel)}
  .tbl td{padding:11px 6px;font-size:var(--fs-klein)}
  .tbl th{padding:0 6px 10px}
  .range-wrap{overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .range-wrap::-webkit-scrollbar{display:none}

  /* Dialoge werden zu Blättern, die von unten kommen. */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal{
    max-width:none;border-radius:18px 18px 0 0;
    max-height:94dvh;
    animation:sheetUp .38s var(--ease-out);
  }
  @keyframes sheetUp{from{transform:translateY(26px);opacity:.6}to{transform:none;opacity:1}}
  .modal-head{border-radius:18px 18px 0 0}
  .modal-body{-webkit-overflow-scrolling:touch;padding:20px 18px}
  .modal-foot{border-radius:0;padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
  .legal-ov{padding:0}
  .legal-box{border-radius:0;min-height:100dvh}
  .legal-body{padding:22px 18px}
  /* Ohne Wochenspalte muss auch deren Kopfzeile weg, sonst rutscht das Raster. */
  .cal-grid{grid-template-columns:repeat(7,1fr);gap:5px}
  .cal-week,.cal-grid>.cal-dow:nth-child(8){display:none}
  .cal-cell{padding:6px;border-radius:8px;aspect-ratio:1/1}
  .cal-cell .pnl{font-size:var(--fs-etikett);letter-spacing:-.06em;line-height:1.1}
  .cal-cell .cnt{display:none}
  .bar-row .name{width:96px;font-size:var(--fs-mini)}
  .bar-row .num{width:80px;font-size:var(--fs-mini)}
}
@media(max-width:700px){
  /* Der Film zeigt eine Oberfläche fürs grosse Bild — hochkant grösser zeigen. */
  .film-stage{aspect-ratio:1/1}
  .lp-cmp th,.lp-cmp td{padding:12px 12px;font-size:13.5px}
  .lp-cmp th.us,.lp-cmp td.us{width:70px}
  .lp-cmp tbody td:not(.us):not(:first-child){width:74px}
  .cmp-d{display:none}
  .tp-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .lp-grid{grid-template-columns:1fr}
  .lp-fq p{padding-right:0}
  .lp-founder-in::before{margin-bottom:22px}
}
@media(max-width:560px){
  /* Auf dem Telefon trägt die Farbe das Ergebnis; die Zahl steht im Tagesdetail.
     Sieben Spalten und ein Währungsbetrag passen auf 390 Punkte nicht zusammen. */
  .cal-cell .pnl{display:none}
  .cal-cell{justify-content:flex-start}
  .cal-cell .d{font-size:var(--fs-mini);color:var(--text-dim)}
  .cal-cell.pos{background:color-mix(in srgb,var(--pos) 22%,transparent)}
  .cal-cell.neg{background:color-mix(in srgb,var(--neg) 22%,transparent)}
  .cal-cell.pos .d,.cal-cell.neg .d{color:var(--text)}
  .cal-cell.cal-clickable::after{content:"";position:absolute;right:6px;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--text-faint)}
  .cal-cell.pos.cal-clickable::after{background:var(--pos)}
  .cal-cell.neg.cal-clickable::after{background:var(--neg)}
  .theme-grid{grid-template-columns:repeat(2,1fr)}
  .det-stats{grid-template-columns:repeat(2,1fr)}
  .det-grid{grid-template-columns:1fr}
  .an-sum{grid-template-columns:repeat(2,1fr)}
  .lp-nav-in{padding:0;gap:8px;margin:0 auto;height:58px}
  .lp-nav-right{gap:6px;flex-wrap:nowrap;margin-left:auto;padding-left:0}
  .lp-nav-right::before{content:none}
  /* Der Eyebrow muss auf eine Zeile passen, sonst wird die Kapsel zum Block. */
  .lp-badge{font-size:var(--fs-etikett);letter-spacing:.11em;padding:7px 13px 7px 11px;gap:8px}
  .lp-nav-right .lp-btn-ghost{display:none}
  .lp-nav-right .lp-btn-solid{padding:9px 15px;font-size:13.5px}
  .lp-lang{flex:0 0 auto;white-space:nowrap}
  .lp-lang-opt{padding:5px 7px}
  .lp-logo{font-size:17px;gap:8px}
  .lp-logo .brand-mark{width:26px;height:26px}
  /* Unter der Kapsel braucht die Überschrift Luft, sonst klebt sie am Glas. */
  .lp-hero{padding-top:40px}
  .lp-hero-note{font-size:var(--fs-etikett);letter-spacing:.03em}
  .lp-tour-cap{font-size:var(--fs-etikett);letter-spacing:.03em;gap:8px}
  .lp-tour-cap em{font-size:var(--fs-etikett)}
  /* Weniger Kippung — auf kleinen Schirmen wirkt sie sonst wie ein Fehler. */
  .film{transform:rotateX(calc(var(--unfurl,0) * 6deg)) scale(calc(1 - var(--unfurl,0) * 0.02))}
  .lp-cta-row{gap:9px}
  .lp-cta-row .lp-btn-lg{flex:1 1 100%;justify-content:center;text-align:center}
  .lp-ins{grid-template-columns:1fr;row-gap:30px}
  .lp-ins-card{padding-left:0;padding-right:0}
  .lp-ins-card+.lp-ins-card::before{left:18%;right:18%;top:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--hair),transparent)}
  .lp-ins-card+.lp-ins-card{padding-top:30px}
  .film-stage{aspect-ratio:4/5}
  .sys-stats{grid-template-columns:repeat(2,1fr);gap:12px 8px}
}
@media(max-width:400px){
  .stat-grid{gap:10px}
  .stat{padding:14px 14px 15px}
  .cal-cell .d{font-size:var(--fs-etikett)}
}

/* ---------- 09 · Bewegung ---------------------------------------------- */
/* Ein einziger inszenierter Auftritt (der Held), danach nur noch Andeutung. */
.reveal-armed{opacity:0;transform:translateY(16px);filter:blur(5px)}
.reveal-armed.in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .7s ease,transform .8s var(--ease-out),filter .7s ease;
}
.lp-hero-in.reveal-armed.in>*{animation:heroIn .9s var(--ease-out) backwards}
.lp-hero-in.reveal-armed.in>*:nth-child(1){animation-delay:.02s}
.lp-hero-in.reveal-armed.in>*:nth-child(2){animation-delay:.09s}
.lp-hero-in.reveal-armed.in>*:nth-child(3){animation-delay:.16s}
.lp-hero-in.reveal-armed.in>*:nth-child(4){animation-delay:.23s}
.lp-hero-in.reveal-armed.in>*:nth-child(5){animation-delay:.3s}
@keyframes heroIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

@keyframes contentIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.fade-in{animation:contentIn .3s var(--ease)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal-armed{opacity:1;transform:none;filter:none}
  .slide.on{animation:none!important;transform:none}
  .mock-scroll{animation:none}
}
@media(prefers-reduced-transparency:reduce){
  .topbar,.lp-nav,.tabbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  .modal-overlay,.legal-ov{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--bg) 96%,transparent)}
}
@media(prefers-contrast:more){
  :root{--hair:color-mix(in srgb,var(--text) 24%,transparent);--hair-strong:color-mix(in srgb,var(--text) 38%,transparent)}
  .card,.stat,.sys-card,.modal,.auth-card{border-color:var(--hair-strong)}
}

/* ---- Trade-Liste: Suche, Filter, Seiten ---- */
.tl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 16px}
.tl-search{position:relative;flex:1 1 220px;min-width:180px}
.tl-search svg{position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--text-faint);pointer-events:none}
.tl-bar input,.tl-bar select{
  height:36px;padding:0 12px;background:var(--tint);border:1px solid var(--hair);border-radius:9px;
  color:var(--text);font-size:var(--fs-klein);letter-spacing:-.005em;
  transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);
}
.tl-bar input{width:100%;padding-left:34px}
.tl-bar input::placeholder{color:var(--text-faint)}
.tl-bar input::-webkit-search-cancel-button{filter:grayscale(1);opacity:.6}
.tl-bar select{flex:0 1 auto;max-width:190px;cursor:pointer}
.tl-bar input:hover,.tl-bar select:hover{border-color:var(--hair-strong)}
.tl-bar input:focus,.tl-bar select:focus{outline:none;border-color:var(--accent);background:var(--surface-2);box-shadow:0 0 0 3px var(--accent-wash)}
.tl-bar select:not(:has(option[value="all"]:checked)){border-color:color-mix(in srgb,var(--accent) 55%,var(--hair));color:var(--text)}
.tl-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--border-soft);font-size:var(--fs-klein);color:var(--text-dim)}
.tl-pager-btns{display:flex;gap:6px}
.btn:disabled{opacity:.4;cursor:default;pointer-events:none}
.tl-fields{display:contents}
.tl-toggle{display:none;height:36px;gap:7px;padding:0 12px;font-size:var(--fs-klein)}
.tl-toggle svg{width:15px;height:15px}
.tl-fcount{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--on-accent);font:600 var(--fs-mini) var(--font-mono)}
.tl-fcount[hidden]{display:none}
@media (max-width:640px){
  .tl-bar{display:grid;grid-template-columns:1fr auto;gap:8px}
  .tl-search{min-width:0}
  .tl-toggle{display:inline-flex;align-items:center}
  .tl-fields{display:none;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px}
  .tl-bar.open .tl-fields{display:grid}
  .tl-bar select{max-width:none;width:100%}
  #tlResetBtn{grid-column:1/-1}
}
.conflict-list{margin:12px 0 0;padding:10px 14px;list-style:none;border:1px solid var(--hair);border-radius:10px;background:var(--tint);display:grid;gap:6px;font-size:var(--fs-klein)}
.conflict-list li{font-family:var(--font-mono);letter-spacing:-.01em}
.conflict-list .hint{font-family:var(--font-ui);color:var(--text-faint)}
@media (max-width:520px){
  #confirmModal .modal-foot{flex-direction:column-reverse;align-items:stretch;gap:8px}
  #confirmModal .modal-foot .btn{width:100%;justify-content:center;margin:0}
}

/* ---- Anmeldung: Hinweis, Rechenaufgabe, Fangfeld ---- */
.auth-nore{display:flex;gap:9px;align-items:flex-start;margin:10px 0 2px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--neg) 35%,var(--hair));background:color-mix(in srgb,var(--neg) 7%,transparent);font-size:var(--fs-mini);line-height:1.5;color:var(--text-dim);text-align:left}
.auth-nore svg{flex:0 0 16px;width:16px;height:16px;margin-top:1px;color:var(--neg)}
.auth-nore[hidden],.auth-ch[hidden]{display:none}
.auth-ch{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 10px;margin:14px 0 4px;text-align:left}
.auth-ch-lbl{grid-column:1/-1;font-size:var(--fs-mini);font-weight:600;color:var(--text-dim)}
.auth-ch-q{white-space:nowrap;font-size:var(--fs-text);color:var(--text-dim)}
.auth-ch-q b{font-family:var(--font-mono);font-size:var(--fs-titel);font-weight:600;color:var(--text);letter-spacing:.02em}
.auth-ch input{height:40px;min-width:0;padding:0 10px;text-align:center;font-family:var(--font-mono);font-size:var(--fs-titel);background:var(--tint);border:1px solid var(--hair);border-radius:9px;color:var(--text)}
.auth-ch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.auth-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* =========================================================
   JOURNAL · MMA & EODR
   ========================================================= */
.j{display:grid;gap:14px;max-width:1180px;grid-template-columns:minmax(0,1fr)}
.j>*{min-width:0}
.j textarea,.j input{font-family:inherit}
.j-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.j-date{display:flex;align-items:center;gap:6px;min-width:0}
.j-date-lbl{position:relative;display:inline-flex;align-items:center;padding:6px 10px;border-radius:9px;cursor:pointer;min-width:0}
.j-date-lbl:hover{background:var(--tint)}
.j-dn{font-family:var(--font-display);font-size:var(--fs-titel);font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Auf dem Handy das kurze Datum — ganz lesbar statt abgeschnitten */
.j-dn-k{display:none}
@media (max-width:560px){.j-dn:not(.j-dn-k){display:none}.j-dn-k{display:block}.j-tab b{white-space:nowrap}}
.j-date-lbl input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.j-date-lbl input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.j-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.j-no{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 4px 0 10px;border:1px solid var(--hair);border-radius:8px;background:var(--tint);font:600 var(--fs-klein) var(--font-mono);color:var(--text-dim)}
.j-no input{width:64px;height:26px;border:0;background:transparent;color:var(--text);font:600 var(--fs-klein) var(--font-mono);padding:0 4px}
.j-no input::placeholder{color:var(--text)}
.j-no input:focus{outline:none}
.j-tag{width:110px;height:32px;padding:0 10px;border:1px solid var(--hair);border-radius:8px;background:var(--tint);color:var(--text);font:600 var(--fs-klein) var(--font-mono)}
.j-tag:focus,.j-no:focus-within{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.j-streak{height:32px;display:inline-flex;align-items:center;padding:0 10px;border-radius:8px;background:var(--accent-wash);color:var(--accent);font-size:var(--fs-mini);font-weight:600}
.j-save{font-size:var(--fs-mini);color:var(--text-faint);min-width:78px}
.j-save.ok{color:var(--pos)}

.j-strip{display:grid;grid-template-columns:repeat(14,minmax(38px,1fr));gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.j-strip::-webkit-scrollbar{display:none}
.j-day{position:relative;display:grid;justify-items:center;gap:2px;padding:7px 0 6px;border-radius:10px;border:1px solid transparent;color:var(--text-dim);transition:background .15s var(--ease),border-color .15s var(--ease)}
.j-day:hover{background:var(--tint)}
.j-day .wd{font-size:var(--fs-etikett);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint)}
.j-day .dn{font-size:var(--fs-text);font-weight:600;color:var(--text)}
.j-day .dots{display:flex;gap:3px;height:5px}
.j-day .dots i{width:5px;height:5px;border-radius:50%;background:var(--hair-strong)}
.j-day .dots i.m{background:var(--warn)}
.j-day .dots i.e{background:var(--accent-2)}
.j-day .gr{position:absolute;top:3px;right:4px;font:700 var(--fs-etikett) var(--font-mono);color:var(--text-faint)}
.j-day.today .dn{color:var(--accent)}
.j-day.on{background:var(--surface-2);border-color:var(--accent-line)}

.j-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.j-tab{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid var(--border-soft);background:var(--surface);text-align:left;transition:border-color .15s var(--ease),background .15s var(--ease)}
.j-tab svg{width:22px;height:22px;flex:0 0 22px;color:var(--text-faint)}
.j-tab span{display:grid;gap:1px;min-width:0}
.j-tab b{font:700 var(--fs-titel) var(--font-display);letter-spacing:.01em}
.j-tab small{font-size:var(--fs-mini);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j-tab .st{margin-left:auto;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--hair-strong)}
.j-tab .st.done{background:var(--pos);border-color:var(--pos)}
.j-tab:hover{border-color:var(--hair-strong)}
.j-tab.on{border-color:var(--accent-line);background:linear-gradient(180deg,var(--accent-wash),transparent 70%),var(--surface)}
.j-tab.on:first-child svg{color:var(--warn)}
.j-tab.on:last-child svg{color:var(--accent-2)}

.j-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--card-shadow);min-width:0}
.j-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.j-card-h h3{display:flex;align-items:center;gap:8px;font-size:var(--fs-text);font-weight:600;letter-spacing:-.015em}
.j-card-h h3 svg{width:16px;height:16px;color:var(--warn)}
.j-side{display:flex;gap:6px;flex-wrap:wrap}
.j-side .btn svg,.j-level-add .btn svg,.j-asset-add .btn svg,.j-card>.btn svg{width:14px;height:14px}
.j-hint{font-size:var(--fs-mini);color:var(--text-faint)}
.j-empty{font-size:var(--fs-klein);color:var(--text-dim);margin:0 0 12px}

.j-f{display:grid;gap:6px;min-width:0}
.j-f>span{font-size:var(--fs-mini);font-weight:600;color:var(--text-dim);letter-spacing:-.005em}
.j-row2{display:grid;grid-template-columns:minmax(180px,auto) 1fr;gap:12px;align-items:start}
.j-row2.eq{grid-template-columns:1fr 1fr}
.j-inp::placeholder{text-transform:none;font-family:var(--font-ui)}
.j-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.j-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.j-inp,.j-ta{width:100%;padding:9px 11px;background:var(--tint);border:1px solid var(--hair);border-radius:9px;color:var(--text);font-size:var(--fs-text);line-height:1.5;transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)}
.j-ta{resize:none;min-height:42px;overflow:hidden;display:block}
.j-inp::placeholder,.j-ta::placeholder{color:var(--text-faint)}
.j-inp:hover,.j-ta:hover{border-color:var(--hair-strong)}
.j-inp:focus,.j-ta:focus{outline:none;border-color:var(--accent);background:var(--surface-2);box-shadow:0 0 0 3px var(--accent-wash)}
.j-num{font-family:var(--font-mono);max-width:120px}
.j-time{display:flex;gap:6px;align-items:center}
.j-time input{width:104px;font-family:var(--font-mono)}

.j-seg{display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;border-radius:9px;background:var(--tint);border:1px solid var(--hair)}
.j-seg button{padding:5px 11px;border-radius:6px;font-size:var(--fs-klein);font-weight:600;color:var(--text-dim);transition:background .12s var(--ease),color .12s var(--ease)}
.j-seg button:hover{color:var(--text)}
.j-seg button.on{background:var(--surface-3);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.j-seg button.on.k-good{background:var(--pos-soft);color:var(--pos)}
.j-seg button.on.k-bad{background:var(--neg-soft);color:var(--neg)}
.j-seg button.on.k-warn{background:var(--warn-soft);color:var(--warn)}
.j-seg.sm button{padding:4px 9px;font-size:var(--fs-mini)}
.j-seg.xs{padding:2px}
.j-seg.xs button{padding:2px 7px;font-size:var(--fs-mini)}
.j-seg.scale button{min-width:30px;font-family:var(--font-mono)}
.j-seg.grade button{min-width:34px;font-family:var(--font-mono)}

.j-ready{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 16px;margin-bottom:12px}
.j-ready .wide{grid-column:1/-1}
.j-verdict{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;padding:11px 14px;border-radius:10px;border:1px dashed var(--hair-strong);margin-bottom:12px}
.j-verdict b{font:700 var(--fs-titel) var(--font-display)}
.j-v-lbl{font-size:var(--fs-mini);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}
.j-v-why{font-size:var(--fs-klein);color:var(--text-dim)}
.j-verdict.go{border-style:solid;border-color:color-mix(in srgb,var(--pos) 40%,transparent);background:var(--pos-soft)}
.j-verdict.go b{color:var(--pos)}
.j-verdict.reduced{border-style:solid;border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-soft)}
.j-verdict.reduced b{color:var(--warn)}
.j-verdict.no{border-style:solid;border-color:color-mix(in srgb,var(--neg) 40%,transparent);background:var(--neg-soft)}
.j-verdict.no b{color:var(--neg)}
#jReady .j-f+.j-f{margin-top:10px}

.j-focus{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent-2) 35%,transparent);background:color-mix(in srgb,var(--accent-2) 8%,var(--surface))}
.j-focus svg{width:18px;height:18px;color:var(--accent-2);flex:0 0 18px}
.j-focus span{display:block;font-size:var(--fs-mini);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}
.j-focus b{font-size:var(--fs-text);font-weight:600}

.j-asset{border:1px solid var(--hair);border-radius:12px;padding:12px;margin-bottom:12px;background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.j-asset-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.j-sym{font:700 var(--fs-titel) var(--font-mono);letter-spacing:.01em}
.j-sym.sm{font-size:var(--fs-klein);min-width:56px}
.j-x{width:30px;height:30px;margin-left:auto}
.j-x svg{width:14px;height:14px}
.j-align{display:flex;gap:3px}
.j-align span{padding:2px 6px;border-radius:5px;font:600 var(--fs-etikett) var(--font-mono);background:var(--tint-2);color:var(--text-faint)}
.j-align .bull{background:var(--pos-soft);color:var(--pos)}
.j-align .bear{background:var(--neg-soft);color:var(--neg)}
.j-align .neutral{background:var(--tint-2);color:var(--text-dim)}
.j-tfs{display:grid;gap:8px}
.j-tf-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.j-tf-h .j-x{width:26px;height:26px}
.j-tf-name{font:600 var(--fs-mini) var(--font-mono);color:var(--text-dim);min-width:52px}
.j-tf-add,.j-quick{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.j-chips{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;margin:8px 0 2px;padding-bottom:2px}
.j-chips::-webkit-scrollbar{display:none}
.j-chip{flex:0 0 auto;padding:4px 9px;border-radius:999px;border:1px solid var(--hair);background:var(--tint);font:600 var(--fs-mini) var(--font-mono);color:var(--text-dim);white-space:nowrap;transition:border-color .12s var(--ease),color .12s var(--ease)}
.j-chip:hover{border-color:var(--accent-line);color:var(--text)}
.j-chip.add{font-family:var(--font-ui);border-style:dashed}
.j-sub{margin:12px 0}
.j-sub-t{font-size:var(--fs-mini);font-weight:600;color:var(--text-dim);margin-bottom:6px}
.j-levels{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.j-level{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 9px;border-radius:7px;border:1px solid var(--hair);background:var(--surface-3);font-size:var(--fs-mini)}
.j-level b{font-family:var(--font-mono);font-weight:600}
.j-level span{color:var(--text-dim)}
.j-level button{display:grid;place-items:center;width:18px;height:18px;border-radius:4px;color:var(--text-faint)}
.j-level button:hover{background:var(--tint-2);color:var(--text)}
.j-level button svg{width:11px;height:11px}
.j-level-add{display:grid;grid-template-columns:120px 1fr auto;gap:6px}
.j-level-add .j-num{max-width:none}
.j-asset-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.j-asset-add>.j-inp{max-width:220px;font-family:var(--font-mono);text-transform:uppercase}
.j-asset-add .j-quick{width:100%}
.j-inter{display:grid;gap:6px;margin-bottom:10px}
.j-inter-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.j-inter-row .j-x{margin:0}
.j-inline-add .j-inp{width:92px;padding:4px 9px;font-size:var(--fs-mini);border-radius:999px;font-family:var(--font-mono);text-transform:uppercase}
.j-fng{display:flex;align-items:center;gap:10px}
.j-fng input{width:80px}
.j-fng b{font-size:var(--fs-klein)}
.j-news{display:grid;gap:6px;margin-bottom:10px}
.j-news-row{display:grid;grid-template-columns:104px 1fr auto auto;gap:8px;align-items:center}
.j-news-row input[type=time]{font-family:var(--font-mono)}
.j-news-row .j-x{margin:0}
.j-card>.j-ta+.j-row2{margin-top:12px}

.j-shots{display:flex;flex-wrap:wrap;gap:10px}
.j-shot{position:relative;margin:0}
.j-shot-img{display:block;width:180px;aspect-ratio:16/10;border-radius:9px;overflow:hidden;border:1px solid var(--hair)}
.j-shot-img img{width:100%;height:100%;object-fit:cover}
.j-shot .j-x{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;border-color:transparent}
.j-shot-add{display:grid;place-items:center;gap:4px;width:180px;aspect-ratio:16/10;border-radius:9px;border:1px dashed var(--hair-strong);color:var(--text-faint);font-size:var(--fs-mini);cursor:pointer;text-align:center}
.j-shot-add:hover{border-color:var(--accent-line);color:var(--text)}
.j-shot-add svg{width:20px;height:20px}
.j-light{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.86);cursor:zoom-out}
.j-light img{max-width:100%;max-height:100%;border-radius:10px}

.j-eodr{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.j-eodr-main{display:grid;gap:14px;min-width:0}
.j-eodr-side{position:sticky;top:84px}
.j-plan-card{border-color:color-mix(in srgb,var(--warn) 25%,var(--border-soft))}
.j-morning{display:grid;gap:10px;font-size:var(--fs-klein)}
.j-mv{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:9px;background:var(--tint)}
.j-mv span{font-size:var(--fs-mini);color:var(--text-faint)}
.j-mv.go b{color:var(--pos)} .j-mv.reduced b{color:var(--warn)} .j-mv.no b{color:var(--neg)}
.j-mrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding-bottom:9px;border-bottom:1px solid var(--border-soft)}
.j-mrow p{width:100%;margin:0;color:var(--text-dim)}
.j-mlv{font-size:var(--fs-mini);color:var(--text-dim)}
.j-mplan,.j-mrules{margin:0;color:var(--text-dim)}
.j-mplan b{color:var(--text)}
.j-pill{padding:2px 8px;border-radius:6px;font-size:var(--fs-mini);font-weight:600;background:var(--tint-2);color:var(--text-dim)}
.j-pill.bull{background:var(--pos-soft);color:var(--pos)}
.j-pill.bear{background:var(--neg-soft);color:var(--neg)}
.j-res{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.j-res div{padding:10px 12px;border-radius:10px;background:var(--tint)}
.j-res span{display:block;font-size:var(--fs-mini);color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em}
.j-res b{font:700 var(--fs-titel) var(--font-mono)}
.j-checks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px;font-size:var(--fs-klein)}
.j-ok{color:var(--pos)} .j-bad{color:var(--neg)}
.j-review{display:grid;gap:8px}
.j-rev-row{display:grid;grid-template-columns:auto auto auto 1fr;gap:8px;align-items:center}
.j-tomorrow{border-color:color-mix(in srgb,var(--accent-2) 30%,var(--border-soft))}
.j-tomorrow .j-hint{margin:8px 0 0}

/* Kalender: Journal-Punkte */
.cal-j{position:absolute;top:8px;right:8px;display:flex;gap:3px}
.cal-j i{width:6px;height:6px;border-radius:50%}
.cal-j i.m{background:#f5b041}
.cal-j i.e{background:var(--accent-2)}
.cal-cell{position:relative}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:18px}
.dash-top .range-wrap{margin-bottom:0}
.dash-j{display:inline-flex;align-items:center;gap:12px;height:34px;padding:0 6px 0 14px;border-radius:999px;border:1px solid var(--border-soft);background:var(--surface);font-size:var(--fs-klein);color:var(--text-dim);transition:border-color .15s var(--ease),background .15s var(--ease)}
.dash-j:hover{border-color:var(--accent-line);background:var(--surface-2)}
.dash-j .dj-l{color:var(--text);font-weight:600}
.dash-j>span{white-space:nowrap}
.dash-j .dj-s{display:inline-flex;align-items:center;gap:6px}
.dash-j i{width:7px;height:7px;border-radius:50%;background:var(--hair-strong)}
.dash-j i.m{background:#f5b041} .dash-j i.e{background:var(--accent-2)}
.dash-j .go{height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:var(--accent-wash);color:var(--accent);font-weight:600}

@media (max-width:1100px){
  .j-eodr{grid-template-columns:1fr}
  .j-eodr-side{position:static;order:-1}
}
@media (max-width:720px){
  .j-row2,.j-row2.eq,.j-row3,.j-grid2{grid-template-columns:1fr}
  .j-card{padding:14px}
  .j-tab{padding:10px 12px;gap:9px}
  .j-tab small{display:none}
  .j-dn{font-size:var(--fs-titel)}
  .j-level-add{grid-template-columns:110px 1fr}
  .j-level-add .btn{grid-column:1/-1;justify-content:center}
  .j-news-row{grid-template-columns:92px 1fr auto;}
  .j-news-row .j-seg{grid-column:1/3}
  .j-rev-row{grid-template-columns:auto 1fr;}
  .j-rev-row .j-seg,.j-rev-row .j-inp{grid-column:1/-1}
  .j-shot-img,.j-shot-add{width:calc(50vw - 40px)}
  .j-save{min-width:0}
}

/* =========================================================
   WERKZEUGE · Rechner · Befehlspalette
   ========================================================= */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lbl-split{display:flex!important;justify-content:space-between;align-items:baseline;gap:8px}
.lbl-act{font-size:var(--fs-mini);font-weight:600;color:var(--accent);padding:0;border-radius:4px}
.lbl-act:hover{text-decoration:underline}
.topbar-k{width:auto!important;padding:0 10px;gap:8px;display:inline-flex;align-items:center}
.topbar-k svg{width:17px;height:17px}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;border:1px solid var(--hair-strong);background:var(--tint);font:600 var(--fs-etikett) var(--font-mono);color:var(--text-dim);line-height:1}
/* Eingabefelder einer Reihe stehen auf einer Linie, auch wenn eine Beschriftung umbricht */
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;align-items:end}
.pc-grid .field{margin:0}
.calc-lbl{display:block;font-size:var(--fs-mini);font-weight:600;color:var(--text-dim);margin-bottom:7px}
.calc-lbl .opt{font-weight:400;color:var(--text-faint)}
.calc-risk{display:grid;grid-template-columns:1fr auto;gap:6px}
.calc-mode button{padding:0 12px;min-width:44px}
.calc-fx{display:grid;grid-template-columns:1fr auto;gap:6px}
.calc-out{margin-top:16px;padding:14px;border-radius:12px;border:1px solid var(--accent-line);background:linear-gradient(180deg,var(--accent-wash),transparent 80%)}
.calc-out.empty{border-style:dashed;border-color:var(--hair-strong);background:none;color:var(--text-dim);font-size:var(--fs-klein)}
.calc-out.empty p{margin:0}
.calc-main{display:grid;gap:2px;margin-bottom:12px}
.calc-main span{font-size:var(--fs-mini);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}
.calc-main b{font:700 var(--fs-zahl-l) var(--font-mono);letter-spacing:-.02em;color:var(--text)}
.calc-main small{font-size:var(--fs-mini);color:var(--text-faint)}
.calc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.calc-t{padding:9px 11px;border-radius:9px;background:var(--tint);display:grid;gap:2px}
.calc-t span{font-size:var(--fs-mini);color:var(--text-faint)}
.calc-t b{font:700 var(--fs-text) var(--font-mono)}
.calc-t small{font-size:var(--fs-mini);color:var(--text-dim)}
.calc-warn{margin-top:10px;padding:9px 11px;border-radius:9px;background:var(--warn-soft);color:var(--warn);font-size:var(--fs-klein)}
.calc-warn p{margin:0}
.calc-remember{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:var(--fs-klein);color:var(--text-dim)}
[hidden].field,.field[hidden]{display:none!important}

.cmdk{position:fixed;inset:0;z-index:400;display:grid;justify-items:center;align-items:start;padding:12vh 16px 16px}
.cmdk[hidden]{display:none}
.cmdk-scrim{position:absolute;inset:0;background:rgba(3,6,12,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cmdk-box{position:relative;width:min(620px,100%);max-height:70vh;display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;animation:cmdkIn .16s var(--ease-out)}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-soft)}
.cmdk-in svg{width:18px;height:18px;color:var(--text-faint);flex:0 0 18px}
.cmdk-in input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-size:var(--fs-titel);outline:none}
.cmdk-in input::placeholder{color:var(--text-faint)}
#cmdkList{list-style:none;margin:0;padding:6px;overflow-y:auto}
.cmdk-grp{padding:10px 10px 4px;font-size:var(--fs-etikett);text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)}
.cmdk-it{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:9px;font-size:var(--fs-text);cursor:pointer}
.cmdk-it span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-it.on{background:var(--tint-2)}
.cmdk-it.on span{color:var(--text)}
.cmdk-none{padding:18px 10px;color:var(--text-faint);font-size:var(--fs-text)}
.cmdk-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--border-soft);font-size:var(--fs-mini);color:var(--text-faint)}
.cmdk-foot kbd{margin-right:3px}
@media (max-width:640px){
  .pc-grid{grid-template-columns:1fr}
  .topbar-k{width:38px!important;height:38px!important;padding:0;justify-content:center}
  .cmdk{padding-top:8px}
  .cmdk-foot{display:none}
}
@media (prefers-reduced-motion:reduce){.cmdk-box{animation:none}}

/* ---- Journal: Woche & Anpassen ---- */
.j-tabs{grid-template-columns:repeat(3,1fr)}
.w-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.w-nav b{font:700 var(--fs-titel) var(--font-display);letter-spacing:-.01em}
.w-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.w-tiles div{padding:10px 12px;border-radius:10px;background:var(--tint);display:grid;gap:2px;min-width:0}
.w-tiles span{font-size:var(--fs-mini);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint)}
.w-tiles b{font:700 var(--fs-titel) var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-tiles small{font-size:var(--fs-mini);color:var(--text-dim)}
.w-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;margin-top:12px}
.w-day{position:relative;display:grid;gap:3px;justify-items:start;padding:8px 10px;border-radius:9px;border:1px solid var(--hair);text-align:left}
.w-day:hover{border-color:var(--accent-line)}
.w-day span{font-size:var(--fs-mini);color:var(--text-faint);text-transform:capitalize}
.w-day b{font:600 var(--fs-klein) var(--font-mono)}
.w-day .dots{display:flex;gap:3px}
.w-day .dots i{width:5px;height:5px;border-radius:50%;background:var(--hair-strong)}
.w-day .dots i.m{background:#f5b041}.w-day .dots i.e{background:var(--accent-2)}
.w-day em{position:absolute;top:7px;right:9px;font:700 var(--fs-mini) var(--font-mono);font-style:normal;color:var(--text-dim)}
.w-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:var(--fs-klein);color:var(--text-dim)}
.w-facts b{color:var(--text);font-weight:600}
.w-goals{display:grid;gap:6px;margin-bottom:8px}
.w-goal{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.w-goal .j-x{margin:0}
.w-goal.done .j-inp{text-decoration:line-through;color:var(--text-dim)}
.w-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--hair-strong);background:var(--tint);display:grid;place-items:center;font-size:var(--fs-mini);font-weight:700;color:var(--on-accent);flex:none}
.w-goal.done .w-check{background:var(--accent);border-color:var(--accent)}
.w-goal-add{display:grid;grid-template-columns:1fr auto;gap:6px}
.w-lessons{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:var(--fs-text)}
.w-lessons button{font:600 var(--fs-mini) var(--font-mono);color:var(--accent);margin-right:6px}
.jc-sec+.jc-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft)}
.jc-togs{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.jc-tog{display:flex;align-items:center;gap:8px;font-size:var(--fs-text)}
.jc-hint{font-size:var(--fs-mini);margin:-2px 0 8px}
.jc-list{display:grid;gap:6px}
.jc-row{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center}
.jc-row .j-x{margin:0}
.jc-good{width:auto;padding:8px}
.jc-add{display:grid;grid-template-columns:1fr auto;gap:6px}
.j-custom{border-color:color-mix(in srgb,var(--accent) 22%,var(--border-soft))}
.j-custom .j-f+.j-f{margin-top:10px}
@media (max-width:900px){.w-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.jc-togs{grid-template-columns:1fr}.j-tab b{font-size:var(--fs-klein)}.j-tab svg{width:18px;height:18px;flex-basis:18px}}
input[type=radio]{accent-color:var(--accent)}
/* ---------- Häkchen und Schalter ----------
   Keine Kästchen des Browsers: ein rundes Häkchen für "ja/nein, gelesen, zeigen" und
   ein Schalter für alles, was ein- und ausgeschaltet wird. Beides in der Akzentfarbe
   der Ansicht, das Häkchen dunkel auf dunklen, weiss auf hellen Ansichten. */
:root{--haken-bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5' fill='none' stroke='%2307090f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-theme="papier"],[data-theme="eis"],[data-theme="sand"]{--haken-bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;border-radius:50%;
  border:1.5px solid var(--hair-strong);background:var(--tint) center/14px 14px no-repeat;cursor:pointer;vertical-align:middle;
  transition:background-color .15s var(--ease),border-color .15s var(--ease)}
input[type=checkbox]:hover{border-color:var(--accent-line)}
input[type=checkbox]:checked{background-color:var(--accent);border-color:var(--accent);background-image:var(--haken-bild)}
input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Schalter: eine Pille, der Knopf wandert nach rechts */
input[type=checkbox].schalter{width:38px;height:22px;border-radius:999px;border:1px solid var(--hair-strong);
  background:var(--tint-2) radial-gradient(circle,var(--text-dim) 0 7px,transparent 7.5px) 0 50%/20px 20px no-repeat;
  transition:background-color .18s var(--ease),background-position .18s var(--ease),border-color .18s var(--ease)}
input[type=checkbox].schalter:checked{background-color:var(--accent);border-color:var(--accent);
  background-image:radial-gradient(circle,var(--on-accent) 0 7px,transparent 7.5px);background-position:100% 50%}

/* =========================================================
   ANALYSE · Reiter, Tabellen, Heatmap, Verteilung
   ========================================================= */
.an-tabs{display:flex;gap:4px;margin:0 0 16px;padding:4px;border-radius:12px;background:var(--surface);border:1px solid var(--border-soft);overflow-x:auto;scrollbar-width:none}
.an-tabs::-webkit-scrollbar{display:none}
.an-tabs button{flex:1 0 auto;padding:9px 16px;border-radius:9px;font-size:var(--fs-text);font-weight:600;color:var(--text-dim);white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease)}
.an-tabs button:hover{color:var(--text)}
.an-tabs button.on{background:var(--tint-2);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
.an-card{margin-bottom:16px}
.row.r-2>.an-card{margin-bottom:0}
.row.r-2{margin-bottom:16px}
.an-card .an-sum{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.an-empty{color:var(--text-dim);font-size:var(--fs-klein);margin:0}
.an-note{font-size:var(--fs-mini);color:var(--text-faint);margin:12px 0 0;line-height:1.55}
.an-thin{display:inline-block;width:6px;height:6px;margin:0 0 2px 8px;border-radius:50%;border:1.5px solid var(--text-faint);vertical-align:middle}
.an-tbl tr.an-few td{opacity:.55}
.an-k{white-space:nowrap}
.an-legend .an-thin{margin:0 7px 2px 0}
.an-tbl-wrap{overflow-x:auto}
.an-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-klein)}
.an-tbl th{font-size:var(--fs-etikett);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);text-align:left;padding:0 10px 10px;border-bottom:1px solid var(--border-soft);white-space:nowrap;font-weight:600}
.an-tbl td{padding:10px;border-bottom:1px solid var(--border-soft)}
.an-tbl tr:last-child td{border-bottom:0}
.an-tbl .r{text-align:right}
.an-k{font-weight:500}
.an-cellbar{position:relative;display:flex;justify-content:flex-end;align-items:center;min-width:120px}
.an-cellbar i{position:absolute;right:0;top:50%;height:22px;transform:translateY(-50%);border-radius:5px;opacity:.16}
.an-cellbar i.pos{background:var(--pos)} .an-cellbar i.neg{background:var(--neg)}
.an-cellbar b{position:relative;font-weight:600;padding-right:6px}
.an-heat-wrap{position:relative;overflow-x:auto;padding-bottom:4px}
.an-heat>.hd,.an-heat>span:first-child{position:sticky;left:0;z-index:1;background:var(--surface);align-self:stretch;display:flex;align-items:center;margin:-2px -3px -2px 0;padding-right:3px}
.an-heat{display:grid;gap:3px;min-width:min-content}
.an-heat .hh{font:600 var(--fs-etikett) var(--font-mono);color:var(--text-faint);text-align:center}
.an-heat .hd{font-size:var(--fs-mini);color:var(--text-dim)}
.an-heat .hc{height:32px;border-radius:6px;background:var(--tint);display:grid;place-items:center}
.an-heat .hc b{font:600 var(--fs-mini) var(--font-mono);color:var(--text)}
.an-heat .hc.pos{background:color-mix(in srgb,var(--pos) calc(var(--a)*100%),transparent)}
.an-heat .hc.neg{background:color-mix(in srgb,var(--neg) calc(var(--a)*100%),transparent)}
.an-hist{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;height:190px;align-items:end;padding-top:18px}
.an-bin{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.an-bin i{width:100%;min-height:2px;border-radius:6px 6px 2px 2px}
.an-bin i.pos{background:color-mix(in srgb,var(--pos) 70%,transparent)} .an-bin i.neg{background:color-mix(in srgb,var(--neg) 70%,transparent)}
.an-bin span{font:600 var(--fs-mini) var(--font-mono);color:var(--text-dim)}
.an-bin em{font-style:normal;font-size:var(--fs-etikett);color:var(--text-faint);white-space:nowrap;height:14px}
.an-alert{margin-bottom:12px;padding:10px 12px;border-radius:9px;background:var(--neg-soft);color:var(--neg);font-size:var(--fs-klein)}
.an-bias{display:grid;grid-template-columns:minmax(60px,110px) 1fr 44px auto auto;gap:10px;align-items:center;padding:6px 0;font-size:var(--fs-klein)}
.an-meter{height:8px;border-radius:5px;background:var(--tint-2);overflow:hidden}
.an-meter i{display:block;height:100%;background:var(--accent);border-radius:5px}
.an-bias small{color:var(--text-faint)}
.an-bias-grid{margin-top:12px;margin-bottom:0}
@media (max-width:720px){
  .an-hist{height:150px;gap:3px}
  .an-bin em{font-size:var(--fs-etikett);transform:rotate(-35deg);transform-origin:top center;margin-top:4px}
  .an-bias{grid-template-columns:70px 1fr 40px auto}
  .an-bias .an-thin{display:none}
  .an-cellbar{min-width:90px}
}
.an-tbl td.tnum,.an-tbl td.r{white-space:nowrap}
.an-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.an-big b{font:700 var(--fs-zahl-xl) var(--font-mono);letter-spacing:-.03em}
.an-big span{font-size:var(--fs-klein);color:var(--text-dim)}

/* ---- Startseite: Routine-Abschnitt ---- */
.lp-rt-note{text-align:center;font-size:var(--fs-mini);color:var(--text-faint);margin-top:28px}
.fv-mma{position:relative;width:100%;max-width:340px;display:grid;gap:10px;font-family:var(--font-mono);font-size:13px}
.fv-mma-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.fv-mma-h b{font-family:var(--font-display);font-size:22px;letter-spacing:-.02em;color:var(--text)}
.fv-mma-h span{font-size:var(--fs-mini);color:var(--text-faint)}
.fv-mma-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fv-mma-r b{min-width:40px;color:var(--text)}
.fv-mma-r span{min-width:96px;font-family:var(--font-ui);font-size:var(--fs-mini);color:var(--text-dim)}
.fv-mma-r em,.fv-mma-r i{font-style:normal;padding:3px 8px;border-radius:6px;background:var(--tint-2);color:var(--text-dim);font-size:var(--fs-mini)}
.fv-mma-r em.bull,.fv-mma-r i.g{background:var(--pos-soft);color:var(--pos)}
.fv-mma-r em.bear{background:var(--neg-soft);color:var(--neg)}
.fv-mma-p{font-family:var(--font-ui);font-size:13px;color:var(--text);padding:10px 12px;border-radius:10px;border:1px solid var(--accent-line);background:var(--accent-wash)}
.fv-ready{position:relative;width:100%;max-width:330px;display:grid;gap:10px}
.fv-ready-q{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:var(--tint);font-size:13px;color:var(--text-dim)}
.fv-ready-q b{font-family:var(--font-mono);color:var(--text)}
.fv-ready-q b.bad{color:var(--neg)}
.fv-ready-v{display:grid;gap:2px;padding:14px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--neg) 40%,transparent);background:var(--neg-soft)}
.fv-ready-v span{font-size:var(--fs-etikett);text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)}
.fv-ready-v b{font-family:var(--font-display);font-size:21px;letter-spacing:-.02em;color:var(--neg)}
.fv-week{position:relative;width:100%;max-width:340px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.fv-week i{aspect-ratio:1;border-radius:10px;display:grid;place-items:end start;padding:7px}
.fv-week i b{font:600 var(--fs-mini) var(--font-ui);color:var(--text-dim)}
.fv-week i.p{background:var(--pos-soft)} .fv-week i.p2{background:color-mix(in srgb,var(--pos) 45%,transparent)} .fv-week i.n{background:var(--neg-soft)}
.fv-week-t{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--text-dim)}
.fv-week-t .g{color:var(--accent);font-weight:600}
.fv-calc{position:relative;display:grid;gap:4px;text-align:center}
.fv-calc>span{font-size:var(--fs-mini);text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint)}
.fv-calc>b{font:600 clamp(40px,6vw,56px) var(--font-mono);letter-spacing:-.05em;color:var(--text)}
.fv-calc-t{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.fv-calc-t i{font-style:normal;padding:7px 11px;border-radius:9px;background:var(--tint);font:600 12.5px var(--font-mono);color:var(--text)}
.fv-calc-t em{font:500 var(--fs-mini) var(--font-ui);font-style:normal;color:var(--text-faint);margin-right:6px}

/* ---- Equity-Kurve: Grösse kommt vom Rahmen, nie vom Canvas (sonst Rückkopplung) ---- */
.chart-wrap{display:flex;flex-direction:column}
.eq-box{position:relative;flex:1 1 auto;min-height:280px}
#equity{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
@media (max-width:640px){.eq-box{flex:none;height:220px;min-height:0}}

/* ---- Prüfdurchgang Design ---- */
.modal:focus{outline:none}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sym-side{display:none}
@media (max-width:640px){
  /* Oben: Suche, Rechner, Einstellungen, + — enger gesetzt, damit alle vier Platz haben */
  .topbar-rechts{gap:6px!important}
  .topbar-links{gap:10px!important;min-width:0}
  .topbar-links>div:last-child{min-width:0}
  .topbar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tbl .sym{white-space:nowrap}
  .sym-side{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:7px;border-radius:5px;font:700 var(--fs-etikett) var(--font-mono);vertical-align:1px}
  .sym-side.long{background:var(--pos-soft);color:var(--pos)} .sym-side.short{background:var(--neg-soft);color:var(--neg)}
  .tbl .open-badge.has-amt{display:none}
  .tbl td,.tbl th{padding-left:8px;padding-right:8px}
  .cal-j{top:auto;bottom:6px;right:auto;left:6px}
  .dash-top{flex-direction:column;align-items:stretch}
  .dash-top .range-wrap{margin-right:0;padding-right:0}
  .dash-j{justify-content:space-between;gap:8px;padding-left:12px;font-size:var(--fs-mini)}
  .dash-j .dj-l{margin-right:auto}
}
.fv-goals{position:relative;width:100%;max-width:330px;display:grid;gap:8px}
.fv-goals-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.fv-goals-h b{font-family:var(--font-display);font-size:18px;letter-spacing:-.02em}
.fv-goals-h span{font:500 var(--fs-mini) var(--font-mono);color:var(--text-faint)}
.fv-goals>span{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text)}
.fv-goals>span::before{content:"";flex:0 0 18px;height:18px;border-radius:5px;border:1.5px solid var(--hair-strong)}
.fv-goals>span.ok{color:var(--text-dim);text-decoration:line-through}
.fv-goals>span.ok::before{background:var(--pos) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%23031318' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--pos)}
.fv-goals em{margin-top:6px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent-2) 35%,transparent);background:color-mix(in srgb,var(--accent-2) 8%,transparent);font-style:normal;font-size:13px;color:var(--text)}
.fv-goals em b{display:block;font-size:var(--fs-etikett);text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);font-weight:600;margin-bottom:2px}
@media (max-width:380px){.range-label{display:none}.j-date .btn-sm{padding-left:8px;padding-right:8px}}
/* Zugangsdaten ändern */
.acct-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.acct-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.acct-form .field{margin-bottom:14px}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.pw-meter i{height:4px;border-radius:2px;background:var(--tint-2);transition:background .2s var(--ease)}
.pw-meter[data-s="1"] i:nth-child(-n+1){background:var(--neg)}
.pw-meter[data-s="2"] i:nth-child(-n+2){background:#f5b041}
.pw-meter[data-s="3"] i:nth-child(-n+3){background:var(--pos)}
.pw-meter[data-s="4"] i{background:var(--pos)}
.acct-show{display:flex;align-items:center;gap:8px;font-size:var(--fs-klein);color:var(--text-dim);margin:2px 0 12px;cursor:pointer}
.acct-note{font-size:var(--fs-klein);line-height:1.5;color:var(--text-dim);background:var(--tint);border:1px solid var(--border-soft);border-radius:10px;padding:10px 12px;margin-bottom:6px}
#acctRepHint:empty{display:none}
/* Schnellerfassung */
.quick .field{margin-bottom:14px}
.q-paste{border:1px dashed var(--hair-strong);border-radius:12px;padding:0;margin-bottom:16px;background:var(--tint)}
.q-paste summary{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;font-size:var(--fs-text);font-weight:600;color:var(--text);list-style:none}
.q-paste summary::-webkit-details-marker{display:none}
.q-paste summary svg{width:17px;height:17px;color:var(--accent)}
.q-paste[open] summary{padding-bottom:6px}
.q-paste textarea{display:block;width:calc(100% - 28px);margin:0 14px 12px;font:var(--fs-mini)/1.45 var(--font-mono);resize:vertical;min-height:64px;background:var(--surface-2);border:1px solid var(--hair);border-radius:9px;padding:9px 11px;color:var(--text);outline:none}
.q-paste textarea::placeholder{color:var(--text-faint);font-family:var(--font-ui)}
.q-paste textarea:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-wash)}
#qPasteOut{padding:0 14px 12px}
.q-paste-msg{font-size:var(--fs-klein);font-weight:600;margin-bottom:8px}
.q-list{max-height:180px;overflow:auto;border:1px solid var(--border-soft);border-radius:9px;margin-bottom:10px}
.q-li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:7px 10px;font-size:var(--fs-klein);border-bottom:1px solid var(--border-soft)}
.q-li:last-child{border-bottom:0}
.q-li.dup{opacity:.45;text-decoration:line-through}
.q-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.q-chips:empty{display:none}
.q-chip{padding:4px 10px;border-radius:999px;border:1px solid var(--border-soft);background:var(--surface-2);font:600 var(--fs-mini) var(--font-mono);color:var(--text-dim)}
.q-chip:hover{border-color:var(--accent-line);color:var(--text)}
.q-pnl-row{display:flex;align-items:center;gap:12px}
.q-pnl-row input{flex:1;min-width:0;font:600 var(--fs-kopf) var(--font-num);height:52px;letter-spacing:-.02em}
.q-result{font:600 var(--fs-titel) var(--font-num);white-space:nowrap}
.q-foot{display:flex;align-items:center;gap:8px}
.q-foot .grow{flex:1}
@media (max-width:640px){.q-row2{grid-template-columns:1fr}}
/* MMA-Vorlagen */
.j-tpl-card .j-card-h{align-items:flex-start;gap:12px}
.j-tpl-card h3{margin:0 0 4px}
.j-tpl-card .muted{margin:0;font-size:var(--fs-klein);line-height:1.5}
.j-tpls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.j-tpl{display:grid;gap:5px;text-align:left;padding:14px;border-radius:12px;border:1px solid var(--border-soft);background:var(--surface-2);transition:border-color .15s var(--ease),background .15s var(--ease)}
.j-tpl:hover{border-color:var(--accent-line)}
.j-tpl b{font:700 var(--fs-text) var(--font-display);color:var(--text)}
.j-tpl span{font-size:var(--fs-mini);line-height:1.45;color:var(--text-dim)}
.j-tpl.on{border-color:var(--accent);background:var(--accent-wash)}
.j-tpls.sm .j-tpl{padding:10px 12px}
@media (max-width:720px){.j-tpls{grid-template-columns:1fr}}
/* Grundsätze statt Vergleichstabelle */
.lp-prin{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:18px;overflow:hidden}
.lp-prin-i{display:flex;gap:14px;padding:24px 26px;background:var(--surface)}
.lp-prin-ck{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent)}
.lp-prin-ck svg{width:16px;height:16px}
.lp-prin-i h3{margin:2px 0 6px;font:600 16px var(--font-display);letter-spacing:-.01em;color:var(--text)}
.lp-prin-i p{margin:0;font-size:14px;line-height:1.55;color:var(--text-dim)}
@media (max-width:720px){.lp-prin{grid-template-columns:1fr}.lp-prin-i{padding:18px}}
/* Erinnerungen */
.rem-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-soft)}
.rem-row:last-of-type{border-bottom:0}
.rem-tog{display:flex;align-items:center;gap:10px;font-size:var(--fs-text);color:var(--text);cursor:pointer;min-width:0}
.rem-tog input{flex:none}
.rem-row input[type=time]{width:112px;padding:8px 10px;border-radius:9px;border:1px solid var(--hair);background:var(--tint);color:var(--text);font:600 var(--fs-text) var(--font-num)}
.rem-row input[type=time]:disabled{opacity:.5}
.rem-lbl{font-size:var(--fs-text);color:var(--text)}
.rem-note{font-size:var(--fs-klein);line-height:1.5;color:var(--text-dim);background:var(--tint);border:1px solid var(--border-soft);border-radius:10px;padding:10px 12px;margin:0 0 8px}
.rem-hint{font-size:var(--fs-mini);margin:8px 0 0}
.rem-dev{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:var(--fs-klein);color:var(--text-dim)}
#rem-days{flex:none}
#rem-days button{white-space:nowrap;padding:8px 14px;min-height:0}
.excl-note .excl-fix{margin-left:10px;vertical-align:middle}
/* Rechner: Kosten und Toleranz */
.calc-sec{margin:16px 0 8px;font:600 var(--fs-etikett) var(--font-num);letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
.pc-grid.pc-3{grid-template-columns:repeat(3,1fr)}
.calc-pct{position:relative}
.calc-pct input{padding-right:30px}
.calc-pct i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-style:normal;font-size:var(--fs-klein);color:var(--text-faint);pointer-events:none}
@media (max-width:640px){.pc-grid.pc-3{grid-template-columns:1fr 1fr}}
.calc-out{margin-top:6px}
/* Rechner: Aufbau wie im Sheet */
.pc-grid.pc-main{grid-template-columns:1fr 1.35fr 1fr 1fr}
.pc-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
@media (min-width:860px){.pc-row{grid-template-columns:repeat(5,1fr)}.pc-row:has(.calc-t:nth-child(6)){grid-template-columns:repeat(6,1fr)}}
.calc-t b span{font:inherit;color:inherit}
.pc-row .calc-t b{font-size:var(--fs-text);white-space:nowrap}
.pc-row .calc-t b.pc-size{color:var(--accent);font-size:var(--fs-titel)}
.pc-calc{border:1px solid var(--border-soft);border-radius:12px;overflow:hidden}
.pc-step{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(110px,.8fr) 2fr;gap:4px 14px;align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--border-soft);font-size:var(--fs-klein)}
.pc-step:last-child{border-bottom:0}
.pc-step:nth-child(6){border-top:1px solid var(--hair)}
.pc-step span{color:var(--text)}
.pc-step b{font:600 var(--fs-text) var(--font-num);text-align:right;white-space:nowrap}
.pc-step small{font-size:var(--fs-mini);color:var(--text-faint);line-height:1.4}
.pc-step:last-child b{font-size:var(--fs-text)}
.pc-calc-empty{margin:0;padding:12px 14px;color:var(--text-faint)}
.pc-more{margin-top:14px;border:1px solid var(--border-soft);border-radius:12px;padding:0 14px}
.pc-more summary{cursor:pointer;padding:12px 0;font-size:var(--fs-klein);font-weight:600;color:var(--text-dim)}
.pc-more[open] summary{padding-bottom:6px}
@media (max-width:760px){.pc-grid.pc-main{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pc-step{grid-template-columns:1fr auto}.pc-step small{grid-column:1/-1}}
/* Rechner: Detailgrad */
.pc-views{display:inline-flex;gap:2px;padding:3px;border-radius:11px;background:var(--tint);border:1px solid var(--border-soft);margin-bottom:16px}
.pc-view{padding:6px 12px;border-radius:8px;font:600 var(--fs-klein) var(--font-ui);color:var(--text-dim);transition:background .15s var(--ease),color .15s var(--ease)}
.pc-view:hover{color:var(--text)}
.pc-view.on{background:var(--surface-2);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
@media (max-width:520px){.pc-views{display:grid;grid-template-columns:repeat(4,1fr);width:100%}.pc-view{padding:7px 4px;font-size:var(--fs-mini)}}

/* ---------- 10 · Look ---------------------------------------------------
   Kerzen, Verlauf, Ringe und Hierarchie. Gilt für alle Ansichten; die Farben
   kommen aus den Token der gewählten Ansicht (--accent, --t1/--t2/--t3).
   ------------------------------------------------------------------------ */

/* Die Startseite und die Anmeldung stehen fest im Edge-Look — sie sind das
   Schaufenster, nicht der Arbeitsplatz, und wechseln deshalb nicht mit.
   Bewusst über Klassen statt IDs: sonst überstimmt die Startseite die
   Vorschaukarten der Ansichten, die ihre eigenen Farben zeigen sollen. */
.lp,
.auth-screen{
  --bg:#05070f; --surface:#0a0f1e; --surface-2:#101728; --surface-3:#182038;
  --border:#1d2b47; --border-soft:rgba(148,197,255,.09);
  --text:#eaeefb; --text-dim:#aab5d3; --text-faint:#8d99bd;
  --accent:#22d3ee; --accent-2:#b14cff; --accent-soft:rgba(34,211,238,.14);
  --pos:#4ade80; --pos-soft:rgba(74,222,128,.13);
  --neg:#fb7185; --neg-soft:rgba(251,113,133,.13);
  --on-accent:#031318; --glow:rgba(34,211,238,.16);
  --t1:#ff2d9b; --t2:#b14cff; --t3:#ff9a3c;
  --licht-1:rgba(34,211,238,.11); --licht-2:rgba(177,76,255,.09);
  /* Verläufe werden schon am <html> ausgerechnet — hier noch einmal setzen,
     sonst trägt das Schaufenster die Farben der gewählten Ansicht. */
  --verlauf:linear-gradient(180deg,#ff2d9b 0%,#b14cff 44%,#ff9a3c 100%);
  --verlauf-quer:linear-gradient(120deg,#ff2d9b,#b14cff 48%,#ff9a3c);
  /* Im Schaufenster steht die Schrift über dem Chart. Statt sie blaugrau abzusetzen,
     bleibt sie weiss und wird nur leiser — das hält auch über hellen Kerzen. */
  --text-dim:rgba(234,238,251,.86); --text-faint:rgba(234,238,251,.78);
  --accent-line:rgba(34,211,238,.42); --accent-wash:rgba(34,211,238,.08);
  --hair:rgba(234,238,251,.09); --hair-strong:rgba(234,238,251,.15);
  --tint:rgba(234,238,251,.04); --tint-2:rgba(234,238,251,.07);
  color:var(--text);
}
/* Der Grund gehört zum Schaufenster: auch er bleibt dunkel, solange es zu sehen ist. */
html[data-screen="landing"] body,
html[data-screen="auth"] body{
  --licht-1:rgba(34,211,238,.11); --licht-2:rgba(177,76,255,.09); --bg:#05070f;
}
/* Die Vorschaukarten führen ihre eigenen Farben mit — zwei Klassen schlagen eine. */
.lp .tp-card[data-theme]{color:var(--text)}

/* ---------- Grund: Raster und zwei Lichtquellen, wie im Bild ---------- */
body{
  background:
    radial-gradient(1200px 680px at 84% -12%, var(--licht-1), transparent 60%),
    radial-gradient(900px 540px at 2% 106%, var(--licht-2), transparent 62%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- Der Chart als Hintergrund ----------
   Nachgebaut nach einer echten Handelsansicht: zwei Farben, gefüllte Körper,
   dünne Dochte, eigenes feines Raster. Er steht auf Startseite und Anmeldung —
   dort, wo es keine echten Zahlen gibt. In der App wäre er Lärm: da ist die
   Equity-Kurve der Chart. */
/* Die Bildschirme behalten ihre eigene Positionierung. Früher stand hier
   position:relative für eine feste Chart-Ebene im Hintergrund — die gibt es
   nicht mehr, und sie hat das position:fixed der Startseite überstimmt.
   Damit verlor die Kopfleiste ihren Scroll-Container und klebte nicht mehr. */
.lp-hero-in{position:relative}
.lp-hero-in>*{position:relative;z-index:1}
/* Der Chart läuft hinter der Schrift durch. Statt den Chart zu dämpfen, bekommt die
   Schrift selbst einen weichen dunklen Hof — man sieht ihn nicht, aber die Zeile
   bleibt auch über einer hellen Kerze lesbar. */
.lp-hero-in .lp-sub,
.lp-hero-in .lp-hero-note,
.lp-hero-in .lp-badge,
.lp-tour-cap{text-shadow:0 1px 16px color-mix(in srgb,var(--bg) 92%,transparent), 0 0 4px color-mix(in srgb,var(--bg) 70%,transparent)}

.lp-hero::after,
#authScreen::after{
  content:"";position:absolute;left:0;right:0;pointer-events:none;
  background:var(--kerzen) bottom center/cover no-repeat;
  -webkit-mask-image:linear-gradient(transparent,#000 26%,#000 86%,transparent);
  mask-image:linear-gradient(transparent,#000 26%,#000 86%,transparent);
}
/* Auf der Startseite gross und mittig: er soll tragen, nicht nur andeuten. */
.lp-hero::after{top:min(13vh,120px);height:min(97vh,950px);z-index:0;opacity:.74}
#authScreen::after{left:0;right:0;top:0;bottom:0;z-index:0;opacity:.34}
#authScreen>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .lp-hero::after{opacity:.4}
  #authScreen::after{opacity:.2}
}

/* ---------- Hierarchie: EIN Element ist gross, der Rest ist ruhig ---------- */
.stat-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.stat:first-child{grid-column:1/-1;padding:22px 26px 24px}
/* Erst ab echter Schreibtisch-Breite nebeneinander — sonst brechen die Beschriftungen um */
@media (min-width:1180px){
  .stat-grid{grid-template-columns:repeat(6,1fr)}
  .stat{grid-column:span 1}
  .stat:first-child{grid-column:span 3}
}
.stat:first-child .val{
  font-size:clamp(32px,3.2vw + .5rem,54px);
  font-weight:700;letter-spacing:-.05em;margin-top:12px;
  /* Der Schein folgt der Zahl: grün im Plus, rot im Minus — nie cyan. */
  text-shadow:0 0 34px color-mix(in srgb, currentColor 42%, transparent);
}
.stat:first-child .lbl{font-size:var(--fs-etikett);letter-spacing:.2em}
.stat:first-child .meta{margin-top:14px;font-size:var(--fs-klein)}
.stat:not(:first-child) .val{font-size:clamp(16px,1.1vw + .35rem,22px)}

/* Der Lichtschimmer in der Ecke wird stärker und bekommt einen Ring darunter */
.stat::before{opacity:.9}
.stat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,currentColor 30%,transparent),transparent);
  opacity:.5;
}
.stat.pos::after{color:var(--pos)}
.stat.neg::after{color:var(--neg)}
.stat.accent::after{color:var(--accent)}

/* ---------- Der Chart ist der Held, nicht eine Kachel unter vielen ---------- */
.row.r-2{grid-template-columns:1.72fr 1fr}
.eq-box{min-height:330px}
.chart-wrap::before{
  background:
    radial-gradient(120% 90% at 100% -14%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 58%),
    radial-gradient(90% 70% at 0% 110%, color-mix(in srgb,var(--accent-2) 8%,transparent), transparent 60%);
}
.chart-wrap{border-color:color-mix(in srgb,var(--accent) 16%,transparent)}

/* ---------- Ringe und gepunktete Verbindungen aus dem Bild ---------- */
.nav a,
.nav button{border-radius:11px}
.nav .on,
.nav a.on,
.nav button.on{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent),
             0 0 24px -6px color-mix(in srgb,var(--accent) 45%,transparent);
}
.nav .on svg{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 60%,transparent))}

/* Kennzahlen-Zeilen: gepunkteter Leader zwischen Wort und Zahl */
.card > div[style*="border-bottom"]{
  border-bottom:1px dotted var(--hair)!important;
}

/* ---------- Der eine laute Knopf, wie die Cyan-Leiste im Bild ---------- */
.btn-primary{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),
             0 12px 30px -12px color-mix(in srgb,var(--accent) 70%,transparent);
}
.btn-primary:hover{
  box-shadow:0 0 0 1px var(--accent),
             0 14px 36px -10px color-mix(in srgb,var(--accent) 85%,transparent);
}

/* ---------- Typo: Überschriften bekommen Gewicht ---------- */
#pageTitle{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
}
.card-head h3{font-weight:700;letter-spacing:-.02em}

/* ---------- Kleine Geräte: der Held bleibt der Held ---------- */
@media (max-width:1000px){
  .row.r-2{grid-template-columns:1fr}
}
/* Vier Kacheln, zwei Spalten: die letzte füllt die Reihe, statt ein Loch zu lassen */
@media (max-width:1179px){
  .stat-grid>.stat:last-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{background-attachment:scroll}   /* fixed ruckelt auf iOS */
  .eq-box{min-height:0}
}
/* Weniger Bewegung, weniger Leuchten — Schein ist auch Reiz. */
@media (prefers-reduced-motion:reduce){
  .stat:first-child .val{text-shadow:none}
  .nav .on svg{filter:none}
}

/* ---------- Der Verlauf aus dem Bild: Magenta -> Violett -> Orange ----------
   Er gehört auf die grossen Schlagzeilen, dorthin, wo er im Bild auch steht.
   Geld bleibt grün und rot — nicht aus Geschmack, sondern damit man ein Minus
   auch dann sofort sieht, wenn man müde ist. */
.lp-h1,
.lp-sec-head h2{
  color:var(--t2);                     /* Rückfall, falls der Zuschnitt fehlt */
  background:var(--verlauf);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .lp-h1,
  .lp-sec-head h2{background:none;-webkit-text-fill-color:currentColor}
}
/* Der Cyan-Balken unter der Schlagzeile, wie im Bild */
.lp-h1::after{
  content:"";display:block;width:88px;height:4px;border-radius:3px;
  margin:26px auto 0;background:var(--accent);
  box-shadow:0 0 22px -2px color-mix(in srgb,var(--accent) 80%,transparent);
}
/* Die Plakette oben bekommt den Ring aus dem Bild */
.lp-badge{
  border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  box-shadow:0 0 26px -8px color-mix(in srgb,var(--accent) 60%,transparent);
}
/* Der Hauptknopf: Verlauf statt flächigem Cyan — das ist der eine warme Punkt auf der Seite */
.lp-btn-solid{
  background:var(--verlauf-quer);color:var(--on-accent);border:0;
  box-shadow:0 14px 34px -14px var(--t2), 0 0 0 1px color-mix(in srgb,var(--t1) 40%,transparent);
}
.lp-btn-solid:hover{
  box-shadow:0 18px 42px -12px var(--t1), 0 0 0 1px color-mix(in srgb,var(--t3) 55%,transparent);
}
/* Die Zahlen im Messstreifen: dieselbe Wärme, klein dosiert */
.lp-stat-v{
  background:var(--verlauf-quer);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--t3);
}


/* =========================================================
   Die Bildsprache der Anzeige, vollständig
   ========================================================= */

/* ---------- Die Illustrationskarten bleiben dunkel ----------
   Weiss auf Schwarz sah im Bild gut aus, in der Seite aber nicht: es reisst Löcher
   und blendet. Stattdessen bekommen die dunklen Karten das, was sie im Bild auszeichnet —
   eine Lichtkante oben, Tiefe darunter und einen farbigen Schimmer aus der Ecke. */
.lp-feat-vis{
  border-radius:20px;border:1px solid var(--border-soft);
  background:linear-gradient(168deg,color-mix(in srgb,var(--surface) 80%,var(--ton,var(--accent))) 0%,var(--surface) 58%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 7%,transparent), 0 34px 64px -30px color-mix(in srgb,var(--shadow-farbe,#000) 100%,transparent);
}
.lp-feat-vis::after{
  background:radial-gradient(74% 56% at 50% 0,color-mix(in srgb,var(--ton,var(--accent)) 12%,transparent),transparent 70%);
}
/* Die Karte trägt denselben Ton wie ihr Ring */
.lp-feat:nth-of-type(4n+2){--ton:var(--accent)}
.lp-feat:nth-of-type(4n+3){--ton:var(--t2)}
.lp-feat:nth-of-type(4n+4){--ton:var(--t3)}
.lp-feat:nth-of-type(4n+1){--ton:var(--t1)}

/* ---------- Ring und gepunkteter Verbinder ----------
   Im Bild hängt an jeder Karte ein Kreis mit dünnem Ring, verbunden durch vier Punkte. */
.lp-feat-txt .lp-ic,
.lp-card .lp-ic{
  position:relative;border-radius:50%;background:transparent;
  border:1.5px solid color-mix(in srgb,var(--ring) 55%,transparent);
  color:var(--ring);
  box-shadow:0 0 26px -8px color-mix(in srgb,var(--ring) 70%,transparent),
             inset 0 0 18px -10px color-mix(in srgb,var(--ring) 80%,transparent);
}
.lp-feat-txt .lp-ic{width:52px;height:52px}
.lp-feat-txt .lp-ic svg{width:24px;height:24px}
.lp-feat-txt .lp-ic::after{
  content:"";position:absolute;top:50%;left:calc(100% + 12px);width:72px;height:0;
  border-top:2px dotted color-mix(in srgb,var(--ring) 45%,transparent);
}
.lp-feat.rev .lp-feat-txt .lp-ic::after{left:auto;right:calc(100% + 12px)}
@media (max-width:860px){.lp-feat-txt .lp-ic::after{display:none}}

/* Die Farben wechseln durch — wie die bunten Punkte und Münzen im Bild */
html{--ring:var(--accent)}
.lp-feat:nth-of-type(4n+2) .lp-ic{--ring:var(--accent)}
.lp-feat:nth-of-type(4n+3) .lp-ic{--ring:var(--t2)}
.lp-feat:nth-of-type(4n+4) .lp-ic{--ring:var(--t3)}
.lp-feat:nth-of-type(4n+1) .lp-ic{--ring:var(--t1)}
.lp-card:nth-of-type(5n+1) .lp-ic{--ring:var(--accent)}
.lp-card:nth-of-type(5n+2) .lp-ic{--ring:var(--t2)}
.lp-card:nth-of-type(5n+3) .lp-ic{--ring:var(--t3)}
.lp-card:nth-of-type(5n+4) .lp-ic{--ring:var(--t1)}
.lp-card:nth-of-type(5n+5) .lp-ic{--ring:var(--accent)}

/* ---------- Die Überschrift der Merkmale bekommt Gewicht, wie die Beschriftungen im Bild ---------- */
.lp-feat-txt h3{font-weight:800;letter-spacing:-.04em}

/* ---------- Der Messstreifen: jede Zahl ihre eigene Farbe ---------- */
.lp-stat:nth-child(1) .lp-stat-v{background:var(--accent);-webkit-background-clip:text;background-clip:text}
.lp-stat:nth-child(2) .lp-stat-v{background:var(--t2);-webkit-background-clip:text;background-clip:text}
.lp-stat:nth-child(3) .lp-stat-v{background:var(--t3);-webkit-background-clip:text;background-clip:text}
.lp-stat:nth-child(4) .lp-stat-v{background:var(--t1);-webkit-background-clip:text;background-clip:text}


/* =========================================================
   Die App in derselben Sprache — Farben statt nur Cyan
   ========================================================= */

/* ---------- Die vier Kennzahlen bekommen je eine eigene Farbe ----------
   Im Bild hat jede Karte ihren eigenen Ring. Die erste bleibt Geld (grün/rot),
   die drei anderen werden Cyan, Violett, Orange. */
.stat:nth-child(2){--ton:var(--accent)}
.stat:nth-child(3){--ton:var(--t2)}
.stat:nth-child(4){--ton:var(--t3)}
.stat:nth-child(n+2) .lbl{color:color-mix(in srgb,var(--ton) 78%,var(--text-faint))}
.stat:nth-child(n+2)::before{
  background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--ton) 13%,transparent),transparent 70%);
}
.stat:nth-child(n+2)::after{color:var(--ton);opacity:.75}
/* Die Zahl darin bleibt grün oder rot, wenn es Geld ist — das ist nicht verhandelbar. */
.stat.accent .val{color:var(--ton)}

/* ---------- Die Marke im Seitenstreifen trägt den Verlauf ---------- */
.brand-name{
  background:var(--verlauf-quer);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brand-mark{
  background:var(--verlauf-quer);color:var(--on-accent);border:0;
  box-shadow:0 0 22px -6px var(--t2);
}

/* ---------- Leere Zustände: dort, wo Platz ist, darf es sprechen ---------- */
.empty h4{
  background:var(--verlauf);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-family:var(--font-display);font-weight:800;
}
.empty svg{color:var(--t2);opacity:.8}

/* ---------- Kategorien: Systeme, Marktlagen, Reiter bekommen die Palette ---------- */
.tag:nth-of-type(4n+1){background:var(--tag1-bg);color:var(--tag1-fg)}
.tag:nth-of-type(4n+2){background:var(--tag2-bg);color:var(--tag2-fg)}
.tag:nth-of-type(4n+3){background:var(--tag3-bg);color:var(--tag3-fg)}
.tag:nth-of-type(4n+4){background:var(--tag4-bg);color:var(--tag4-fg)}

/* ---------- Der Kopfbereich bekommt den Verlauf als feine Kante ---------- */
.topbar{
  border-bottom:1px solid transparent;
  border-image:var(--verlauf-quer) 1;
  border-image-slice:1;
}

/* ---------- Analyse-Karten: Ring-Sprache wie im Bild ---------- */
.an-card:nth-of-type(4n+1){--ton:var(--accent)}
.an-card:nth-of-type(4n+2){--ton:var(--t2)}
.an-card:nth-of-type(4n+3){--ton:var(--t3)}
.an-card:nth-of-type(4n+4){--ton:var(--t1)}
.an-card{border-top:2px solid color-mix(in srgb,var(--ton,var(--accent)) 45%,transparent)}

/* ---------- Goalcrushers: Wochenziele als Punktebogen ----------
   Aufbau wie in der Vorlage: links der Fokus mit den Aufgaben und der Summe,
   rechts die Belohnungsleiter, die Notizen darunter. Eine Spalte "Punkte" —
   keine Zusätze, die es im Bogen nicht gibt. */
.gc-wrap{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;margin-bottom:16px;align-items:start}
.gc-wrap>*{min-width:0;margin-bottom:0}

.gc-focus{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.gc-focus .gc-l{font-size:var(--fs-etikett);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.gc-focus-in{flex:1;min-width:190px;font-family:var(--font-display);font-size:var(--fs-titel);font-weight:700;letter-spacing:-.02em;color:var(--accent-2)}
.gc-focus-in::placeholder{font-family:var(--font-ui);font-size:var(--fs-text);font-weight:400;letter-spacing:0;color:var(--text-faint)}

.gc-tab{width:100%;border-collapse:collapse}
.gc-tab th{text-align:left;font-size:var(--fs-etikett);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);font-weight:600;padding:0 0 9px}
.gc-tab td{padding:4px 0;border-top:1px solid var(--border-soft)}
.gc-tab tbody tr:first-child td{border-top:0}
.gc-tab .gc-pt{width:82px;text-align:right}
.gc-tab .gc-x{width:34px}
.gc-tab td .j-inp{width:100%}
.gc-pt .j-inp{width:62px;text-align:center;font-weight:700}
/* Nicht gewertet ("/"): die Zeile bleibt blass, statt falsch nach "erledigt" auszusehen. */
.gc-tab tr.offen td{opacity:.62}
.gc-tab tr.gc-leer td{padding:18px 0;color:var(--text-faint);font-size:var(--fs-text);border-top:0}
.gc-tab tfoot th{border-top:2px solid var(--hair-strong);padding:14px 0 0;font-size:var(--fs-klein);letter-spacing:-.01em;
  text-transform:none;color:var(--text);font-family:var(--font-display);font-weight:700}
.gc-tab tfoot .gc-pt b{font-family:var(--font-num);font-size:var(--fs-zahl-m);letter-spacing:-.04em;color:var(--accent)}

/* Die Belohnungsleiter: erreichte Stufen leuchten, die aktuelle trägt den Verlauf */
.gc-reward-add{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.gc-reward-add .j-inp{flex:1;min-width:150px}

@media (max-width:900px){
  .gc-wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  .gc-tab .gc-pt{width:70px}
  .gc-pt .j-inp{width:56px}
  .gc-focus-in{font-size:var(--fs-titel)}
}

/* Abhaken statt Punkte eintippen: links das Häkchen, rechts die Punkte der Aufgabe */
.gc-tab .gc-ck{width:40px;padding-right:4px}
.gc-haken{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--hair-strong);
  background:var(--tint);color:transparent;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.gc-haken svg{width:14px;height:14px}
.gc-haken:hover{border-color:var(--accent-line);color:color-mix(in srgb,var(--accent) 45%,transparent)}
.gc-haken.an{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.gc-haken.leer{opacity:.45}
.gc-tab tr.an td .j-inp:not(.tnum){color:var(--text-dim)}
.gc-tab tr.gc-blank td{opacity:.72}
.gc-tab tr.gc-blank td:focus-within{opacity:1}
.gc-pt-leer{display:inline-block;width:62px;text-align:center;color:var(--text-faint);font-weight:600}
.gc-feld-dazu{margin-top:10px}
/* Fertig: die Woche abschliessen */
.gc-fertig{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:14px 18px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.gc-fertig span{flex:1;min-width:200px;font-size:var(--fs-text);color:var(--text);display:flex;align-items:center;gap:8px}
.gc-fertig span svg{width:16px;height:16px;color:var(--pos);flex-shrink:0}
.gc-fertig .btn svg{width:16px;height:16px}
.gc-fertig.ok{background:var(--surface);border-color:var(--border-soft)}
.gc-fertig.ok span{color:var(--text-dim)}
/* Die eigene Wochennummer, direkt im Kopf einstellbar */
.gc-nr{display:inline-flex;align-items:baseline;gap:2px}
.gc-nr-in{width:3.2ch;min-width:2.2ch;padding:0 2px;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;
  font:inherit;letter-spacing:inherit;-moz-appearance:textfield}
.gc-nr-in::-webkit-inner-spin-button,.gc-nr-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.gc-nr-in:hover{border-color:var(--hair);background:var(--tint)}
.gc-nr-in:focus{outline:none;border-color:var(--accent-line);background:var(--tint)}
@media (max-width:640px){
  .gc-tab .gc-ck{width:32px}
  .gc-tab .gc-pt{width:58px}.gc-pt .j-inp{width:50px}.gc-pt-leer{width:50px}.gc-tab .gc-x{width:30px}
  /* Wochenkopf: Pfeile und Titel in einer Zeile, Knöpfe darunter über die ganze Breite */
  .w-head{gap:6px 8px}
  .w-head .j-side{margin-left:0!important;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .w-head .j-side .btn{justify-content:center}
  .w-days{grid-template-columns:repeat(auto-fit,minmax(62px,1fr))}
  .w-day{padding:8px}
}

/* ---------- Erfassen: Eröffnen / Geschlossen, Checkliste, Schliessen ---------- */
.q-art{margin-bottom:14px}
.quick-form.auf .q-zu,.quick-form.zu .q-auf{display:none!important}
.chk-liste{margin:2px 0 14px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--hair);display:flex;flex-direction:column;gap:8px}
.chk-liste[hidden]{display:none}
.chk-kopf{font:600 var(--fs-etikett) var(--font-num);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.chk-zeile{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-klein);color:var(--text-dim);line-height:1.45;cursor:pointer}
.chk-zeile input{margin-top:0}
.chk-zeile b{color:var(--text);font-weight:600}
.chk-zeile:has(input:checked) span{color:var(--text)}
.s-info{margin:0 0 12px;font-size:var(--fs-klein)}
.row-actions .row-close{color:var(--accent)}

/* ---------- Bybit ---------- */
.by-text{margin:0 0 12px;font-size:var(--fs-klein);line-height:1.55}
.by-anleitung{margin:0 0 14px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--hair)}
.by-anleitung summary{cursor:pointer;font-weight:600;font-size:var(--fs-klein)}
.by-anleitung ol{margin:10px 0 2px 18px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-klein);color:var(--text-dim);line-height:1.5}
.by-ok{margin:0 0 12px;font-size:var(--fs-klein);color:var(--pos)}
#byOut p{margin:12px 0 8px;font-size:var(--fs-klein)}

/* Art der Aufgabe (einmal, täglich, je Trade) und die Tages-Knöpfe */
.gc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:5px 0 2px 2px}
.gc-art-sel{-webkit-appearance:none;appearance:none;padding:2px 20px 2px 8px;margin-left:-8px;border-radius:999px;border:1px solid transparent;
  background:transparent no-repeat right 7px center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  color:var(--text-dim);font:500 var(--fs-mini) var(--font-ui);cursor:pointer}
.gc-art-sel:hover,.gc-art-sel:focus{border-color:var(--hair);background-color:var(--tint);color:var(--text);outline:none}
.gc-art-sel{color:var(--text-faint)}
.gc-tage{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.gc-tag{min-width:30px;height:26px;padding:0 6px;border-radius:999px;border:1px solid var(--hair-strong);background:var(--tint);
  color:var(--text-dim);font:600 var(--fs-mini) var(--font-ui);transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.gc-tag:hover{border-color:var(--accent-line);color:var(--text)}
.gc-tag.an{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.gc-tage-n{margin-left:4px;font-size:var(--fs-mini);color:var(--text-faint)}
.gc-art-mark{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px dashed var(--hair-strong);
  font:600 var(--fs-etikett) var(--font-num);color:var(--text-faint)}
.gc-pt-feld{display:inline-flex;align-items:baseline;gap:3px;justify-content:center}
.gc-pt-feld small{font-size:var(--fs-mini);color:var(--text-faint)}
.gc-tab .gc-x{width:40px}
.gc-tab td{vertical-align:top}
.gc-tab td.gc-ck,.gc-tab td.gc-pt,.gc-tab td.gc-x{padding-top:8px}

/* ---------- Goalcrushers teilen: Vorschau der Bildkarte ---------- */
.gc-share-prev{border-radius:14px;overflow:hidden;border:1px solid var(--border-soft);background:var(--bg);line-height:0}
.gc-share-prev img{width:100%;height:auto;display:block}
.gc-share-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.gc-share-btns .btn{flex:1;min-width:140px;justify-content:center}
.gc-art,.gc-format{margin-bottom:14px;width:100%}
.gc-format button{flex:1}
/* Querformat: der Dialog wird breiter, damit man die Karte auch lesen kann */
.modal.gc-share.quer{max-width:min(920px,calc(100vw - 32px))!important}
.gc-art button{flex:1}
.gc-carry{flex-shrink:0}

/* ---------- Woche: Kopf, Übergabe, Archiv ----------
   Die Woche ist die Klammer um alles hier — sie steht jetzt gross da statt als Zeile. */
.w-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.w-head-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.w-head-t b{font-family:var(--font-display);font-size:clamp(20px,2.2vw,27px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.w-head-t span{font-size:var(--fs-klein);color:var(--text-faint);letter-spacing:-.005em}
/* Die Übergabe: was fehlt, und was als Nächstes dran ist. Kein automatisches Umschalten. */
.w-hand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding:12px 16px;
  border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.w-hand span{flex:1;min-width:180px;font-size:var(--fs-text);color:var(--text)}
.w-hand.ok{background:var(--tint);border-color:var(--border-soft)}
.w-hand.ok span{color:var(--text-dim)}
.w-arch{list-style:none;display:flex;flex-direction:column;gap:1px}
.w-arch button{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;padding:12px 14px;border-radius:10px;background:var(--tint);color:var(--text)}
.w-arch button:hover{background:var(--tint-2)}
.w-arch b{font-family:var(--font-num);font-size:var(--fs-klein);color:var(--accent);flex-shrink:0}
.w-arch-f{flex:1;min-width:0;font-size:var(--fs-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-arch-f i{color:var(--text-faint);font-style:normal}
.w-arch-p{font-size:var(--fs-klein);color:var(--text-dim);flex-shrink:0;display:flex;gap:8px;align-items:baseline}
.w-arch-p b{color:var(--text);font-size:var(--fs-titel)}
.w-arch-p em{font-style:normal;padding:2px 7px;border-radius:6px;background:var(--tint-2);color:var(--text-dim);font-size:var(--fs-mini)}
@media (max-width:640px){.w-arch-f{white-space:normal}}

/* ---------- Serie und eingelöste Belohnung ---------- */
.gc-serie{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:9px;
  background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);
  font:600 var(--fs-mini) var(--font-ui);letter-spacing:-.005em;margin-right:8px;white-space:nowrap}
.gc-serie svg{width:14px;height:14px}
.gc-rw-take{margin-top:14px;width:100%;justify-content:center}
.gc-taken{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:10px 14px;border-radius:10px;
  background:var(--pos-soft);color:var(--pos);font:600 var(--fs-klein) var(--font-ui)}
.gc-taken span{flex:1;min-width:120px}

/* ---------- Saisons ---------- */
.gc-sais{padding:5px 11px;border-radius:9px;background:color-mix(in srgb,var(--t2) 15%,transparent);
  color:color-mix(in srgb,var(--t2) 84%,var(--text));font:600 var(--fs-mini) var(--font-ui);margin-right:8px;white-space:nowrap}
.gc-sais:hover{background:color-mix(in srgb,var(--t2) 24%,transparent)}
.gc-sais.leer{background:var(--tint);color:var(--text-faint)}
.se-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.se-list li{padding:12px 14px;border-radius:12px;background:var(--tint);border:1px solid transparent}
.se-list li.on{border-color:color-mix(in srgb,var(--accent) 34%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.se-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.se-pick{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:2px;color:var(--text)}
.se-pick b{font-family:var(--font-display);font-size:var(--fs-titel);letter-spacing:-.02em}
.se-pick span{font-size:var(--fs-mini);color:var(--text-faint)}
.se-list li.on .se-pick span{color:var(--accent)}
.w-arch-sais{font:600 var(--fs-etikett) var(--font-num);letter-spacing:.16em;text-transform:uppercase;color:var(--t2);margin:16px 0 7px;padding:0 2px}
.w-arch-sais:first-child{margin-top:0}
.w-arch-sais.leer{color:var(--text-faint)}
.w-arch-take{font-style:normal;color:var(--pos)}

/* ---------- Aufgaben mit Punkten aus den Trades ---------- */
.gc-tab tr.auto .gc-pt{color:var(--t2)}
.gc-auto{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.gc-auto>b{font-family:var(--font-num);font-size:var(--fs-titel);color:var(--t2)}
.gc-auto-je{width:40px!important;text-align:center;font-size:var(--fs-mini);padding:4px 2px!important;opacity:.8}
.gc-auto-btn{width:30px;height:30px;color:var(--text-faint)}
.gc-auto-btn svg{width:15px;height:15px}
.gc-auto-btn.on{color:var(--t2);background:color-mix(in srgb,var(--t2) 14%,transparent)}
.gc-warn{margin-top:10px;padding:10px 13px;border-radius:10px;font-size:var(--fs-klein);line-height:1.5;
  background:color-mix(in srgb,var(--t3) 11%,transparent);color:color-mix(in srgb,var(--t3) 82%,var(--text))}

/* ---------- Was das Schreiben bringt ---------- */
.jw-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin:0 0 12px;
  border-radius:11px;background:var(--tint);border:1px solid var(--border-soft)}
.jw-row div{display:flex;flex-direction:column;gap:2px;min-width:0}
.jw-row b{font-size:var(--fs-klein);font-weight:600;letter-spacing:-.01em}
.jw-row small{font-size:var(--fs-mini);color:var(--text-faint)}
.jw-row span{font-family:var(--font-num);font-weight:700;font-size:var(--fs-titel);white-space:nowrap}
.jw-row.pos span{color:var(--pos)}
.jw-row.neg span{color:var(--neg)}

/* ---------- Einführung: Scheinwerfer auf das echte Element ----------
   Das Loch ist ein leeres Kästchen mit einem riesigen Schatten — dadurch bleibt
   genau ein Ausschnitt hell und alles andere liegt im Dunkeln. */
#tourBox{position:fixed;inset:0;z-index:400;pointer-events:none}
#tourBox[hidden]{display:none}
#tourHole{position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.72), 0 0 0 2px var(--accent), 0 0 34px -4px var(--accent);
  transition:left .22s var(--ease),top .22s var(--ease),width .22s var(--ease),height .22s var(--ease)}
#tourHole[hidden]{display:none}
#tourBox>#tourHole[hidden]~#tourCard{box-shadow:0 0 0 9999px rgba(0,0,0,.72),var(--shadow)}
#tourCard{position:fixed;width:min(360px,calc(100vw - 32px));pointer-events:auto;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;padding:20px 22px 18px;
  box-shadow:var(--shadow);z-index:401}
#tourCard .tour-step{font:600 var(--fs-etikett) var(--font-num);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
#tourCard h3{font-family:var(--font-display);font-size:var(--fs-kopf);font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
#tourCard p{font-size:var(--fs-text);line-height:1.6;color:var(--text-dim);letter-spacing:-.008em}
.tour-btns{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.tour-btns .btn-primary{margin-left:auto}
@media (max-width:520px){
  #tourCard{left:16px!important;right:16px;width:auto;bottom:16px!important;top:auto!important;transform:none!important}
}
@media (prefers-reduced-motion:reduce){#tourHole{transition:none}}

/* ---------- Touch: alles, was man antippt, ist mindestens gut 36 px hoch ----------
   Nur auf Geräten mit Finger — am Schreibtisch bleibt es so kompakt wie bisher. */
@media (pointer:coarse){
  .range-seg button{min-height:36px;padding:0 14px}
  .q-chip{min-height:34px;padding:0 13px}
  .j-seg button{min-height:36px}
  .j-seg.sm button{min-height:34px;padding:0 12px}
  .gc-tag{min-width:36px;height:34px}
  .lbl-act{padding:6px 0;margin:-6px 0}
  .lp-lang-opt{min-height:34px;min-width:34px}
}
@media (max-width:640px){
  /* Zeitraum: die Knöpfe teilen sich die ganze Breite */
  .range-wrap{display:flex;align-items:center;gap:12px;width:100%}
  .range-wrap .range-seg{flex:1}
  .range-seg button{flex:1}
}
@media (max-width:640px){
  /* Kennzahl-Etiketten bleiben einzeilig — lieber enger gesperrt als umgebrochen */
  .sum-tile{padding:14px 14px}
  .sum-l{letter-spacing:.08em}
}
@media (max-width:480px){
  /* Detail-Fenster: Löschen nur als Symbol, "Schliessen" macht das × oben —
     so passen Trade schliessen und Bearbeiten nebeneinander, ohne dass etwas herausragt */
  #detailModal .foot-zu,#sysDetailModal .foot-zu{display:none}
  #detailModal .btn-danger-soft span,#sysDetailModal .btn-danger-soft span{display:none}
  #detailModal .btn-danger-soft,#sysDetailModal .btn-danger-soft{padding-left:13px;padding-right:13px}
}
@media (max-width:640px){
  /* Auf dem Handy liegen die Kerzen genau hinter Vertrauenszeile und Rundgang-Titel —
     etwas leiser, damit die kleine Schrift darüber lesbar bleibt */
  .lp-hero::after{opacity:.5}
}
@media (max-width:640px){
  /* Dashboard auf dem Handy: die grosse Zahl oben, darunter die drei Kennzahlen als
     eine ruhige Liste — Etikett links in seiner Farbe, Wert rechts. Keine 2+1-Lücke. */
  .stat-grid{grid-template-columns:1fr;gap:0}
  .stat:first-child{margin-bottom:14px}
  .stat:nth-child(n+2){display:grid;grid-template-columns:1fr auto;grid-template-areas:"lbl val" "meta val";
    align-items:center;column-gap:14px;padding:15px 18px;border-radius:0;box-shadow:none;border-top-width:0}
  .stat:nth-child(2){border-top-width:1px;border-radius:var(--radius) var(--radius) 0 0}
  .stat:last-child{border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--card-shadow)}
  .stat:nth-child(n+2) .lbl{grid-area:lbl}
  .stat:nth-child(n+2) .meta{grid-area:meta;margin-top:5px}
  .stat:nth-child(n+2) .val{grid-area:val;margin:0;font-size:var(--fs-kopf);text-align:right}
  .stat:nth-child(n+2)::after{display:none}
  .stat:nth-child(n+2)::before{background:radial-gradient(60% 140% at 100% 50%,color-mix(in srgb,var(--ton) 10%,transparent),transparent 70%)}
}

/* ---------- Trade teilen ---------- */
.tk-wert{margin-bottom:14px;width:100%}
.tk-wert button{flex:1}
.tk-wert button[hidden]{display:none}
.modal-head .det-teilen{margin-left:auto;margin-right:-6px}
.modal-head .det-teilen svg{width:18px;height:18px}

/* ---------- Belohnungen im Bogen: ab Punkten · Belohnung · × ---------- */
.gc-rw-tab{width:100%;border-collapse:collapse;margin-bottom:4px}
.gc-rw-tab th{text-align:left;font-size:var(--fs-etikett);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);font-weight:600;padding:0 0 9px}
.gc-rw-tab td{padding:4px 0;border-top:1px solid var(--border-soft)}
.gc-rw-tab tbody tr:first-child td{border-top:0}
.gc-rw-tab td .j-inp{width:100%}
.gc-rw-tab .gc-x{width:34px}
.gc-rw-tab tr.gc-blank td{opacity:.72}
.gc-rw-tab tr.gc-blank td:focus-within{opacity:1}
.gc-rw-tab .gc-rw-pt{width:92px;text-align:left;padding-right:10px}
.gc-rw-tab .gc-rw-pt .j-inp{width:76px;text-align:center;font-weight:700}
.gc-rw-tab tr.hin .gc-rw-pt .j-inp{color:var(--accent)}
/* Die erreichte Stufe leuchtet — wie vorher in der Leiter */
.gc-rw-tab tr.on td .j-inp{border-color:var(--accent-line);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.gc-rw-tab tr.on .gc-rw-pt .j-inp{color:var(--accent)}
@media (max-width:640px){.gc-rw-tab .gc-rw-pt{width:66px;padding-right:6px}.gc-rw-tab .gc-rw-pt .j-inp{width:58px}}
@media (max-width:370px){.topbar-mark{display:none!important}}

/* ---------- Einstellungen: Gruppen mit kleinen Unterüberschriften ---------- */
.set-sub{font-size:var(--fs-mini);font-weight:600;color:var(--text-dim);margin:0 0 9px}
.set-knoepfe+.set-sub,.set-knoepfe+input+.set-sub{margin-top:18px}
.set-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.set-gap{margin-top:22px}
.set-hint{margin:0;font-size:var(--fs-mini);line-height:1.5}
.set-gefahr .set-sub{margin-top:20px}
.set-gefahr .settings-label{color:var(--neg)}

/* ---------- Hero: Raster und Kerzen über die ganze Breite ----------
   Der Hero ist auf --lp-w begrenzt; Raster und Chart hingen an seinem Kasten und
   endeten links und rechts hart. Jetzt laufen sie wie in den anderen Abschnitten
   von Rand zu Rand — gleiche Masche, gleicher Ursprung (x = 0), also bündig. */
.lp-hero::before,
.lp-hero::after{left:calc(50% - 50vw);right:calc(50% - 50vw)}

/* ---------- Backtest ---------- */
.bt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.bt-rechts{position:sticky;top:0;display:flex;flex-direction:column;gap:14px}
.bt-go{width:100%;justify-content:center}
.bt-sek{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--border-soft)}
.bt-sek:last-child{border-bottom:0;margin-bottom:0}
.bt-sek>.j-inp,.bt-sek select.j-inp{width:100%}
.bt-zwei{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bt-zwei select.j-inp{width:100%}
.bt-felder{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.bt-felder:empty{display:none}
.bt-f{display:flex;flex-direction:column;gap:5px;flex:1 1 90px;min-width:0}
.bt-f.breit{flex:2 1 160px}
.bt-f span{font-size:var(--fs-mini);font-weight:600;color:var(--text-dim)}
.bt-f .j-inp{width:100%}
.bt-erkl{margin:8px 0 0;font-size:var(--fs-mini);line-height:1.5;color:var(--text-faint)}
.bt-dir{margin-top:12px}
.bt-dir button{flex:1}
.bt-zeile{padding:12px 14px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--hair);margin-top:10px}
.bt-zeile-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bt-zeile-kopf b{font-size:var(--fs-klein);font-weight:600}
.bt-zeile .bt-felder{margin-top:8px}
.bt-dazu{margin-top:10px;width:100%}
.bt-lade{margin:6px 0}
/* Ergebnis */
.bt-kopf{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.bt-ring{width:150px;height:150px}
.bt-ring-z{font:700 var(--fs-zahl-l) var(--font-num);fill:var(--text);letter-spacing:-.04em}
.bt-ring-l{font:600 var(--fs-etikett) var(--font-num);fill:var(--text-faint);letter-spacing:.14em;text-transform:uppercase}
.bt-ev{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.bt-ev span{font-size:var(--fs-etikett);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-family:var(--font-num)}
.bt-ev b{font:700 var(--fs-zahl-xl) var(--font-num);letter-spacing:-.04em;line-height:1.05}
.bt-ev small{font-size:var(--fs-mini);color:var(--text-dim)}
.bt-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:11px;overflow:hidden}
.bt-k{background:var(--surface);padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.bt-k span{font-size:var(--fs-etikett);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-k b{font:600 var(--fs-titel) var(--font-num);letter-spacing:-.03em;white-space:nowrap}
.bt-kurve-box{padding:12px 14px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--hair)}
.bt-kurve-kopf{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px;flex-wrap:wrap}
.bt-kurve-kopf span{font-size:var(--fs-klein);font-weight:600}
.bt-kurve-kopf small{font-size:var(--fs-mini);color:var(--text-faint)}
.bt-kurve{width:100%;height:130px;display:block}
.bt-halb{margin:0;font-size:var(--fs-mini);line-height:1.5;color:var(--text-dim)}
.bt-warn{margin:0;padding:10px 12px;border-radius:var(--radius-sm);font-size:var(--fs-mini);line-height:1.5;color:var(--text);
  background:color-mix(in srgb,var(--warn) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.bt-liste summary{cursor:pointer;font-size:var(--fs-klein);font-weight:600;padding:4px 0}
.bt-tab-wrap{max-height:320px;overflow:auto;margin-top:8px}
.bt-tab{width:100%;border-collapse:collapse;font-size:var(--fs-mini)}
.bt-tab th{text-align:left;color:var(--text-faint);font-weight:600;padding:0 6px 6px;position:sticky;top:0;background:var(--surface)}
.bt-tab td{padding:6px;border-top:1px solid var(--border-soft);white-space:nowrap}
/* System-Karte: letzter Backtest */
.sys-bt{display:block;width:100%;text-align:left;margin:12px 0 0;padding:8px 12px;border-radius:9px;background:var(--tint);border:1px solid var(--hair);
  font-size:var(--fs-mini);color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sys-bt:hover{border-color:var(--accent-line);color:var(--text)}
@media (max-width:900px){
  .bt-grid{grid-template-columns:minmax(0,1fr)}
  .bt-rechts{position:static}
}
@media (max-width:520px){
  .bt-zwei{grid-template-columns:1fr}
  .bt-kopf{grid-template-columns:1fr;justify-items:center}
  .bt-haupt{width:100%}
  .bt-ev{align-items:center;text-align:center}
}
/* Owner's Note — eine Karte mit Verlaufsrand, Monogramm und Unterschrift */
.bt-notiz{position:relative;margin:0 0 24px;padding:18px 20px;border-radius:var(--radius);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--verlauf-quer) border-box;border:1px solid transparent;
  box-shadow:0 18px 40px -28px color-mix(in srgb,var(--t2) 70%,transparent)}
.bt-notiz summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}
.bt-notiz summary::-webkit-details-marker{display:none}
.bt-notiz-mono{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:grid;place-items:center;
  background:var(--verlauf-quer);color:var(--on-accent);font:700 var(--fs-titel) var(--font-display)}
.bt-notiz-kopf{display:flex;flex-direction:column;gap:2px;min-width:0}
.bt-notiz-kopf b{font:700 var(--fs-etikett) var(--font-num);letter-spacing:.16em;text-transform:uppercase;
  background:var(--verlauf-quer);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bt-notiz-kopf small{font-size:var(--fs-mini);color:var(--text-faint)}
.bt-notiz summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.6px solid var(--text-faint);border-bottom:1.6px solid var(--text-faint);
  transform:rotate(45deg);transition:transform .15s var(--ease)}
.bt-notiz:not([open]) summary::after{transform:rotate(-45deg)}
.bt-notiz-text{margin:14px 0 0;padding-left:14px;border-left:2px solid color-mix(in srgb,var(--t2) 45%,transparent)}
.bt-notiz-text p{margin:0 0 10px;font-size:var(--fs-klein);line-height:1.65;color:var(--text-dim)}
.bt-notiz-text .bt-notiz-lead{font:600 var(--fs-titel)/1.45 var(--font-display);letter-spacing:-.015em;color:var(--text)}
.bt-notiz-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.bt-notiz-sig{font:700 var(--fs-titel) var(--font-display);letter-spacing:-.02em;color:var(--text)}
/* Ergebnis: welcher Markt getestet wurde — und ob die Regeln seither geändert sind */
.bt-getestet{margin:0;font-size:var(--fs-mini);color:var(--text-faint)}
.bt-getestet.alt{padding:9px 12px;border-radius:var(--radius-sm);color:var(--text);background:color-mix(in srgb,var(--warn) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 34%,transparent)}
#btOut.bt-alt>*:not(.bt-getestet){opacity:.45;filter:saturate(.4)}
.bt-sym-info{margin:6px 0 0}
.bt-sym-info:empty{display:none}
.bt-nur{margin:0 0 4px}

/* ---------- Edge Lab (eigene Seite) ---------- */
.lab-kopf{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.lab-kopf .bt-erkl{margin:0}
.lab-wahl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lab-wahl span{font-size:var(--fs-klein);font-weight:600;color:var(--text-dim)}
.lab-wahl select{flex:1;min-width:0;max-width:420px}
.lab-als{width:100%;justify-content:center}
.lab-als svg{width:16px;height:16px}
.lab-gespeichert{color:var(--pos)}
/* System-Detail: so wurde es getestet */
.lab-det-box{padding:14px 16px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--hair);display:flex;flex-direction:column;gap:10px}
.lab-det-ev{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lab-det-ev span{font:600 var(--fs-etikett) var(--font-num);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.lab-det-ev b{font:700 var(--fs-zahl-l) var(--font-num);letter-spacing:-.04em}
.lab-det-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lab-det-zahlen div{display:flex;flex-direction:column;gap:2px;min-width:0}
.lab-det-zahlen span{font-size:var(--fs-etikett);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-det-zahlen b{font:600 var(--fs-text) var(--font-num)}
.lab-det-box .btn{align-self:flex-start}
@media (max-width:520px){.lab-det-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.content .bt-rechts{top:84px}
/* Sieben Punkte unten: auf schmalen Handys etwas enger, damit jede Beschriftung einzeilig bleibt */
@media (max-width:400px){
  .tabbar{padding-left:2px;padding-right:2px}
  .tabbar .nav-item{padding-left:0;padding-right:0;letter-spacing:-.02em}
}
.acct-note.warn{color:var(--text);background:color-mix(in srgb,var(--neg) 9%,var(--surface));border-color:color-mix(in srgb,var(--neg) 35%,transparent)}

/* ---------- Warnfarbe und Schrift auf Rot: für alle Ansichten definiert ----------
   --warn galt bisher nur im Journal (.j) — im Edge Lab fehlten dadurch Hintergrund und Rand der Hinweise.
   Auf hellen Ansichten ist Bernstein als kleine Schrift zu blass: dort dunkler.
   Auf dunklen Ansichten ist das Rot hell — weisse Schrift darauf ist schlecht lesbar, also dunkel. */
:root{--warn:#f5b041;--warn-soft:color-mix(in srgb,#f5b041 14%,transparent);--on-neg:#1a070c}
[data-theme="papier"],[data-theme="eis"],[data-theme="sand"]{--warn:#8a5a00;--warn-soft:color-mix(in srgb,#b7791f 14%,transparent);--on-neg:#fff}
/* Speicher-Hinweis nicht über offenen Dialogen (er lag sonst über Speichern/Abbrechen) */
body:has(.modal-overlay.open) .size-notice{display:none}

/* ---------- Edge Lab 2.0 ---------- */
.lab-kopf-zeile{display:flex;gap:14px 24px;flex-wrap:wrap}
.lab-kopf-zeile .lab-wahl{flex:1 1 260px}
.bt-klartext{margin:0 0 22px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--hair)}
.bt-klartext p{margin:0 0 7px;font-size:var(--fs-klein);line-height:1.55;color:var(--text-dim)}
.bt-klartext p:last-child{margin-bottom:0}
.bt-klartext b{color:var(--text);font-weight:600}
.bt-kt-l{display:inline-block;margin-right:6px;font:600 var(--fs-etikett) var(--font-num);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.bt-unter{margin:16px 0 4px;font-size:var(--fs-klein);font-weight:600;color:var(--text)}
.bt-sek .bt-unter:first-of-type{margin-top:4px}
.bt-inds{display:flex;flex-direction:column;gap:8px;margin:8px 0 10px}
.bt-ind{display:flex;align-items:center;gap:8px}
.bt-ind select{flex:1;min-width:0}
.bt-ind-id{width:24px;height:24px;flex:0 0 24px;border-radius:7px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:700 var(--fs-mini) var(--font-num)}
.bt-ind-n{width:76px;flex:0 0 76px}
.bt-bed-art{width:100%}
.bt-zeile-kopf .bt-bed-art{flex:1;min-width:0}
.bt-bed-satz{margin-top:6px;color:var(--text-dim)}
.bt-haken>span:last-child{display:flex;align-items:center;gap:8px;min-height:40px;font-size:var(--fs-klein);color:var(--text)}
.bt-schalt{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:var(--fs-klein);color:var(--text)}
.bt-sek>select.bt-bed-art{margin-top:8px}
.bt-robust{padding:12px 14px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--hair)}
.bt-robust .bt-unter{margin-top:0}
.bt-robust .bt-kacheln{margin-top:8px}
.bt-tr{cursor:pointer}
.bt-tr:hover td,.bt-tr:focus td{background:var(--tint)}
.bt-tr:focus{outline:none}
.bt-re{margin-left:6px;font:700 var(--fs-etikett) var(--font-num);color:var(--t2);letter-spacing:.08em}
.modal.bt-chart-modal{max-width:980px}
.bt-chart-box{width:100%;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--hair)}
.bt-chart-box canvas{display:block;width:100%}
.bt-chart-info{margin:0 0 10px;font-size:var(--fs-klein);color:var(--text-dim)}
.bt-chart-info b{color:var(--text)}
/* Lange Auswahltexte (Vorlagen, Bedingungen) dürfen die Spalte nicht aufdrücken */
#btForm select,#btForm input{max-width:100%;min-width:0}
.bt-felder>.bt-f{min-width:0}
@media (max-width:520px){.lab-wahl{flex-direction:column;align-items:stretch;gap:6px}.lab-wahl select{max-width:none}}

/* ---------- Edge Lab: Neubau (Regelblatt, Speichern, Test-Leiste, Replay) ---------- */
.lab-modus{margin-bottom:4px}
.lab-modus button{flex:1}
.lab-status{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.lab-status .bt-erkl{margin:0;flex:1 1 260px;color:var(--text-dim)}
.lab-status-kn{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lab-vl{width:auto;max-width:220px}
.lab-status+.bt-warn{margin-top:10px}
.lab-chip{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:99px;font:600 var(--fs-etikett) var(--font-num);letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim);background:var(--tint);border:1px solid var(--hair)}
.lab-chip.ok{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 35%,transparent)}
.lab-chip.warn{color:var(--text);background:color-mix(in srgb,var(--warn) 14%,var(--surface));border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
/* Das Regelblatt: nummerierte Zeilen, Klartext zuerst */
.lab-blatt{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--radius-sm);overflow:hidden}
.lab-ab{padding:12px 14px;background:var(--surface)}
.lab-ab+.lab-ab{border-top:1px solid var(--border-soft)}
.lab-ab summary{list-style:none;cursor:pointer}
.lab-ab summary::-webkit-details-marker{display:none}
.lab-ab-kopf{display:flex;align-items:center;gap:10px}
.lab-ab-kopf b{font-size:var(--fs-klein);font-weight:600;color:var(--text)}
.lab-ab-nr{width:22px;height:22px;flex:0 0 22px;border-radius:7px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:700 var(--fs-etikett) var(--font-num)}
.lab-ab-auf{margin-left:auto;font-size:var(--fs-mini);color:var(--accent);font-weight:600}
.lab-ab-edit[open]{background:var(--tint)}
.lab-ab-text{margin:6px 0 0 32px;font-size:var(--fs-klein);line-height:1.55;color:var(--text-dim);overflow-wrap:anywhere}
.lab-ab-felder{margin:10px 0 2px 32px}
.lab-ab-felder>.bt-erkl:first-child{margin-top:0}
.lab-seite{display:inline-block;min-width:44px;font:600 var(--fs-etikett) var(--font-num);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.lab-um{margin-top:4px}
.lab-um button{flex:1}
.lab-tage{display:flex;gap:6px;flex-wrap:wrap}
.lab-tag{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:36px;padding:0 8px;border-radius:9px;border:1px solid var(--hair);
  font-size:var(--fs-mini);font-weight:600;color:var(--text-dim);cursor:pointer;user-select:none}
.lab-tag input{position:absolute;opacity:0;pointer-events:none}
.lab-tag.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.lab-leer{padding:18px;border:1px dashed var(--hair-strong);border-radius:var(--radius-sm)}
.lab-leer b{font-size:var(--fs-text)}
.lab-leer-kn{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
/* Test-Leiste: Knopf, Fortschritt, Abbrechen */
.lab-lauf{display:flex;flex-direction:column;gap:8px}
.lab-lauf .bt-erkl{margin:0}
.lab-lauf-info{text-align:center}
.lab-lauf-bar{height:6px;border-radius:99px;background:var(--tint);border:1px solid var(--hair);overflow:hidden}
.lab-lauf-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .25s var(--ease)}
.lab-nr{color:var(--text-faint)}
.lab-grund{max-width:90px;overflow:hidden;text-overflow:ellipsis}
.lab-warum{display:block;margin-top:6px;font-size:var(--fs-mini);line-height:1.6;color:var(--text-faint)}
.bt-chart-modal .modal-foot .btn:disabled{opacity:.4}
@media (max-width:900px){
  /* Handy: die Test-Leiste klebt über der Tab-Leiste — kein Scrollen bis ans Ende */
  #labLauf{position:sticky;bottom:12px;z-index:20;order:2;padding:10px;margin:0 -10px;
    background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--hair);border-radius:var(--radius-sm);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .bt-grid{display:flex;flex-direction:column}
  .bt-rechts{display:contents}
  #btForm{order:1}
  #btOut{order:3}
}
@media (max-width:520px){
  .lab-ab-text,.lab-ab-felder{margin-left:0}
  .bt-tab th:nth-child(4),.bt-tab td:nth-child(4){display:none}
  .lab-vl{max-width:none;flex:1 1 100%}
}
/* Replay */
.rp-karte{padding-bottom:14px}
.rp-kopf{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap;margin-bottom:10px}
.rp-kopf b{font-size:var(--fs-titel)}
.rp-kopf .bt-erkl{margin:0}
.rp-zahl{margin-left:auto;font-size:var(--fs-klein);font-weight:600;color:var(--text-dim)}
.rp-chart{width:100%;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--hair)}

.rp-leiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.rp-leiste .btn svg{width:16px;height:16px}
.rp-tasten{margin:0}
.rp-order{margin-top:6px}
.rp-stopvor{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rp-seiten{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.rp-seiten .btn{justify-content:center;font-weight:700}
.rp-long{background:var(--pos-soft);border:1px solid color-mix(in srgb,var(--pos) 45%,transparent);color:var(--pos)}
.rp-short{background:color-mix(in srgb,var(--neg) 12%,transparent);border:1px solid color-mix(in srgb,var(--neg) 45%,transparent);color:var(--neg)}
.rp-pos{margin:6px 0 10px;font-size:var(--fs-klein);font-weight:600}
.rp-pos.long{color:var(--pos)}
.rp-pos.short{color:var(--neg)}
.rp-fuss{display:flex;gap:8px;flex-wrap:wrap}
.rp-trade{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-soft)}
.rp-trade>.bt-erkl:last-child{margin-bottom:0}
@media (max-width:760px){#labLauf{bottom:calc(76px + env(safe-area-inset-bottom))}}
@media (max-width:520px){.rp-tasten{display:none}.rp-leiste .btn{flex:1;justify-content:center}}

/* ---------- Trading lernen (Benjis Empfehlung, Affiliate) ---------- */
.lern-karte{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;margin-top:16px}
.lern-karte.in-notiz{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--border-soft)}
.lern-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.lern-text b{font:600 var(--fs-text)/1.4 var(--font-display);color:var(--text)}
.lern-text p{margin:0;font-size:var(--fs-klein);line-height:1.55;color:var(--text-dim)}
.lern-text .btn{align-self:flex-start;margin-top:4px}
.lern-text small,.lern-klein{font-size:var(--fs-mini);color:var(--text-faint)}
.lern-sig{font-weight:600;color:var(--text)}
.lern-karte .bt-notiz-mono{width:32px;height:32px;flex:0 0 32px}
.lern-karte.in-notiz .bt-notiz-mono{display:none}
a.btn[href*="jointherealworld"]{text-decoration:none}
.lern-klein{display:block;margin-top:4px}
.lern-karte.in-notiz .lern-sig{display:none}

/* ---------- Edge Lab 3: echter Chart, leeres Blatt, Satz-Bedingungen, Verlauf ---------- */
.lab-chartkarte{margin-top:16px}
.lab-chartkarte.bt-alt .lab-chart{opacity:.5;filter:saturate(.4)}
.lab-chart-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lab-chart-kopf b{font-size:var(--fs-titel)}
.lab-chart-kopf .bt-erkl{margin:4px 0 0}
.lab-chart-nav{display:flex;align-items:center;gap:8px}
.lab-chart-nav .btn svg{width:14px;height:14px}
.lab-chart-nav span{min-width:70px;text-align:center;font-size:var(--fs-klein);color:var(--text-dim)}
.lab-chart{width:100%;height:520px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--hair)}
.lab-chartkarte .bt-chart-info{margin:12px 0 0}
.bt-tr.an td{background:var(--accent-soft)}
.bt-satz-zeile{display:flex;align-items:center;gap:8px}
.bt-satz{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0;align-items:center}
.bt-satz .j-inp{width:auto;flex:1 1 110px;min-width:0}
.bt-satz .bt-satz-art{flex:1 1 130px;font-weight:600;color:var(--accent)}
.bt-satz .bt-satz-zahl{flex:0 1 96px}
select.j-inp.lab-offen{border-color:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--text-faint)}
.lab-lauf-kn{display:flex;gap:8px}
.lab-lauf-kn .bt-go{flex:1}
.lab-neu{white-space:nowrap}
.lab-neu svg{width:15px;height:15px}
.bt-go:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.lab-verlauf{margin-top:14px}
.lab-verlauf-liste{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.lab-vz{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;text-align:left;padding:9px 12px;border-radius:9px;
  background:var(--tint);border:1px solid var(--hair);color:var(--text-dim);font-size:var(--fs-mini);cursor:pointer}
.lab-vz b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-vz:hover,.lab-vz.an{border-color:var(--accent-line)}
@media (max-width:760px){.lab-chart{height:380px}.lab-vz{grid-template-columns:minmax(0,1fr) auto}.lab-vz>span:first-child{display:none}}
/* Replay mit echtem Chart */
.rp-chart{height:560px}
.rp-leiste{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.rp-leiste .btn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.rp-tempo{width:auto;min-width:74px}
.rp-trenner{width:1px;height:26px;background:var(--hair);margin:0 4px}
.rp-play{min-width:104px;justify-content:center}
.rp-order-kopf{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:flex-end}
.rp-order-kopf .rp-order{flex:1 1 280px;margin:0}
.rp-order-kopf .rp-stopvor{margin:0 0 4px}
@media (max-width:760px){.rp-chart{height:420px}.rp-trenner{display:none}.rp-leiste .btn{flex:1 1 auto;justify-content:center}}
.lab-sysregeln{margin:0 0 16px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--hair)}
.lab-sysregeln summary{cursor:pointer;font-size:var(--fs-klein);font-weight:600;color:var(--text)}
.lab-sysregeln dl{margin:10px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px}
.lab-sysregeln dt{font-size:var(--fs-mini);font-weight:600;color:var(--text-faint)}
.lab-sysregeln dd{margin:0;font-size:var(--fs-klein);color:var(--text-dim);white-space:pre-wrap;overflow-wrap:anywhere}
/* Replay 3: Werkzeuge, Indikatoren, Springen, Journal wie im Sheet */
.rp-werkzeuge{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.rp-wz span{margin-right:4px;font-family:var(--font-num)}
.rp-wz.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.rp-wz-long{color:var(--pos)}.rp-wz-short{color:var(--neg)}
.rp-springen{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-mini);color:var(--text-dim)}
.rp-springen .j-inp{width:150px}
.rp-inds{position:relative}
.rp-inds summary{list-style:none;cursor:pointer}
.rp-inds summary::-webkit-details-marker{display:none}
.rp-inds-box{position:absolute;z-index:30;top:calc(100% + 6px);right:0;width:280px;padding:12px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--hair-strong);box-shadow:0 18px 40px -20px #000;display:flex;flex-direction:column;gap:6px}
.rp-ind{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-klein);color:var(--text)}
.rp-ind-dazu{display:grid;grid-template-columns:minmax(0,1fr) 64px auto;gap:6px;margin-top:6px}
.rp-ind-dazu .btn svg{width:14px;height:14px}
.rp-journal-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rp-ohne-sys{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border:1px dashed var(--border);border-radius:var(--radius-sm,10px)}
.rp-ohne-sys .bt-erkl{margin:0;max-width:60ch}
.rp-journal-kopf .settings-label{margin:0}
.rp-ev{padding:14px 16px;margin-bottom:14px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--hair)}
.rp-ev-zahl{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rp-ev-zahl span{font:600 var(--fs-etikett) var(--font-num);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.rp-ev-zahl b{font:700 var(--fs-zahl-l) var(--font-num);letter-spacing:-.04em}
.rp-ev-formel{margin:8px 0 0;font-size:var(--fs-klein);color:var(--text)}
.rp-tab{max-height:520px}
.rp-tab tfoot td{padding:8px 6px;border-top:1px solid var(--hair-strong);font-weight:700;background:var(--surface);position:sticky;bottom:0}
@media (max-width:760px){.rp-springen{flex:1 1 100%}.rp-springen .j-inp{flex:1;width:auto}.rp-inds-box{left:0;right:auto;width:min(280px,86vw)}.rp-wz{flex:1 1 auto}}
.rp-werkzeuge .rp-tasten{flex:1 1 100%;min-height:1.4em;margin:2px 0 0}
.rp-werkzeuge .btn:disabled{opacity:.35}

/* ---------- Datum und Uhrzeit: eigene Auswahl statt Browser-Kalender (assets/datum.js) ---------- */
input[type="date"],input[type="time"]{cursor:pointer;padding-right:34px;background-repeat:no-repeat;background-position:right 11px center;background-size:16px}
input[type="date"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d99bd' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
input[type="time"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d99bd' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
input[type="date"]::-webkit-inner-spin-button,input[type="time"]::-webkit-inner-spin-button{display:none}
.dp{position:fixed;z-index:600;width:296px;padding:12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--hair-strong);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent);color:var(--text);font-family:inherit;animation:dp-auf .14s var(--ease)}
@keyframes dp-auf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dp-kopf{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.dp-titel{font:600 var(--fs-text) var(--font-display);color:var(--text);background:none;border:0;padding:6px 10px;border-radius:9px;text-transform:capitalize}
.dp-klick{cursor:pointer}
.dp-klick:hover{background:var(--tint)}
.dp-nav{width:32px;height:32px;border-radius:9px;border:1px solid var(--hair);background:var(--tint);color:var(--text-dim);font-size:var(--fs-titel);line-height:1;cursor:pointer}
.dp-nav:hover{color:var(--text);border-color:var(--hair-strong)}
.dp-wt{display:grid;grid-template-columns:repeat(7,1fr);margin:0 0 4px}
.dp-wt span{text-align:center;font:600 var(--fs-etikett) var(--font-num);letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);padding:4px 0}
.dp-gitter{display:grid;gap:3px}
.dp-7{grid-template-columns:repeat(7,1fr)}
.dp-3{grid-template-columns:repeat(3,1fr);gap:6px}
.dp-tag,.dp-feld{height:36px;border-radius:9px;border:1px solid transparent;background:none;color:var(--text);font:500 var(--fs-klein) var(--font-num);cursor:pointer;text-transform:capitalize}
.dp-feld{height:40px;font-family:inherit}
.dp-tag:hover:not(:disabled),.dp-feld:hover{background:var(--tint);border-color:var(--hair)}
.dp-tag:focus-visible,.dp-feld:focus-visible{outline:none;border-color:var(--accent-line)}
.dp-heute{border-color:var(--accent-line);color:var(--accent)}
.dp-an,.dp-an:hover{background:var(--accent)!important;color:var(--on-accent)!important;border-color:var(--accent)!important;font-weight:700}
.dp-tag:disabled{color:var(--text-faint);opacity:.35;cursor:not-allowed}
.dp-fuss{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft)}
.dp-zeit{display:flex;align-items:stretch;gap:6px;height:220px}
.dp-spalte{flex:1;display:flex;flex-direction:column;gap:3px;overflow-y:auto;padding-right:2px}
.dp-dp{align-self:center;font:700 var(--fs-titel) var(--font-num);color:var(--text-faint)}
@media (max-width:420px){.dp{width:calc(100vw - 16px)}}

/* ---------- Replay wie TradingView: oben Zeiteinheit & Steuerung, links Werkzeuge ---------- */
.rp-app{padding:0;overflow:visible}
.rp-oben{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--border-soft)}
.rp-tfs{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--tint);border:1px solid var(--hair)}
.rp-tfs button{border:0;background:none;color:var(--text-dim);font:600 var(--fs-mini) var(--font-num);padding:6px 9px;border-radius:7px;cursor:pointer}
.rp-tfs button:hover{color:var(--text)}
.rp-tfs button.on{background:var(--accent-soft);color:var(--accent)}
.rp-luecke{flex:1}
.rp-systest{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-mini);color:var(--text-faint)}
.rp-systest .j-inp{width:auto;min-width:150px;max-width:220px}
.rp-springen .j-inp{width:150px}
.rp-regeln{position:relative}
.rp-regeln summary{list-style:none;cursor:pointer}
.rp-regeln summary::-webkit-details-marker{display:none}
.rp-regeln-box{position:absolute;z-index:40;top:calc(100% + 6px);right:0;width:min(420px,90vw);padding:12px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--hair-strong);box-shadow:0 18px 40px -20px #000}
.rp-regeln-box .lab-sysregeln{margin:0}
.rp-mitte{display:grid;grid-template-columns:46px minmax(0,1fr)}
.rp-links{display:flex;flex-direction:column;gap:4px;padding:8px 6px;border-right:1px solid var(--border-soft)}
.rp-wz{width:34px;height:34px;border-radius:9px;border:1px solid transparent;background:none;color:var(--text-dim);font:600 var(--fs-text)/1 var(--font-num);cursor:pointer;display:grid;place-items:center}
.rp-wz:hover:not(:disabled){background:var(--tint);color:var(--text);border-color:var(--hair)}
.rp-wz.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.rp-wz:disabled{opacity:.3;cursor:default}
.rp-wz-long{color:var(--pos)}.rp-wz-short{color:var(--neg)}
.rp-wz-trenner{height:1px;background:var(--border-soft);margin:4px 2px}
.rp-chartwrap{position:relative;min-width:0}
.rp-app .rp-chart{height:clamp(460px,calc(100vh - 250px),860px);border:0;border-radius:0}
.rp-info{position:absolute;z-index:5;top:8px;left:10px;right:80px;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline;pointer-events:none;font-size:var(--fs-mini);color:var(--text-dim)}
.rp-info b{color:var(--text);font-size:var(--fs-klein)}
.rp-sel{position:absolute;z-index:8;top:44px;right:84px;width:300px;padding:12px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--hair-strong);box-shadow:0 18px 40px -20px #000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rp-sel-kopf{display:flex;gap:10px;align-items:baseline;font-size:var(--fs-klein)}
.rp-sel-kopf span{color:var(--text-dim)}
.rp-sel-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:8px 0;font-size:var(--fs-mini);color:var(--text)}
.rp-sel-kn{display:flex;gap:6px;flex-wrap:wrap}
.rp-sel-kn .btn svg{width:14px;height:14px}
.rp-sel .bt-erkl{margin:8px 0 0}
.rp-hinweis{margin:0;padding:8px 12px;border-top:1px solid var(--border-soft);min-height:1.4em}
.rp-sheet th{white-space:nowrap}
.rp-auswertung{margin-top:16px}
@media (max-width:760px){
  .rp-mitte{grid-template-columns:minmax(0,1fr)}
  .rp-links{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border-soft)}
  .rp-wz-trenner{width:1px;height:auto;margin:2px 4px}
  .rp-app .rp-chart{height:430px}
  .rp-info{right:10px}
  .rp-sel{left:8px;right:8px;width:auto;top:auto;bottom:8px}
  .rp-systest{flex:1 1 100%}.rp-systest .j-inp{flex:1;max-width:none}
  .rp-luecke{display:none}
}

/* ---------- Werkzeugleiste wie TradingView: Gruppen, Ausklapp-Menü, Favoriten, Stil ---------- */
.rp-links{overflow:visible;z-index:12}
.rp-wz svg{width:20px;height:20px}
.rp-gruppe{position:relative;display:flex}
.rp-mehr{position:absolute;right:-5px;bottom:2px;width:12px;height:12px;border:0;background:none;cursor:pointer;padding:0}
.rp-mehr::after{content:"";position:absolute;right:3px;bottom:2px;border-left:4px solid transparent;border-top:4px solid transparent;border-right:4px solid var(--text-faint);border-bottom:4px solid var(--text-faint);transform:none}
.rp-mehr:hover::after,.rp-mehr.auf::after{border-right-color:var(--accent);border-bottom-color:var(--accent)}
.rp-menue{position:absolute;left:calc(100% + 8px);top:-6px;z-index:60;width:270px;padding:6px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--hair-strong);box-shadow:0 22px 50px -20px #000}
.rp-menue-kopf{padding:6px 8px;font:600 var(--fs-etikett) var(--font-num);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.rp-menue-zeile{display:flex;align-items:center;border-radius:8px}
.rp-menue-zeile:hover,.rp-menue-zeile.on{background:var(--tint)}
.rp-menue-wz{flex:1;display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;background:none;color:var(--text);font-size:var(--fs-klein);text-align:left;cursor:pointer}
.rp-menue-wz svg{width:20px;height:20px;color:var(--text-dim);flex:0 0 20px}
.rp-menue-zeile.on .rp-menue-wz{color:var(--accent)}
.rp-stern{width:30px;height:30px;border:0;background:none;color:var(--text-faint);cursor:pointer;opacity:.5;display:grid;place-items:center}
.rp-stern svg{width:16px;height:16px}
.rp-menue-zeile:hover .rp-stern{opacity:1}
.rp-stern.an{opacity:1;color:var(--warn)}
.rp-stern.an svg path{fill:currentColor}
.rp-fav{position:absolute;z-index:7;top:36px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--hair-strong);box-shadow:0 12px 30px -18px #000}
.rp-fav:empty{display:none}
.rp-fav .rp-wz{width:32px;height:32px}
.rp-sym{border:0;background:none;padding:0;color:var(--text-dim);font:inherit;cursor:pointer;pointer-events:auto}
.rp-sym b{color:var(--text);font-size:var(--fs-klein)}
.rp-sym:hover b{color:var(--accent)}
.rp-tv{pointer-events:auto;font-size:var(--fs-mini);color:var(--accent);text-decoration:none}
.rp-tv:hover{text-decoration:underline}
.rp-sel-icon svg{width:18px;height:18px;vertical-align:-4px;color:var(--text-dim)}
.rp-farben{display:flex;gap:6px;margin:10px 0 8px}
.rp-farbe{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.rp-farbe.an{border-color:var(--text)}
.rp-breiten{display:flex;gap:6px;margin-bottom:8px}
.rp-breiten button{width:40px;height:26px;border-radius:7px;border:1px solid var(--hair);background:var(--tint);display:grid;place-items:center;cursor:pointer}
.rp-breiten button.an{border-color:var(--accent-line)}
.rp-breiten span{display:block;width:22px;background:var(--text);border-radius:2px}
.rp-sel-text{width:100%;margin-bottom:8px;resize:vertical}
/* Markt-Auswahl */
.rp-markt-knopf{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left}
.rp-markt-knopf span{font-size:var(--fs-mini);color:var(--text-faint)}
.modal.rp-markt-modal{max-width:560px}
.rp-markt-suche{width:100%;margin-bottom:10px}
.rp-markt-kat{margin-bottom:10px}
.rp-markt-kat button{flex:1}
.rp-markt-liste{max-height:min(420px,55vh);overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.rp-markt-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto 110px 80px;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;border:1px solid transparent;background:none;color:var(--text-dim);font-size:var(--fs-klein);text-align:left;cursor:pointer}
.rp-markt-zeile b{color:var(--text);font-weight:600}
.rp-markt-zeile:hover,.rp-markt-zeile.an{background:var(--tint);border-color:var(--hair)}
.rp-markt-zeile .tnum{text-align:right}
.rp-markt-typ{font-size:var(--fs-mini);color:var(--text-faint)}
@media (max-width:760px){
  .rp-menue{left:0;top:calc(100% + 6px)}
  .rp-mehr{right:-3px}
  .rp-fav{top:auto;bottom:8px}
  .rp-markt-zeile{grid-template-columns:minmax(0,1fr) 90px 70px}.rp-markt-typ{display:none}
}

/* ---------- Zeichnungen einstellen wie TradingView: schwebende Leiste, Palette, Dialog, Menü ---------- */
.zs-leiste{position:absolute;z-index:9;top:84px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--hair-strong);box-shadow:0 16px 36px -18px #000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.zs-leiste[hidden]{display:none}
.zs-griff{display:grid;place-items:center;width:18px;height:32px;color:var(--text-faint);cursor:grab;touch-action:none}
.zs-griff svg{width:16px;height:16px}
.zs-k{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:32px;height:32px;padding:0 6px;border:0;border-radius:7px;background:none;color:var(--text-dim);cursor:pointer;font:500 var(--fs-mini) var(--font-num)}
.zs-k:hover,.zs-k.auf{background:var(--tint);color:var(--text)}
.zs-k.an{color:var(--accent)}
.zs-k svg{width:18px;height:18px}
.zs-k small{font-size:var(--fs-etikett);color:var(--text-faint)}
.zs-balken{position:absolute;left:8px;right:8px;bottom:4px;height:3px;border-radius:2px}
.zs-k:has(.zs-balken) svg,.zs-k:has(.zs-balken) .zs-t{margin-bottom:5px}
.zs-t{font:700 var(--fs-text) var(--font-num)}
.zs-breite{display:inline-grid;place-items:center;width:18px}
.zs-breite i{display:block;width:18px;background:currentColor;border-radius:2px}
.zs-trenner{width:1px;align-self:stretch;margin:4px 3px;background:var(--hair-strong)}
.zs-pop{position:absolute;z-index:20;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:10px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--hair-strong);box-shadow:0 22px 50px -20px #000;min-width:180px}
.zs-palette{display:grid;gap:3px}
.zs-reihe{display:grid;grid-template-columns:repeat(10,20px);gap:3px}
.zs-reihe.grau{margin-bottom:6px}
.zs-farbe{width:20px;height:20px;padding:0;border-radius:4px;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(128,128,128,.25);transition:transform .12s}
.zs-farbe:hover{transform:scale(1.15)}
.zs-farbe.an{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--text)}
.zs-eigene{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-soft)}
.zs-plus{position:relative;display:grid;place-items:center;width:20px;height:20px;border-radius:4px;border:1px dashed var(--text-faint);color:var(--text-dim);font-size:var(--fs-klein);cursor:pointer;overflow:hidden}
.zs-plus input{position:absolute;inset:0;opacity:0;cursor:pointer}
.zs-deck{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:var(--fs-mini);color:var(--text-dim)}
.zs-deck input[type=range]{flex:1;accent-color:var(--accent)}
.zs-deck b{min-width:44px;text-align:right;color:var(--text);font-weight:500}
.zs-liste{display:grid;gap:2px}
.zs-liste button{display:flex;align-items:center;gap:10px;padding:7px 10px;border:0;border-radius:7px;background:none;color:var(--text);font-size:var(--fs-klein);cursor:pointer;text-align:left}
.zs-liste button:hover{background:var(--tint)}
.zs-liste button.an{background:var(--accent-wash,var(--tint));color:var(--accent)}
.zs-liste svg{width:26px;height:18px}
.zs-liste .zs-breite{width:26px}.zs-liste .zs-breite i{width:26px}
.zs-haken{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-klein);color:var(--text);cursor:pointer;user-select:none}
.zs-haken input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.zs-pop>.zs-haken{margin-bottom:10px}

.zs-dlg{width:min(460px,100%)}
.zs-reiter{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--border-soft)}
.zs-reiter button{position:relative;padding:10px 12px;border:0;background:none;color:var(--text-dim);font-size:var(--fs-klein);font-weight:500;cursor:pointer}
.zs-reiter button:hover{color:var(--text)}
.zs-reiter button.on{color:var(--text)}
.zs-reiter button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.zs-dlg-body{max-height:min(60vh,520px);overflow:auto;display:grid;gap:12px}
.zs-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.zs-lbl{font-size:var(--fs-klein);color:var(--text-dim);min-width:120px}
.zs-wert{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zs-wert .j-inp{width:auto;min-width:0}
.zs-wert input[type=number]{width:130px}
.zs-sel{padding-right:28px}
.zs-einheit{width:14px;font-size:var(--fs-klein);color:var(--text-dim)}
.zs-haken-reihe{gap:16px}
.zs-haken-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px 16px}
.zs-gruppe{display:grid;gap:10px;padding:12px;border-radius:var(--radius-sm);background:var(--tint);border:1px solid var(--border-soft)}
.zs-gruppe-kopf{font:600 var(--fs-etikett) var(--font-num);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.zs-trennlinie{height:1px;background:var(--border-soft)}
.zs-fk-wrap{position:relative;display:inline-block}
.zs-fk{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--hair-strong);background:var(--tint);cursor:pointer}
.zs-fk i{display:block;width:20px;height:20px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.3)}
.zs-fk.auf{border-color:var(--accent-line)}
.zs-pop-dlg{left:0;transform:none;z-index:30}
.zs-stufen{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px}
.zs-stufe{display:flex;align-items:center;gap:8px}
.zs-stufe input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.zs-stufe .j-inp{width:84px;padding-top:6px;padding-bottom:6px}
.zs-stufe .zs-fk{width:30px;height:30px}.zs-stufe .zs-fk i{width:16px;height:16px}
.zs-text-kopf{display:flex;align-items:center;gap:8px}
.zs-b{width:34px;height:34px;border-radius:8px;border:1px solid var(--hair-strong);background:var(--tint);color:var(--text-dim);cursor:pointer;font-size:var(--fs-text)}
.zs-b.an{color:var(--accent);border-color:var(--accent-line)}
.zs-textfeld{width:100%;resize:vertical;min-height:96px}
.zs-koord .zs-wert input[type=date]{width:150px}.zs-koord .zs-wert input[type=time]{width:100px}
.zs-dlg-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;border-top:1px solid var(--border-soft)}
.zs-dlg-kn{display:flex;gap:8px}
.zs-vorlage{position:relative}
.zs-vorlage summary{list-style:none}.zs-vorlage summary::-webkit-details-marker{display:none}
.zs-vorlage-box{position:absolute;bottom:calc(100% + 6px);left:0;z-index:5;display:grid;min-width:220px;padding:6px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--hair-strong);box-shadow:0 22px 50px -20px #000}
.zs-vorlage-box button{padding:8px 10px;border:0;border-radius:7px;background:none;color:var(--text);font-size:var(--fs-klein);text-align:left;cursor:pointer}
.zs-vorlage-box button:hover{background:var(--tint)}
.zs-menue{position:fixed;z-index:700;display:grid;min-width:210px;padding:6px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--hair-strong);box-shadow:0 22px 50px -20px #000}
.zs-menue button{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:7px;background:none;color:var(--text);font-size:var(--fs-klein);text-align:left;cursor:pointer}
.zs-menue button:hover{background:var(--tint)}
.zs-menue button.gef{color:var(--neg)}
.zs-menue svg{width:16px;height:16px;color:var(--text-dim)}
.zs-menue button.gef svg{color:var(--neg)}
.zs-menue-trenner{height:1px;margin:4px 6px;background:var(--border-soft)}
.rp-sel-kn .btn svg{width:14px;height:14px}
@media (max-width:760px){
  .zs-leiste{top:auto;bottom:8px;max-width:calc(100% - 16px);flex-wrap:wrap;justify-content:center}
  .zs-pop{top:auto;bottom:calc(100% + 6px)}
  .zs-reihe{grid-template-columns:repeat(10,18px)}.zs-farbe{width:18px;height:18px}
}