@font-face {
  font-family: "Remind Sans";
  src: url("../fonts/RemindSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Remind Sans";
  src: url("../fonts/RemindSans-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Remind Sans";
  src: url("../fonts/RemindSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Remind Sans";
  src: url("../fonts/RemindSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Remind Sans";
  src: url("../fonts/RemindSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}











































:root {



    --nk-hand-offen: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Cg%20fill=%22%231f2328%22%20stroke=%22%231f2328%22%20stroke-width=%222.4%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%2210.2%22%20y=%226.0%22%20width=%223.4%22%20height=%2212%22%20rx=%221.7%22/%3E%3Crect%20x=%2213.8%22%20y=%224.5%22%20width=%223.4%22%20height=%2213.5%22%20rx=%221.7%22/%3E%3Crect%20x=%2217.4%22%20y=%225.5%22%20width=%223.4%22%20height=%2212.5%22%20rx=%221.7%22/%3E%3Crect%20x=%2221.0%22%20y=%228.5%22%20width=%223.2%22%20height=%2210%22%20rx=%221.6%22/%3E%3Crect%20x=%2210.2%22%20y=%2213%22%20width=%2214%22%20height=%2213.5%22%20rx=%225%22/%3E%3Crect%20x=%224.5%22%20y=%2217.8%22%20width=%228.5%22%20height=%223.6%22%20rx=%221.8%22%20transform=%22rotate(38%2012%2019.6)%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff%22%3E%3Crect%20x=%2210.2%22%20y=%226.0%22%20width=%223.4%22%20height=%2212%22%20rx=%221.7%22/%3E%3Crect%20x=%2213.8%22%20y=%224.5%22%20width=%223.4%22%20height=%2213.5%22%20rx=%221.7%22/%3E%3Crect%20x=%2217.4%22%20y=%225.5%22%20width=%223.4%22%20height=%2212.5%22%20rx=%221.7%22/%3E%3Crect%20x=%2221.0%22%20y=%228.5%22%20width=%223.2%22%20height=%2210%22%20rx=%221.6%22/%3E%3Crect%20x=%2210.2%22%20y=%2213%22%20width=%2214%22%20height=%2213.5%22%20rx=%225%22/%3E%3Crect%20x=%224.5%22%20y=%2217.8%22%20width=%228.5%22%20height=%223.6%22%20rx=%221.8%22%20transform=%22rotate(38%2012%2019.6)%22/%3E%3C/g%3E%3Cg%20stroke=%22%231f2328%22%20stroke-width=%220.9%22%20stroke-linecap=%22round%22%20fill=%22none%22%3E%3Cpath%20d=%22M13.8%209.5V15.5%22/%3E%3Cpath%20d=%22M17.4%209.0V15.5%22/%3E%3Cpath%20d=%22M21.0%2011.5V15.5%22/%3E%3C/g%3E%3C/svg%3E") 16 15, grab;
    --nk-hand-zu: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%3E%3Cg%20fill=%22%231f2328%22%20stroke=%22%231f2328%22%20stroke-width=%222.4%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%2210.2%22%20y=%2211.0%22%20width=%223.4%22%20height=%226%22%20rx=%221.7%22/%3E%3Crect%20x=%2213.8%22%20y=%2210.3%22%20width=%223.4%22%20height=%226.5%22%20rx=%221.7%22/%3E%3Crect%20x=%2217.4%22%20y=%2210.8%22%20width=%223.4%22%20height=%226%22%20rx=%221.7%22/%3E%3Crect%20x=%2221.0%22%20y=%2212.0%22%20width=%223.2%22%20height=%225%22%20rx=%221.6%22/%3E%3Crect%20x=%2210.2%22%20y=%2213%22%20width=%2214%22%20height=%2212.5%22%20rx=%225%22/%3E%3Crect%20x=%226.5%22%20y=%2217.2%22%20width=%227%22%20height=%223.6%22%20rx=%221.8%22%20transform=%22rotate(15%2012.5%2019)%22/%3E%3C/g%3E%3Cg%20fill=%22%23fff%22%3E%3Crect%20x=%2210.2%22%20y=%2211.0%22%20width=%223.4%22%20height=%226%22%20rx=%221.7%22/%3E%3Crect%20x=%2213.8%22%20y=%2210.3%22%20width=%223.4%22%20height=%226.5%22%20rx=%221.7%22/%3E%3Crect%20x=%2217.4%22%20y=%2210.8%22%20width=%223.4%22%20height=%226%22%20rx=%221.7%22/%3E%3Crect%20x=%2221.0%22%20y=%2212.0%22%20width=%223.2%22%20height=%225%22%20rx=%221.6%22/%3E%3Crect%20x=%2210.2%22%20y=%2213%22%20width=%2214%22%20height=%2212.5%22%20rx=%225%22/%3E%3Crect%20x=%226.5%22%20y=%2217.2%22%20width=%227%22%20height=%223.6%22%20rx=%221.8%22%20transform=%22rotate(15%2012.5%2019)%22/%3E%3C/g%3E%3Cg%20stroke=%22%231f2328%22%20stroke-width=%220.9%22%20stroke-linecap=%22round%22%20fill=%22none%22%3E%3Cpath%20d=%22M13.8%2012.3V15.5%22/%3E%3Cpath%20d=%22M17.4%2012.3V15.5%22/%3E%3Cpath%20d=%22M21.0%2013.3V15.5%22/%3E%3C/g%3E%3C/svg%3E") 16 15, grabbing;





















  --grund:        #eeecea;
  --flaeche:      #fcfcfc;
  --flaeche-2:    #f9f8f7;
  --flaeche-3:    #e8e5e3;
  --q-marke-grund: #ffffff;




  --seitenleiste: #fcfcfc;










  --linie:        rgba(42,35,29,.105);
  --linie-weich:  rgba(42,35,29,.055);
  --linie-stark:  rgba(42,35,29,.22);




  --linie-bedien: #948880;


  --text:         #2a231d;
  --text-2:       #63574d;
  --text-3:       #7b6d63;


  --p:            #4c7579;
  --p-tief:       #3d5f63;
  --p-hell:       #6b989d;
  --p-flaeche:    #eaeeef;
  --p-linie:      #d2dcdd;
  --p-schleier:   rgba(76,117,121,.10);
  --auf-farbe:    #fcfcfc;


  --sd-puls:      var(--text);


  --s:            #99685C;
  --s-tief:       #653A32;
  --s-flaeche:    #f4f0ef;
  --s-linie:      #ece4e2;
  --s-schleier:   rgba(153,104,92,.14);


  --ok:     #3a7549;  --ok-flaeche:     #ecf1ee;  --ok-linie:     #d5e1d8;





  --g-neutral: #b9bcc2;
  --g-gruen:   #3a7549;
  --g-limette: #6d8a33;
  --g-gelb:    #8f6426;
  --g-orange:  #a1552b;
  --g-rot:     #a94434;
  --g-tiefrot: #7e2f26;




  --sd-blau:   #3f8fb8;
  --sd-anb:    #6a5acd;
  --sd-frisch: #b0a49a;
  --sd-quote:  #2f7fa6;



  --sd-steigt: #b06a3c;
  --sd-faellt: #3f7a52;
  --warn:   #8f6426;  --warn-flaeche:   #f3f0eb;  --warn-linie:   #e6ded1;
  --fehler: #a94434;  --fehler-flaeche: #f5edec;  --fehler-linie: #ebd7d4;
  --ok-tief:     #2f6a3e;
  --warn-tief:   #6f4d1d;
  --fehler-tief: #8f3a2c;






  --messer-kontur:     #2a231d;
  --messer-klinge:     #e8e5e3;
  --messer-schliff:    #fcfcfc;
  --messer-blut:       #a94434;
  --messer-blut-tief:  #8f3a2c;
  --messer-zwinge:     #63574d;
  --messer-griff:      #7b6d63;
  --messer-knopf-blut:      #5e1d14;
  --messer-knopf-blut-tief: #461409;
  --messer-knopf-zwinge:    #2a231d;
  --messer-knopf-griff:     #63574d;
  --messer-knopf-kontur:    #2a231d;
  --ok-schleier:     rgba(58,117,73,.16);
  --warn-schleier:   rgba(143,100,38,.14);
  --fehler-schleier: rgba(169,68,52,.18);







  --r-1: 8px;
  --r-2: 13px;
  --r-3: 18px;
  --r-rund: 999px;






  --r-mulde: 12px;
















  --text-lesen: 13.5px;













  --spur: .012em;



  --luft: 10px;















  --ease-out: cubic-bezier(.25, .46, .45, .94);
  --ease-in-out: cubic-bezier(.45, .05, .25, .95);
  --d1: 160ms;
  --d2: 240ms;
  --d3: 380ms;







  --schatten-1: 0 1px 1px rgba(42,35,29,.05), 0 1px 3px rgba(42,35,29,.05);
  --schatten-2: 0 1px 1px rgba(42,35,29,.05), 0 2px 4px rgba(42,35,29,.05),
                0 8px 24px rgba(42,35,29,.07);
  --schatten-3: 0 1px 1px rgba(42,35,29,.06), 0 4px 8px rgba(42,35,29,.07),
                0 18px 48px rgba(42,35,29,.12);
  --kante: inset 0 1px 0 rgba(255,255,255,.8);











  --hebung: 0 1px 2px rgba(42,35,29,.055),
            0 5px 12px -5px rgba(42,35,29,.085);
  --kante-oben:  rgba(255,255,255,.95);
  --kante-unten: rgba(42,35,29,.155);



  --block-schimmer: linear-gradient(to bottom,
                      rgba(255,255,255,0) 52%, rgba(42,35,29,.022));



















  --grund-licht: radial-gradient(120% 90% at 50% -10%,
                   rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
  --schleier: rgba(42,35,29,.34);

















  --textur-gemessen:
    radial-gradient(circle at 1px 1px,
      color-mix(in srgb, currentColor 22%, transparent) 1px,
      transparent 1.4px) 0 0 / 10px 10px;
  --textur-geschaetzt:
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, currentColor 12%, transparent) 0 1px,
      transparent 1px 6px);



  --strich:       1px dashed color-mix(in srgb, var(--linie-stark) 70%, transparent);
  --strich-fein:  1px dashed color-mix(in srgb, var(--linie-stark) 45%, transparent);
  --strich-p:     1px dashed color-mix(in srgb, var(--p) 45%, transparent);



























  --a-1:  4px;  --a-2:  6px;  --a-3:  8px;
  --a-4: 10px;  --a-5: 12px;  --a-6: 14px;
  --a-7: 16px;  --a-8: 20px;  --a-9: 24px;


  --leiste-breit:  208px;




  --liste-breit:   240px;
  --leiste-schmal: 52px;
  --kopf-hoehe:    48px;
  --inhalt-max:    1440px;









  --sans: "Remind Sans", -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;







  --code-bg:      #1e1e1e;
  --code-bg-2:    #252526;
  --code-bg-3:    #2d2d2d;
  --code-bg-4:    #3a3a3a;
  --code-rand:    #333333;
  --code-rand-2:  #4a4a4a;
  --code-fg:      #FCFCFA;
  --code-fg-2:    #FCFCFA;
  --code-fg-3:    #C1C0C0;
  --code-fg-4:    #939293;
  --code-fg-5:    #727072;
  --code-schleier: rgba(0,0,0,.45);
  --code-hover:   rgba(255,255,255,.06);
  --code-hover-2: rgba(255,255,255,.10);
  --code-kante:   rgba(255,255,255,.09);
  --code-weiss:   #ffffff;
  --code-aus:     #5a5a5a;
  --code-warn:    #FE8648;
  --code-fehler:  #FE3776;
  --code-caret:   #FCFCFA;
  --code-fund:      rgba(248,231,28,.34);
  --code-fund-aktiv: rgba(248,231,28,.62);
  --code-fund-rand: #F8E71C;
  --code-nr:        #5B595C;
  --code-nr-aktiv:  #C1C0C0;
  --code-auswahl:   #403E41;
  --code-einrueckung: #403E41;


  --code-f-neu:        #A2DF60;
  --code-f-geaendert:  #5EDFEE;
  --code-f-eingefuegt: #AC99FE;


  --code-f-geaendert-hell:  #5EDFEE;
  --code-f-eingefuegt-hell: #AC99FE;


  --code-ort-rechner:   #FCCC2E;
  --code-ort-plattform: #5EDFEE;




  --buehne: #ffffff;











  --marke-gut:      #3a7549;
  --marke-frage:    #c2691f;
  --marke-kritisch: #a94434;
  --marke-hinweis:  #99685C;
  --marke-text:     #ffffff;

  --maske: #000000;




  --zeiger:      #1f2328;
  --zeiger-rand: #ffffff;
















  --fenster:        #4A4F47;
  --fenster-2:      #3f433c;
  --fenster-hover:  #414640;


  --fenster-linie:  rgba(255,255,255,.13);
  --fenster-linie-weich: rgba(255,255,255,.08);
  --fenster-linie-stark: rgba(255,255,255,.26);
  --fenster-text:   #ecedeb;
  --fenster-text-2: #c5c9c2;
  --fenster-text-3: #bcc1b8;
  --fenster-p:      #a6c9cd;
  --fenster-s:      #dcc2ba;
  --fenster-ok:     #96d8a9;
  --fenster-warn:   #eecb8e;
  --fenster-fehler: #f2b4b4;



  --fenster-schatten: 0 2px 6px rgba(0,0,0,.22), 0 14px 40px rgba(0,0,0,.28);






  --tok-comment: #727072;
  --tok-doc:     #727072;
  --tok-doc-tag: #AC99FE;
  --tok-doc-wert: #939293;
  --tok-punct:   #939293;
  --tok-keyword: #FE3776;
  --tok-control: var(--tok-keyword);
  --tok-string:  #FCCC2E;
  --tok-op:      #FE3776;
  --tok-regex:   #FCCC2E;
  --tok-number:  #AC99FE;
  --tok-bool:    #AC99FE;
  --tok-escape:  #5EDFEE;
  --tok-url:     #5EDFEE;
  --tok-prop:    #FCFCFA;
  --tok-field:   #FCFCFA;
  --tok-const:   #FF9151;
  --tok-tag:     #FE3776;
  --tok-attr:    #5EDFEE;
  --tok-attrwert: #5EDFEE;
  --tok-sel:     #A2DF60;
  --tok-func:    #A2DF60;
  --tok-anno:    #5EDFEE;
  --tok-self:    #C1C0C0;
  --tok-builtin: #5EDFEE;
  --tok-type:    #5EDFEE;
  --tok-var:     #FCFCFA;
  --tok-param:   #FF9151;




  --diff-neu:      #3fb950;
  --diff-weg:      #f85149;




  --diff-neu-hell: #00b341;
  --diff-weg-hell: #ff2d3f;
  --diff-neu-bg:   rgba(63,185,80,.13);
  --diff-weg-bg:   rgba(248,81,73,.13);
  --diff-neu-rand: rgba(63,185,80,.50);
  --diff-weg-rand: rgba(248,81,73,.50);
  --diff-neu-nr:   #7bbf87;
  --diff-neu-bg-2: rgba(63,185,80,.07);
  --diff-weg-bg-2: rgba(248,81,73,.08);
  --diff-neu-bg-3: rgba(63,185,80,.18);
  --diff-weg-bg-3: rgba(248,81,73,.16);
  --diff-weg-strich: rgba(248,81,73,.80);






  --panel:       var(--flaeche);
  --panel-2:     var(--flaeche-2);
  --line:        var(--linie);
  --line-soft:   var(--linie-weich);
  --muted:       var(--text-2);
  --faint:       var(--text-3);
  --accent:      var(--p);
  --accent-deep: var(--p-tief);
  --accent-soft: var(--p-flaeche);
  --brown:       var(--s);
  --error:       var(--fehler);
  --error-bg:    var(--fehler-flaeche);
  --radius:      var(--r-1);
  --edge:        var(--kante);
  --shadow:      var(--schatten-2);
  --code-leiste: var(--code-bg-2);
  --bg:          var(--grund);
}








html[data-theme="dark"] {















  --grund:        #1a1918;
  --flaeche:      #2a2826;
  --flaeche-2:    #343230;




  --flaeche-3:    #423f3d;
  --seitenleiste: #2a2826;
  --q-marke-grund: #e4e0dc;



  --linie:        rgba(255,255,255,.095);
  --linie-weich:  rgba(255,255,255,.05);
  --linie-stark:  rgba(255,255,255,.20);
  --linie-bedien: #8b7f77;

  --text:         #e8e5e3;
  --text-2:       #B8B7B0;
  --text-3:       #B1A29F;

  --p:            #6b989d;
  --p-tief:       #8ab4b8;
  --p-hell:       #8ab4b8;
  --p-flaeche:    rgba(107,152,157,.15);
  --p-linie:      rgba(107,152,157,.32);
  --p-schleier:   rgba(107,152,157,.14);
  --auf-farbe:    #1c2a2b;
  --sd-puls:      #ffffff;

  --s:            #af8b83;
  --s-tief:       #c2a9a3;
  --s-flaeche:    rgba(153,104,92,.22);
  --s-linie:      rgba(175,139,131,.35);
  --s-schleier:   rgba(175,139,131,.16);

  --ok: #5eb277;  --warn: #dfae5c;  --fehler: #dd8080;
  --g-neutral: #8d9099;  --g-gruen: #5eb277;  --g-limette: #93b95e;
  --g-gelb:    #dfae5c;  --g-orange: #dd9a68; --g-rot:     #dd8080;
  --sd-blau:   #6ec2e6;  --sd-frisch: #6d655e;  --sd-quote: #8ad2f0;
  --sd-anb:    #9085e9;
  --sd-steigt: #dd9a68;  --sd-faellt: #5eb277;
  --g-tiefrot: #b96363;
  --ok-flaeche:     rgba(94,178,119,.14);
  --warn-flaeche:   rgba(223,174,92,.14);
  --fehler-flaeche: rgba(221,128,128,.14);
  --ok-linie:       rgba(94,178,119,.32);
  --warn-linie:     rgba(223,174,92,.32);
  --fehler-linie:   rgba(221,128,128,.32);
  --ok-tief:     #5eb277;
  --warn-tief:   #dfae5c;
  --fehler-tief: #dd8080;




  --messer-kontur:     #b8b7b0;
  --messer-klinge:     #e8e5e3;
  --messer-schliff:    #fcfcfc;
  --messer-blut:       #dd8080;
  --messer-blut-tief:  #c25f5f;
  --messer-zwinge:     #63574d;
  --messer-griff:      #7b6d63;
  --messer-knopf-blut:      #8f3a2c;
  --messer-knopf-blut-tief: #6e2418;
  --messer-knopf-zwinge:    #1c2a2b;
  --messer-knopf-griff:     #3d3a38;
  --messer-knopf-kontur:    #1a1918;
  --ok-schleier:     rgba(94,178,119,.18);
  --warn-schleier:   rgba(223,174,92,.16);
  --fehler-schleier: rgba(221,128,128,.20);

  --schatten-1: 0 1px 2px rgba(0,0,0,.40);
  --schatten-2: 0 2px 4px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.40);
  --schatten-3: 0 4px 8px rgba(0,0,0,.40), 0 20px 56px rgba(0,0,0,.50);
  --kante: inset 0 1px 0 rgba(255,255,255,.05);




  --hebung: 0 1px 2px rgba(0,0,0,.38),
            0 6px 18px -6px rgba(0,0,0,.5);
  --kante-oben:  rgba(255,255,255,.075);
  --kante-unten: rgba(0,0,0,.35);

  --block-schimmer: linear-gradient(to bottom,
                      rgba(255,255,255,.032), rgba(255,255,255,0) 55%);
  --grund-licht: radial-gradient(120% 90% at 50% -10%,
                   rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%);
  --schleier: rgba(0,0,0,.55);


  --strich:      1px dashed var(--linie-stark);
  --strich-fein: 1px dashed color-mix(in srgb, var(--linie-stark) 70%, transparent);
  --strich-p:    1px dashed color-mix(in srgb, var(--p) 65%, transparent);
}




@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {















    --grund:        #1a1918;
    --flaeche:      #2a2826;
    --flaeche-2:    #343230;
    --flaeche-3:    #423f3d;
    --seitenleiste: #2a2826;
    --q-marke-grund: #e4e0dc;



    --linie:        rgba(255,255,255,.095);
    --linie-weich:  rgba(255,255,255,.05);
    --linie-stark:  rgba(255,255,255,.20);
    --linie-bedien: #8b7f77;

    --text:         #e8e5e3;
    --text-2:       #B8B7B0;
    --text-3:       #B1A29F;

    --p:            #6b989d;
    --p-tief:       #8ab4b8;
    --p-hell:       #8ab4b8;
    --p-flaeche:    rgba(107,152,157,.15);
    --p-linie:      rgba(107,152,157,.32);
    --p-schleier:   rgba(107,152,157,.14);
    --auf-farbe:    #1c2a2b;
    --sd-puls:      #ffffff;

    --s:            #af8b83;
    --s-tief:       #c2a9a3;
    --s-flaeche:    rgba(153,104,92,.22);
    --s-linie:      rgba(175,139,131,.35);
    --s-schleier:   rgba(175,139,131,.16);

    --ok: #5eb277;  --warn: #dfae5c;  --fehler: #dd8080;
  --g-neutral: #8d9099;  --g-gruen: #5eb277;  --g-limette: #93b95e;
  --g-gelb:    #dfae5c;  --g-orange: #dd9a68; --g-rot:     #dd8080;
  --sd-blau:   #6ec2e6;  --sd-frisch: #6d655e;  --sd-quote: #8ad2f0;
  --sd-anb:    #9085e9;
  --sd-steigt: #dd9a68;  --sd-faellt: #5eb277;
  --g-tiefrot: #b96363;
    --ok-flaeche:     rgba(94,178,119,.14);
    --warn-flaeche:   rgba(223,174,92,.14);
    --fehler-flaeche: rgba(221,128,128,.14);
    --ok-linie:       rgba(94,178,119,.32);
    --warn-linie:     rgba(223,174,92,.32);
    --fehler-linie:   rgba(221,128,128,.32);
    --ok-tief:     #5eb277;
    --warn-tief:   #dfae5c;
    --fehler-tief: #dd8080;




    --messer-kontur:     #b8b7b0;
    --messer-klinge:     #e8e5e3;
    --messer-schliff:    #fcfcfc;
    --messer-blut:       #dd8080;
    --messer-blut-tief:  #c25f5f;
    --messer-zwinge:     #63574d;
    --messer-griff:      #7b6d63;
    --messer-knopf-blut:      #8f3a2c;
    --messer-knopf-blut-tief: #6e2418;
    --messer-knopf-zwinge:    #1c2a2b;
    --messer-knopf-griff:     #3d3a38;
    --messer-knopf-kontur:    #1a1918;
    --ok-schleier:     rgba(94,178,119,.18);
    --warn-schleier:   rgba(223,174,92,.16);
    --fehler-schleier: rgba(221,128,128,.20);

    --schatten-1: 0 1px 2px rgba(0,0,0,.40);
    --schatten-2: 0 2px 4px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.40);
    --schatten-3: 0 4px 8px rgba(0,0,0,.40), 0 20px 56px rgba(0,0,0,.50);
    --kante: inset 0 1px 0 rgba(255,255,255,.05);




    --hebung: 0 1px 2px rgba(0,0,0,.38),
              0 6px 18px -6px rgba(0,0,0,.5);
    --kante-oben:  rgba(255,255,255,.075);
    --kante-unten: rgba(0,0,0,.35);

    --block-schimmer: linear-gradient(to bottom,
                        rgba(255,255,255,.032), rgba(255,255,255,0) 55%);
    --grund-licht: radial-gradient(120% 90% at 50% -10%,
                     rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%);
    --schleier: rgba(0,0,0,.55);


    --strich:      1px dashed var(--linie-stark);
    --strich-fein: 1px dashed color-mix(in srgb, var(--linie-stark) 70%, transparent);
    --strich-p:    1px dashed color-mix(in srgb, var(--p) 65%, transparent);
  }
}


* { box-sizing: border-box; }
html, body { height: 100%; }


html, body { overscroll-behavior-y: none; }
body {
  margin: 0;
  font-family: var(--sans);


  letter-spacing: var(--spur);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
}







html[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { -webkit-font-smoothing: antialiased; }
}

.view[hidden] { display: none !important; }














button, input, select, textarea, optgroup { color: inherit; }


svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }


.zahl, .kachel-wert, .tabelle td, .tabelle th { font-variant-numeric: tabular-nums; }

::selection { background: var(--p-schleier); }

:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }



















.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  box-shadow: var(--schatten-1);
  padding: 12px 14px;
}
.karte-kopf {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
}
.karte-kopf h3, .karte-titel {
  margin: 0; font-size: 14px; font-weight: 600; line-height: 1.25;
  color: var(--text);
}
.karte-kopf svg { width: 16px; height: 16px; color: var(--text-2); }
.karte-kopf .schub { margin-left: auto; }



.karte-fuss {
  margin: 10px -14px -12px; padding: 8px 14px;
  border-top: 1px solid var(--linie-weich);
  border-radius: 0 0 calc(var(--r-2) - 1px) calc(var(--r-2) - 1px);
  font-size: 10.5px; color: var(--text-3);
}

.karte.klickbar { cursor: pointer; transition: 140ms ease; }
.karte.klickbar:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-2); }
.karte.gewaehlt { border-color: var(--p); background: var(--p-flaeche); }




.kachel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  box-shadow: var(--schatten-1);
  padding: 10px 12px 10px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.kachel-marke {
  font-size: 10.5px; font-weight: 500; color: var(--text-3);
  letter-spacing: .03em; text-transform: uppercase;
  display: flex; align-items: center; gap: 4px;
}
.kachel-marke svg { width: 13px; height: 13px; }
.kachel-wert {
  font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--text);
  display: flex; align-items: baseline; gap: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kachel-wert .einheit { font-size: 10.5px; font-weight: 500; color: var(--text-3); }
.kachel-fuss {
  font-size: 10.5px; color: var(--text-3); line-height: 1.5;
  display: flex; align-items: center; gap: 4px;
}
.kachel-fuss svg { width: 12px; height: 12px; }
.kachel-fuss .hoch { color: var(--ok); }
.kachel-fuss .runter { color: var(--fehler); }

.kachel.p { background: var(--p-flaeche); border-color: var(--p-linie); }
.kachel.p .kachel-marke { color: var(--p-tief); }
.kachel.s { background: var(--s-flaeche); border-color: var(--s-linie); }
.kachel.s .kachel-marke { color: var(--s-tief); }

.kachel.offen, .karte.offen {
  background: none; border: var(--strich); box-shadow: none;
}





.chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-rund);
  color: var(--text-2);
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: 140ms ease;
}
.chip svg { width: 13px; height: 13px; }
.chip:hover { border-color: var(--linie-stark); color: var(--text); background: var(--flaeche-3); }
.chip.on, .chip[aria-pressed="true"] {
  background: var(--p-flaeche); border-color: var(--p-linie); color: var(--p-tief);
}
.chip.on:hover { background: var(--p-flaeche); border-color: var(--p); }
.chip.s { background: var(--s-flaeche); border-color: var(--s-linie); color: var(--s-tief); }
.chip:disabled { opacity: .45; cursor: default; pointer-events: none; }
.chip.on:disabled { opacity: 1; }



.pille {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 6px;
  border-radius: var(--r-rund);
  background: var(--flaeche-3); color: var(--text-2);
  font-size: 10.5px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.pille.p  { background: var(--p-flaeche);  color: var(--p-tief); }
.pille.s  { background: var(--s-flaeche);  color: var(--s-tief); }
.pille.ok { background: var(--ok-flaeche); color: var(--ok); }
.pille.warn   { background: var(--warn-flaeche);   color: var(--warn); }
.pille.fehler { background: var(--fehler-flaeche); color: var(--fehler); }

.pille.bald {
  background: none; border: var(--strich); color: var(--text-3);
  height: 16px; padding: 0 6px; font-size: 10.5px; font-weight: 400;
}




.iknopf {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--text-2); cursor: pointer; padding: 0;
  transition: 140ms ease;
}
.iknopf:hover { background: var(--flaeche-3); color: var(--text); }
.iknopf.an { background: var(--p-flaeche); color: var(--p-tief); border-color: var(--p-linie); }
.iknopf:disabled { opacity: .45; cursor: default; pointer-events: none; }
.iknopf.gerahmt { border-color: var(--linie); background: var(--flaeche); }



.punkt {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--text-3);
  display: inline-block;
}
.punkt.ok     { background: var(--ok); }
.punkt.warn   { background: var(--warn); }
.punkt.fehler { background: var(--fehler); }
.punkt.p      { background: var(--p); }
.punkt.aus    { background: var(--linie-stark); }


.punkt.puls { animation: punkt-atmen 2.4s ease-in-out infinite; }
@keyframes punkt-atmen {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}





.info {
  width: 16px; height: 16px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linie-stark); border-radius: 50%;
  background: none; color: var(--text-3);
  font: inherit; letter-spacing: var(--spur); font-size: 10.5px; font-weight: 600; font-style: italic;
  line-height: 1; cursor: pointer;
  transition: 140ms ease;

  position: relative;
}
.info::after {
  content: ""; position: absolute; inset: -6px;
}
.info:hover, .info[aria-expanded="true"] { border-color: var(--p); color: var(--p); }



.info-karte {
  position: fixed; z-index: 90;
  max-width: 280px; width: max-content;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  box-shadow: var(--schatten-2);
  padding: 10px 12px;
}
.info-karte h4 {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 600; line-height: 1.25;
  color: var(--text);
}
.info-karte p {
  margin: 0 0 6px; font-size: 11.5px; line-height: 1.5; color: var(--text-2);
}
.info-karte p:last-child { margin-bottom: 0; }
.info-karte .kosten {
  margin-top: 8px; padding-top: 6px;
  border-top: var(--strich-fein);
  font-size: 10.5px; color: var(--s-tief);
  display: flex; align-items: center; gap: 4px;
}
.info-karte .kosten svg { width: 12px; height: 12px; }




.trenner {
  height: 0; margin: 10px 0;
  border: none; border-top: var(--strich);
}
.trenner.fein { border-top: var(--strich-fein); }
.trenner.senkrecht {
  height: auto; width: 0; margin: 0 10px; align-self: stretch;
  border-top: none; border-left: var(--strich);
}



.leiste {
  height: 4px; border-radius: var(--r-rund);
  background: var(--flaeche-3); overflow: hidden;
}
.leiste > i {
  display: block; height: 100%; width: 0;
  background: var(--p); border-radius: inherit;
  transition: width 140ms ease;
}
.leiste.s > i      { background: var(--s); }
.leiste.warn > i   { background: var(--warn); }
.leiste.fehler > i { background: var(--fehler); }



.funken { width: 60px; height: 16px; flex: none; color: var(--p); }
.funken path { fill: none; stroke: currentColor; stroke-width: 1.5; }
.funken .flaeche { fill: var(--p-schleier); stroke: none; }




.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}
.sp-1  { grid-column: span 1; }   .sp-2  { grid-column: span 2; }
.sp-3  { grid-column: span 3; }   .sp-4  { grid-column: span 4; }
.sp-5  { grid-column: span 5; }   .sp-6  { grid-column: span 6; }
.sp-7  { grid-column: span 7; }   .sp-8  { grid-column: span 8; }
.sp-9  { grid-column: span 9; }   .sp-10 { grid-column: span 10; }
.sp-11 { grid-column: span 11; }  .sp-12 { grid-column: span 12; }




.tabelle { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.tabelle th {
  height: 26px; padding: 0 8px; text-align: left;
  font-size: 10.5px; font-weight: 500; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.tabelle td {
  height: 32px; padding: 0 8px;
  border-bottom: 1px solid var(--linie-weich);
  color: var(--text-2);
}
.tabelle tr:last-child td { border-bottom: none; }
.tabelle tbody tr:hover td { background: var(--flaeche-2); }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; }
.tabelle td strong { color: var(--text); font-weight: 600; }




.reiter-reihe {
  display: flex; align-items: center; gap: 2px;
  border-bottom: 1px solid var(--linie);
}
.reiter {
  padding: 6px 10px 6px;
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-2); font: inherit; letter-spacing: var(--spur); font-size: 11.5px;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: 140ms ease;
}
.reiter:hover { color: var(--text); }
.reiter.aktiv { color: var(--p-tief); border-bottom-color: var(--p); font-weight: 500; }
.reiter .zaehler {
  font-size: 10.5px; color: var(--text-3);
  background: var(--flaeche-3); border-radius: var(--r-rund);
  padding: 1px 4px; line-height: 1.25;
}
.reiter.aktiv .zaehler { background: var(--p-flaeche); color: var(--p-tief); }



.schalter {
  width: 28px; height: 16px; flex: none; padding: 0;
  background: var(--flaeche-3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-rund);
  position: relative; cursor: pointer;
  transition: 140ms ease;
}
.schalter::before {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--flaeche); box-shadow: var(--schatten-1);
  transition: 140ms ease;
}
.schalter[aria-checked="true"], .schalter.an {
  background: var(--p); border-color: var(--p);
}
.schalter[aria-checked="true"]::before, .schalter.an::before {
  transform: translateX(12px); background: var(--auf-farbe);
}
.schalter:disabled { opacity: .45; cursor: default; }







.leerzustand {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 32px 20px; text-align: center;
  color: var(--text-3);
}
.leerzustand > svg { width: 20px; height: 20px; color: var(--linie-stark); }
.leerzustand p { margin: 0; font-size: 11.5px; line-height: 1.5; max-width: 320px; }




.schublade {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: 380px; max-width: 92vw;
  background: var(--flaeche);
  border-left: 1px solid var(--linie);
  box-shadow: var(--schatten-3);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 180ms ease;
}
.schublade.auf { transform: none; }
.schublade-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; flex: none;
  border-bottom: 1px solid var(--linie);
}
.schublade-kopf h3 { margin: 0; font-size: 14px; font-weight: 600; }
.schublade-kopf .iknopf { margin-left: auto; }
.schublade-koerper { flex: 1; min-height: 0; overflow: auto; padding: 12px; }




.wolke {
  position: absolute; z-index: 95;
  padding: 4px 8px; border-radius: var(--r-1);
  background: var(--text); color: var(--flaeche);
  font-size: 11.5px; line-height: 1.5; white-space: nowrap;
  box-shadow: var(--schatten-2);
  pointer-events: none; opacity: 0;
  transition: opacity 140ms ease;
}
.wolke.da { opacity: 1; }



.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 10px;
  background: var(--flaeche); color: var(--text-2);
  border: 1px solid var(--linie); border-radius: var(--r-1);
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: 140ms ease;
}
.knopf:hover { background: var(--flaeche-3); color: var(--text); border-color: var(--linie-stark); }
.knopf.p {
  background: var(--p); border-color: var(--p); color: var(--auf-farbe);
  box-shadow: var(--kante);
}
.knopf.p:hover { background: var(--p-tief); border-color: var(--p-tief); color: var(--auf-farbe); }


.knopf.s {
  background: var(--s-flaeche); border-color: var(--s); color: var(--s-tief);
  font-weight: 500;
}
.knopf.s:hover { background: var(--s-schleier); border-color: var(--s-tief); }
.knopf:disabled { opacity: .45; cursor: default; pointer-events: none; }
.knopf svg { width: 14px; height: 14px; }


.ablage {
  border: var(--strich); border-radius: var(--r-2);
  padding: 16px; text-align: center;
  color: var(--text-3); font-size: 11.5px;
  background: none;
  transition: 140ms ease;
}
.ablage.drop-aktiv { border-color: var(--p); background: var(--p-flaeche); color: var(--p-tief); }


.marke {
  font-size: 10.5px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.neben { color: var(--text-2); }
.leise { color: var(--text-3); }
.mono  { font-family: var(--mono); font-size: 10.5px; }
.schub { margin-left: auto; }
.reihe { display: flex; align-items: center; gap: 8px; }
.reihe.eng { gap: 4px; }
.spalte { display: flex; flex-direction: column; gap: 8px; }


.center-view { display: flex; align-items: center; justify-content: center;
               min-height: 100vh; padding: 24px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);
  padding: 32px;
}

.btn {
  font: inherit; letter-spacing: var(--spur); color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--edge);
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--auf-farbe);
               box-shadow: var(--kante); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--auf-farbe); }
.btn-block { width: 100%; }

.icon-btn {
  background: none; border: none; padding: 6px; cursor: pointer;
  color: var(--muted); border-radius: var(--radius); display: inline-flex;
}
.icon-btn:hover { color: var(--text); background: var(--line-soft); }











[hidden] { display: none !important; }

.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.field input {
  width: 100%; font: inherit; letter-spacing: var(--spur); color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--flaeche); }

.form-error {
  margin: 14px 0 0; padding: 8px 12px;
  background: var(--error-bg); color: var(--error);
  border: 1px solid var(--fehler-linie); border-radius: var(--radius);
  font-size: 12px;
}

.hint { font-size: 11.5px; color: var(--faint); margin: 12px 0 0; text-align: center; }








.brand { display: flex; align-items: center; gap: 8px; }
.brand h1 {
  font-size: 18px; font-weight: 600; margin: 0; letter-spacing: .04em;
  text-transform: uppercase;
}


.brand .zusatz {
  font-size: 14px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--text-3);
}
.brand-mark {
  width: 22px; height: 22px; flex: none; position: relative;
}
.brand-mark::before {
  content: ""; position: absolute; left: 1px; top: 1px;
  width: 11px; height: 11px; border-radius: 2px;
  border: 1.5px solid var(--p);
}
.brand-mark::after {
  content: ""; position: absolute; right: 1px; bottom: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--s);
}
.brand.small { gap: 8px; font-weight: 600; font-size: 12px; }
.brand.small .brand-mark { width: 16px; height: 16px; }
.brand.small .brand-mark::before { width: 8px; height: 8px; left: 0; top: 0; }
.brand.small .brand-mark::after { width: 7px; height: 7px; right: 0; bottom: 0; }






.center-view {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  min-height: 100dvh;
  background: var(--grund);
}
.card {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  box-shadow: var(--schatten-2), var(--kante);
  padding: 28px;
}
.login-card { width: 360px; max-width: 100%; }
.login-card .brand { justify-content: center; margin-bottom: 4px; }
.login-sub {
  text-align: center; color: var(--text-3); font-size: 11.5px;
  margin: 0 0 20px; min-height: 1em;
}



.tabs {
  display: flex; background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: var(--r-1);
  padding: 2px; margin-bottom: 16px;
}
.tab {
  flex: 1; font: inherit; letter-spacing: var(--spur); font-size: 11.5px; height: 28px;
  background: none; border: none; border-radius: var(--r-1);
  color: var(--text-2); cursor: pointer;
  transition: 140ms ease;
}
.tab:hover { color: var(--text); }
.tab.active {
  background: var(--flaeche); color: var(--text); font-weight: 500;
  box-shadow: var(--schatten-1);
}
.tabpane { display: none; }
.tabpane.active { display: block; }

.login-foot {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 20px; padding-top: 14px;
  border-top: var(--strich-fein);
  font-size: 10.5px; color: var(--text-3);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--linie-stark); flex: none; }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--fehler); }





.setup-card { width: 520px; max-width: 100%; }
.setup-card h1 { font-size: 18px; font-weight: 600; margin: 0 0 8px; line-height: 1.25; }
.setup-text { color: var(--text-2); font-size: 11.5px; margin: 0 0 16px; line-height: 1.5; }
.setup-text code {
  font-family: var(--mono); font-size: 10.5px;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  padding: 1px 4px; border-radius: var(--r-1);
}
.setup-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 300px; overflow-y: auto;
}
.setup-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--linie); border-radius: var(--r-2);
  background: var(--flaeche-2);
  padding: 8px 12px; cursor: pointer;
  transition: 140ms ease;
}
.setup-item:hover { border-color: var(--linie-stark); background: var(--flaeche-3); }
.setup-item.selected {
  border-color: var(--p); background: var(--p-flaeche);
}
.setup-item .s-name { font-weight: 600; font-size: 12px; }
.setup-item .s-id { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.setup-item .s-meta { margin-left: auto; font-size: 10.5px; color: var(--text-3); }
.setup-manual { margin-top: 12px; }
.setup-actions {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 16px;
}


.field { display: block; margin-bottom: 12px; }
.field span {
  display: block; font-size: 10.5px; color: var(--text-2); margin-bottom: 4px;
}
.field input {
  width: 100%; font: inherit; letter-spacing: var(--spur); font-size: 12px; color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: var(--r-1);
  padding: 6px 10px; outline: none;
  transition: 140ms ease;
}
.field input:focus {
  border-color: var(--p); box-shadow: 0 0 0 3px var(--p-schleier);
  background: var(--flaeche);
}

.btn {
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; color: var(--text-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-1);
  padding: 0 12px; height: 30px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: 140ms ease;
}
.btn:hover { background: var(--flaeche-3); color: var(--text); border-color: var(--linie-stark); }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
.btn-primary {
  background: var(--p); border-color: var(--p); color: var(--auf-farbe);
  font-weight: 500; box-shadow: var(--kante);
}
.btn-primary:hover { background: var(--p-tief); border-color: var(--p-tief); color: var(--auf-farbe); }
.btn-block { width: 100%; height: 32px; }

.icon-btn {
  background: none; border: none; padding: 6px; cursor: pointer;
  color: var(--text-2); border-radius: var(--r-1); display: inline-flex;
}
.icon-btn:hover { color: var(--text); background: var(--flaeche-3); }

.form-error {
  margin: 12px 0 0; padding: 8px 10px;
  background: var(--fehler-flaeche); color: var(--fehler);
  border: 1px solid var(--fehler-linie); border-radius: var(--r-1);
  font-size: 11.5px;
}

.hint { font-size: 10.5px; color: var(--text-3); margin: 10px 0 0; text-align: center; }















.app {
  display: grid;
  grid-template-columns: var(--leiste-breit) minmax(0, 1fr);
  height: 100vh;



  height: 100dvh;
  transition: grid-template-columns 180ms ease;
}
.app.schmal { grid-template-columns: var(--leiste-schmal) minmax(0, 1fr); }


.app.ohne-nav { grid-template-columns: minmax(0, 1fr); }
.app.ohne-nav > #agenten-flaeche { grid-column: 1; min-height: 0; }





.marke-zeichen {
  width: 16px; height: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.marke-zeichen svg { width: 16px; height: 16px; }
.marke-zeichen rect { stroke: var(--p); }
.marke-zeichen circle { stroke: var(--s); }

.wortmarke {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: var(--kopf-hoehe); flex: none;
  overflow: hidden;
}
.wortmarke b {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--text); white-space: nowrap;
}
.wortmarke span {
  font-size: 11.5px; color: var(--text-3); white-space: nowrap;
}

.app.schmal .wortmarke { padding: 0; justify-content: center; }
.app.schmal .wortmarke b { font-size: 0; }
.app.schmal .wortmarke b::first-letter { font-size: 12px; }
.app.schmal .wortmarke span { display: none; }





.nav {
  grid-column: 1;
  background: var(--seitenleiste);
  border-right: 1px solid var(--linie);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.nav-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 8px; }
.app.schmal .nav-liste { padding: 4px 6px 8px; }

.nav-gruppe { margin-bottom: 10px; }
.nav-gruppe > h2 {
  margin: 0 0 3px; padding: 0 8px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
  line-height: 22px;
}


.app.schmal .nav-gruppe > h2 {
  font-size: 0; margin: 0 0 6px; padding: 0 6px;
  border-top: 1px solid var(--linie); line-height: 0; height: 0;
}
.app.schmal .nav-gruppe:first-child > h2 { border-top: none; margin-bottom: 0; }

.nav-eintrag {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 28px; padding: 0 8px;
  background: none; border: none; border-radius: var(--r-1);
  color: var(--text-2); font: inherit; letter-spacing: var(--spur); font-size: 12px; text-align: left;
  cursor: pointer; white-space: nowrap;
  transition: 140ms ease;
}
.nav-eintrag svg { width: 14px; height: 14px; flex: none; }
.nav-eintrag .name { overflow: hidden; text-overflow: ellipsis; }
.nav-eintrag:hover { background: var(--flaeche-3); color: var(--text); }









.nav-eintrag:disabled {
  opacity: .45;
  cursor: default;
}
.nav-eintrag:disabled:hover { background: none; color: var(--text-2); }
.nav-eintrag:disabled .bald { opacity: 1; }
.nav-eintrag.aktiv {
  background: var(--p-flaeche); color: var(--p-tief); font-weight: 500;
}


.nav-eintrag.aktiv::before {
  content: ""; position: absolute; left: -4px; top: 5px; bottom: 5px;
  width: 2px; border-radius: var(--r-rund); background: var(--p);
}





.nav-eintrag .bald {
  margin-left: auto; flex: none;
  font-size: 10.5px; color: var(--text-2);
  border: var(--strich); border-radius: var(--r-rund);
  padding: 0 4px; line-height: 14px;
}
.nav-eintrag.aktiv .bald { color: var(--p-tief); }
.app.schmal .nav-eintrag { justify-content: center; padding: 0; }
.app.schmal .nav-eintrag .name,
.app.schmal .nav-eintrag .bald { display: none; }
.app.schmal .nav-eintrag.aktiv::before { left: -2px; }




.nav-eintrag, .nav-nutzer, .nav-einklappen { min-width: 28px; min-height: 28px; }


.nav-eintrag .punkt { margin-left: auto; flex: none; }
.app.schmal .nav-eintrag .punkt {
  position: absolute; top: 4px; right: 6px; margin: 0;
}




.nav-fuss {
  flex: none; padding: 8px;
  border-top: var(--strich); margin: 0 8px;
}
.app.schmal .nav-fuss { margin: 0 6px; padding: 8px 0; }

.guthaben {
  display: flex; align-items: baseline; gap: 6px;
  padding: 2px 8px 6px;
}
.guthaben .marke { flex: 1; }
.guthaben b {
  font-size: 12px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.guthaben-knoepfe { display: flex; gap: 4px; padding: 0 8px 8px; }
.guthaben-knoepfe .knopf { flex: 1; height: 28px; padding: 0 6px; font-size: 10.5px; }
.app.schmal .guthaben,
.app.schmal .guthaben-knoepfe { display: none; }

.nav-nutzer {
  display: flex; align-items: center; gap: 6px;
  width: 100%; height: 28px; padding: 0 8px;
  background: none; border: none; border-radius: var(--r-1);
  color: var(--text-2); font: inherit; letter-spacing: var(--spur); font-size: 11.5px; text-align: left;
  cursor: pointer;
}
.nav-nutzer:hover { background: var(--flaeche-3); }
.nav-nutzer .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-nutzer .punkt { flex: none; }
.app.schmal .nav-nutzer { justify-content: center; padding: 0; }
.app.schmal .nav-nutzer .name,
.app.schmal .nav-nutzer svg:last-child { display: none; }

.nav-einklappen {
  display: flex; align-items: center; gap: 6px;
  width: 100%; height: 26px; padding: 0 8px; margin-top: 2px;
  background: none; border: none; border-radius: var(--r-1);
  color: var(--text-3); font: inherit; letter-spacing: var(--spur); font-size: 10.5px; text-align: left;
  cursor: pointer;
}
.nav-einklappen:hover { background: var(--flaeche-3); color: var(--text-2); }
.nav-einklappen svg { transition: transform 180ms ease; }
.app.schmal .nav-einklappen { justify-content: center; padding: 0; }
.app.schmal .nav-einklappen span { display: none; }
.app.schmal .nav-einklappen svg { transform: rotate(180deg); }


.rahmen {
  grid-column: 2;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;


  position: relative;
}




.kopf {
  height: var(--kopf-hoehe); flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px 0 16px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: relative; z-index: 30;
}
.kopf-titel {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex: none;
}
.kopf-titel h1 {
  margin: 0; font-size: 14px; font-weight: 600; line-height: 1.25;
  color: var(--text); white-space: nowrap;
}
.kopf-titel .krume {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-3); min-width: 0;
}
.kopf-titel .krume svg { width: 12px; height: 12px; }
.kopf-titel .krume span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }




.kopf-suche {
  flex: 1; max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: var(--r-rund);
  color: var(--text-3);
  transition: 140ms ease;
}
.kopf-suche:focus-within { border-color: var(--p-linie); background: var(--flaeche); }
.kopf-suche svg { width: 14px; height: 14px; flex: none; }
.kopf-suche input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; color: var(--text);
}
.kopf-suche input::placeholder { color: var(--text-3); }
.kopf-suche kbd {
  flex: none; font-family: var(--sans); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--linie); border-radius: var(--r-1);
  padding: 1px 4px; line-height: 1.5; background: var(--flaeche);
}

.kopf-rechts { display: flex; align-items: center; gap: 4px; flex: none; }


.konto-punkt {
  position: relative;
  width: 28px; height: 28px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-flaeche); color: var(--p-tief);
  border: 1px solid var(--p-linie); border-radius: 50%;
  font: inherit; letter-spacing: var(--spur); font-size: 10.5px; font-weight: 600; cursor: pointer;
  transition: 140ms ease;
}
.konto-punkt:hover { border-color: var(--p); }
.konto-punkt .punkt {
  position: absolute; right: -1px; bottom: -1px;
  box-shadow: 0 0 0 2px var(--flaeche);
}


.iknopf[data-thema] .sonne,
.iknopf[data-thema] .mond,
.iknopf[data-thema] .system { display: none; }
.iknopf[data-thema="hell"]   .sonne  { display: block; }
.iknopf[data-thema="dunkel"] .mond   { display: block; }
.iknopf[data-thema="system"] .system { display: block; }


.inhalt {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column;
}
.ansicht { display: none; flex: 1; min-height: 0; flex-direction: column; }
.ansicht.aktiv { display: flex; }



.ansicht.blaettert { overflow-y: auto; }
.ansicht.blaettert > .bahn {
  width: 100%; max-width: var(--inhalt-max); margin: 0 auto;
  padding: 16px 20px 40px;
  display: flex; flex-direction: column; gap: 16px;
}








.band {
  display: flex; align-items: stretch; gap: 16px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-3);
  box-shadow: var(--schatten-1);
  padding: 16px 16px;
}
.band-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.band-text h2 {
  margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--text);
}
.band-text p { margin: 0 0 8px; font-size: 11.5px; color: var(--text-2); }




.band-zahl {
  flex: none; min-width: 190px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 12px 16px;
  border-radius: var(--r-2);
  background:
    radial-gradient(circle at 1px 1px, var(--p-linie) 1px, transparent 1.4px)
      0 0 / 10px 10px,
    var(--p-flaeche);
  border: 1px solid var(--p-linie);
}
.band-zahl .kachel-marke { color: var(--p-tief); }
.band-wert {
  font-size: 25px; font-weight: 600; line-height: 1.25; color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.band-wert .einheit { font-size: 12px; font-weight: 500; color: var(--text-2); }




.kachelband { position: relative; }
.kachelband-kopf {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.kachelband-kopf h3 { margin: 0; font-size: 12px; font-weight: 600; }
.kachelband-spur {
  display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.schrittkarte {
  flex: none; width: 190px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-2); box-shadow: var(--schatten-1);
  padding: 10px 12px; text-align: left;
  cursor: pointer; font: inherit; letter-spacing: var(--spur); color: inherit;
  transition: 140ms ease;
}
.schrittkarte:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-2); }
.schrittkarte > svg { width: 16px; height: 16px; color: var(--p); }
.schrittkarte b { font-size: 11.5px; font-weight: 600; color: var(--text); }
.schrittkarte span { font-size: 10.5px; color: var(--text-3); line-height: 1.5; }
.schrittkarte.getan { opacity: .55; }
.schrittkarte.getan > svg { color: var(--ok); }



.kennreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }


.zweispalter { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; align-items: start; }


.wahlspalter { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; align-items: start; }
.wahlreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.merkmalliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.merkmalliste li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; color: var(--text-2); line-height: 1.5;
}
.merkmalliste li > svg {
  width: 14px; height: 14px; flex: none; margin-top: 2px;
  color: var(--p);
}

.punkt-dazu {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 6px 8px; margin-top: 4px;
  background: none; border: var(--strich); border-radius: var(--r-1);
  color: var(--text-3); font: inherit; letter-spacing: var(--spur); font-size: 10.5px;
  cursor: pointer; transition: 140ms ease;
}
.punkt-dazu:hover { border-color: var(--p); color: var(--p); }









.herr-diener {
  flex: 1; min-height: 0; min-width: 0;
  display: flex; align-items: stretch;









  overflow-x: auto; overflow-y: hidden;
}
.herr-diener > .sidebar { width: var(--liste-breit); flex: none; }




.herr-diener > .main { flex: 1 1 auto; min-width: 360px; }
.herr-diener.ohne-liste > .sidebar { display: none; }





.platzhalter-kopf {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 4px;
}
.platzhalter-kopf h2 {
  margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25;
}
.platzhalter-satz {
  margin: 0 0 6px; font-size: 12px; color: var(--text-2); max-width: 62ch;
}
.geruest { display: flex; flex-direction: column; gap: 10px; }
.geruest-feld {
  border: var(--strich); border-radius: var(--r-2);
  background: none;
}
.geruest-feld.h-klein  { height: 56px; }
.geruest-feld.h-mittel { height: 120px; }
.geruest-feld.h-gross  { height: 220px; }

.geruest-zeile {
  height: 32px; border-bottom: var(--strich-fein);
}




.geruest-feld.geruest-form {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; overflow: hidden;
}




.geruest-form .heatmap { transform: scale(.9); }
.geruest-form .heatmap-feld.leer { border-color: var(--linie-stark); opacity: .55; }
.geruest-form .achsen { width: 100%; }
.geruest-form .anteil { width: 80%; }
.geruest-form .ring   { opacity: .7; }
.geruest-form .geruest-zeile:last-child { border-bottom: none; }




@media (max-width: 900px) {
  .app { grid-template-columns: var(--leiste-schmal) minmax(0, 1fr); }
  .app .wortmarke { padding: 0; justify-content: center; }
  .app .wortmarke b { font-size: 0; }
  .app .wortmarke b::first-letter { font-size: 12px; }
  .app .wortmarke span,
  .app .nav-eintrag .name,
  .app .nav-eintrag .bald,
  .app .guthaben, .app .guthaben-knoepfe,
  .app .nav-nutzer .name,
  .app .kunde-zeile,
  .app .nav-einklappen span { display: none; }
  .app .nav-nutzer-zeile { flex-direction: column; gap: 2px; }
  .app .nav-gruppe > h2 {
    font-size: 0; margin: 0 0 6px; padding: 0 6px;
    border-top: 1px solid var(--linie); line-height: 0; height: 0;
  }
  .app .nav-gruppe:first-child > h2 { border-top: none; }
  .app .nav-eintrag,
  .app .nav-nutzer,
  .app .nav-einklappen { justify-content: center; padding: 0; }
  .kopf-suche { max-width: none; }
  .kopf-suche kbd { display: none; }
  .zweispalter, .wahlspalter { grid-template-columns: minmax(0, 1fr); }
  .herr-diener > .sidebar { width: 200px; }


  .herr-diener > .main { min-width: 0; }
}
@media (max-width: 700px) {
  .band { flex-direction: column; }
  .band-zahl { min-width: 0; }
}








.band-zahl .kachel-fuss,
.band-zahl .kachel-marke,
.kachel.p .kachel-fuss,
.kachel.s .kachel-fuss,
.band-zahl .info,
.kachel.p .info,
.kachel.s .info { color: var(--text-2); }







.field input,
.agent-pick select,
.schalter,
.kopf-suche,
.mic-panel select,
input[type="text"], input[type="password"], input[type="search"],
textarea:not(#input) {
  border-color: var(--linie-bedien);
}


.schalter:not([aria-checked="true"]):not(.an) {
  border-color: var(--linie-bedien);
}





.mehr-menu[hidden],
.kopf-suche[hidden],
.krume[hidden],
.info-karte[hidden],
.schublade[hidden],
.kachelband[hidden],
.reihe[hidden],
.spalte[hidden],
.raster[hidden],
.kennreihe[hidden],
.zweispalter[hidden],
.wahlspalter[hidden],
.band[hidden],
.leerzustand[hidden],
.reiter-reihe[hidden],
.chip[hidden],
.pille[hidden],
.iknopf[hidden],
.knopf[hidden],
.btn[hidden],
.icon-btn[hidden],
.mehr-zeile[hidden],
.nav-nutzer-zeile[hidden],
.guthaben[hidden],
.guthaben-knoepfe[hidden] { display: none; }


.liste-kopf {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px 6px; flex: none;
}






.kunde-zeile {
  flex: none; margin: 0 12px 6px; padding: 0 0 8px;
  border-bottom: var(--strich-fein);
  font-size: 10.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app.schmal .kunde-zeile { display: none; }

.nav-nutzer-zeile { display: flex; align-items: center; gap: 2px; }




.nav-nutzer-zeile .nav-nutzer { flex: 1 1 auto; min-width: 28px; }
.app.schmal .nav-nutzer-zeile { flex-direction: column; gap: 2px; }


.zuletzt-zeile {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 4px 6px;
  background: none; border: none; border-radius: var(--r-1);
  color: var(--text-2); font: inherit; letter-spacing: var(--spur); font-size: 11.5px; text-align: left;
  cursor: pointer; transition: 140ms ease;
}
.zuletzt-zeile:hover { background: var(--flaeche-2); color: var(--text); }
.zuletzt-zeile .z-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zuletzt-zeile .z-wann { flex: none; font-size: 10.5px; color: var(--text-3); }











.topbar {
  display: flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 4px 12px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  flex-wrap: wrap;
}
.agent-pick {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--text-3);
}
.agent-pick select {
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: var(--r-1);
  padding: 4px 8px; outline: none; max-width: 200px; height: 28px;
}
.agent-pick select:focus { border-color: var(--p); }
.agent-pick select:disabled { color: var(--text-3); }






.agent-pick select.nur-daten {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.agent-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--linie-bedien); border-radius: var(--r-1);
  padding: 4px 7px; height: 28px; max-width: 220px; cursor: pointer;
}
.agent-knopf:hover { border-color: var(--p); }
.agent-knopf:focus-visible { outline: 2px solid var(--p); outline-offset: 1px; }
.agent-knopf:disabled { color: var(--text-3); cursor: default; }
.agent-knopf .ak-zeichen { display: inline-flex; flex: none; color: var(--text-2); }
.agent-knopf .ak-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-knopf .ak-pfeil { width: 12px; height: 12px; flex: none; color: var(--text-3); }

.kmenu-icon svg { display: block; }





.conv-item .c-agent.nur-zeichen {
  display: inline-flex; align-items: center; flex: none;
  color: var(--faint); max-width: none;
}
.conv-item .c-agent.nur-zeichen svg { display: block; }
.conv-item.active .c-agent.nur-zeichen { color: var(--muted); }

.session-tag { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }





.mehr-wrap { position: relative; display: inline-flex; }
.mehr-menu {
  position: absolute; top: calc(100% + 5px); right: 0; z-index: 40;
  min-width: 180px; padding: 4px;
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r-2);
  box-shadow: var(--schatten-2);
  display: flex; flex-direction: column; gap: 2px;
}
.mehr-menu > * { width: 100%; justify-content: flex-start; }
.mehr-menu .chip { border-color: transparent; background: none; height: 26px; }
.mehr-menu .chip:hover { background: var(--flaeche-3); border-color: transparent; }
.mehr-menu .chip.on { background: var(--p-flaeche); }
.mehr-menu .trenner { margin: 3px 0; }



.mehr-zeile {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 4px; border-radius: var(--r-1);
}
.mehr-zeile:hover { background: var(--flaeche-2); }
.mehr-zeile .info { margin-left: auto; flex: none; }
.mehr-name { font-size: 11.5px; color: var(--text-2); }


.mehr-zeile.ist-draussen::before {
  content: "in der Leiste";
  font-size: 10.5px; color: var(--text-3);
}


.main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  position: relative; min-height: 0;
}









.sidebar {
  width: 240px; flex: none;
  background: var(--flaeche-2);
  border-right: 1px solid var(--linie);
  display: flex; flex-direction: column;
  min-height: 0;
}
.side-head { padding: 16px 16px 12px; }
.customer-chip {
  margin-top: 10px;
  font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--line); border-bottom: 2px solid var(--brown);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 4px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--edge);
}

.btn-new { margin: 4px 16px 12px; justify-content: flex-start; font-size: 12px; }

.conv-list { flex: 1; overflow-y: auto; padding: 0 8px; }






.conv-item {
  display: block; width: 100%; text-align: left;




  font: inherit; letter-spacing: var(--spur); font-size: 13px; color: var(--text);
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  height: 28px; box-sizing: border-box;
  padding: 0 10px; margin-bottom: 2px; cursor: pointer;
  white-space: nowrap;











}
.conv-item:hover { background: var(--line-soft); }
.conv-item.active { background: var(--panel); border-color: var(--line);
                    box-shadow: var(--kante), var(--schatten-1); }
.conv-item .c-flags { font-size: 10.5px; color: var(--faint); margin-left: 6px; }

.side-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.side-user { display: flex; align-items: center; gap: 8px; font-size: 12px;
             color: var(--muted); min-width: 0; flex: 1; }
.side-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }













.topbar .chip.on { font-weight: 500; }




.chip.on:disabled { opacity: 1; }

.spacer { flex: 1; }






.chat-scroll { flex: 1; overflow-y: auto; min-height: 118px; }







.chat-inner { max-width: 1040px; margin: 0 auto; padding: 28px 24px 12px; }





.empty-state { text-align: center; color: var(--text-3); padding: 56px 0 32px; }
.empty-state h2 {
  color: var(--text); font-size: 18px; font-weight: 600;
  margin: 14px 0 6px; line-height: 1.25;
}
.empty-state p { font-size: 11.5px; margin: 0; line-height: 1.5; }
.empty-mark {
  width: 24px; height: 24px; margin: 0 auto; position: relative;
}
.empty-mark::before {
  content: ""; position: absolute; left: 1px; top: 1px;
  width: 12px; height: 12px; border-radius: 2px;
  border: 1.5px solid var(--p);
}
.empty-mark::after {
  content: ""; position: absolute; right: 1px; bottom: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--s);
}







.leer-modell { margin: 28px auto 0; max-width: 640px; text-align: center; }
.leer-modell[hidden] { display: none; }

.empty-state > .leer-modell:first-child { margin-top: 0; }



.lm-agent {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; color: var(--text); text-align: left;
  background: none; border: 0; border-radius: var(--radius); padding: 4px 14px;
  cursor: pointer;
}
.lm-agent:hover { background: var(--flaeche-3); }
.lm-agent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-a-zeichen { display: inline-flex; flex: none; color: var(--accent-deep); }
.lm-a-name { font-size: 22px; font-weight: 600; line-height: 1.25; }
.lm-a-notiz {
  margin: 4px auto 0; max-width: 460px; font-size: 11.5px; line-height: 1.5; color: var(--faint);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.lm-mit { margin-top: 16px; font-size: 11px; color: var(--faint); }
.lm-anbieter {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.lm-name { margin-top: 3px; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--text); }
.lm-unter {
  margin-top: 4px; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 12px;
  font-size: 11.5px; color: var(--faint);
}
.lm-id { font-family: var(--mono); font-size: 11px; }
.lm-fakten {
  margin: 18px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px;
}
.lm-fakt dt {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.lm-fakt dd {
  margin: 3px 0 0; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums;
}
.lm-zeile {
  margin-top: 14px; display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 4px 20px; font-size: 12px; color: var(--muted);
}
.lm-zeile b { font-weight: 600; color: var(--text); }
.lm-leise { color: var(--faint); }
.lm-denken { display: inline-flex; align-items: center; gap: 4px; }
.lm-stufen {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.lm-stufe { min-width: 0; font-size: 11.5px; color: var(--faint); }
.lm-s-name { font-weight: 600; color: var(--muted); }
.lm-s-modell {
  margin-top: 3px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lm-s-modell.um { color: var(--accent-deep); }
.lm-s-kontext { margin-top: 1px; font-variant-numeric: tabular-nums; }
.lm-stufe.jetzt .lm-s-name { color: var(--accent-deep); }
.lm-stufe.jetzt .lm-s-name::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px;
  border-radius: 50%; background: var(--accent); vertical-align: 1px;
}
.lm-stufe.jetzt .lm-s-modell { color: var(--text); }
@media (max-width: 640px) {
  .lm-stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}



.lm-kopf {
  display: inline-block; font: inherit; color: inherit; text-align: center;
  background: none; border: 0; border-radius: var(--radius); padding: 6px 18px 4px;
  cursor: pointer;
}
.lm-kopf:hover { background: var(--flaeche-3); }
.lm-kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lm-kopf .lm-anbieter, .lm-kopf .lm-name { display: block; }
.lm-pfeil { width: 16px; height: 16px; margin-left: 6px; vertical-align: 1px; color: var(--faint); }
.lm-kopf:hover .lm-pfeil { color: var(--accent-deep); }
.lm-wahl { color: var(--accent-deep); }






.dlg-card.mw-karte {
  width: 780px; max-width: 100%; max-height: 86vh;
  display: flex; flex-direction: column; padding: 0;
}
.mw-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px 22px; border-bottom: 1px solid var(--line);
}
.mw-kopf h2 { margin: 0; font-size: 15px; }
.mw-agent { font-size: 12px; color: var(--faint); }
.mw-kopf .mw-zu { margin-left: auto; }
.mw-spalten, .mw-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px 104px 64px; gap: 12px; align-items: center;
}
.mw-spalten {
  padding: 9px 30px 6px; border-bottom: 1px solid var(--line-soft);
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.mw-spalten span:not(:first-child) { text-align: right; }
.mw-liste { flex: 1; min-height: 0; overflow: auto; padding: 4px 8px 12px; }
.mw-gruppe {
  margin: 14px 14px 4px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.mw-zeile {
  width: 100%; padding: 8px 14px 8px 22px;
  font: inherit; color: var(--text); text-align: left;
  background: none; border: 0; border-radius: var(--r-1); cursor: pointer;
}
.mw-zeile:hover { background: var(--flaeche-3); }
.mw-zeile.gilt { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.mw-zeile.aus { cursor: default; opacity: .5; }
.mw-zeile.aus:hover { background: none; }
.mw-zeile.standard { margin-bottom: 4px; }
.mw-links { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mw-name { font-size: 13px; font-weight: 600; }
.mw-marke { margin-left: 8px; font-size: 10.5px; font-weight: 500; color: var(--accent-deep); }
.mw-marke.leise { color: var(--faint); }
.mw-notiz { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-wert { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.mw-zeile.gilt .mw-wert { color: var(--text); }
.mw-leer { padding: 28px 12px; text-align: center; font-size: 12px; color: var(--faint); }
.mw-fuss {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 14px 22px; border-top: 1px solid var(--line);
}
.mw-ersatz { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mw-ersatz-wahl {
  font: inherit; font-size: 12px; color: var(--text);
  background: var(--flaeche-2); border: 1px solid var(--line); border-radius: var(--r-1);
  height: 30px; padding: 0 8px; max-width: 320px;
}
.mw-fuss .btn-primary { margin-left: auto; }


.msg-user {
  display: flex; justify-content: flex-end; margin: 16px 0;
}
.msg-user .bubble {
  font-size: var(--text-lesen);
  max-width: 78%;
  background: var(--accent-soft);
  border: 1px solid var(--p-linie);
  border-radius: var(--radius);
  box-shadow: var(--edge);
  padding: 10px 14px;
  white-space: pre-wrap; word-break: break-word;
}


.turn { margin: 16px 0 24px; }

.turn .think {


  color: var(--muted); font-size: var(--text-lesen);
  border: 1px solid var(--line);
  padding: 6px 12px 6px 12px; margin: 10px 0;
  word-break: break-word;


; border-radius: 8px;}



.think.md h1, .think.md h2, .think.md h3, .think.md h4 {
  font-size: 12px; font-weight: 600; color: var(--text); margin: 10px 0 4px;
}
.think.md p { margin: 0 0 6px; }
.think.md p:last-child { margin-bottom: 0; }
.think.md ul, .think.md ol { margin: 0 0 6px; padding-left: 20px; }
.think.md li { margin: 2px 0; }
.think.md pre { margin: 8px 0; }
.think.md hr { margin: 8px 0; }
.think.md blockquote { margin: 8px 0; }
.think.md table { font-size: 11.5px; }


.think.md strong { color: var(--text); }

.turn .note {
  color: var(--faint); font-size: 11.5px; margin: 8px 0;
  display: flex; align-items: baseline; gap: 6px;
}









.turn .note--nachtrag {
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  padding: 6px 8px 6px 8px;
  align-items: center;
}
.turn .note--nachtrag .note__zeichen {
  flex: none; display: inline-flex; color: var(--accent);
}
.turn .note--nachtrag .note__zeichen svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
}








.post-stimmen { margin: 8px 0 12px; }
.stimme { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 14px; }
.stimme__bild {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--s-flaeche); color: var(--s-tief); border: 1px solid var(--s-linie);
  font: 600 10px/1 var(--sans); letter-spacing: .04em;
}
.stimme__rechts {
  min-width: 0; flex: 0 1 auto;
  font-size: var(--text-lesen); width: min(78%, 62ch);
}
.stimme__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  font-size: 11.5px; color: var(--faint); letter-spacing: var(--spur);
  margin: 3px 0 4px; cursor: pointer;
}
.stimme__kopf b { color: var(--text); font-weight: 600; }
.stimme__blase {
  font-size: var(--text-lesen); line-height: 1.5; color: var(--text);
  background: var(--s-flaeche); border: 1px solid var(--s-linie); box-shadow: var(--edge);
  border-radius: 4px var(--r-2) var(--r-2) var(--r-2); padding: 9px 13px;
  word-break: break-word;
}
.stimme__betreff { font-weight: 600; margin-bottom: 2px; }
.stimme__text > :first-child { margin-top: 0; }
.stimme__text > :last-child { margin-bottom: 0; }
.stimme__kurz {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.stimme .stimme__voll { display: none; }
.stimme.ist-offen .stimme__voll { display: block; }
.stimme.ist-offen .stimme__kurz { display: none; }
.stimme__status { font-size: 11px; color: var(--faint); margin-top: 5px; }
.stimme__leise { color: var(--faint); font-size: 11px; }
.stimme__voll > .stimme__leise { margin-top: 6px; }
.stimme__warn { color: var(--warn); }
.stimme__ok   { color: var(--ok); }
.stimme__p    { color: var(--accent-deep); }
.stimme__anlagen {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--s-linie);
  font-size: 11.5px;
}
.stimme__anlage { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.stimme__anlage svg {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.stimme__bild svg { color: var(--s-tief); }
.post-weitere { font-size: 11px; color: var(--faint); margin: -6px 0 10px 36px; }

.stimme--vorschau { margin: 8px 0 4px; }
.stimme--vorschau .stimme__rechts { width: auto; max-width: 100%; }
.nm-zeile { font-size: 12px; color: var(--text); margin: 2px 0 4px; }
.nm-zeile.nm-leise { color: var(--muted); }
.nm-zeile b { font-weight: 600; color: var(--text); }



.stimme--eigen { flex-direction: row-reverse; }
.stimme--eigen .stimme__bild { background: var(--flaeche-2); color: var(--muted); border-color: var(--linie); }
.stimme--eigen .stimme__kopf { justify-content: flex-end; }
.stimme--eigen .stimme__status { text-align: right; }
.stimme--eigen .stimme__blase {
  background: var(--flaeche-2); border-color: var(--linie);
  border-radius: var(--r-2) 4px var(--r-2) var(--r-2);
}
.stimme--vorschau.stimme--eigen .stimme__rechts { width: min(84%, 62ch); }





.nm-faden { margin: 8px 0 12px; }
.nm-faden > .stimme { margin-top: 4px; }
.nm-faden__knopf {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11px; color: var(--faint); letter-spacing: var(--spur); margin: 0 0 2px 36px;
}
.nm-faden__knopf::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s var(--ease-out);
}
.nm-faden.ist-offen .nm-faden__knopf::before { transform: rotate(45deg); }
.nm-faden__knopf:hover { color: var(--muted); }
.nm-faden__liste {
  display: none; margin: 4px 0 2px 12px; padding: 2px 0 2px 14px;
  border-left: 1px dashed var(--linie-stark);
}
.nm-faden.ist-offen .nm-faden__liste { display: block; }
.nm-faden__mehr { font-size: 11px; color: var(--faint); margin: 2px 0 6px; }
.nmv { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 8px; }
.nmv--eigen { flex-direction: row-reverse; }
.stimme__bild.nmv__bild { width: 20px; height: 20px; font-size: 8.5px; }
.nmv--eigen .nmv__bild { background: var(--flaeche-2); color: var(--muted); border-color: var(--linie); }
.nmv__rechts { min-width: 0; font-size: 12.5px; width: min(76%, 58ch); }
.nmv__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  font-size: 11px; color: var(--faint); margin: 2px 0 3px;
}
.nmv--eigen .nmv__kopf { justify-content: flex-end; }
.nmv__kopf b { color: var(--muted); font-weight: 600; }
.nmv__stand { color: var(--faint); }
.nmv__blase {
  font-size: 12.5px; line-height: 1.45; color: var(--muted); cursor: pointer;
  background: var(--s-flaeche); border: 1px solid var(--s-linie);
  border-radius: 4px var(--r-2) var(--r-2) var(--r-2); padding: 6px 10px;
}
.nmv--eigen .nmv__blase {
  background: var(--flaeche-2); border-color: var(--linie);
  border-radius: var(--r-2) 4px var(--r-2) var(--r-2);
}
.nmv__blase b { display: block; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.nmv__text {
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.nmv.ist-ganz .nmv__text { display: block; -webkit-line-clamp: unset; overflow: visible; }





.haken {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  white-space: nowrap; cursor: default;
}
.haken svg {
  width: 17px; height: 11px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.haken--grau  { color: var(--faint); }
.haken--blau  { color: var(--sd-blau); }
.haken--gruen { color: var(--ok); }
.haken__wort { font-weight: 600; }
.haken__zeit { color: var(--faint); font-weight: 400; }
.nmv__kopf .haken svg { width: 15px; height: 10px; }

.haken[data-stand="gelesen"] ~ .haken__zusatz,
.haken[data-stand="abgehakt"] ~ .haken__zusatz { display: none; }

.turn .answer {
  margin: 10px 0 4px; word-break: break-word;


  font-size: var(--text-lesen);
}





.turn-error {
  margin: 10px 0; padding: 6px 12px 6px 12px;
  border: 1px solid color-mix(in srgb, var(--fehler) 50%, transparent);
  color: var(--fehler); font-size: 12.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; border-radius: 8px; border-color: var(--fehler-linie, color-mix(in srgb, var(--fehler) 45%, transparent)); border-radius: 9px; background: var(--fehler-flaeche, color-mix(in srgb, var(--fehler) 8%, transparent)); padding: 7px 12px; }





.unbelegt {
  margin: 10px 0 2px; padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--brown) 50%, transparent);
  background: var(--panel-2, transparent);
  border-radius: var(--radius);
  font-size: 11.5px; color: var(--faint); border: 1px solid var(--linie, var(--line)); border-radius: 9px; background: var(--flaeche-2, var(--panel-2)); padding: 7px 12px; }

























.vl-ende { --ton: var(--fehler); }
.vl-ende.ton-warn { --ton: var(--warn); }








.vl-reihe.vl-ende::before { bottom: auto; height: 13px; }
.vl-reihe.vl-ende::after { content: none; }
.vl-ende-feld { grid-column: 1 / -1; padding: 0 8px 0 26px; }
.vl-ende-kante {
  height: 1px; margin-bottom: 11px;
  background: linear-gradient(to right, var(--ton),
              color-mix(in srgb, var(--ton) 22%, transparent) 55%, transparent);
}
.vl-ende-kopf { display: flex; align-items: center; gap: 9px; }
.vl-ende-zeichen { display: inline-flex; flex: none; color: var(--ton); }
.vl-ende-zeichen svg { width: 17px; height: 17px; }
.vl-ende-wort {
  font-size: 16px; font-weight: 600; letter-spacing: -.005em; color: var(--ton);
}
.vl-ende-wo {
  margin-left: auto; padding-left: 12px; font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}


.vl-ende-zeichen svg rect,
.abt-zeichen svg rect { fill: currentColor; }


.ende-satz {
  padding-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--text);
  word-break: break-word;
}
.ende-fakten {
  margin-top: 5px; font-size: 11.5px; line-height: 1.6; letter-spacing: .01em;
  color: var(--muted);
}
.ende-fakten > span + span::before { content: " · "; color: var(--faint); }



.abbruchtext {
  --ton: var(--warn);
  position: relative;
  margin: 16px 0 4px; padding-top: 13px;
  word-break: break-word;
}

.abbruchtext::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, var(--ton),
              color-mix(in srgb, var(--ton) 22%, transparent) 55%, transparent);
}
.abbruchtext.ton-fehler { --ton: var(--fehler); }
.abt-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; }
.abt-zeichen { display: inline-flex; flex: none; color: var(--ton); }
.abt-zeichen svg { width: 17px; height: 17px; }
.abt-titel { font-size: 16px; font-weight: 600; letter-spacing: -.005em; color: var(--ton); }
.abt-wo {
  margin-left: auto; font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.abt-leib { margin-left: 26px; }
.abt-leib .ende-satz { padding-top: 6px; }

.abt-zeile { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--faint); }
.abt-zahl { font-weight: 600; color: var(--text); }
.abt-fehler { font-weight: 500; color: var(--fehler); }
.abt-warn { font-weight: 500; color: var(--warn); }
.abt-ok { font-weight: 500; color: var(--ok); }




.vl-ende .abt-fehler, .vl-ende .abt-warn, .vl-ende .abt-ok,
.abbruchtext .abt-fehler, .abbruchtext .abt-warn, .abbruchtext .abt-ok {
  color: var(--text); font-weight: 600;
}


.vl-ende .abt-ordner, .abbruchtext .abt-ordner { color: var(--muted); }
.vl-ende .abt-ordner:hover, .abbruchtext .abt-ordner:hover { color: var(--accent-deep); }
.abt-code {
  font-family: var(--mono); font-size: .9em;
  background: var(--flaeche-3); border: 1px solid var(--line-soft);
  padding: 0 4px; border-radius: var(--r-1);
}


.abt-ordner {
  font: inherit; color: var(--accent-deep);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.abt-ordner:hover { color: var(--accent); }
.abt-ordner:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}

.turn-meta {
  margin-top: 10px; font-size: 10.5px; color: var(--faint);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.turn-meta .mock-flag { color: var(--brown); font-weight: 600; }

.turn-meta .turn-tempo { font-variant-numeric: tabular-nums; cursor: help; }







.turn-meta { gap: 4px 22px; }
.tm-gruppe { display: inline-flex; align-items: baseline; flex-wrap: wrap; white-space: nowrap; }
.tm-gruppe > span + span::before {
  content: "\00b7"; padding: 0 6px; color: var(--faint); opacity: .6;
}
.turn-meta .turn-modell, .turn-meta .turn-betrag { color: var(--text-2); }

.turn-meta .turn-lauf {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; letter-spacing: .02em;
  color: var(--faint); cursor: pointer; padding: 0 3px; border-radius: 4px; user-select: all;
}
.turn-meta .turn-lauf:hover, .turn-meta .turn-lauf:focus-visible { color: var(--text-2); background: var(--hover, rgba(127,127,127,.12)); }
.turn-meta .turn-lauf.is-kopiert { color: var(--ok, #2f7d32); }






.turn-meta { align-items: center; }
.tm-aktionen {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 1px;
}
.tm-knopf {
  flex: none; width: 24px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--faint); cursor: pointer;
  transition: color var(--d1) var(--ease-out), background var(--d1) var(--ease-out);
}
.tm-knopf:hover { color: var(--text); background: var(--line-soft); }
.tm-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tm-knopf.ok { color: var(--ok); }
.tm-knopf.nein { color: var(--fehler); }
.tm-bald {
  margin-right: 6px; white-space: nowrap; color: var(--text-3);
  animation: nk-eintritt var(--d2) var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .tm-knopf { transition: none; }
  .tm-bald { animation: none; }
}



.pending {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 12px; margin: 10px 0;
}



.pending .p-zeit {
  margin-left: 2px; color: var(--faint); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.dots { display: inline-flex; gap: 4px; }
.dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .3;
  animation: dotpulse 1.2s infinite;
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dotpulse { 0%,100% { opacity: .25; } 40% { opacity: 1; } }


.toolcard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--edge);
  margin: 10px 0;
  overflow: hidden;
}
.toolcard-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  cursor: pointer; user-select: none;
  font-size: 12px;
}
.toolcard-head:hover { background: var(--panel-2); }
.toolcard-head .t-icon { color: var(--accent); display: inline-flex; }


.toolcard-head .t-name { font-size: 12px; font-weight: 600; }
.toolcard-head .t-sub { color: var(--faint); font-size: 11.5px;
                        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolcard-head .t-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
                          font-size: 10.5px; color: var(--muted); flex: none; }
.toolcard-head .chev { color: var(--faint); transition: transform 140ms; }
.toolcard.open .chev { transform: rotate(90deg); }

.t-state .runner {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); animation: dotpulse 1.1s infinite;
}
.t-state .okmark { color: var(--ok); }
.t-state .errmark { color: var(--error); }

.toolcard-body { display: none; border-top: 1px solid var(--line-soft);
                 padding: 10px 12px; background: var(--panel-2); }
.toolcard.open .toolcard-body { display: block; }
.toolcard-body .tb-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
                           color: var(--faint); margin: 8px 0 4px; }
.toolcard-body .tb-label:first-child { margin-top: 0; }





.toolcard-body .tb-kopf { margin: 8px 0 4px; }
.toolcard-body .tb-kopf:first-child { margin-top: 0; }
.toolcard-body .tb-kopf .tb-label { margin: 0; }
.toolcard-body pre {
  margin: 0; padding: 8px 10px;
  background: var(--code-bg); border: 1px solid var(--code-rand); border-radius: var(--r-1);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow: auto;
}
.toolcard-body pre code { font-family: inherit; font-size: inherit;
                          background: none; border: none; padding: 0; color: var(--code-fg); }









pre.mit-nr { display: flex; gap: 0; white-space: pre; }
pre.mit-nr .cb-nr {
  flex: none; text-align: right; user-select: none;
  color: var(--code-nr); padding-right: 10px; margin-right: 10px;
  border-right: 1px solid var(--code-rand);
}
pre.mit-nr code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; }


.tok-c { color: var(--tok-comment); }
.tok-s { color: var(--tok-string); }
.tok-k { color: var(--tok-keyword); }
.tok-ctl { color: var(--tok-control); }
.tok-ty { color: var(--tok-type); }
.tok-n { color: var(--tok-number); }
.tok-f { color: var(--tok-func); }
.tok-p { color: var(--tok-prop); }
.tok-b { color: var(--tok-bool); }
.tok-t { color: var(--tok-tag); }
.tok-sel { color: var(--tok-sel); }
.tok-at { color: var(--tok-attr); }
.tok-par { color: var(--tok-param); }
.tok-v { color: var(--tok-var); }
.tok-pu { color: var(--tok-punct); }
.tok-re { color: var(--tok-regex); }
.tok-esc { color: var(--tok-escape); }
.tok-url { color: var(--tok-url); }

.tok-doc { color: var(--tok-doc); }
.tok-dt { color: var(--tok-doc-tag); }
.tok-dv { color: var(--tok-doc-wert); }
.tok-an { color: var(--tok-anno); }
.tok-fld { color: var(--tok-field); }
.tok-cn { color: var(--tok-const); font-style: italic; }
.tok-sf { color: var(--tok-self); font-style: italic; }
.tok-bi { color: var(--tok-builtin); font-style: italic; }
.tok-av { color: var(--tok-attrwert); }
.tok-op { color: var(--tok-op); }


.medialist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.mediawrap { display: flex; flex-direction: column; gap: 6px; }

.mediacard {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-bottom: 2px solid var(--brown);
  border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--edge);
  padding: 8px 12px; cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.mediacard:hover { border-color: var(--accent); background: var(--panel-2); }
.mediacard .m-icon { color: var(--accent); display: inline-flex; }
.mediacard .m-name {
  font-family: var(--mono); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mediacard .m-open {
  margin-left: auto; flex: none;
  font-size: 11.5px; color: var(--accent-deep); font-weight: 600;
}

.m-preview {
  display: block; max-width: 100%; max-height: 320px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); cursor: zoom-in;
}




.viewer {
  position: relative;
  width: 44%; min-width: 300px;








  flex: 0 1 auto;
  display: flex; flex-direction: column;
  background: var(--panel-2);
  border-left: 1px solid var(--line);
}
.v-grip {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 2;
}
.v-grip:hover { background: var(--accent); opacity: .25; }





body.resizing { cursor: var(--zug-zeiger, col-resize); user-select: none; }
body.resizing * { cursor: inherit !important; }
body.resizing .v-frame { pointer-events: none; }

.viewer-bar {
  display: flex; align-items: center; gap: 6px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--edge);
  padding: 8px 10px 8px 14px;
}
.viewer-bar .v-title {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.viewer-bar .v-spacer { flex: 1; }
.v-btn {
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--muted); padding: 4px; cursor: pointer; display: inline-flex;


  flex: none;
}
.v-btn:hover { color: var(--accent-deep); border-color: var(--line); background: var(--panel-2); }
.v-btn.v-close:hover { color: var(--error); }

.viewer-body {
  flex: 1; min-height: 0;
  background: var(--buehne);
  overflow: auto;
  display: flex; align-items: center; justify-content: center;
}
.v-frame { width: 100%; height: 100%; border: none; background: var(--buehne); }
.v-img { max-width: 100%; max-height: 100%; object-fit: contain; }



.v-video { max-width: 100%; max-height: 100%; background: #000; }
.v-ton { width: min(420px, 90%); }























.viewer-body.v-voll {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  overflow: hidden;
}
.viewer-body.v-mittig { align-items: center; justify-content: center; }
.viewer-body.v-lesen,
.viewer-body.v-doku {
  display: block;
  overflow: auto;













  background: var(--flaeche);
  color: var(--text);
}





.v-btn[hidden] { display: none; }



.v-btn.is-an {
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-color: var(--line);
}
.v-btn.is-an:hover { background: var(--accent-soft); }


.v-trenn {
  width: 1px; height: 15px; margin: 0 3px;
  background: var(--line); flex: none;
}




.v-hinweis {
  padding: 5px 14px;
  font-size: 11.5px; line-height: 1.45;
  color: var(--warn-tief);
  background: var(--warn-flaeche);
  border-bottom: 1px solid var(--warn-linie);
  flex: none;
}
.v-hinweis[hidden] { display: none; }


.v-laden, .v-fehler {
  max-width: 300px; padding: 18px 20px;
  font-size: 12.5px; line-height: 1.5; text-align: center;
  color: var(--text-3);
}
.v-laden { animation: vLaden 1.4s ease-in-out infinite; }
@keyframes vLaden { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .v-laden { animation: none; } }
.v-fehler { color: var(--text-2); }






.v-codewrap {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--code-bg);
}



.v-codeflaeche {
  flex: 1; min-height: 0;
  overflow: auto;
  display: flex; align-items: flex-start;


  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
}
.v-nrn {
  position: sticky; left: 0; z-index: 1;
  flex: none;
  padding: 14px 10px 14px 14px;
  background: var(--code-bg);
  border-right: 1px solid var(--code-rand);
  color: var(--code-fg-4);
  text-align: right;
  white-space: pre;
  user-select: none; -webkit-user-select: none;



}
.v-code {
  flex: 1 0 auto; margin: 0;
  padding: 14px 16px;
  background: var(--code-bg);


  white-space: pre;
  tab-size: 4;
  font: inherit;
}
.v-code code {
  font: inherit;
  color: var(--code-fg);
  background: none; border: none; padding: 0;
}
.v-fuss {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 16px;
  background: var(--code-bg-2);
  border-top: 1px solid var(--code-rand);
  font-size: 11px; color: var(--code-fg-4);
}
.v-fuss-was { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-fuss-knopf {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--code-rand-2);
  border-radius: var(--r-1);
  color: var(--code-fg-3); font: inherit;
  padding: 3px 8px; cursor: pointer; flex: none;
}
.v-fuss-knopf:hover { color: var(--code-fg); background: var(--code-bg-3); }
.v-fuss-knopf.ok { color: var(--code-f-neu); border-color: var(--code-f-neu); }
.v-fuss-knopf svg {
  width: 12px; height: 12px; fill: none;
  stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}











.viewer-body.v-lesen { container-type: inline-size; }
.v-md {
  --md-schrift: clamp(15px, 0.9cqw + 9px, 18px);
  max-width: 1500px; margin: 0 auto;
  padding: clamp(18px, 3.2cqw, 44px) clamp(18px, 4cqw, 56px) 64px;
  font-size: var(--md-schrift); line-height: 1.65;
}
.viewer-body .v-md > :first-child { margin-top: 0; }
.viewer-body .v-md h1 { font-size: 1.62em; margin: 1.3em 0 0.55em; line-height: 1.25; }
.viewer-body .v-md h2 { font-size: 1.3em; margin: 1.4em 0 0.5em; line-height: 1.3; }
.viewer-body .v-md h3 { font-size: 1.1em; margin: 1.3em 0 0.4em; }
.viewer-body .v-md h1:first-child, .viewer-body .v-md h2:first-child { margin-top: 0; }


.v-md h1 { padding-bottom: 0.4em; border-bottom: 1px solid var(--line); }
.v-md p, .v-md ul, .v-md ol { margin-bottom: 1em; }
.v-md li { margin: 0.3em 0; }
.v-md table { display: table; width: 100%; font-size: 0.88em; }
.v-md img { max-width: 100%; height: auto; border-radius: var(--r-1); }






.v-md .md-bildabsatz { margin: 18px 0; }
.v-md .md-bild { display: inline-block; max-width: 100%; line-height: 0;
  cursor: zoom-in; }
.v-md .md-bild img { display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line); background: var(--flaeche); }
.v-md .md-video, .v-md .md-audio { display: block; max-width: 100%; }
.v-md .md-video { width: 100%; height: auto; background: #000; border-radius: var(--r-1); }
.v-md .md-bild-fehlt { color: var(--faint); font-size: 12.5px;
  border: 1px dashed var(--line); border-radius: var(--r-1); padding: 3px 9px; }




.v-md .md-widget-kasten { margin: 18px 0; border: 1px solid var(--line);
  border-radius: var(--r-1); background: #fff; overflow: hidden; }
.v-md .md-widget { display: block; width: 100%; border: 0; background: transparent; }
.v-md .md-3d { width: 100%; position: relative; }




.v-doku-inhalt { padding: 22px 26px 48px; font-size: 13px; line-height: 1.6; }



.v-doku-inhalt > .vs-doc { margin-top: 0; }
.v-doku-inhalt:has(> .vs-doc) { padding: 18px 20px 34px; }











.vs-doc {
  background: #ffffff;
  border-radius: var(--r-1);
  --text:        #2a231d;
  --text-2:      #63574d;
  --text-3:      #7b6d63;
  --muted:       #63574d;
  --line:        rgba(42,35,29,.14);
  --line-soft:   rgba(42,35,29,.07);
  --linie:       rgba(42,35,29,.14);
  --linie-weich: rgba(42,35,29,.07);
  --panel-2:     #f4f6f8;
  --flaeche:     #ffffff;
  --flaeche-2:   #f9f8f7;
  --flaeche-3:   #f0eeec;
  --brown:       #99685C;
  color: var(--text);
}
.vs-doc { max-width: 68ch; margin: 0 auto; padding: 26px 30px 34px; }



.vs-kasten {
  margin: 14px 0; padding: 12px 14px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.vs-kasten p { margin: 0 0 6px; }
.vs-kasten p:last-child { margin: 0; }


.vs-strich {
  padding-bottom: 10px; margin-top: 18px;
  border-bottom: 1px solid var(--line);
}
.vs-doc h1 { font-size: 21px; margin: 0 0 14px; }
.vs-doc h2 { font-size: 16.5px; margin: 24px 0 9px; }
.vs-doc h3 { font-size: 14px; margin: 20px 0 7px; }
.vs-doc h4, .vs-doc h5, .vs-doc h6 { font-size: 13px; margin: 18px 0 6px; }
.vs-doc p { margin: 0 0 11px; }
.vs-doc ul { margin: 0 0 12px; padding-left: 22px; }
.vs-doc li { margin: 4px 0; }
.vs-bild { margin: 16px 0; text-align: center; }
.vs-bild img { max-width: 100%; height: auto; border-radius: var(--r-1); }
.vs-leer { color: var(--text-3); font-style: italic; }




.vs-tab {
  border-collapse: collapse; margin: 14px 0;
  font-size: 12.5px; max-width: 100%;
}
.vs-tab th, .vs-tab td {
  border: 1px solid var(--line);
  padding: 6px 10px; text-align: left; vertical-align: top;
}
.vs-tab th { background: var(--panel-2); font-weight: 600; }
.vs-gitter { font-size: 12px; margin: 0; width: auto; }
.vs-gitter th, .vs-gitter td { padding: 4px 9px; white-space: nowrap; }
.vs-gitter thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2);
  box-shadow: inset 0 -1px 0 var(--line);
}





.vs-mappe { display: flex; flex-direction: column; min-height: 0; }
.vs-reiter-leiste {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.vs-reiter {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--flaeche-2); border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--text-2); font: inherit; font-size: 12px;
  padding: 4px 10px; cursor: pointer;
}
.vs-reiter:hover { background: var(--flaeche-3); color: var(--text); }
.vs-reiter.an {
  background: var(--accent); border-color: var(--accent);
  color: #ffffff; font-weight: 600;
}
.vs-reiter-zahl {
  font-family: var(--mono); font-size: 10.5px;
  opacity: .72;
}
.vs-blatt { display: none; overflow-x: auto; }
.vs-blatt.an { display: block; }
.vs-blatt-kopf {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 13px; font-weight: 600;
}
.vs-sicht {
  font-size: 10.5px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 1px 6px;
}




.vs-folien { max-width: 74ch; margin: 0 auto; }
.vs-folie {
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--flaeche);
  padding: 18px 22px 20px; margin: 0 0 16px;
}
.vs-folie-nr {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.vs-folie h2 { font-size: 16px; margin: 0 0 10px; }
.vs-folie p { margin: 0 0 8px; }
.vs-folie ul { margin: 0 0 10px; padding-left: 20px; }
.vs-folie li { margin: 4px 0; }
.vs-notiz {
  margin: 14px 0 0; padding: 10px 12px;
  background: var(--flaeche-2); border: 1px solid color-mix(in srgb, var(--brown) 50%, transparent);
  border-radius: var(--r-1);
  font-size: 12px; color: var(--text-2);
}
.vs-notiz > span {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3);
}
.vs-notiz p { margin: 0 0 4px; }
.vs-notiz p:last-child { margin: 0; }


.caret::after {
  content: ""; display: inline-block;
  width: 7px; height: 14px; margin-left: 2px;
  background: var(--accent); opacity: .7;
  vertical-align: -2px;
  animation: caretblink 1s steps(1) infinite;
}
@keyframes caretblink { 50% { opacity: 0; } }


.md p { margin: 0 0 10px; }
.md p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 { margin: 16px 0 8px; line-height: 1.25; }
.md h1 { font-size: 18px; } .md h2 { font-size: 14px; }
.md h3 { font-size: 14px; } .md h4 { font-size: 14px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 20px; }
.md li { margin: 3px 0; }

.md li > ul, .md li > ol { margin: 3px 0 2px; }
.md ul.md-aufgaben { list-style: none; padding-left: 2px; }
.md li.md-aufgabe { list-style: none; }
.md .md-haken { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--text-3); }
.md li.md-erledigt > .md-haken { box-shadow: none; background: var(--p, var(--accent)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.md li.md-erledigt { color: var(--text-3); }

.msg-user .bubble > .md-eigen { white-space: normal; }
.md-eigen > :first-child { margin-top: 0; }
.md-eigen > :last-child { margin-bottom: 0; }
.md-eigen p { margin: 0 0 8px; }
.md-eigen pre { white-space: pre; }
.md code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--flaeche-3); border: 1px solid var(--line-soft);
  padding: 1px 4px; border-radius: var(--r-1);
}
.md pre {
  margin: 10px 0; padding: 12px 14px;
  background: var(--code-bg); border: 1px solid var(--code-rand);
  border-radius: var(--radius);
  overflow-x: auto;
}
.md pre code { background: none; border: none; padding: 0; font-size: 11.5px; line-height: 1.5;
                color: var(--code-fg); }


.md blockquote { margin: 10px 0; padding: 6px 12px 6px 12px;
                 border: 1px solid color-mix(in srgb, var(--brown) 50%, transparent); color: var(--muted); border-radius: 8px; background: var(--flaeche-2, var(--panel-2)); border: 1px solid var(--linie, var(--line)); border-radius: var(--r-2, 12px); background: var(--flaeche-2, var(--panel-2)); padding: 10px 14px; }
.md a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.md hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.md table { border-collapse: collapse; margin: 10px 0; font-size: 12px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.md th { background: var(--panel-2); font-weight: 600; }






.composer-wrap { position: relative; padding: 8px 24px 8px; }

















:root { --eingabe-breit: 960px; }
.composer-reihe { position: relative; max-width: var(--eingabe-breit); margin: 0 auto; }











.composer {
  max-width: var(--eingabe-breit); margin: 0 auto;
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);





  padding: 6px 6px 6px 16px;
  transition: border-color 140ms, box-shadow 140ms;
}




.composer-zeile {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-end; gap: 8px;
}











.composer-werkzeuge {





  max-width: var(--eingabe-breit); margin: 3px auto 0;
  display: flex; align-items: center; gap: 2px;






  padding-left: 2px; padding-right: 11px;
}




.cw-luecke { flex: 1 1 auto; min-width: 8px; }
























.composer-werkzeuge .trenner-davor { position: relative; }
.composer-werkzeuge .trenner-davor::before {
  content: ""; position: absolute; left: -5px; top: 50%;
  transform: translateY(-50%);




  width: 1px; height: 16px; background: var(--linie-stark);
  pointer-events: none;
}
.composer:focus-within { border-color: var(--accent); }
.composer textarea {
  flex: 1; font: inherit; letter-spacing: var(--spur); color: var(--text);



  font-size: var(--text-lesen);
  border: none; outline: none; resize: none; background: none;
  max-height: 220px; line-height: 1.5;















  min-height: 34px; box-sizing: border-box; padding: 7.25px 0;
}
.send-btn {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--auf-farbe);
  border: none; border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--kante);
  transition: background 140ms, opacity 140ms;
}
.send-btn:hover { background: var(--accent-deep); }
.send-btn:disabled { opacity: .45; cursor: default; }




.send-btn.is-stop { background: var(--error); }
.send-btn.is-stop:hover { filter: brightness(.88); }
.send-btn.is-stop svg { fill: currentColor; stroke: none; }



.send-btn.is-stop:disabled { opacity: .45; animation: stop-pulsiert 1.4s ease-in-out infinite; }
@keyframes stop-pulsiert { 0%,100% { opacity: .55; } 50% { opacity: .85; } }









.composer .send-btn[hidden] { display: none; }





.composer-reihe.hat-zuruf { --zuruf-zuwachs: 84px; }













.composer-reihe.hat-zuruf .composer {
















  margin-left: 0;
  max-width: calc(var(--eingabe-breit) + var(--zuruf-zuwachs));
  margin-right: calc(-1 * var(--zuruf-zuwachs));
}



@media (max-width: 1100px) {
  .composer-reihe.hat-zuruf .composer { max-width: var(--eingabe-breit); margin-right: auto; }
  .composer-reihe.hat-zuruf .send-btn { width: 30px; }
}





.composer { transition: max-width 180ms ease; }



.send-btn--zuruf { background: var(--accent); }
.send-btn--zuruf:hover { background: var(--accent-deep); }






.send-btn--gabel {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
}
.send-btn--gabel:hover { background: var(--accent); color: var(--auf-farbe); }




.send-btn--gabel.ist-unterwegs {
  opacity: .55;
  animation: stop-pulsiert 1.4s ease-in-out infinite;
}








.send-btn--warten {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  box-shadow: none;
}
.send-btn--warten:hover { color: var(--text); border-color: var(--accent); }



@keyframes zuruf-herein {
  from { opacity: 0; transform: translateX(6px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.composer-reihe.hat-zuruf .send-btn--zuruf,
.composer-reihe.hat-zuruf .send-btn--gabel,
.composer-reihe.hat-zuruf .send-btn--warten {
  animation: zuruf-herein .18s ease both;
}
.composer-reihe.hat-zuruf .send-btn--gabel { animation-delay: .04s; }
.composer-reihe.hat-zuruf .send-btn--warten { animation-delay: .08s; }




.send-btn--zuruf.ist-unterwegs { opacity: .55; animation: stop-pulsiert 1.4s ease-in-out infinite; }

.composer-hint {
  max-width: var(--eingabe-breit); margin: 6px auto 0;
  font-size: 10.5px; color: var(--faint); text-align: center;
}




.composer-hint:empty { display: none; }








.aufwand {
  display: inline-flex; align-items: stretch; flex: none;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: border-color 140ms, background 140ms;
}
.aufwand:hover { border-color: var(--line); background: var(--panel-2); }






.aw {
  width: 28px; height: 28px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--faint);
  border: none; border-radius: 0;
  cursor: pointer;
  transition: flex-grow 140ms, color 140ms, background 140ms;
}
.aw:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.aw:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }

.aw svg { width: 16px; height: 16px; stroke-width: 1.5; }


.aw .f { fill: currentColor; fill-opacity: .72; stroke: none; }
.aw:hover { color: var(--accent-deep); background: var(--line-soft); }
.aw.on { color: var(--accent); background: var(--accent-soft); }
.aw.on:hover { color: var(--accent-deep); }
.aw:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }











.aw.aw-solo {
  width: 30px; height: 30px;


  border: 1px solid transparent; border-radius: var(--radius);
  transition: color 140ms, background 140ms, border-color 140ms;
}
.aw-solo:hover { border-color: var(--line); background: var(--panel-2); }
.aw-solo.on { color: var(--accent); background: var(--accent-soft);
              border-color: var(--accent-soft); }
.aw-solo.on:hover { color: var(--accent-deep); }








.aw-solo .auge-auf { display: none; }
.aw-solo.on .auge-zu { display: none; }
.aw-solo.on .auge-auf { display: inline-flex; }




.aw-solo .auge-zu { transform: translateY(-1px); }











.aw-info {
  position: absolute; z-index: 0;
  left: 100%; top: 50%;
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--shadow), var(--edge);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translate(-54px, -50%);
  transition: transform .42s cubic-bezier(.22, .7, .25, 1),
              opacity .01s linear .42s,
              color .15s, border-color .15s, background .15s;
}
.aw-info.an {
  opacity: 1; pointer-events: auto;
  transform: translate(12px, -50%);
  transition: transform .42s cubic-bezier(.22, .7, .25, 1),
              opacity .01s linear 0s,
              color .15s, border-color .15s, background .15s;
}
.aw-info:hover { color: var(--accent-deep); border-color: var(--accent); }
.aw-info.fest {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
}


.aw-info svg { width: 21px; height: 21px; stroke-width: 1.5; }



@media (max-width: 1200px) { .aw-info { display: none; } }





























.quellen {
  position: relative;
  margin: 18px 0 14px;
  color: var(--text-3);
}






.answer.md > .quellen,
.think.md > .quellen { max-width: 62ch; }
.vl-ergebnis .answer.md > .quellen { max-width: none; }

:where(.quellen) :where(button) {
  font: inherit; letter-spacing: inherit; color: inherit;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-align: left;
}


.q-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.q-kopf-knopf {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 11.5px; font-weight: 500; color: var(--text-3);
  border-radius: var(--r-1);
  transition: color var(--d1) var(--ease-out);
}
.q-kopf-knopf:hover { color: var(--text); }
.q-pfeil {
  width: 12px; height: 12px; flex: none;
  transition: transform var(--d2) var(--ease-in-out);
}
.quellen.auf .q-pfeil { transform: rotate(90deg); }
.q-pfeil, .q-wort, .q-zahl { flex: none; white-space: nowrap; }
.q-zahl { font-variant-numeric: tabular-nums; }
.q-kopf-hosts {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-weight: 400;
}
.q-kopf-hosts:empty { display: none; }
.q-kopf-notiz { min-width: 0; font-size: 11.5px; color: var(--text-3); }



.q-stil-knopf {
  flex: none; width: 22px; height: 22px; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-1); color: var(--text-3);
  opacity: 0;
  transition: opacity var(--d1) var(--ease-out), background var(--d1) var(--ease-out);
}
.quellen:hover .q-stil-knopf,
.quellen:focus-within .q-stil-knopf { opacity: 1; }
.q-stil-knopf:hover { background: var(--flaeche-3); color: var(--text); }
@media (hover: none) { .q-stil-knopf { opacity: .6; } }




.q-stil-menue {
  position: absolute; z-index: 30;
  min-width: 168px; padding: 4px;
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid; border-radius: var(--r-2);
  animation: q-menue-auf var(--d2) var(--ease-out);
}
@keyframes q-menue-auf { from { opacity: 0; transform: translateY(-2px); } }
.q-stil-kopf { padding: 5px 8px 4px; font-size: 10.5px; color: var(--text-3); }
.q-stil-wahl {
  display: flex; align-items: center; gap: 9px;
  height: 30px; padding: 0 8px;
  border-radius: var(--r-1);
  font-size: 12px; color: var(--text-2);
}
.q-stil-wahl:hover,
.q-stil-wahl:focus-visible { background: var(--flaeche-3); color: var(--text); }
.q-stil-wahl.an { color: var(--text); }
.q-stil-wahl.an::after {
  content: ""; margin-left: auto;
  width: 6px; height: 6px; border-radius: 50%; background: var(--p);
}


.q-chips { display: none; }
.quellen .q-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; margin: 3px 0; padding: 0 8px 0 3px;
  border: 1px solid var(--linie); border-radius: var(--r-rund);
  font-size: 11.5px; color: var(--text-2);
  transition: border-color var(--d1) var(--ease-out),
              background var(--d1) var(--ease-out), color var(--d1) var(--ease-out);
}
.q-ic {
  position: relative; overflow: hidden;
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--flaeche-3); color: var(--text-2);
  font-size: 10px; font-weight: 600; line-height: 1;
}




.q-fav {
  position: absolute; left: 2px; top: 2px; width: 12px; height: 12px;
  object-fit: contain; opacity: 0;
}
.q-ic.hat-bild .q-fav { opacity: 1; }
.q-chip-host { max-width: 22ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.q-chip-nr { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.quellen .q-chip:hover { border-color: var(--linie-stark); color: var(--text); }
.quellen .q-chip.offen { border-color: var(--p-linie); background: var(--p-flaeche); color: var(--p-tief); }
.quellen .q-chip.offen .q-ic { background: var(--p); color: var(--auf-farbe); }
.quellen .q-chip.offen .q-chip-nr { color: var(--p-tief); }


.quellen .q-chip .q-ic.hat-bild { background: var(--q-marke-grund); color: transparent; }


.quellen .q-karten,
.md .quellen .q-karten { display: none; list-style: none; margin: 0; padding: 0; }
.quellen .q-karte,
.md .quellen .q-karte {

  display: flex; align-items: baseline; gap: 10px;
  margin: 0; padding: 0;
}
.q-nr {
  flex: none; min-width: 12px;
  font-size: 10.5px; line-height: 18px; font-weight: 500; text-align: right;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.q-haupt { flex: 1; min-width: 0; }
.quellen .q-titel {
  font-size: 12px; line-height: 18px; font-weight: 500;
  color: var(--text); text-decoration: none;
  overflow-wrap: anywhere;
}
.quellen .q-titel:hover {
  color: var(--p-tief);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.q-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1px 6px;
  font-size: 10.5px; line-height: 16px; color: var(--text-3);
}
.q-zeile:empty { display: none; }
.q-host { color: var(--text-2); }
.q-trenn {
  width: 2px; height: 2px; flex: none;
  border-radius: 50%; background: currentColor;
}
.q-notiz { margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--text-2); }
.quellen .q-karte .q-zitat {
  margin: 5px 0 0; padding: 6px 10px 6px 10px;
  border: 1px solid var(--s-linie);
  font-size: 11.5px; line-height: 1.5; color: var(--text-2); border-radius: 8px;}
.quellen .q-oeffnen {
  flex: none; align-self: flex-start; width: 24px; height: 24px; margin: -3px -6px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-1); color: var(--text-3); text-decoration: none;
  opacity: 0; transition: opacity var(--d1) var(--ease-out);
}
.quellen .q-karte:hover .q-oeffnen,
.quellen .q-oeffnen:focus-visible { opacity: 1; }
.quellen .q-oeffnen:hover { background: var(--flaeche-3); color: var(--text); }
@media (hover: none) { .quellen .q-oeffnen { opacity: .6; } }
.quellen .q-gruppe,
.md .quellen .q-gruppe {
  list-style: none; margin: 10px 0 4px; padding: 0;
  font-size: 10.5px; font-weight: 500; color: var(--text-3);
}
.quellen .q-gruppe:first-child { margin-top: 0; }


.quellen .q-karte.blinkt { animation: q-blinkt 1.4s var(--ease-out); }
@keyframes q-blinkt {
  0%, 35% { background-color: var(--p-flaeche); box-shadow: 0 0 0 4px var(--p-flaeche); }
}


html[data-quellen="leiste"] .quellen {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px;
}
html[data-quellen="leiste"] .q-kopf,
html[data-quellen="leiste"] .q-chips { display: contents; }
html[data-quellen="leiste"] .q-kopf-knopf { margin-right: 4px; }
html[data-quellen="leiste"] .q-pfeil,
html[data-quellen="leiste"] .q-zahl,
html[data-quellen="leiste"] .q-kopf-hosts { display: none; }
html[data-quellen="leiste"] .q-chip { order: 1; }
html[data-quellen="leiste"] .q-stil-knopf { order: 2; margin-left: 0; }



html[data-quellen="leiste"] .q-kopf-notiz { order: 3; flex-basis: 100%; margin-top: 1px; }
html[data-quellen="leiste"] .quellen .q-karten {
  order: 4; flex-basis: 100%;
  display: flex; flex-direction: column;
}
html[data-quellen="leiste"] .quellen .q-karte,
html[data-quellen="leiste"] .quellen .q-gruppe { display: none; }
html[data-quellen="leiste"] .quellen .q-karte.offen,
html[data-quellen="leiste"] .quellen.auf .q-karte {
  display: flex;
  margin-top: 6px; padding: 9px 12px 10px 10px;
  border: 1px solid var(--linie-weich); border-radius: var(--r-2);
  background: var(--flaeche-2);
}


html[data-quellen="fussnoten"] .quellen { margin-top: 22px; padding-top: 10px; }
html[data-quellen="fussnoten"] .quellen::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; border-top: 1px solid var(--linie-stark);
}
html[data-quellen="fussnoten"] .q-zahl,
html[data-quellen="fussnoten"] .q-kopf-hosts { display: none; }

html[data-quellen="fussnoten"] .quellen:not(:has(.q-notiz, .q-zitat)) .q-pfeil { display: none; }
html[data-quellen="fussnoten"] .quellen:not(:has(.q-notiz, .q-zitat)) .q-kopf-knopf { cursor: default; }
html[data-quellen="fussnoten"] .quellen .q-karten { display: block; margin-top: 3px; }
html[data-quellen="fussnoten"] .quellen .q-karte { gap: 8px; padding: 1px 0; }
html[data-quellen="fussnoten"] .q-nr { min-width: 10px; font-weight: 400; }
html[data-quellen="fussnoten"] .quellen .q-titel {
  display: inline; font-size: 11.5px; font-weight: 400; color: var(--text-2);
}
html[data-quellen="fussnoten"] .q-zeile {
  display: inline-flex; vertical-align: baseline; margin-left: 7px;
}
html[data-quellen="fussnoten"] .q-notiz,
html[data-quellen="fussnoten"] .quellen .q-zitat,
html[data-quellen="fussnoten"] .quellen .q-oeffnen { display: none; }
html[data-quellen="fussnoten"] .quellen .q-karte.offen .q-notiz,
html[data-quellen="fussnoten"] .quellen.auf .q-notiz,
html[data-quellen="fussnoten"] .quellen .q-karte.offen .q-zitat,
html[data-quellen="fussnoten"] .quellen.auf .q-zitat { display: block; }
html[data-quellen="fussnoten"] .quellen .q-karte.offen,
html[data-quellen="fussnoten"] .quellen.auf .q-karte { padding: 3px 0 5px; }


html[data-quellen="zeile"] .q-kopf-knopf { font-weight: 400; }
html[data-quellen="zeile"] .q-pfeil { order: 0; }
html[data-quellen="zeile"] .q-zahl  { order: 1; font-weight: 500; }
html[data-quellen="zeile"] .q-wort  { order: 2; }
html[data-quellen="zeile"] .q-kopf-hosts { order: 3; }
html[data-quellen="zeile"] .q-kopf-hosts::before { content: "·"; margin: 0 6px 0 1px; }


html[data-quellen="zeile"] .q-kopf-notiz,
html[data-quellen="zeile"] .quellen.auf .q-kopf-hosts { display: none; }
html[data-quellen="zeile"] .quellen.auf .q-kopf-notiz { display: inline; }
html[data-quellen="zeile"] .q-kopf-notiz::before { content: "·"; margin: 0 6px 0 -3px; }
html[data-quellen="zeile"] .quellen .q-karten { margin: 6px 0 0 17px; }
html[data-quellen="zeile"] .quellen.auf .q-karten {
  display: block; animation: q-menue-auf var(--d2) var(--ease-out);
}
html[data-quellen="zeile"] .quellen .q-karte { padding: 6px 0; border-top: 1px solid var(--linie-weich); }
html[data-quellen="zeile"] .quellen .q-karte:first-child,
html[data-quellen="zeile"] .quellen .q-gruppe + .q-karte { border-top: 0; }


html[data-quellen="karten"] .q-kopf { margin-bottom: 8px; }
html[data-quellen="karten"] .q-pfeil,
html[data-quellen="karten"] .q-kopf-hosts { display: none; }
html[data-quellen="karten"] .q-kopf-knopf { cursor: default; }
html[data-quellen="karten"] .q-kopf-knopf:hover { color: var(--text-3); }
html[data-quellen="karten"] .quellen .q-karten { display: flex; flex-direction: column; gap: 6px; }
html[data-quellen="karten"] .quellen .q-karte {
  padding: 10px 12px 11px 10px;
  border: 1px solid var(--linie); border-radius: var(--r-2);
  background: var(--flaeche);
}
html[data-quellen="karten"] .quellen .q-gruppe { margin: 6px 0 -2px 2px; }
html[data-quellen="karten"] .q-nr {
  width: 18px; height: 18px; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--flaeche-3); color: var(--text-2);
  font-size: 10px; line-height: 1;
}


.q-ref { font-size: 10px; line-height: 0; vertical-align: 3px; }
.q-ref button {
  font: inherit; letter-spacing: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; margin: 0 1px; padding: 0 3px;
  border: 0; border-radius: var(--r-rund);
  background: var(--p-flaeche); color: var(--p-tief);
  font-weight: 600; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--d1) var(--ease-out), color var(--d1) var(--ease-out);
}
.q-ref button:hover { background: var(--p); color: var(--auf-farbe); }



.md a.md-url {
  color: var(--p-tief);
  text-decoration-color: var(--p-linie); text-decoration-thickness: 1px;
}
.md a.md-url:hover { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .q-pfeil, .q-stil-knopf, .quellen .q-chip, .quellen .q-oeffnen { transition: none; }
  .q-stil-menue, .quellen .q-karte.blinkt,
  html[data-quellen="zeile"] .quellen.auf .q-karten { animation: none; }
}



@media print {
  .quellen .q-chips, .q-stil-knopf, .q-stil-menue, .quellen .q-oeffnen { display: none !important; }
  .quellen .q-karten { display: block !important; }
  .quellen .q-karte { display: flex !important; padding: 3px 0 !important; border: 0 !important; background: none !important; }
  .quellen .q-notiz, .quellen .q-karte .q-zitat { display: block !important; }
  .answer.md .quellen a.q-oeffnen::after { content: none; }
}







.kinder-panel {
  width: 286px; min-width: 240px; flex: 0 1 auto;
  display: flex; flex-direction: column;
  background: var(--panel-2);
  border-left: 1px solid var(--line);
}
.kp-kopf {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 8px 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--edge);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.kp-kopf svg { width: 14px; height: 14px; }
.kp-zahl {
  margin-left: auto; padding: 0 6px;
  font-size: 10.5px; font-weight: 600; color: var(--faint);
}
.kp-liste { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.kp-leer { margin: 12px 4px; font-size: 11.5px; color: var(--faint); }

.kind {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--edge);
  padding: 8px 10px; margin-bottom: 8px;
}
.k-kopf { display: flex; align-items: center; gap: 6px; }
.k-nr {
  flex: none; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--line-soft); color: var(--muted);
  font-size: 10.5px; font-weight: 600;
}
.k-rolle {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.k-zeit { flex: none; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.k-modell { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.k-chip {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--accent-deep); background: var(--accent-soft);
  border-radius: var(--r-1); padding: 1px 4px;
}

.k-plan {
  font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--brown); border-radius: var(--r-1); padding: 0 4px;
}
.k-auftrag {
  margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.k-fuss { margin-top: 6px; font-size: 10.5px; color: var(--faint); }
.k-ergebnis {
  margin-top: 6px; padding-left: 8px;
  border: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; border-radius: 8px; padding-right: 8px;}




.kind[data-status="laeuft"] { border-color: var(--accent); }
.kind[data-status="laeuft"] .k-nr {
  background: var(--accent); color: var(--auf-farbe);
  animation: kindpuls 1.1s ease-in-out infinite;
}
@keyframes kindpuls { 50% { opacity: .45; } }
.kind[data-status="ok"] .k-nr { background: var(--ok); color: var(--auf-farbe); }
.kind[data-status="error"] { border-color: var(--error); }
.kind[data-status="error"] .k-nr { background: var(--error); color: var(--auf-farbe); }
.kind[data-status="warn"] .k-nr { background: var(--brown); color: var(--text); }



.kind[data-status="abgebrochen"] { border-color: var(--brown); }
.kind[data-status="abgebrochen"] .k-nr { background: var(--brown); color: var(--text); }





.k-offen {
  margin-top: 6px; padding-left: 8px;
  border: 1px solid color-mix(in srgb, var(--brown) 50%, transparent);
  font-size: 10.5px; line-height: 1.5; color: var(--s-tief); border-radius: 8px; padding-right: 8px;}






.kind[data-status="teilweise"] { border-color: var(--brown); border-style: dashed; }
.kind[data-status="teilweise"] .k-nr { background: var(--brown); color: var(--text); }


.kp-lauf {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 2px 6px;
  font-size: 10.5px; font-weight: 600; color: var(--faint);
}
.kp-lauf::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.kp-liste > .kp-lauf:first-child { margin-top: 2px; }




.kind.ist-staffel { background: var(--panel-2); border-color: var(--accent-soft); }
.kind.ist-staffel .k-nr {
  width: auto; min-width: 18px; padding: 0 4px;
  border-radius: var(--r-1);
}
.kind.im-staffel { margin-left: 12px; }




.usage .u-wort {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
















.kosten-wrap .k-summe, .kosten-wrap .k-calls, .kosten-wrap .k-kinder,
.usage-wrap .u-tok, .usage-wrap .u-sep, .usage-wrap .u-cost { display: none; }
.kosten-wrap.zeigt-zahlen .k-summe, .kosten-wrap.zeigt-zahlen .k-calls,
.kosten-wrap.zeigt-zahlen .k-kinder,
.kosten-wrap.laeuft .k-summe, .kosten-wrap.laeuft .k-calls,
.kosten-wrap.laeuft .k-kinder,
.usage-wrap.zeigt-zahlen .u-tok, .usage-wrap.zeigt-zahlen .u-sep,
.usage-wrap.zeigt-zahlen .u-cost,
.usage-wrap.laeuft .u-tok, .usage-wrap.laeuft .u-sep,
.usage-wrap.laeuft .u-cost { display: inline; }




.kosten-wrap.zeigt-zahlen .usage, .kosten-wrap.laeuft .usage,
.usage-wrap.zeigt-zahlen .usage, .usage-wrap.laeuft .usage {
  width: auto; padding: 0 10px;
}

.usage.arbeitet { border-color: var(--accent); color: var(--accent-deep); }
.usage.arbeitet svg { animation: kindpuls 1.1s ease-in-out infinite; }


@media (max-width: 1000px) { .kinder-panel { display: none; } }







.kosten-wrap { position: relative; display: flex; }
.kosten-wrap[hidden] { display: none; }
.kosten-btn .k-summe { font-weight: 600; font-variant-numeric: tabular-nums; }
.kosten-btn .k-calls { color: var(--faint); }



.kosten-btn .k-kinder {
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.kosten-btn .k-kinder:not(:empty) { margin-left: 2px; }





.kosten-wrap.laeuft .kosten-btn { color: var(--accent-deep); }
.kosten-wrap.laeuft .kosten-btn svg { animation: kindpuls 1.1s ease-in-out infinite; }
.kosten-wrap.offen .kosten-btn { border-color: var(--accent); color: var(--accent-deep); }

.kosten-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 320px; max-width: 420px; max-height: 340px; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
}
.kosten-menu[hidden] { display: none; }
.km-kopf {
  padding: 4px 8px 6px; font-size: 10.5px; color: var(--faint);
  border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.km-zeile {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 8px; border-radius: var(--r-1);
  font-size: 11.5px; color: var(--text);
}
.km-zeile:hover { background: var(--panel-2); }
.km-nr {
  flex: none; min-width: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums;
}
.km-nr svg { width: 13px; height: 13px; }
.km-leer { padding: 8px 8px 4px; font-size: 11.5px; color: var(--faint); }


.km-zeile.km-fehler .km-modell { color: var(--error); }


.km-modell.km-blass { color: var(--faint); font-family: var(--sans); }
.km-modell {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; color: var(--accent-deep);
}
.km-tok { flex: none; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.km-usd { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.km-summe {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 4px; padding: 6px 8px 3px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
}
.km-summe .km-modell { font-family: var(--sans); color: var(--muted); font-weight: 600; }








.sperre-wrap { position: relative; display: flex; }
.sperre-wrap[hidden] { display: none; }
.sperre-wrap.offen .usage { border-color: var(--accent); }
.sperre-menu {
  width: 380px; min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - 96px));
}
.sm-kopf {
  display: flex; align-items: center; gap: 6px;
  border-bottom: 0; margin-bottom: 0; padding-bottom: 2px;
  color: var(--text);
}
.sm-titel { font-size: 11.5px; font-weight: 600; }
.sm-kopf .info, .sm-abschnitt .info { margin-left: auto; }
.sm-zeichen { display: inline-flex; align-items: center; }
.sm-zeichen svg { width: 14px; height: 14px; }
.sm-zeichen[data-lage="aus"]   { color: var(--faint); }
.sm-zeichen[data-lage="an"]    { color: var(--ok); }
.sm-zeichen[data-lage="frage"] { color: var(--warn); }
.sm-zeichen[data-lage="weg"]   { color: var(--error); }
.sm-satz {
  padding: 0 8px 6px 28px;
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}
.sm-abschnitt {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 8px 8px 3px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px; color: var(--faint);
}
.sm-abschnitt-titel { font-weight: 600; color: var(--muted); }
.sm-text { flex: 1; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.sm-text b { font-weight: 600; }
.km-zeile.sm-jetzt { background: var(--panel-2); }
.km-zeile.sm-zweizeilig { flex-wrap: wrap; row-gap: 1px; }
.sm-detail {
  flex-basis: 100%; padding-left: 26px;
  font-size: 10.5px; line-height: 1.4; color: var(--faint);
  overflow-wrap: anywhere;
}
.sm-mono { font-family: var(--mono); }
.sm-abgewiesen .km-nr { color: var(--warn); }















.kosten-btn { position: relative; }
.kb-ring {
  position: absolute; inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  padding: 2px;
  pointer-events: none;
  opacity: 0;
  -webkit-mask: linear-gradient(var(--maske) 0 0) content-box, linear-gradient(var(--maske) 0 0);
          mask: linear-gradient(var(--maske) 0 0) content-box, linear-gradient(var(--maske) 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.kb-ring i {
  position: absolute; inset: 0; display: block;
  border-radius: inherit;
  background: linear-gradient(90deg,
              var(--ok) 0%, var(--warn) 55%, var(--fehler) 100%);



  -webkit-mask-image: linear-gradient(90deg, var(--maske) 62%, transparent 100%);
          mask-image: linear-gradient(90deg, var(--maske) 62%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  -webkit-mask-size: 0% 100%; mask-size: 0% 100%;
}
.kosten-btn.puls .kb-ring { opacity: 1; }
.kosten-btn.puls .kb-ring i { animation: ring-wachsen 950ms ease-in-out; }







@keyframes ring-wachsen {
  0%   { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }
  42%  { -webkit-mask-size: var(--puls-weite, 60%) 100%;
                 mask-size: var(--puls-weite, 60%) 100%; }
  58%  { -webkit-mask-size: var(--puls-weite, 60%) 100%;
                 mask-size: var(--puls-weite, 60%) 100%; }
  100% { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }
}




.kinder-summe {
  display: flex; align-items: baseline; gap: 8px;
  margin: 2px 2px 8px; padding: 8px 10px 2px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
}
.kinder-summe .ks-name { flex: 1; min-width: 0; color: var(--muted); font-weight: 600; }
.kinder-summe .ks-tok { flex: none; color: var(--faint); font-variant-numeric: tabular-nums; }
.kinder-summe .ks-usd {
  flex: none; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kinder-summe.vorlaeufig .ks-usd { color: var(--accent-deep); }
.kinder-summe.vorlaeufig .ks-usd::after { content: " …"; color: var(--faint); font-weight: 400; }











.zt {
  display: inline-block; height: 1.15em; overflow: hidden;
  vertical-align: bottom;
}
.zt-band { display: block; will-change: transform; }
.zt-band span { display: block; height: 1.15em; line-height: 1.15em; }



.zt-fix { display: inline-block; height: 1.15em; line-height: 1.15em;
          vertical-align: bottom; white-space: pre; }






.attach-item.datei {
  width: auto; max-width: 260px; min-width: 150px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--panel);
}
.attach-item.datei .d-typ {
  flex: none; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
}
.attach-item.datei .d-text { min-width: 0; flex: 1; }
.attach-item.datei .d-name {
  display: block; font-size: 11.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-item.datei .d-groesse { font-size: 10.5px; color: var(--faint); }
.attach-item.datei.laedt .d-groesse { color: var(--accent); }
.attach-item.datei.fehler .d-groesse {
  color: var(--error); line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}









.tb-bild-weg {
  margin: 8px 0 2px;
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
}

.tb-bild {
  margin: 0 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--code-bg);
  overflow: hidden;
  display: inline-block; max-width: 100%;
}
.tb-bild img {
  display: block; max-width: 100%; max-height: 220px;
  cursor: zoom-in;
}









.ss-anker { position: relative; height: 0; z-index: 25; }

.stundensatz {
  position: absolute; top: 18px; left: 14px;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0;
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: var(--schatten-1);
  color: var(--muted); cursor: pointer;
  font: inherit; letter-spacing: var(--spur); padding: 0;
  transition: border-color 140ms, box-shadow 140ms, color 140ms;
}
.stundensatz:hover {
  border-color: var(--accent); color: var(--text);
  box-shadow: var(--schatten-2);
}
.stundensatz[hidden] { display: none; }





.stundensatz.geschaetzt { background-image: var(--textur-geschaetzt); }
.stundensatz.geschaetzt .ss-wert { color: var(--muted); }


.ss-wert {
  font-size: 14px; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.ss-einheit { font-size: 10.5px; letter-spacing: .04em; }


.ss-blase {
  position: absolute; top: 82px; left: 14px; z-index: 26;


  min-width: 172px; max-width: 250px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--schatten-2);
}
.ss-blase[hidden] { display: none; }
.ssb-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 3px 0; font-size: 11.5px; color: var(--muted);
}
.ssb-zeile b { color: var(--text); font-variant-numeric: tabular-nums; }
.ssb-fuss {
  margin: 6px 0 0; padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px; line-height: 1.5; color: var(--faint);
}

@media (max-width: 900px) { .stundensatz, .ss-blase { display: none; } }











.rag-lage[hidden] { display: none; }
.rag-lage {
  width: 286px; min-width: 240px; flex: none;
  display: flex; flex-direction: column;

  background: var(--flaeche-2);
  border-right: 1px solid var(--line);
}
.rag-kopf {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 8px 10px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: var(--edge);
}
.rag-titel {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
.rag-meldung {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rag-meldung.warnung { color: var(--warn); font-weight: 600; }
.rag-zu { flex: none; }
.rag-bild { padding: 12px 12px 16px; overflow-y: auto; flex: 1; }



.rg-stufe { margin: 0; }


.rg-stufe-kopf {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 6px;
}
.rg-stufe-kopf::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.rg-nr {
  flex: none;
  width: 16px; height: 16px; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rg-stufe-farbe, var(--text-2)); color: var(--auf-farbe);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
}
.rg-stufe-titel {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rg-stufe-farbe, var(--muted));
}
.rg-stufe .rg-knoten + .rg-knoten { margin-top: 4px; }





.rg-knoten {
  position: relative;
  display: grid; grid-template-columns: 14px 1fr; gap: 2px 8px;
  align-items: center;
  padding: 6px 8px; border-radius: 0;
  border: 1px solid var(--line); background: var(--panel);
}

.rg-punkt {
  grid-row: 1 / span 2; align-self: start; margin-top: 3px;
  width: 8px; height: 8px; border-radius: 0;
  border: 1.5px solid var(--faint); background: transparent;
}
.rg-name { font-size: 10.5px; font-weight: 600; line-height: 1.25; }


.rg-unten {
  grid-column: 2; line-height: 1.25;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
}





























.rag-lage {
  --f-anfrage: var(--text);
  --f-mensch:  var(--s-tief);
  --f-cache:   var(--text-3);
  --f-datei:   var(--ok);
  --f-kind:    var(--p-hell);
  --f-halt:    var(--warn);
  --f-ziel:    var(--p-tief);
  --f-zweig:   var(--text-2);
}




.rg-knoten {  }



.rg-knoten[data-art] { border-color: color-mix(in srgb, var(--rg-balken, var(--rg-farbe)) 50%, transparent);
                       background: var(--rg-flaeche); }
.rg-knoten[data-art] .rg-name { color: var(--rg-farbe); }

.rg-knoten[data-art] { --rg-flaeche: color-mix(in srgb, var(--rg-farbe) 7%, transparent); }
.rg-knoten[data-art="anfrage"] { --rg-farbe: var(--f-anfrage); --rg-balken: var(--text-2); }
.rg-knoten[data-art="mensch"]  { --rg-farbe: var(--f-mensch);  --rg-balken: var(--s); }
.rg-knoten[data-art="datei"]   { --rg-farbe: var(--f-datei);   --rg-balken: var(--ok); }
.rg-knoten[data-art="kind"]    { --rg-farbe: var(--f-kind);    --rg-balken: var(--p-hell); }
.rg-knoten[data-art="halt"]    { --rg-farbe: var(--f-halt);    --rg-balken: var(--warn); }
.rg-knoten[data-art="ziel"]    { --rg-farbe: var(--f-ziel);    --rg-balken: var(--p); }


.rg-knoten[data-art="cache"]   { --rg-farbe: var(--f-cache); --rg-balken: transparent;
                                 border-style: dashed; border-color: var(--linie-stark); }
.rg-knoten[data-art="zweig"]   { --rg-farbe: var(--f-zweig); --rg-balken: transparent;
                                 border-style: dashed; border-color: var(--linie-stark); }











.rg-knoten[data-was="z01"] { --rg-farbe: var(--s-tief); --rg-balken: var(--s);
                             border-style: solid; }
.rg-knoten[data-was="z02"] { --rg-farbe: var(--warn);   --rg-balken: var(--warn);
                             border-style: solid; }
.rg-knoten[data-was="z03"] { --rg-farbe: var(--ok);     --rg-balken: var(--ok);
                             border-style: solid; }


.rg-stufe { --rg-stufe-farbe: var(--text-2); }
.rg-stufe[data-leit="anfrage"] { --rg-stufe-farbe: var(--f-anfrage); }
.rg-stufe[data-leit="mensch"]  { --rg-stufe-farbe: var(--f-mensch); }
.rg-stufe[data-leit="cache"]   { --rg-stufe-farbe: var(--f-cache); }
.rg-stufe[data-leit="datei"]   { --rg-stufe-farbe: var(--f-datei); }
.rg-stufe[data-leit="kind"]    { --rg-stufe-farbe: var(--f-kind); }
.rg-stufe[data-leit="halt"]    { --rg-stufe-farbe: var(--f-halt); }
.rg-stufe[data-leit="ziel"]    { --rg-stufe-farbe: var(--f-ziel); }
.rg-stufe[data-leit="zweig"]   { --rg-stufe-farbe: var(--f-zweig); }


.rg-knoten[data-stand="wartet"] { opacity: .5; }



.rg-knoten[data-stand="laeuft"] {
  border-top-color: var(--rg-farbe); border-right-color: var(--rg-farbe);
  border-bottom-color: var(--rg-farbe);
  outline: 1px solid var(--rg-farbe); outline-offset: 1px;
}
.rg-knoten[data-stand="laeuft"] .rg-punkt {
  border-color: var(--accent); background: var(--accent);
  animation: rg-atmen 1.4s ease-in-out infinite;
}
@keyframes rg-atmen {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.45); opacity: .55; }
}
.rg-knoten[data-stand="fertig"] .rg-punkt {
  border-color: var(--ok); background: var(--ok);
}


.rg-knoten[data-stand="wartet"] { opacity: .42; }
.rg-knoten[data-stand="fertig"], .rg-knoten[data-stand="laeuft"] { opacity: 1; }








.rg-reihe {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
}
.rg-reihe .rg-knoten {
  grid-template-columns: 1fr; text-align: center; padding: 6px 4px 6px;
  align-content: start;
}
.rg-reihe .rg-punkt { grid-row: auto; justify-self: center; margin: 0 0 4px; }
.rg-reihe .rg-name { font-size: 10.5px; overflow-wrap: anywhere; }
.rg-reihe .ra-was { overflow-wrap: anywhere; }
.rg-reihe .rg-unten { grid-column: 1; font-size: 10.5px; }






.rg-schichten {
  grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px;
}
.rg-reihe .rg-schichten { grid-column: 1; justify-content: center; }
.rg-schicht {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 3px;
  border: 1px solid var(--rg-farbe); color: var(--rg-farbe);
  background: color-mix(in srgb, var(--flaeche) 80%, transparent);
  cursor: help; white-space: nowrap;
}



.rg-ausgang {
  grid-column: 2; margin-top: 4px; padding-top: 4px;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 1px;
}
.rg-reihe .rg-ausgang { grid-column: 1; text-align: center; }
.ra-name {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--rg-farbe);
}
.ra-was { font-size: 10.5px; color: var(--muted); line-height: 1.25; }




.rg-wenn {
  position: absolute; top: -1px; right: -1px;
  width: 13px; height: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rg-farbe); color: var(--auf-farbe);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  cursor: help;
}




.rg-rueck {
  position: relative; margin: 10px 0 0; padding: 6px 8px 6px 20px;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--flaeche) 60%, transparent);
}
.rr-bogen {
  position: absolute; left: 7px; top: 7px; bottom: 7px; width: 7px;
  border: 1.5px solid var(--muted); border-right: none;
}
.rr-bogen::before, .rr-bogen::after {
  content: ""; position: absolute; left: 4px;
  width: 5px; height: 5px;
  border-left: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
}
.rr-bogen::before { top: -1px; transform: rotate(-45deg); }
.rr-bogen::after  { bottom: -1px; transform: rotate(-135deg); }
.rr-text { font-size: 10.5px; line-height: 1.25; color: var(--muted); }


.rg-noten { margin: 8px 0 0; }
.rg-noten p {
  margin: 0 0 3px; padding-left: 8px; position: relative;
  font-size: 10.5px; line-height: 1.25; color: var(--faint);
}
.rg-noten p::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 4px; height: 1px; background: var(--faint);
}









.rg-draht {
  --rd-farbe: var(--line);
  position: relative;
}
.rg-draht[data-stand="fertig"] { --rd-farbe: var(--ok); }


.rg-d-linie {
  height: 17px; margin: 4px 0;
}
.rg-d-linie::before {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 2px; height: 100%; margin-left: -1px;
  background: var(--rd-farbe);
}
.rg-d-linie::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 7px; height: 7px; margin-left: -4px;
  border-right: 2px solid var(--rd-farbe);
  border-bottom: 2px solid var(--rd-farbe);
  transform: rotate(45deg) translate(-1px, -1px);
}



.rg-d-aus, .rg-d-ein { height: 26px; margin: 4px 0; }
.rg-draht .rd-stamm {
  position: absolute; left: 50%; width: 2px; height: 11px; margin-left: -1px;
  background: var(--rd-farbe);
}
.rg-draht .rd-quer {
  position: absolute; left: 16.6%; right: 16.6%; height: 2px;
  background: var(--rd-farbe);
}
.rg-draht .rd-ast {
  position: absolute; width: 2px; height: 13px; margin-left: -1px;
  background: var(--rd-farbe);
}
.rg-draht .rd-a1 { left: 16.6%; }
.rg-draht .rd-a2 { left: 50%; }
.rg-draht .rd-a3 { left: 83.4%; }


.rg-d-aus .rd-stamm { top: 0; }
.rg-d-aus .rd-quer  { top: 11px; }
.rg-d-aus .rd-ast   { top: 11px; }

.rg-d-ein .rd-ast   { top: 0; }
.rg-d-ein .rd-quer  { top: 13px; }
.rg-d-ein .rd-stamm { top: 13px; }
.rg-d-ein::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 7px; height: 7px; margin-left: -4px;
  border-right: 2px solid var(--rd-farbe);
  border-bottom: 2px solid var(--rd-farbe);
  transform: rotate(45deg) translate(-1px, -1px);
}

.rg-chips { grid-column: 2; display: flex; gap: 4px; margin-top: 3px; }
.rg-chip {
  font-family: var(--mono);
  font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 1px 4px; border-radius: 0;



  background: color-mix(in srgb, var(--flaeche) 80%, transparent); color: var(--rg-farbe, var(--muted));
  border: 1px solid var(--line-soft);
  cursor: help;
}



@media (max-width: 1250px) { .rag-lage { display: none; } }


.kind[role="button"] { cursor: pointer; }
.kind[role="button"]:hover { border-color: var(--accent); }
.kind[role="button"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.kf-lage {
  position: fixed; inset: 0; z-index: 92;
  display: flex; align-items: center; justify-content: center;
  padding: 28px; background: var(--schleier);
}
.kf-karte {
  display: flex; flex-direction: column;


  width: min(780px, 100%); max-height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: 0 20px 60px var(--code-schleier);
  overflow: hidden;
}
.kf-kopf {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid var(--line-soft); background: var(--panel-2);
}
.kf-nr {
  flex: none; min-width: 20px; height: 20px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-1); background: var(--accent-soft); color: var(--accent-deep);
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}


.kf-karte.ist-gross { width: min(1240px, 100%); height: 100%; }
.kf-karte.ist-gross .kf-inhalt { flex: 1 1 auto; min-height: 0; }
.kf-karte.ist-gross .kf-ergebnis.md,
.kf-karte.ist-gross .kf-auftrag { max-width: 110ch; }
.kf-gross[aria-pressed="true"] { color: var(--accent-deep); }
.kf-kopftext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kf-rolle { min-width: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.kf-unter {
  display: flex; flex-wrap: wrap; gap: 2px 10px;
  font-size: 11px; color: var(--muted);
}
.kf-unter:empty { display: none; }
.kf-unter .kf-bauplan { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.kf-marke {
  flex: none; font-size: 10.5px; color: var(--muted);
  padding: 2px 8px; border-radius: var(--r-rund); border: 1px solid var(--line-soft);
}
.kf-karte[data-status="laeuft"] .kf-marke {
  color: var(--accent-deep); border-color: var(--accent);
  background: var(--accent-soft);
}
.kf-karte[data-status="error"] .kf-marke {
  color: var(--fehler); border-color: var(--fehler);
}
.kf-karte[data-status="abgebrochen"] .kf-marke { border-color: var(--brown); }





.kf-inhalt { padding: 16px 20px 20px; overflow-y: auto; }
.kf-fakten { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0 0 10px; }
.kf-fakt dt {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.kf-fakt dd {
  margin: 3px 0 0; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums;
}
.kf-zeile2 { margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.kf-leise { color: var(--faint); }
.kf-abschnitt { margin-top: 20px; }
.kf-abschnitt-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.kf-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint);
}

.kf-kopieren {
  margin-left: auto; font: inherit; font-size: 10.5px; color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.kf-kopieren:hover { color: var(--accent-deep); }


.kf-auftrag {
  padding: 10px 12px; border-radius: var(--r-1);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}


.kf-ergebnis.md { font-size: 13px; line-height: 1.6; color: var(--text); word-break: break-word; }
.kf-ergebnis.md > :first-child { margin-top: 0; }
.kf-ergebnis.md h1, .kf-ergebnis.md h2 { font-size: 14.5px; margin: 16px 0 6px; }
.kf-ergebnis.md h3, .kf-ergebnis.md h4 { font-size: 13.5px; margin: 14px 0 4px; }
.kf-quelle { margin-top: 16px; font-size: 10.5px; color: var(--faint); }
.kf-quelle code { font-family: var(--mono); font-size: 10.5px; }
.kf-wartet { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }





.bild-lage {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: var(--code-schleier);
  animation: bild-auf .12s ease-out;
}
@keyframes bild-auf { from { opacity: 0; } to { opacity: 1; } }
.bild-karte {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 100%; max-height: 100%;
}
.bild-buehne {
  min-height: 0;
  border-radius: var(--radius); overflow: hidden;
  background: var(--code-bg);
  box-shadow: 0 18px 50px var(--code-schleier);
}


.bild-buehne img {
  display: block; max-width: 100%; max-height: calc(100vh - 150px);
  width: auto; height: auto;
}


.bild-leiste { display: flex; gap: 10px; justify-content: center; flex: none; }
.bild-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--code-kante); border-radius: var(--radius);
  background: var(--code-hover-2); color: var(--code-weiss);
  font: inherit; letter-spacing: var(--spur); font-size: 12px; text-decoration: none; cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.bild-knopf:hover { background: var(--code-hover-2);
                    border-color: var(--code-rand-2); }
.bild-knopf svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.bild-mass {
  margin: 0; flex: none;
  color: var(--code-fg-3); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}





.toolcard-head .t-marke {
  flex: none; margin-left: 2px; padding: 1px 6px;
  border-radius: var(--r-rund);
  font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.toolcard-head .t-marke.neu {
  background: var(--accent-soft); color: var(--accent-deep);
}



.toolcard-head .t-marke.geaendert {
  padding: 1px 0; display: inline-flex; gap: 6px;
}




.toolcard-head .t-marke .tm-plus,
.toolcard-head .t-marke .tm-minus { font-size: 10.5px; font-weight: 600; }
.toolcard-head .t-marke .tm-plus { color: var(--ok); }
.toolcard-head .t-marke .tm-minus { color: var(--fehler); }



.toolcard-head .t-marke.mit-zahlen {
  display: inline-flex; align-items: baseline; gap: 6px;
}




.toolcard-head .t-marke.gleich { color: var(--faint); font-weight: 500; }





.toolcard-head .t-dateien {
  flex: none; margin-left: 2px; padding: 1px 6px;
  display: inline-flex; align-items: baseline; gap: 6px;
  border-radius: var(--r-rund);
  background: var(--flaeche-3); color: var(--text-2);
  font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.toolcard-head .t-dateien.neu { background: var(--accent-soft); color: var(--accent-deep); }
.toolcard-head .t-dateien .tm-plus,
.tb-dateiliste .tm-plus { color: var(--ok); }
.toolcard-head .t-dateien .tm-minus,
.tb-dateiliste .tm-minus { color: var(--fehler); }















.turn { contain: layout; }
.toolcard-head .t-marke.mit-zahlen,
.toolcard-head .t-dateien { flex: none; flex-direction: row-reverse; }
.toolcard-head .t-marke .tm-zahlen,
.toolcard-head .t-dateien .tm-zahlen { display: inline-flex; gap: 6px; white-space: nowrap; }




:where(.turn.zug-schmal) .toolcard-head .t-marke.mit-zahlen .tm-wort,
:where(.turn.zug-schmal) .toolcard-head .t-dateien.mit-zahlen .tm-wort { display: none; }
:where(.turn.zug-schmal) .toolcard-head.hat-zahlen.hat-zahlen .t-sub { display: none; }

:where(.turn.zug-schmal) .toolcard-head.hat-zahlen.hat-zahlen { gap: 5px; }


:where(.turn.zug-schmal) .toolcard-head .t-marke.gleich,
:where(.turn.zug-schmal) .toolcard-head .t-dateien:not(.mit-zahlen) { flex: 0 1 auto; min-width: 0; overflow: hidden; }
:where(.turn.zug-schmal) .toolcard-head .t-marke.gleich { text-overflow: ellipsis; }
:where(.turn.zug-schmal) .toolcard-head .t-dateien:not(.mit-zahlen) .tm-wort {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}



:where(.turn.zug-schmal) .toolcard-head.hat-zahlen.hat-zahlen .t-state:has(.okmark) { font-size: 0; }
:where(.turn.zug-schmal) .toolcard-head.hat-zahlen.hat-zahlen .t-state .okmark { font-size: 10.5px; }


.toolcard-body .tb-dateiliste {
  list-style: none; margin: 2px 0 8px; padding: 0;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.toolcard-body .tb-dateiliste li {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0; padding: 2px 0; min-width: 0;
}
.tb-dateiliste .tbd-name { color: var(--text); font-weight: 500; }
.tb-dateiliste .tbd-ordner {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--faint); font-size: 10.5px;
}
.tb-dateiliste .tbd-art { color: var(--faint); font-size: 10.5px; }
.tb-dateiliste .tbd-neu { color: var(--accent-deep); }
.tb-dateiliste .tm-plus,
.tb-dateiliste .tm-minus,
.tb-dateiliste .tbd-zeilen { font-size: 10.5px; font-weight: 600; }
.tb-dateiliste .tbd-zeilen { color: var(--muted); font-weight: 500; }

.tb-dateiliste li.tbd-zeigbar { cursor: pointer; }
.tb-dateiliste li.tbd-zeigbar:hover .tbd-name { color: var(--accent-deep); }
.tb-dateiliste .tbd-ansehen { margin-left: auto; color: var(--accent-deep);
  font-size: 10.5px; font-weight: 600; }












.toolcard-head .t-stand {
  flex: none; margin-left: 2px;
  font-size: 10.5px; color: var(--faint);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.toolcard-head .t-stand:empty { display: none; }
.toolcard-head .t-stand.warn {
  color: var(--s-tief); font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-rund);
  border: 1px solid var(--brown);
}
.toolcard-head .t-stand.fehler { color: var(--error); font-weight: 600; }






.toolcard-head .t-spur {
  display: inline-block; position: relative;
  width: 34px; height: 3px; margin-left: 7px;
  vertical-align: middle;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.toolcard-head .t-spur-stueck {
  position: absolute; top: 0; bottom: 0;
  background: var(--brown); border-radius: 2px;
}
.toolcard-head .t-stand.ok .t-spur-stueck { background: var(--accent); }




.toolcard-head .t-stand.gut {
  color: var(--ok); font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-rund);
  border: 1px solid var(--ok-linie);
}










.toolcard.tl-karte .t-stand .tl-rot { color: var(--error); font-weight: 600; }
.t-state .tl-warnmark { color: var(--warn); }
.tl-balken {
  display: flex; height: 3px; overflow: hidden;
  background: var(--line-soft);
}
.tl-balken:empty { display: none; }
.tl-balken i {
  display: block; flex: none; height: 100%;
  transition: flex-basis var(--d3) var(--ease-out);
}
.tl-balken i.fort { background: var(--accent); }
.tl-balken i.zeit { background: var(--linie-stark); }
.tl-balken i.ok   { background: var(--ok); }
.tl-balken i.rot  { background: var(--error); }
.tl-balken i.aus  { background: var(--linie-stark); }
.toolcard.tl-karte .toolcard-body { padding-top: 8px; }
.tl-hinweis {
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
  margin: 0 0 8px; letter-spacing: var(--spur);
}
.tl-fall { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.tl-fall:first-child { border-top: 0; padding-top: 0; }
.tl-fall .tl-name {
  font-family: var(--mono); font-size: 11.5px; color: var(--text);
  overflow-wrap: anywhere;
}
.tl-fall .tl-meldung {
  font-size: 11.5px; color: var(--error); margin: 2px 0 6px;
  overflow-wrap: anywhere; letter-spacing: var(--spur);
}
.tl-fuss {
  font-size: 10.5px; color: var(--faint); margin-top: 8px;
  letter-spacing: var(--spur);
}
.tl-fuss code { font-family: var(--mono); color: var(--accent-deep); }




.toolcard.a2a-karte .toolcard-body { padding-top: 8px; }
.a2a-teil + .a2a-teil { margin-top: 10px; }
.a2a-frage {
  font-size: 12px; line-height: 1.55; color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere; letter-spacing: var(--spur);
}
.a2a-antwort {
  font-size: 12.5px; line-height: 1.6; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); padding-left: 10px;
  overflow-wrap: anywhere; border-radius: 8px; padding-right: 10px;}
.a2a-antwort > :first-child { margin-top: 0; }
.a2a-antwort > :last-child { margin-bottom: 0; }
.a2a-warten { font-size: 11.5px; color: var(--muted); letter-spacing: var(--spur); }
.a2a-warnung { font-size: 11.5px; color: var(--warn); margin-top: 8px; letter-spacing: var(--spur); }
.a2a-fuss {
  font-size: 10.5px; color: var(--faint); margin-top: 10px;
  letter-spacing: var(--spur);
}
.a2a-fuss code { font-family: var(--mono); color: var(--accent-deep); }
.a2a-roh { margin-top: 8px; }
.a2a-roh summary { cursor: pointer; font-size: 10.5px; color: var(--faint); margin-bottom: 4px; }
.a2a-roh pre + pre { margin-top: 6px; }



.toolcard-head .t-icon.a2a-duo { display: inline-flex; align-items: center; gap: 3px; color: var(--text); }
.a2a-kachel {
  width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--text);
}
.a2a-kachel svg { width: 13px; height: 13px; }
.a2a-kachel.a2a-buchstabe { font-size: 10.5px; font-weight: 600; letter-spacing: 0; }
.a2a-pfeile { display: inline-flex; flex-direction: column; gap: 1px; }
.a2a-pfeile svg { width: 14px; height: 7px; stroke: var(--linie-stark); stroke-width: 1.4; }
.toolcard.a2a-laeuft .a2a-hin { stroke: var(--accent); }
.toolcard.a2a-laeuft .a2a-b { border-color: var(--accent); color: var(--accent);
                              animation: a2a-puls 1.2s ease-in-out infinite; }
.toolcard.a2a-zurueck .a2a-hin,
.toolcard.a2a-teilweise .a2a-hin,
.toolcard.a2a-stumm .a2a-hin { stroke: var(--muted); }
.toolcard.a2a-zurueck .a2a-rueck { stroke: var(--ok); }
.toolcard.a2a-teilweise .a2a-rueck { stroke: var(--warn); }
.toolcard.a2a-stumm .a2a-rueck { stroke: var(--error); stroke-dasharray: 2 2; }
.toolcard.a2a-stumm .a2a-b { border-color: var(--error); color: var(--error); }

.toolcard.a2a-hintergrund .a2a-hin { stroke: var(--accent); }
.toolcard.a2a-hintergrund .a2a-rueck { stroke: var(--linie-stark); stroke-dasharray: 2 2; }
.toolcard.a2a-hintergrund .a2a-b { border-color: var(--accent); border-style: dashed; color: var(--accent); }


.toolcard.a2a-rueckfrage .a2a-rueck { stroke: var(--accent); }
.toolcard.a2a-rueckfrage .a2a-b { border-color: var(--accent); color: var(--accent);
                                  animation: a2a-puls 1.2s ease-in-out infinite; }
.toolcard.a2a-antwortet .a2a-hin { stroke: var(--ok); }
.a2a-uhr { color: var(--accent); font-variant-numeric: tabular-nums; }

.a2a-dateien { margin-top: 8px; }
.a2a-dateien .tb-kopf { display: flex; align-items: center; gap: 8px; }
.a2a-dateiliste { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.a2a-datei {
  font-family: var(--mono); font-size: 11px; color: var(--accent-deep);
  background: var(--code-bg); border: 1px solid var(--code-rand); border-radius: var(--r-1);
  padding: 1px 6px; overflow-wrap: anywhere;
}
.a2a-editor {
  font: inherit; font-size: 10.5px; letter-spacing: var(--spur); color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.a2a-editor:hover { color: var(--text); }
@keyframes a2a-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .toolcard.a2a-laeuft .a2a-b { animation: none; }
  .toolcard.a2a-rueckfrage .a2a-b { animation: none; }
}




















* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 13%, transparent);
  border: 3px solid transparent; background-clip: content-box;
  border-radius: 999px;


  min-height: 34px; min-width: 34px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text) 30%, transparent);
}
::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--text) 46%, transparent);
}







*:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 26%, transparent);
}



*:hover::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text) 38%, transparent);
}
*:hover::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--text) 52%, transparent);
}

@supports (scrollbar-color: auto) {
  * { scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent; }
  *:hover { scrollbar-color: color-mix(in srgb, var(--text) 32%, transparent) transparent; }
}





.dlg-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: var(--schleier);
  backdrop-filter: blur(2px);
  padding: 24px;
}
.dlg-backdrop[hidden] { display: none; }

.dlg-card {
  width: 420px; max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px var(--schleier), var(--edge);
  padding: 24px 24px 20px;
  animation: dlgIn .14s ease-out;
}
@keyframes dlgIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.dlg-card h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.dlg-text { color: var(--muted); font-size: 12px; margin: 0 0 16px; }
.dlg-hint { color: var(--faint); font-size: 11.5px; margin: -6px 0 0; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }


.dlg-list {
  margin: 0 0 4px; padding: 0 0 0 16px;
  color: var(--muted); font-size: 12px;
}
.dlg-list[hidden] { display: none; }
.dlg-list li { margin: 3px 0; }
.btn-danger { background: var(--error); border-color: var(--error); color: var(--auf-farbe);
              box-shadow: inset 0 1px 0 var(--code-hover-2); }
.btn-danger:hover { background: var(--fehler-tief); border-color: var(--fehler-tief); color: var(--auf-farbe); }


.attachments {
  max-width: 800px; margin: 0 auto 8px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.attachments[hidden] { display: none; }

.attach-item {
  position: relative;
  width: 74px; height: 74px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--edge);
  overflow: hidden;
}
.attach-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-item.laedt img { opacity: .4; }
.attach-item .a-x {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-1);
  cursor: pointer;
}
.attach-item .a-x svg { width: 10px; height: 10px; stroke-width: 1.5; }
.attach-item .a-x:hover { color: var(--error); border-color: var(--error); }
.attach-item .a-spin {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.attach-item .a-spin i {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent); border-right-color: transparent;
  animation: aspin .7s linear infinite;
}
@keyframes aspin { to { transform: rotate(360deg); } }
.attach-item.fehler { border-color: var(--error); }
.attach-item .a-err {
  position: absolute; inset: 0; padding: 4px;
  background: var(--error-bg); color: var(--error);
  font-size: 10.5px; line-height: 1.25; overflow: hidden;
}




.attach-btn {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
}
.attach-btn:hover { color: var(--accent-deep); background: var(--line-soft); }
.attach-btn[hidden] { display: none; }


.main.drop-aktiv { outline: 2px dashed var(--accent); outline-offset: -6px; }


.bubble-bilder { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bubble-bilder img {
  max-width: 150px; max-height: 150px;
  border: 1px solid var(--p-linie); border-radius: var(--r-1); display: block;
}
.bild-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 4px 8px;
}
.bild-chip svg { width: 12px; height: 12px; }






.chip.ghost-an {
  background: var(--s-flaeche);
  border-color: var(--brown);
  color: var(--s-tief);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--brown);
}
.chip.ghost-an svg { color: var(--warn); }

.ghost-band {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px;
  background: var(--s-flaeche);
  border-bottom: 1px solid var(--brown);
  color: var(--s-tief);
  font-size: 11.5px;
}
.ghost-band[hidden] { display: none; }
.ghost-band svg { color: var(--warn); width: 14px; height: 14px; }
.ghost-band strong { font-weight: 600; flex: none; }
.ghost-band span { color: var(--s-tief); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.chat-scroll.ghost { background: var(--s-flaeche); }
.chat-scroll.ghost .msg-user .bubble {
  background: var(--s-flaeche); border-color: var(--s-linie);
}


.conv-item .c-flags {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--s-tief);
  background: var(--s-flaeche); border: 1px solid var(--brown);
  border-radius: var(--r-rund); padding: 1px 6px; margin-left: 6px;
  vertical-align: 1px;
}


.conv-item { display: flex; align-items: center; gap: 4px; }
.conv-item .c-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-item .c-del {
  flex: none; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--faint); cursor: pointer;
  opacity: 0; transition: opacity 140ms, color 140ms, border-color 140ms;
}
.conv-item .c-del svg { width: 13px; height: 13px; }
.conv-item:hover .c-del, .conv-item.active .c-del { opacity: 1; }
.conv-item .c-del:hover { color: var(--error); border-color: var(--fehler-linie); background: var(--error-bg); }

.conv-item .c-del:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }


.aufraeum-hinweis {
  position: relative;
  margin: 0 16px 8px; padding: 8px 24px 8px 10px;
  font-size: 11.5px; line-height: 1.5; color: var(--s-tief);
  background: var(--s-flaeche); border: 1px solid var(--brown);
  border-radius: var(--radius);
}
.aufraeum-hinweis .h-x {
  position: absolute; top: 4px; right: 5px;
  width: 18px; height: 18px; padding: 0; line-height: 1;
  font-size: 14px; color: var(--warn);
  background: none; border: none; border-radius: var(--r-1); cursor: pointer;
}
.aufraeum-hinweis .h-x:hover { background: var(--warn-flaeche); }



.aufraeum-hinweis .h-text { display: block; }
.aufraeum-hinweis .h-tun {
  margin-top: 7px; padding: 3px 10px;
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; font-weight: 600; color: var(--s-tief);
  background: none; border: 1px solid var(--brown);
  border-radius: var(--r-rund); cursor: pointer;
}
.aufraeum-hinweis .h-tun:hover { background: var(--warn-flaeche); }
.aufraeum-hinweis .h-tun:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}



.conv-item.fehlt .c-name { opacity: .55; }
.c-fehlt {
  flex: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600;
  color: var(--warn);
  border: 1px solid currentColor;
}









.conv-item .c-lage {
  position: absolute; inset: 0; z-index: 0;
  border-radius: var(--radius); pointer-events: none;
  overflow: hidden;
}









.conv-item > :not(.c-lage):not(.baumlinien) { position: relative; z-index: 1; }


.conv-item[data-lage="laeuft"] .c-lage::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--ok);
  border-radius: 2px;
}


.conv-item[data-lage="laeuft"] .c-lage {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--ok) 20%, transparent) 0%,
              transparent 34%);
}
















.conv-item[data-lage="laeuft"] .c-lage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
              transparent 0%,
              color-mix(in srgb, var(--ok) 62%, transparent) 42%,
              color-mix(in srgb, var(--ok) 62%, transparent) 58%,
              transparent 100%);
  background-size: 52% 100%;
  background-repeat: no-repeat;
  background-position-x: -60%;
  opacity: 0;
}
.conv-item.pulst .c-lage::after {



  animation: zeile-puls 1150ms ease-in-out;
}








@keyframes zeile-puls {
  0%   { background-position-x: -60%; opacity: 0; }
  10%  { opacity: 1; }
  45%  { background-position-x: var(--zeile-weite, 60%); }
  55%  { background-position-x: var(--zeile-weite, 60%); }
  92%  { opacity: 1; }
  100% { background-position-x: -60%; opacity: 0; }
}




.conv-item[data-lage="erfolg"] .c-lage,
.conv-item[data-lage="teil"] .c-lage,
.conv-item[data-lage="fehler"] .c-lage {
  border: 1px solid transparent;
  animation: zeile-rand 2.2s ease-in-out infinite;
}
.conv-item[data-lage="erfolg"] .c-lage { --lage-ton: var(--ok); }
.conv-item[data-lage="teil"]   .c-lage { --lage-ton: var(--warn); }
.conv-item[data-lage="fehler"] .c-lage { --lage-ton: var(--fehler); }
@keyframes zeile-rand {
  0%, 100% { border-color: color-mix(in srgb, var(--lage-ton) 26%, transparent);
             box-shadow: none; }
  50%      { border-color: color-mix(in srgb, var(--lage-ton) 85%, transparent);
             box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lage-ton) 22%, transparent); }
}


.conv-item[data-lage="fehler"] .c-lage { animation-duration: 1.3s; }






.conv-item[data-lage="frage"] .c-lage {
  border-radius: var(--radius);
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--brown) 55%, transparent) 0 6px,
      transparent 6px 12px);
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 0, 0 100%;
  animation: zeile-frage 1.6s linear infinite;
}
.conv-item[data-lage="frage"] .c-lage::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--brown) 55%, transparent) 0 6px,
      transparent 6px 12px);
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  animation: zeile-frage 1.6s linear infinite;
}
@keyframes zeile-frage {
  from { background-position-x: 0; }
  to   { background-position-x: 12px; }
}



@media (prefers-reduced-motion: reduce) {
  .conv-item .c-lage,
  .conv-item .c-lage::before,
  .conv-item .c-lage::after { animation: none !important; }
  .conv-item[data-lage="erfolg"] .c-lage,
  .conv-item[data-lage="teil"] .c-lage,
  .conv-item[data-lage="fehler"] .c-lage {
    border-color: color-mix(in srgb, var(--lage-ton) 70%, transparent);
  }
}



.conv-item .c-live { flex: none; display: inline-flex; align-items: center; }
.conv-item .c-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); animation: dotpulse 1.1s infinite;
}
.turn-meta .unvoll-flag { color: var(--brown); font-weight: 600; }
.turn.live {  }




.media-btn { position: relative; display: flex; align-items: stretch; }
.media-btn[hidden] { display: none; }

.media-btn .mb-main, .media-btn .mb-more {
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--edge);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.media-btn .mb-main {
  padding: 4px 10px;
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none;
}
.media-btn .mb-more {
  padding: 4px 6px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.media-btn .mb-main:hover, .media-btn .mb-more:hover,
.media-btn.offen .mb-more { border-color: var(--accent); color: var(--accent-deep); }
.media-btn .mb-main svg, .media-btn .mb-more svg { width: 13px; height: 13px; }
.media-btn .mb-main span { font-weight: 600; }

.media-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 260px; max-width: 360px; max-height: 320px; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px;
}
.media-menu[hidden] { display: none; }
.media-menu .mm-leer { padding: 8px 10px; font-size: 11.5px; color: var(--faint); }
.media-menu .mm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--r-1); cursor: pointer;
  font-size: 11.5px; color: var(--text);
}
.media-menu .mm-item:hover { background: var(--accent-soft); }
.media-menu .mm-item .mm-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px;
}
.media-menu .mm-item .mm-art { flex: none; font-size: 10.5px; color: var(--faint); }
.media-menu .mm-item .mm-zeit {
  flex: none; font-size: 10.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}



.media-menu .mm-item.juengste .mm-zeit { color: var(--accent-deep); }
.media-menu .mm-item svg { width: 13px; height: 13px; color: var(--accent); flex: none; }
.media-menu .mm-item.aktuell { background: var(--accent-soft); font-weight: 600; }






.kopf-werkzeuge {
  display: flex; align-items: center; gap: 4px;
  margin-left: 6px;
}













.usage {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;










  width: 28px; height: 28px; box-sizing: border-box;


  padding: 0;
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--edge);
  cursor: default;
  transition: border-color 140ms;
}
.usage[hidden] { display: none; }

.usage-wrap { position: relative; display: flex; }
.usage-wrap[hidden] { display: none; }



.usage-wrap .usage { cursor: pointer; }
.usage-wrap.offen .usage { border-color: var(--accent); color: var(--accent-deep); }
.usage:hover { border-color: var(--accent); }



.usage svg { width: 16px; height: 16px; color: var(--accent); }
















.usage[data-lage="aus"] svg   { color: var(--faint); }
.usage[data-lage="an"] svg    { color: var(--ok); }
.usage[data-lage="frage"] svg { color: var(--warn);
                                animation: beetle-puls 1.6s ease-in-out infinite; }
.usage[data-lage="weg"] svg   { color: var(--error); }
@media (prefers-reduced-motion: reduce) {
  .usage[data-lage="frage"] svg { animation: none; }
}
.usage .u-sep { width: 1px; height: 12px; background: var(--line); }
.usage .u-cost { font-weight: 600; color: var(--text); }
.usage.laedt { opacity: .55; }


.toolcard-head .t-sub { font-family: var(--mono); font-size: 10.5px; }




.diff {
  margin: 0 0 4px;
  border: 1px solid var(--code-rand);
  border-radius: var(--r-1);
  overflow: hidden;
  background: var(--code-bg);
}
.diff-kopf {
  display: flex; gap: 10px;
  padding: 4px 10px;
  background: var(--code-leiste);
  border-bottom: 1px solid var(--code-rand);
  font-size: 10.5px; font-weight: 600;
}
.diff-kopf .d-plus { color: var(--diff-neu); }
.diff-kopf .d-minus { color: var(--diff-weg); }
.diff-info { padding: 8px 10px; font-size: 11.5px; color: var(--code-fg-3); }

.diff-zeilen {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  max-height: 320px; overflow: auto;
}
.d-zeile { display: flex; white-space: pre-wrap; word-break: break-word; }
.d-mark {
  flex: none; width: 20px; text-align: center;
  color: var(--code-fg-5); user-select: none;
}
.d-text { flex: 1; padding-right: 10px; color: var(--code-fg); }





.d-neu { background: var(--diff-neu-bg-3); }
.d-neu .d-mark { color: var(--diff-neu); }
.d-weg { background: var(--diff-weg-bg-3); }
.d-weg .d-mark { color: var(--diff-weg); }


.d-gleich .d-mark { color: var(--code-fg-5); }
.d-luecke {
  padding: 2px 0 2px 20px; color: var(--code-fg-5);
  border-top: 1px solid var(--code-rand); border-bottom: 1px solid var(--code-rand);
  background: var(--code-leiste);
}

.diff-falt { margin-bottom: 8px; }
.diff-falt > summary {
  cursor: pointer; font-size: 11.5px; color: var(--accent-deep);
  padding: 3px 0; user-select: none;
}
.diff-falt > summary:hover { text-decoration: underline; }





.tb-rest { margin-top: 8px; }
.tb-rest > summary {
  cursor: pointer; font-size: 10.5px; color: var(--faint);
  padding: 3px 0; user-select: none;
}
.tb-rest > summary:hover { color: var(--accent-deep); }













.srv-lage {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: var(--schleier);
  padding: 24px;
}
.srv-karte {
  width: min(1040px, 100%); height: min(760px, 100%);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.srv-karte.laedt { opacity: .7; pointer-events: none; }

.srv-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: var(--panel-2); flex: none;
}
.srv-dot-gross {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--faint); flex: none;
}










.srv-auto { gap: 4px; align-items: center; font-size: 10.5px; }
.srv-auto .srv-auto-text { line-height: 1; }
.srv-auto.an { color: var(--accent); border-color: var(--p-linie); background: var(--accent-soft); }
.srv-auto.an:hover { color: var(--accent-deep); }


.srv-auto .srv-auto-halt { fill: currentColor; stroke: none; }
.srv-auto.an .srv-auto-halt { display: none; }
.srv-dot-gross.an { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-schleier); }
.srv-kopf-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.srv-kopf-text strong { font-size: 12px; font-weight: 600; }
.srv-zustand-sub { font-size: 10.5px; color: var(--muted); }
.srv-spacer { flex: 1; }
.srv-schalt { padding: 4px 12px; font-size: 11.5px; }
.srv-schalt[hidden] { display: none; }

.srv-fehler {
  margin: 0; padding: 8px 12px; flex: none;
  background: var(--error-bg); color: var(--error);
  font-size: 11.5px; border-bottom: 1px solid var(--line);
}
.srv-fehler[hidden] { display: none; }

.srv-werte {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px; flex: none;
}
.srv-w { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.srv-w i { font-style: normal; color: var(--faint); }
.srv-w code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;


  color: var(--text); background: var(--flaeche-3);
  border: 1px solid var(--line-soft); border-radius: var(--r-1);
  padding: 1px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 460px;
}



.srv-buehne { flex: 1; min-height: 0; position: relative; background: var(--buehne); }
.srv-frame { width: 100%; height: 100%; border: none; background: var(--buehne); }
.srv-frame[hidden] { display: none; }
.srv-leer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 28px;
  color: var(--muted); font-size: 12px; line-height: 1.5;
  background: var(--panel-2);
}
.srv-leer[hidden] { display: none; }




.srv-weg {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-2);
}


.srv-weg[hidden] { display: none; }
.srv-krume {
  display: flex; align-items: center; gap: 3px;
  min-width: 0; overflow-x: auto; white-space: nowrap;
  font-size: 11.5px;
}
.srv-krume-teil {
  border: none; background: none; padding: 2px 4px;
  border-radius: var(--r-1); cursor: pointer;
  font: inherit; letter-spacing: var(--spur); color: var(--accent-deep);
}
.srv-krume-teil:hover { background: var(--accent-soft); }

.srv-krume-teil.hier { color: var(--text); font-weight: 600; cursor: default; }
.srv-krume-teil.hier:hover { background: none; }
.srv-krume-pfeil { color: var(--faint); flex: none; }


.srv-liste {
  position: absolute; inset: 0; overflow: auto;
  padding: 12px; background: var(--panel);
}
.srv-liste[hidden] { display: none; }
.srv-liste-hinweis { margin: 0; padding: 16px 4px; color: var(--muted); font-size: 12px; }


.srv-gitter {
  display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.srv-eintrag {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; min-width: 0;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; text-align: left;
  font: inherit; letter-spacing: var(--spur); font-size: 12px; color: var(--text);
}
.srv-eintrag:hover { background: var(--panel-2); border-color: var(--line-soft); }
.srv-eintrag .se-icon { flex: none; display: inline-flex; color: var(--faint); }
.srv-eintrag .se-icon svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.srv-eintrag.ordner .se-icon { color: var(--brown); }
.srv-eintrag.ordner .se-name { font-weight: 600; }
.srv-eintrag .se-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-eintrag .se-art {
  flex: none; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
}

.srv-log-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; flex: none;
  border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--muted); background: var(--panel-2);
}
.srv-logs {
  flex: none; height: 148px; margin: 0; overflow: auto;
  padding: 8px 12px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 10.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  background: var(--code-bg); color: var(--code-fg);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 860px) {
  .srv-lage { padding: 0; }
  .srv-karte { width: 100%; height: 100%; border-radius: 0; }
  .srv-w code { max-width: 200px; }
  .srv-logs { height: 110px; }
}



.conv-item .c-name { flex: 1 1 auto; min-width: 0; }
.conv-item .c-agent {
  flex: 0 1 auto; min-width: 0; max-width: 45%;
  font-size: 10.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-item.active .c-agent { color: var(--muted); }





























.rueckfrage {
  margin: 0 auto 10px; max-width: 860px; width: 100%;






  flex: 0 1 auto; display: flex; flex-direction: column;
  max-height: 62vh;
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--edge);
  overflow: hidden;
}
.rueckfrage[hidden] { display: none; }




.rueckfrage.hat-plan { min-height: 220px; }




.rueckfrage .rf-kopf {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
}
.rf-kopf-icon { display: inline-flex; color: var(--accent-deep); flex: none; }
.rf-kopf-icon svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.rf-kopf-titel {
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-deep);
}


.rf-kopf-zahl {
  margin-left: auto; flex: none;
  font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rf-kopf-zahl:empty { display: none; }




.rueckfrage .rf-leib {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  padding: 12px 16px 4px;
}



.rueckfrage .rf-frage,
.rueckfrage .rf-vorspann,
.rueckfrage .rf-nachsatz {
  font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--text);
}
.rf-frage.md > :first-child, .rf-vorspann.md > :first-child { margin-top: 0; }
.rf-frage.md > :last-child, .rf-vorspann.md > :last-child { margin-bottom: 0; }
.rf-frage.md p, .rf-vorspann.md p, .rf-nachsatz.md p { margin: 0 0 8px; }
.rf-frage.md ul, .rf-frage.md ol { margin: 6px 0 8px; padding-left: 18px; }
.rf-frage.md li { margin: 4px 0; }
.rf-frage.md li::marker { color: var(--faint); }
.rf-frage.md strong, .rf-vorspann.md strong, .rf-nachsatz.md strong,
.rf-punkt-text.md strong { font-weight: 600; color: var(--text); }
.rf-frage.md code, .rf-vorspann.md code, .rf-punkt-text.md code {
  font-size: 12px; font-weight: 400;
}
.rf-frage.md a, .rf-vorspann.md a, .rf-punkt-text.md a { word-break: break-word; }


.rf-frage.md h1, .rf-frage.md h2,
.rf-frage.md h3, .rf-frage.md h4 {
  margin: 10px 0 4px; font-size: 12px; font-weight: 600;
}







.rueckfrage .rf-punkte {
  list-style: none; margin: 10px 0 4px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.rueckfrage .rf-punkt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 10px 7px 8px;
  border-radius: var(--r-1);
}





.rueckfrage .rf-punkt { background: var(--p-schleier); }
.rf-punkt-nr {
  flex: none; width: 19px; height: 19px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
}
.rf-punkt-inhalt { flex: 1 1 auto; min-width: 0; }



.rf-punkt-marke {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--accent-deep); margin-bottom: 2px;
}
.rf-punkt-text {
  font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--text);
}
.rf-punkt-text.md > :first-child { margin-top: 0; }
.rf-punkt-text.md > :last-child { margin-bottom: 0; }
.rf-punkt-text.md p { margin: 0 0 6px; }



.rueckfrage .rf-nachsatz {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted);
}




.rueckfrage .rf-kontext {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin: 0 16px 4px; padding: 12px 14px;
  background: var(--flaeche-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 12px; line-height: 1.55; color: var(--text);
}



.rf-kontext.md > :first-child { margin-top: 0; }
.rf-kontext.md > :last-child { margin-bottom: 0; }
.rf-kontext.md h1, .rf-kontext.md h2,
.rf-kontext.md h3, .rf-kontext.md h4 {
  margin: 16px 0 6px; padding-bottom: 4px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-deep);
  border-bottom: 1px solid var(--line-soft);
}
.rf-kontext.md p { margin: 0 0 8px; }
.rf-kontext.md ul, .rf-kontext.md ol { margin: 0 0 8px; padding-left: 16px; }
.rf-kontext.md li { margin: 4px 0; }
.rf-kontext.md li::marker { color: var(--faint); }
.rf-kontext.md strong { font-weight: 600; }
.rf-kontext.md code { font-size: 11.5px; }

.rf-kontext.md a { word-break: break-word; }









.rueckfrage .rf-anhang { margin: 12px 0 4px; }
.rueckfrage .rf-anhang .zeigkarte { margin: 0; }
.rueckfrage .rf-anhang .zeig-bild,
.rueckfrage .rf-anhang .zeig-video { max-height: 240px; }
.rueckfrage .rf-anhang .zeig-rahmen { height: 200px; }


.rueckfrage .rf-anhang .zeig-warum {
  font-size: 11.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}




.rueckfrage .rf-aktionen {
  flex: none;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 14px;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
}




.rueckfrage button {
  border: 1px solid var(--linie-bedien); border-radius: var(--r-1);
  background: var(--flaeche-2); color: var(--text);
  padding: 6px 12px; font: inherit; letter-spacing: var(--spur); font-size: 12px;
  cursor: pointer; transition: 140ms ease;
}
.rueckfrage button:active { transform: translateY(1px); transition-duration: 60ms; }
.rueckfrage button:hover { border-color: var(--accent); }
.rueckfrage .rf-ja, .rueckfrage .rf-senden {
  background: var(--accent); border-color: var(--accent); color: var(--auf-farbe);
}
.rueckfrage .rf-ja:hover, .rueckfrage .rf-senden:hover {
  background: var(--accent-deep); border-color: var(--accent-deep);
}



.rueckfrage .rf-feldzeile {
  flex: 1 1 100%;
  display: flex; align-items: flex-end; gap: 8px;
}



.rueckfrage .rf-text {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--linie-bedien); border-radius: var(--r-1);
  background: var(--flaeche-2); color: var(--text);
  padding: 7px 10px; font: inherit; letter-spacing: var(--spur); font-size: 12px; line-height: 1.5;
  resize: none; overflow-y: auto;
  min-height: 34px; max-height: 132px;
}
.rueckfrage .rf-text:focus { outline: none; border-color: var(--accent); }
.rueckfrage .rf-text::placeholder { color: var(--text-3); }
.rueckfrage .rf-senden { flex: none; align-self: flex-end; height: 34px; }



.rueckfrage .rf-hinweis {
  flex: 1 1 100%;
  font-size: 10px; color: var(--text-3);
}
.rueckfrage .rf-fehler {
  flex: 1 1 100%;
  font-size: 12px; color: var(--error);
}









.rueckfrage .kn-karte {
  margin: 12px 0 4px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--flaeche-2);
}
.kn-kopf { display: flex; align-items: center; gap: 10px; }
.kn-logo {
  flex: none; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); border-radius: var(--r-1);
  background: var(--flaeche); overflow: hidden;
}
.kn-logo img { width: 24px; height: 24px; object-fit: contain; }
.kn-logo--voll img { width: 100%; height: 100%; object-fit: cover; }
.kn-logo svg { width: 22px; height: 22px; }
.kn-logo--text { font-weight: 600; font-size: 15px; color: var(--text-2); }
.kn-titel { flex: 1 1 auto; min-width: 0; }
.kn-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.kn-anbieter { font-size: 11.5px; color: var(--text-3); }
.kn-aufwand {
  flex: none; font-size: 11px; line-height: 1; padding: 5px 9px;
  border: 1px solid var(--ok-linie); border-radius: var(--r-rund);
  background: var(--ok-flaeche); color: var(--ok-tief); white-space: nowrap;
}
.kn-aufwand--schluessel {
  border-color: var(--p-linie); background: var(--p-flaeche); color: var(--p-tief);
}
.kn-aufwand--einrichtung {
  border-color: var(--warn-linie); background: var(--warn-flaeche); color: var(--warn-tief);
}
.kn-was { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.kn-schritte {
  margin: 10px 0 0; padding-left: 18px;
  font-size: 12px; line-height: 1.55; color: var(--text-2);
}
.kn-rueckruf {
  margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-2);
}
.kn-rueckruf code {
  font: 11px var(--mono); padding: 3px 6px; word-break: break-all;
  border: 1px solid var(--line-soft); border-radius: var(--r-1);
  background: var(--flaeche); color: var(--text);
}
.rueckfrage .kn-kopie { padding: 3px 9px; font-size: 11px; }
.kn-hinweis { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.kn-felder { margin-top: 12px; display: grid; gap: 10px; }
.kn-feld label {
  display: block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.kn-feld input[type=text], .kn-feld input[type=password] {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--linie-bedien); border-radius: var(--r-1);
  background: var(--flaeche); color: var(--text);
  padding: 6px 9px; font: inherit; font-size: 12px; letter-spacing: var(--spur);
}
.kn-feld input:focus { outline: none; border-color: var(--accent); }
.kn-feld--schalter label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.kn-feld-hinweis { margin-top: 3px; font-size: 10.5px; line-height: 1.4; color: var(--text-3); }
.kn-geheim { margin-top: 8px; font-size: 10.5px; color: var(--text-3); }
.kn-link { margin-top: 10px; font-size: 12px; color: var(--text-2); }
.kn-link a { color: var(--accent-deep); }
.kn-lage { margin-top: 10px; font-size: 12px; color: var(--text-2); }
.kn-lage:empty { display: none; }
.kn-lage--ok { color: var(--ok-tief); }
.kn-lage--fehler { color: var(--fehler-tief); }





.an-herkunft {
  padding: 8px 10px; border: 1px solid var(--p-linie); border-radius: var(--r-1);
  background: var(--p-flaeche); color: var(--p-tief);
  font-size: 12.5px; line-height: 1.5; word-break: break-word;
}
.an-herkunft strong { font-weight: 700; }
.an-zweck { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }
.an-karte .kn-felder { margin-top: 10px; }





.anf-schleier {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 24, 31, .45); padding: 16px;
}
.anf-fenster {
  display: flex; flex-direction: column; gap: 8px;
  width: min(1500px, 100%); max-height: calc(100vh - 32px);
  padding: 12px 14px; box-sizing: border-box;
  border: 1px solid var(--linie-bedien); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.anf-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.anf-titel { font-weight: 700; font-size: 14px; }
.anf-herkunft { font-size: 12px; color: var(--p-tief); word-break: break-all; }
.anf-text { font-size: 12px; line-height: 1.45; color: var(--text-2); }
.anf-buehne {
  position: relative; flex: 1 1 auto; min-height: 280px; height: clamp(280px, calc(100vh - 230px), 940px);
  border: 1px solid var(--line); border-radius: var(--r-1); background: var(--text); overflow: hidden;
}
.anf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.anf-fang { position: absolute; inset: 0; cursor: default; touch-action: none; }
.anf-tasten {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0;
  border: 0; padding: 0; resize: none; pointer-events: none;
}
.anf-lage { font-size: 12px; color: var(--text-2); min-height: 16px; }
.anf-lage--ok { color: var(--ok-tief); }
.anf-lage--fehler { color: var(--fehler-tief); }
.anf-fuss { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.anf-fuss button {
  border: 1px solid var(--linie-bedien); border-radius: var(--r-1);
  background: var(--flaeche-2); color: var(--text); padding: 7px 14px; font: inherit; font-size: 12px; cursor: pointer;
}
.anf-fuss .anf-ok { background: var(--accent); border-color: var(--accent); color: var(--auf-farbe); }
.anf-fuss button:hover { border-color: var(--accent); }
.anf-fuss button:disabled { opacity: .55; cursor: default; }











.tb-netz { display: none; padding: 10px 12px 4px; border-top: 1px solid var(--line-soft); }
.toolcard.open .tb-netz { display: block; }
.kn-netz-flaeche { position: relative; }




.kn-netz-svg {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 420px;
  fill: none; stroke: none; stroke-width: 1;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--flaeche-2); overflow: hidden;
}
.kn-netz--ohne .kn-netz-svg, .kn-netz--ohne .kn-netz-knoepfe { display: none; }
.kn-netz-lade {
  position: absolute; left: 12px; top: 10px;
  font-size: 11.5px; color: var(--text-3);
}
.kn-netz--ohne .kn-netz-lade { position: static; padding: 4px 0; }
.kn-netz-knoepfe { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.kn-knopf {
  font: inherit; font-size: 11px; letter-spacing: var(--spur);
  padding: 3px 9px; cursor: pointer;
  border: 1px solid var(--linie-bedien); border-radius: var(--r-1);
  background: var(--flaeche); color: var(--text-2);
}
.kn-knopf:hover { border-color: var(--accent); color: var(--text); }

.kn-welt { transition: transform 900ms var(--ease-in-out); }
.kn-welt--sofort { transition: none; }


.kn-k-mass { transform: scale(var(--kk, 1)); transition: transform 900ms var(--ease-in-out); }
.kn-welt--sofort .kn-k-mass { transition: none; }


.kn-sektor { fill: none; stroke: var(--linie); stroke-width: calc(1.4px * var(--k, 1)); }
.kn-ast { fill: none; stroke: var(--linie-weich); stroke-width: calc(1px * var(--k, 1)); }
.kn-bereich { fill: var(--flaeche); stroke: var(--text-3); stroke-width: calc(1px * var(--k, 1)); }
.kn-kat { fill: var(--flaeche); stroke: var(--linie-stark); stroke-width: calc(1px * var(--k, 1)); }
.kn-punkt { fill: var(--linie-stark); }
.kn-t-bereich {
  font-size: calc(10.5px * var(--k, 1)); letter-spacing: .04em;
  fill: var(--text-3); text-transform: uppercase;
}
.kn-mitte-q { fill: var(--flaeche); stroke: var(--p); stroke-width: calc(1.6px * var(--k, 1)); }
.kn-mitte-z { fill: none; stroke: var(--p); stroke-width: calc(1.6px * var(--k, 1)); stroke-linecap: round; }
.kn-t-frage {
  font-size: calc(12px * var(--k, 1)); font-weight: 600; fill: var(--text);
  paint-order: stroke; stroke: var(--flaeche-2); stroke-width: calc(4px * var(--k, 1));
  stroke-linejoin: round;
}

.kn-t-bereich--zurueck { visibility: hidden; }


.kn-pfad {
  fill: none; stroke: var(--p); stroke-linecap: round;
  stroke-width: calc(1.6px * var(--k, 1)); opacity: .8;
}
.kn-pfad--treffer { stroke: var(--p); }
.kn-pfad--wahl { stroke-width: calc(2.8px * var(--k, 1)); opacity: 1; }
.kn-pfad--leise { opacity: .45; }
.kn-zeichnen {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: kn-zeichnen 720ms var(--ease-out) forwards;
}
@keyframes kn-zeichnen { to { stroke-dashoffset: 0; } }
.kn-erscheinen {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: kn-erscheinen 420ms var(--ease-out) forwards;
}
@keyframes kn-erscheinen {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}




.kn-k-ring { fill: var(--flaeche); stroke-width: 2.2px; stroke: var(--linie-stark); }
.kn-k-ring--sofort { stroke: var(--ok); }
.kn-k-ring--schluessel { stroke: var(--p); }
.kn-k-ring--einrichtung { stroke: var(--warn); }
.kn-k-ring--bereit { stroke: var(--ok); stroke-width: 3.6px; }
.kn-k-ring--wahl { stroke: var(--p); stroke-width: 3.6px; }
.kn-k-ring--aus { stroke: var(--text-3); stroke-dasharray: 3 3; }
.kn-k-g--aus { opacity: .55; }



.kn-k-g--zurueck { animation: kn-zuruecktreten 600ms var(--ease-out) var(--zurueck-ab, 0ms) both; }



.kn-k-g--zurueck .kn-t-knoten { animation: kn-verstummen 1ms linear var(--zurueck-ab, 0ms) forwards; }
@keyframes kn-zuruecktreten { from { opacity: 1; } to { opacity: .3; } }
@keyframes kn-verstummen { from, to { visibility: hidden; } }
.kn-k-mono { font-size: 12px; font-weight: 600; fill: var(--text-2); }
.kn-rang circle { fill: var(--p); }
.kn-rang text { font-size: 10px; font-weight: 700; fill: var(--auf-farbe); }
.kn-t-knoten, .kn-t-kat, .kn-t-sat {
  font-size: calc(11px * var(--k, 1)); fill: var(--text);
  paint-order: stroke; stroke: var(--flaeche-2); stroke-width: calc(3px * var(--k, 1));
  stroke-linejoin: round;
}
.kn-t-knoten { font-size: 14px; stroke-width: 3.6px; }
.kn-t-kat { fill: var(--text-2); font-size: calc(10px * var(--k, 1)); }

.kn-t-kat--zurueck { visibility: hidden; }

.kn-t-sat { font-size: 12.5px; stroke-width: 3.6px; }

.kn-netz--ganz .kn-t-sat { visibility: hidden; }

.kn-status { fill: none; stroke-width: 2.5px; }
.kn-status--ok { stroke: var(--ok); }
.kn-status--nein { stroke: var(--fehler); }
.kn-status--aus { stroke: var(--text-3); stroke-dasharray: 4 3; }
.kn-status--wartet {
  stroke: var(--warn); transform-box: fill-box; transform-origin: center;
  animation: kn-puls 1.6s ease-in-out infinite;
}

@keyframes kn-puls {
  0%, 100% { transform: scale(1); opacity: .95; }
  50%      { transform: scale(1.35); opacity: .3; }
}
.kn-status--wartet.kn-erscheinen { animation: kn-puls 1.6s ease-in-out infinite; opacity: 1; }

.kn-sat circle { fill: var(--flaeche); stroke: var(--linie-stark); stroke-width: 1.5px; }
.kn-sat-l { stroke: var(--linie); stroke-width: 1.25px; }
.kn-sat--gesucht circle { stroke: var(--p); }
.kn-sat--ok circle { stroke: var(--ok); fill: var(--ok-flaeche); }
.kn-sat--fehler circle { stroke: var(--fehler); fill: var(--fehler-flaeche); }
.kn-sat--laeuft circle {
  stroke: var(--warn); transform-box: fill-box; transform-origin: center;
  animation: kn-puls 1.2s ease-in-out infinite;
}









.kn-zeit { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; }
.kn-z {
  --kn-z-uhr: 52px;
  --kn-z-mitte: 14px;
  position: relative;
  display: grid; grid-template-columns: var(--kn-z-uhr) 14px 80px minmax(0, 1fr);
  column-gap: 8px; align-items: start;
  padding: 5px 10px 7px 6px; border-radius: var(--r-1); cursor: pointer;
  transition: background var(--d1) var(--ease-out);
}
.kn-z:hover { background: var(--flaeche-2); }
.kn-z--aktiv, .kn-z--aktiv:hover { background: var(--p-flaeche); }

.kn-z::before, .kn-z::after {
  content: ""; position: absolute;
  left: calc(6px + var(--kn-z-uhr) + 8px + 7px - .75px);
  border-left: 1.5px dashed var(--linie-stark);
}
.kn-z::before { top: 0; height: calc(var(--kn-z-mitte) - 7.5px); }
.kn-z::after { top: calc(var(--kn-z-mitte) + 7.5px); bottom: 0; }
.kn-z:first-child::before, .kn-z:last-child::after { display: none; }

.kn-z-uhr {
  font-size: 11.5px; line-height: 18px; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--text-2);
}
.kn-z-sek { color: var(--text-3); }
.kn-z--jetzt .kn-z-hm { color: var(--text); }
.kn-z-punkt {
  justify-self: center; box-sizing: border-box;
  width: 9px; height: 9px; margin-top: 4.5px; border-radius: 50%;
  border: 1.5px solid var(--text-3); background: transparent;
}
.kn-z[data-ton="ok"] .kn-z-punkt { background: var(--ok); border-color: var(--ok); }
.kn-z[data-ton="nein"] .kn-z-punkt { background: var(--fehler); border-color: var(--fehler); }
.kn-z[data-ton="aus"] .kn-z-punkt { border-style: dashed; }
.kn-z[data-ton="wartet"] .kn-z-punkt {
  background: var(--warn); border-color: var(--warn);
  animation: kn-z-puls 1.4s ease-in-out infinite;
}
.kn-z[data-ton="laeuft"] .kn-z-punkt {
  border-color: var(--p); animation: kn-z-puls 1.4s ease-in-out infinite;
}
@keyframes kn-z-puls { 50% { opacity: .3; } }

.kn-z-art {
  font-size: 10px; line-height: 18px; font-weight: 600; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
}
.kn-z-kopf {
  min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px;
  font-size: 12.5px; line-height: 18px; color: var(--text-2);
}
.kn-z-was { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.kn-z-lage { font-weight: 600; }
.kn-z-lage--ok { color: var(--ok); }
.kn-z-lage--nein { color: var(--fehler); }
.kn-z-lage--wartet { color: var(--warn); }
.kn-z-lage--laeuft { color: var(--p); }
.kn-z-lage--aus { color: var(--text-2); }
.kn-z-mehr { font-size: 12px; font-variant-numeric: tabular-nums; }
.kn-z-mehr > span + span::before { content: " · "; color: var(--text-3); }


.kn-z-etikett, .kn-z-wert { margin-top: 2px; font-size: 11.5px; line-height: 17px; }
.kn-z-etikett { grid-column: 3; white-space: nowrap; color: var(--text-3); }
.kn-z-wert { grid-column: 4; min-width: 0; color: var(--text-2); overflow-wrap: anywhere; }


@media (max-width: 640px) {
  .kn-z { --kn-z-uhr: 44px; grid-template-columns: var(--kn-z-uhr) 14px minmax(0, 1fr); }
  .kn-z-art, .kn-z-kopf, .kn-z-etikett, .kn-z-wert { grid-column: 3; }
  .kn-z-wert { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kn-welt { transition: none; }
  .kn-zeichnen { animation: none; stroke-dashoffset: 0; }
  .kn-erscheinen { animation: none; opacity: 1; transform: none; }
  .kn-status--wartet, .kn-sat--laeuft circle, .kn-z .kn-z-punkt { animation: none; }
  .kn-z { transition: none; }
  .kn-k-g--zurueck { animation: none; opacity: .3; }
  .kn-k-g--zurueck .kn-t-knoten { animation: none; visibility: hidden; }
}










.tb-pfad { padding: 1px 6px 3px; border-top: 1px solid var(--line-soft); }
.kn-laufpfad { margin: 0; }
.kn-laufpfad .kn-z { padding-top: 4px; padding-bottom: 5px; }
.kn-weg { min-width: 0; overflow-wrap: anywhere; }
.kn-weg-sep { margin: 0 .38em; color: var(--text-3); font-weight: 400; }
.kn-weg-teil { font-weight: 600; color: var(--text); }
.kn-weg-teil--bereich { font-weight: 500; color: var(--text-3); }
.kn-weg-teil--kategorie { font-weight: 500; color: var(--text-2); }





.kn-netz--fenster { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.kn-netz--fenster .kn-netz-flaeche { flex: 1 1 auto; min-height: 120px; }
.kn-netz--fenster .kn-netz-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-height: none; aspect-ratio: auto; border: 0; border-radius: 0;
}

.kn-ebene--frueher { opacity: .42; }

.kn-ebene--stumm .kn-t-sat { visibility: hidden; }





@keyframes kn-ploppen {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.45); }
  100% { opacity: 1; transform: scale(1); }
}
.kn-netz--fenster .kn-sat--ok > .kn-erscheinen,
.kn-netz--fenster .kn-sat--fehler > .kn-erscheinen,
.kn-netz--fenster .kn-sat--laeuft > .kn-erscheinen,
.kn-netz--fenster .kn-sat--gesucht > .kn-erscheinen {
  animation-name: kn-ploppen; animation-duration: 600ms;
}
@media (prefers-reduced-motion: reduce) {
  .kn-netz--fenster .kn-sat > .kn-erscheinen { animation: none; opacity: 1; transform: none; }
}


.kn-streifen {
  flex: none; display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 64px; overflow-y: auto;
  padding: 7px 10px; border-top: 1px solid var(--line-soft);
  background: var(--panel-2);
}
.kn-streifen[hidden] { display: none; }
.kn-streifen-nr {
  min-width: 22px; height: 22px; padding: 0 5px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  font: 600 10px/1 var(--sans); letter-spacing: var(--spur);
  font-variant-numeric: tabular-nums;
}
.kn-streifen-nr:hover { border-color: var(--p); color: var(--text); }
.kn-streifen-nr[data-ton="ok"] { border-bottom-color: var(--ok); }
.kn-streifen-nr[data-ton="nein"] { border-bottom-color: var(--fehler); }
.kn-streifen-nr[data-ton="wartet"] { border-bottom-color: var(--warn); }
.kn-streifen-nr[data-ton="laeuft"] { border-bottom-color: var(--p); }
.kn-streifen-nr.frueher { opacity: .6; }
.kn-streifen-nr.an { background: var(--p); border-color: var(--p); color: var(--auf-farbe); }



.kn-protokoll { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 4px 6px; }
.kn-netz--protokoll .kn-protokoll { display: block; }
.kn-netz--protokoll .kn-netz-flaeche,
.kn-netz--protokoll .kn-streifen,
.kn-netz--protokoll .kn-jetzt { display: none; }
.kn-protokoll-kopf {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: flex-end; padding: 6px 6px 4px;
  background: var(--panel);
}
.kn-protokoll-liste { margin: 0; }







.kn-jetzt {
  flex: none; margin: 0; padding: 1px 4px 3px; border-top: 1px solid var(--line-soft);
  box-sizing: border-box; height: 52px; overflow: hidden;
}
.kn-jetzt .kn-z { cursor: default; }
.kn-jetzt .kn-z:hover { background: transparent; }


.kn-jetzt .kn-weg-teil--bereich,
.kn-jetzt .kn-weg-teil--bereich + .kn-weg-sep { display: none; }
.kn-jetzt .kn-z-wert {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}









.kn-jetzt .kn-z-was {
  flex: 1 0 100%; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kn-jetzt .kn-weg.kn-z-was { display: flex; align-items: baseline; }
.kn-jetzt .kn-weg.kn-z-was > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.kn-jetzt .kn-weg.kn-z-was > .kn-weg-vorn { min-width: 1.2em; }
.kn-jetzt .kn-weg.kn-z-was > .kn-weg-ende { flex: 0 0 auto; max-width: calc(100% - 1.2em); }

.kn-jetzt .kn-z-was wbr { display: none; }
.kn-jetzt .kn-z-mehr {
  flex: 1 1 0; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


@media (max-width: 640px) {
  .kn-jetzt .kn-z-art { display: none; }
}





.mic-btn {
  position: relative;
  width: 28px; height: 28px; flex: none; margin-right: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: color 140ms, background 140ms, border-color 140ms;
}
.mic-btn:hover { color: var(--accent-deep); background: var(--line-soft); }
.mic-btn[hidden] { display: none; }

.mic-btn.hoert {
  color: var(--auf-farbe); background: var(--error); border-color: var(--error);
}
.mic-btn.hoert:hover { background: var(--fehler-tief); color: var(--auf-farbe); }


.mic-pegel {
  position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px;
  border-radius: 2px; overflow: hidden;
  background: var(--code-hover-2);
  opacity: 0; transition: opacity 140ms;
}
.mic-btn.hoert .mic-pegel { opacity: 1; }
.mic-pegel i {
  display: block; height: 100%; width: 0%;
  background: var(--flaeche);
  transition: width 60ms linear;
}

.mic-btn.arbeitet { color: var(--accent); }
.mic-btn.arbeitet svg { animation: micpuls 1s ease-in-out infinite; }
@keyframes micpuls { 50% { opacity: .35; } }


.composer.diktiert { border-color: var(--error); }


#input.diktat-entwurf { color: var(--muted); }
.composer-hint.diktat { color: var(--error); }






.mic-gruppe {
  display: inline-flex; align-items: stretch; flex: none;
  margin-right: 2px;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: border-color 140ms, background 140ms;
}
.mic-gruppe:hover { border-color: var(--line); background: var(--panel-2); }
.mic-gruppe[hidden] { display: none; }







.mic-gruppe .mic-btn {
  margin-right: 0; border: none; border-radius: var(--radius) 0 0 var(--radius);
  width: 24px; justify-content: flex-start; padding: 0 0 0 7px;
}
.mic-gruppe .mic-btn:hover { background: transparent; }
.mic-gruppe:hover .mic-btn { color: var(--accent-deep); }
.mic-gruppe .mic-btn.hoert { border-radius: var(--radius) 0 0 var(--radius); }

.mic-mehr {
  width: 14px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--faint);
  border: none; border-left: 1px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  transition: color 140ms, background 140ms, border-color 140ms;
}
.mic-gruppe:hover .mic-mehr { border-left-color: var(--line); color: var(--muted); }
.mic-mehr svg { width: 10px; height: 10px; }
.mic-mehr:hover { color: var(--accent-deep); background: var(--line-soft); }
.mic-gruppe.offen { border-color: var(--accent); background: var(--accent-soft); }
.mic-gruppe.offen .mic-mehr { color: var(--accent-deep); }

.mic-panel {
  max-width: 800px; margin: 0 auto 8px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);
  padding: 14px 16px;
}
.mic-panel[hidden] { display: none; }
.mp-kopf { display: flex; align-items: center; margin-bottom: 10px; }
.mp-kopf strong { font-size: 12px; flex: 1; }
.mp-x {
  width: 22px; height: 22px; padding: 0; line-height: 1;
  font-size: 14px; color: var(--muted);
  background: none; border: none; border-radius: var(--r-1); cursor: pointer;
}
.mp-x:hover { background: var(--line-soft); color: var(--text); }

.mp-feld { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mp-feld span { font-size: 11.5px; color: var(--muted); width: 46px; flex: none; }
.mp-feld select {
  flex: 1; min-width: 0; font: inherit; letter-spacing: var(--spur); font-size: 12px; color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 8px; outline: none;
}
.mp-feld select:focus { border-color: var(--accent); }

.mp-pegel { display: flex; align-items: center; gap: 10px; }
.mp-label { font-size: 11.5px; color: var(--muted); width: 46px; flex: none; }
.mp-bar {
  flex: 1; height: 10px; border-radius: var(--r-1); overflow: hidden;
  background: var(--line-soft); border: 1px solid var(--line);
}
.mp-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  transition: width 60ms linear, background 180ms;
}
.mp-bar i.laut { background: var(--ok); }
.mp-wert { font-family: var(--mono); font-size: 10.5px; color: var(--faint);
           width: 52px; text-align: right; flex: none; }

.mp-status { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
.mp-status.gut { color: var(--ok); font-weight: 600; }
.mp-status.schlecht { color: var(--error); }

.mp-aktionen { display: flex; gap: 8px; margin-top: 12px; }
.mp-aktionen .btn { font-size: 12px; padding: 6px 12px; }

.mp-audio { width: 100%; margin-top: 12px; height: 34px; }
.mp-ergebnis {
  margin: 10px 0 0; padding: 8px 10px;
  background: var(--accent-soft); border: 1px solid var(--p-linie);
  border-radius: var(--radius); font-size: 12px;
}
.mp-fuss { font-size: 10.5px; color: var(--faint); margin: 10px 0 0; }


.mp-diagnose {
  margin: 10px 0 0; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-size: 11.5px;
}
.mp-diagnose[hidden] { display: none; }
.mp-d { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; color: var(--muted); }
.mp-d .d-mark { width: 12px; flex: none; text-align: center; color: var(--faint); }
.mp-d.ok { color: var(--text); }
.mp-d.ok .d-mark { color: var(--ok); }
.mp-d.bad { color: var(--error); }
.mp-d.bad .d-mark { color: var(--error); font-weight: 700; }



.mp-woerter { margin: 12px 0 0; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.mp-woerter summary { font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); }
.mpw-zahl { font-weight: 400; color: var(--faint); font-size: 11px; margin-left: 4px; }
.mpw-hilfe { font-size: 11px; color: var(--muted); margin: 10px 0 4px; }
.mpw-hilfe code { font-family: var(--mono); font-size: 10.5px; }
.mp-woerter textarea:not(#input) {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 8px; outline: none; min-height: 0;
}
.mp-woerter textarea:not(#input):focus { border-color: var(--accent); }
.mpw-stand { font-size: 11px; color: var(--muted); align-self: center; }
.mpw-stand.schlecht { color: var(--error); }
.mpw-stand.gut { color: var(--ok); }













.melde-turm {
  position: absolute; left: 24px; bottom: 46px;
  width: 296px; max-width: calc(50vw - 60px);
  display: flex; flex-direction: column; gap: 6px;
  z-index: 30;
  pointer-events: none;
}
.melde-turm:empty { display: none; }

.melde {
  pointer-events: auto;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  background: var(--panel);
  border: 1px solid var(--linie);
  border-color: color-mix(in srgb, var(--melde-farbe, var(--linie)) 50%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-size: 11.5px; line-height: 1.35; color: var(--text);
  cursor: pointer;

  animation: melde-rein 260ms cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes melde-rein {
  from { opacity: 0; transform: translateX(-24px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.melde.geht { animation: melde-raus 220ms ease forwards; }
@keyframes melde-raus {
  to { opacity: 0; transform: translateX(-18px); }
}
@media (prefers-reduced-motion: reduce) {
  .melde, .melde.geht { animation-duration: 1ms; }
}


.melde-zeichen {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--melde-flaeche, var(--flaeche-3));
}
.melde-zeichen svg {
  width: 14px; height: 14px;
  fill: none; stroke: var(--melde-farbe, currentColor); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.melde-text { flex: 1; min-width: 0; }
.melde-titel {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.melde-kurz { color: var(--muted); font-size: 10.5px; }
.melde-weg {
  flex: none; width: 18px; height: 18px; padding: 0; cursor: pointer;
  background: transparent; border: 0; color: var(--faint); line-height: 1;
  font-size: 12px;
}
.melde-weg:hover { color: var(--text); }

.melde--gruen  { --melde-farbe: var(--ok-tief);     --melde-flaeche: var(--ok-flaeche); }
.melde--orange { --melde-farbe: var(--warn-tief);   --melde-flaeche: var(--warn-flaeche); }
.melde--rot    { --melde-farbe: var(--fehler-tief); --melde-flaeche: var(--fehler-flaeche); }







.melde.melde--rot { animation: melde-rein 260ms cubic-bezier(.2,.9,.3,1.2) both,
                               melde-pochen 1.1s ease 260ms 2; }
@keyframes melde-pochen {
  0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
  50%     { box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 0 0 4px var(--fehler-schleier); }
}


.melde-verlauf {
  position: absolute; left: 24px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--linie);
  border-radius: 999px; color: var(--muted); font-size: 10.5px;
  z-index: 30;
}
.melde-verlauf[hidden] { display: none; }
.melde-verlauf:hover { color: var(--text); border-color: var(--line); }
.melde-verlauf svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round;
}
.melde-verlauf.hat-neu { border-color: var(--warn-linie); color: var(--warn-tief); }
.mv-zahl { font-variant-numeric: tabular-nums; }


.melde-liste {
  position: absolute; left: 24px; bottom: 42px;
  width: 340px; max-width: calc(60vw - 60px);
  max-height: 52vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-2); box-shadow: 0 10px 30px rgba(0,0,0,.32);
  z-index: 40; padding: 6px;
}
.ml-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 8px; font-size: 10.5px; color: var(--muted);
}
.ml-leer { padding: 10px 6px; font-size: 11.5px; color: var(--faint); }
.ml-zeile {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 6px; border-radius: var(--radius); cursor: pointer;
}
.ml-zeile + .ml-zeile { border-top: 1px solid var(--linie); }
.ml-zeile:hover { background: var(--flaeche-3); }
.ml-zeit { flex: none; color: var(--faint); font-size: 10px; padding-top: 4px;
           font-variant-numeric: tabular-nums; }


.ml-zeile .melde-zeichen { width: 20px; height: 20px; margin-top: 1px; }
.ml-zeile .melde-zeichen svg { width: 12px; height: 12px; }




.ml-text {
  flex: 1; min-width: 0; font-size: 11.5px;
  display: flex; flex-direction: column; gap: 2px;
}
.ml-titel {
  font-weight: 600; color: var(--text); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ml-art { font-size: 10px; color: var(--faint); letter-spacing: .01em; }
.ml-voll {
  margin-top: 5px; padding: 7px 9px;
  background: var(--flaeche-2); border-radius: var(--radius);
  border: 1px solid var(--linie);
  font-size: 10.5px; line-height: 1.6; color: var(--muted);
  word-break: break-word;
}


.ml-voll code {
  background: var(--flaeche-3); border-radius: 3px; padding: 1px 4px;
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px;
  color: var(--text); white-space: nowrap;
}
.ml-voll b { color: var(--text); font-weight: 600; }




@media (max-width: 1150px) {
  .melde-turm { bottom: 12px; width: 250px; }
  .melde-verlauf { display: none; }
}




.mem-flags {
  position: absolute; left: 24px; bottom: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-size: 10.5px; color: var(--faint);
}
.mem-flags[hidden] { display: none; }



@media (max-width: 1150px) { .mem-flags { display: none; } }













.mem-flags { display: none; }


.mf { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.mf-punkt {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--line); border: 1px solid var(--linie-stark);
}
.mf.an .mf-punkt { background: var(--ok); border-color: var(--ok); }
.mf.an .mf-wert { color: var(--ok); font-weight: 600; }
.mf-wert { color: var(--faint); }
.mf.an .mf-name { color: var(--muted); }














.ragkarte {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--edge);
  margin: 12px 0;
  overflow: hidden;
}



.rk-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px;
  border: 1px solid color-mix(in srgb, var(--brown) 50%, transparent);
  cursor: pointer; user-select: none;
  font-size: 12px; border-radius: 8px;}
.rk-kopf:hover { background: var(--panel-2); }
.rk-kopf .rk-icon { color: var(--accent); display: inline-flex; }



.rk-kopf .rk-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
.rk-kopf .rk-icon .f { fill: currentColor; fill-opacity: .72; stroke: none; }
.rk-kopf .rk-titel { font-weight: 600; letter-spacing: .01em; }
.rk-kopf .rk-sub { color: var(--faint); font-size: 11.5px;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }





.rk-kopf .rk-runde {
  color: var(--ok); font-size: 10.5px; font-weight: 600; flex: none;
  border: 1px solid var(--ok-linie); border-radius: var(--r-rund); padding: 1px 8px;
}
.rk-kopf .rk-runde:empty { display: none; }
.rk-kopf .rk-stand {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--muted);
  max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-kopf .rk-stand.ok { color: var(--ok); }


.rk-kopf .rk-stand .rk-zahl {
  color: var(--ok); font-weight: 600; font-family: var(--mono);
  font-size: 10.5px;
}
.rk-kopf .rk-stand.fehler { color: var(--error); }
.rk-kopf .chev { color: var(--faint); transition: transform 140ms; }
.ragkarte.offen .rk-kopf .chev { transform: rotate(90deg); }








.rk-auge { display: none; color: var(--faint); }
.ragkarte.zu-fest .rk-auge { display: inline-flex; }
.ragkarte.zu-fest .rk-kopf .chev { display: none; }
.ragkarte.zu-fest .rk-kopf { cursor: default; }
.ragkarte.zu-fest .rk-kopf:hover { background: none; }

.rk-koerper { display: none; border-top: 1px solid var(--line-soft); }
.ragkarte.offen .rk-koerper { display: block; }



.rk-puls {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent); animation: dotpulse 1.1s infinite;
}
.rk-haken { color: var(--ok); display: inline-flex; }
.rk-haken svg { width: 13px; height: 13px; stroke-width: 1.5; }





.rk-schiene {
  display: flex; align-items: flex-start;
  padding: 12px 16px 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft);
}
.rk-st {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--faint); text-align: center;
}


.rk-st::before {
  content: ""; position: absolute; top: 4px; left: -50%; width: 100%;
  height: 1px; background: var(--line);
}
.rk-st:first-child::before { display: none; }
.rk-punkt {
  width: 9px; height: 9px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--panel); border: 1px solid var(--linie-stark); box-sizing: border-box;
}
.rk-st.laeuft { color: var(--accent-deep); font-weight: 600; }
.rk-st.laeuft .rk-punkt {
  background: var(--accent); border-color: var(--accent);
  animation: dotpulse 1.1s infinite;
}
.rk-st.ok { color: var(--muted); }
.rk-st.ok .rk-punkt { background: var(--accent); border-color: var(--accent); }
.rk-st.ok::before { background: var(--accent); }
.rk-st.warn { color: var(--s-tief); }
.rk-st.warn .rk-punkt { background: var(--panel); border: 2px solid var(--brown); }
.rk-st.fehler { color: var(--error); }
.rk-st.fehler .rk-punkt { background: var(--error); border-color: var(--error); }





.rk-liste { padding: 4px 0; }
.rk-zweig { border-bottom: 1px solid var(--line-soft); }
.rk-zweig:last-child { border-bottom: none; }

.rk-zkopf {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 14px;
  cursor: pointer; user-select: none; font-size: 12px;
}
.rk-zweig.leer .rk-zkopf,
.rk-zweig.wartet .rk-zkopf { cursor: default; }
.rk-zkopf:hover { background: var(--panel-2); }
.rk-zweig.leer .rk-zkopf:hover,
.rk-zweig.wartet .rk-zkopf:hover { background: none; }



.rk-nr {
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  border: 1px solid var(--line); border-radius: var(--r-1);
  padding: 0 4px; flex: none; line-height: 17px;
}
.rk-name { font-weight: 600; font-size: 12px; flex: none; }
.rk-was {
  color: var(--faint); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}





.rk-mass {
  margin-left: auto; flex: none;
  font-size: 10.5px; font-weight: 600; font-family: var(--mono);
  color: var(--ok);
}


.rk-zweig.leer .rk-mass {
  color: var(--faint); font-weight: 400; font-family: var(--sans);
  font-size: 10.5px;
}
.rk-zstand {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--muted);
  min-width: 14px; justify-content: flex-end;
}
.rk-zkopf .chev { color: var(--faint); transition: transform 140ms; }
.rk-zweig.offen .rk-zkopf .chev { transform: rotate(90deg); }


.rk-zweig.leer .rk-zkopf .chev,
.rk-zweig.wartet .rk-zkopf .chev { visibility: hidden; }
.rk-zweig.wartet .rk-name,
.rk-zweig.wartet .rk-nr { color: var(--faint); }
.rk-zweig.wartet .rk-name { font-weight: 500; }

.rk-zkoerper { display: none; padding: 4px 16px 14px 40px; }
.rk-zweig.offen .rk-zkoerper { display: block; }


.rk-ausgabe.md { font-size: 12px; color: var(--muted); }
.rk-ausgabe.md h1, .rk-ausgabe.md h2,
.rk-ausgabe.md h3, .rk-ausgabe.md h4 {
  font-size: 12px; font-weight: 600; color: var(--text); margin: 12px 0 4px;
}
.rk-ausgabe.md > :first-child { margin-top: 0; }
.rk-ausgabe.md p { margin: 0 0 8px; }
.rk-ausgabe.md ul, .rk-ausgabe.md ol { margin: 0 0 8px; padding-left: 20px; }
.rk-ausgabe.md li { margin: 2px 0; }
.rk-ausgabe.md strong { color: var(--text); }
.rk-ausgabe.md table { font-size: 11.5px; }









.rk-brief {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--panel-2);
  padding: 8px 12px; margin-bottom: 10px;
}
.rk-brief-liste {
  margin: 0; display: grid; grid-template-columns: max-content 1fr;
  gap: 3px 14px; font-size: 11.5px;
}
.rk-brief-liste dt { color: var(--faint); }
.rk-brief-liste dd { margin: 0; color: var(--muted); word-break: break-word; }
.rk-brief-liste dd.mono { font-family: var(--mono); font-size: 10.5px; }

.rk-brief-kopf {
  margin: 8px 0 4px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint);
}




.rk-auftrag {
  margin: 0; padding: 8px 10px;
  background: var(--code-bg); border: 1px solid var(--code-rand); border-radius: var(--r-1);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  color: var(--code-fg);
  white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow: auto;
}
.rk-auftrag code { font-family: inherit; font-size: inherit; background: none;
                   border: none; padding: 0; color: inherit; }





.rk-auszug {
  margin-bottom: 8px; padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--brown) 50%, transparent);
  border-radius: var(--radius);
  background: var(--panel-2);
  font-size: 10.5px; color: var(--s-tief);
}



.rk-uhr { color: var(--faint); font-variant-numeric: tabular-nums; }





.rk-verlauf {
  border-top: 1px solid var(--line-soft);
  background: var(--panel-2);
  padding: 8px 14px 10px;
}
.rk-verlauf[hidden] { display: none; }
.rk-vkopf {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); margin-bottom: 4px;
}
.rk-satz {
  font-size: 11.5px; color: var(--muted);
  padding: 1px 0 1px 12px; position: relative;
}


.rk-satz::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 5px; height: 1px; background: var(--line);
}
.rk-satz.laeuft { color: var(--accent-deep); }
.rk-satz.ok { color: var(--ok); }
.rk-satz.warn { color: var(--s-tief); }
.rk-satz.warn::before { background: var(--brown); }
.rk-satz.fehler { color: var(--error); }
.rk-satz.fehler::before { background: var(--error); }



@media (max-width: 820px) {
  .rk-was, .rk-mass { display: none; }
  .rk-kopf .rk-sub { display: none; }
  .rk-zkoerper { padding-left: 16px; }
}


















.neue-gruppe {
  display: flex; align-items: center; gap: 8px;
  margin: -6px 16px 12px; padding: 4px 6px;
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px; color: var(--faint);
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  cursor: pointer; width: calc(100% - 32px); text-align: left;
  min-height: 28px;
}
.neue-gruppe:hover { color: var(--accent-deep); border-color: var(--line); background: var(--panel); }
.neue-gruppe svg { width: 14px; height: 14px; }

.conv-leer { padding: 12px 10px; font-size: 11.5px; color: var(--faint); margin: 0; }






















.conv-item, .gruppe-item { position: relative; }
.baumlinien {
  position: absolute; left: 4px;









  top: -2px; bottom: -2px;
  display: flex; pointer-events: none;






  z-index: 1;
}





.gruppe-item {
  border: 1px solid transparent;
  height: 28px; box-sizing: border-box; padding: 0 10px;
}












.baumlinie {
  width: 2px; flex: none; margin-right: 8px;
  border-radius: 0; opacity: 1;



  margin-bottom: -4px; padding-bottom: 4px;
  background-clip: border-box;
}



.baumlinie.endet { margin-bottom: 0; padding-bottom: 0; }



.conv-item, .gruppe-item { margin: 0; }
.conv-item { padding-top: 8px; padding-bottom: 8px; }
.gruppe-item { padding-top: 6px; padding-bottom: 6px; }


.gruppe-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px; margin: 0;
  border-radius: var(--r-1); cursor: pointer; user-select: none;
  font-size: 12px; color: var(--muted);
}
.gruppe-item:hover { background: var(--line-soft); color: var(--text); }
.gruppe-item .g-pfeil { display: inline-flex; color: var(--faint); flex: none;
                        transition: transform 140ms; transform: rotate(90deg); }
.gruppe-item.zu .g-pfeil { transform: none; }
.gruppe-item .g-pfeil svg { width: 12px; height: 12px; }






.gruppe-item .g-punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  box-sizing: border-box; border: 1px solid var(--schleier);
}
.gruppe-item .g-name {
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gruppe-item .g-zahl {
  flex: none; font-size: 10.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}













.c-menu {
  flex: none; padding: 2px; margin-left: 2px; position: relative;
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--faint); cursor: pointer;
  display: inline-flex; opacity: 0; transition: opacity 140ms;
}



.c-menu::before { content: ""; position: absolute; inset: -6px; }
.c-menu svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.conv-item:hover .c-menu, .conv-item.active .c-menu,
.gruppe-item:hover .c-menu { opacity: 1; }
.c-menu:hover { color: var(--accent-deep); border-color: var(--line); background: var(--panel); }
.c-menu:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }

.conv-item .c-pin { flex: none; display: inline-flex; color: var(--brown); }
.conv-item .c-pin svg { width: 12px; height: 12px; }

.gruppen-kopf {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 6px 4px; margin: 0;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint);
}
.gruppen-kopf .gk-icon { display: inline-flex; color: var(--brown); }
.gruppen-kopf svg { width: 12px; height: 12px; }





.kmenu {
  position: fixed; z-index: 60; min-width: 190px; max-width: 280px;
  padding: 4px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow), var(--edge);
}
.kmenu-eintrag {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 10px 6px 12px;
  font: inherit; letter-spacing: var(--spur); font-size: 12px; color: var(--text); text-align: left;
  background: none; border: none; border-radius: var(--r-1); cursor: pointer;
}
.kmenu-eintrag:hover { background: var(--accent-soft); color: var(--accent-deep); }
.kmenu-eintrag.gefahr { color: var(--error); }
.kmenu-eintrag.gefahr:hover { background: var(--error-bg); }


.kmenu-eintrag.aktiv { font-weight: 600; color: var(--accent-deep); }
.kmenu-eintrag .kmenu-text { flex: 1 1 auto; overflow: hidden;
                             text-overflow: ellipsis; white-space: nowrap; }




.kmenu-punkt {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  box-sizing: border-box;
}


.kmenu-punkt.hell { border: 1px solid var(--linie-stark); }
.kmenu-eintrag.aktiv .kmenu-punkt {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px currentColor;
}
.kmenu-icon { display: inline-flex; color: var(--faint); flex: none; }




.kmenu-icon svg { display: block; }
.kmenu-eintrag:hover .kmenu-icon,
.kmenu-eintrag.gefahr .kmenu-icon { color: currentColor; }
.kmenu-eintrag.aus .kmenu-icon { color: var(--faint); }


.kmenu-punkt { margin: 0 1px; }
.kmenu-trenner { height: 1px; background: var(--line-soft); margin: 4px 6px; }















.denkkarte {
  margin: 10px 0;
  border: 1px dashed var(--line);
  border-radius: 0;
}
.denk-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 4px 12px;
  cursor: pointer; user-select: none;
  font-size: 11.5px; color: var(--faint);
}
.denk-kopf:hover { color: var(--muted); }
.denkkarte.zu-fest .denk-kopf { cursor: default; }
.denkkarte.zu-fest .denk-kopf:hover { color: var(--faint); }
.denk-icon { display: inline-flex; color: var(--faint); }



.denk-icon svg { width: 14px; height: 14px; }
.denk-titel { font-weight: 600; }
.denk-mass { font-family: var(--mono); font-size: 10.5px; }
.denk-mass:empty { display: none; }




.mediacard .m-alt {
  font-size: 10.5px; color: var(--faint); margin-left: auto;
  padding-right: 10px; white-space: nowrap;
}
.medialist .m-notiz {
  font-size: 10.5px; color: var(--faint); padding: 2px 2px 0;
}













.denk-mass { display: inline-flex; align-items: flex-end; }
.denk-mass .wz, .denk-mass .wz-fest {
  height: 1em; line-height: 1em;
}
.denk-mass .wz {
  display: inline-block; overflow: hidden;
}
.denk-mass .wz-fest { white-space: pre; }
.denk-mass .wz-band {
  display: flex; flex-direction: column;


  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.denk-mass .wz-z { height: 1em; line-height: 1em; }
@media (prefers-reduced-motion: reduce) {
  .denk-mass .wz-band { transition: none; }
}



.denk-tief { display: inline-flex; }
.denk-tief:empty { display: none; }
.denk-sterne .stern { width: 11px; height: 11px; }

















.sterne { display: inline-flex; gap: 1px; align-items: center; }
.sterne .stern {
  width: 11px; height: 11px; flex: none;
  color: var(--accent);
  stroke: currentColor; stroke-width: 1.4;
  stroke-linejoin: round;
  fill: currentColor; fill-opacity: .72;
}
.denk-kopf .chev { color: var(--line); transition: transform 140ms;
                   margin-left: auto; }
.denkkarte.offen .denk-kopf .chev { transform: rotate(90deg); }
.denk-auge { display: none; color: var(--line); margin-left: auto; }
.denkkarte.zu-fest .denk-auge { display: inline-flex; }
.denkkarte.zu-fest .denk-kopf .chev { display: none; }




.denkkarte.zu-fest.offen .denk-auge { display: none; }
.denkkarte.zu-fest.offen:not(.laeuft) .denk-kopf { cursor: pointer; }
.denkkarte.zu-fest.offen:not(.laeuft) .denk-kopf .chev { display: inline-block; }

.denk-koerper { display: none; padding: 2px 0 8px 12px; }
















.live-pending.stoert .p-label { color: var(--brown); }
.live-pending.stoert .dots i { background: var(--brown); }

.live-pending .p-label.p-wechsel { display: inline-block; animation: p-wechsel .45s var(--ease-out, ease-out); }
@keyframes p-wechsel { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-pending .p-label.p-wechsel { animation: none; } }

.denkkarte.laeuft { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.denkkarte.laeuft .denk-koerper {
  max-height: 9em; overflow-y: auto;



}
.denkkarte.laeuft .denk-titel { color: var(--accent); }
.denkkarte.offen .denk-koerper { display: block; }


.denk-koerper.md { font-size: 11.5px; color: var(--faint); line-height: 1.5; }
.denk-koerper.md p { margin: 0 0 6px; }
.denk-koerper.md > :first-child { margin-top: 0; }
.denk-koerper.md > :last-child { margin-bottom: 0; }
.denk-koerper.md h1, .denk-koerper.md h2,
.denk-koerper.md h3, .denk-koerper.md h4 {
  font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 10px 0 4px;
}
.denk-koerper.md ul, .denk-koerper.md ol { margin: 0 0 6px; padding-left: 16px; }
.denk-koerper.md strong { color: var(--muted); }




.denk-auszug {
  margin-bottom: 6px; padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--brown) 50%, transparent);
  border-radius: var(--radius);
  background: var(--panel-2);
  font-size: 10.5px; color: var(--s-tief);
}


















.alarm-rand {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  border: 7px solid var(--fehler);
  border-radius: var(--r-1);
  box-shadow: inset 0 0 34px -6px var(--fehler);
  animation: alarm-puls 1.15s ease-in-out infinite;
}
.alarm-rand[hidden] { display: none; }

@keyframes alarm-puls {
  0%, 100% { opacity: .18; }
  50%      { opacity: .92; }
}




@media (prefers-reduced-motion: reduce) {
  .alarm-rand { animation: none; opacity: .75; }
}












.alarm-rand.entwarnt {
  animation: none;
  opacity: 1;
  border-color: var(--ok);
  box-shadow: inset 0 0 34px -6px var(--ok);
}


@media (prefers-reduced-motion: reduce) {
  .alarm-rand.entwarnt { opacity: 1; }
}

.alarm-schicht {
  position: fixed; inset: 0; z-index: 61;
  display: flex; justify-content: center;
  padding: 24px;
  background: var(--schleier);
  backdrop-filter: blur(2px);






  overflow-y: auto;
}
.alarm-schicht[hidden] { display: none; }

.alarm-kasten {
  max-width: 560px; width: 100%;
  margin: auto;
  align-self: flex-start;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--fehler);
  border-top: 4px solid var(--fehler);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px var(--code-schleier);
  padding: 20px 20px 16px;
}
.alarm-kasten .a-kopf {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--fehler);
}
.alarm-kasten .a-zeichen {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; line-height: 1;
}
.alarm-kasten .a-text {
  margin-top: 12px; font-size: 12px; line-height: 1.5;
  color: var(--text); white-space: pre-wrap;
}


.alarm-kasten .a-fakten {
  margin-top: 12px; padding: 8px 10px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--muted);
}
.alarm-kasten .a-reihe {
  display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;
}
.alarm-kasten button {
  flex: 1 1 auto; min-width: 150px;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font-size: 12px; cursor: pointer;
}
.alarm-kasten button:hover { border-color: var(--accent); }
.alarm-kasten button.a-stopp {
  border-color: var(--fehler); color: var(--auf-farbe);
  background: var(--fehler); font-weight: 600;
}
.alarm-kasten button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}


.alarm-kasten .a-fuss {
  margin-top: 12px; font-size: 11.5px; color: var(--muted);
}

























.kontextwahl {
  display: inline-flex; align-items: stretch; flex: none;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: border-color 140ms, background 140ms;
}
.kontextwahl:hover { border-color: var(--line); background: var(--panel-2); }




.kw {
  width: 28px; height: 28px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--faint);
  border: none; border-radius: 0;
  cursor: pointer;
  transition: color 140ms, background 140ms;
}
.kw:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.kw:last-of-type  { border-radius: 0 var(--radius) var(--radius) 0; }








.kw svg { width: 16px; height: 16px; }




.kw .f { fill: currentColor; stroke: none; }
.kw:hover { color: var(--accent-deep); background: var(--line-soft); }
.kw[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.kw[aria-pressed="true"]:hover { color: var(--accent-deep); }
.kw:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.kw:disabled, .kw:disabled:hover { color: var(--faint); background: none;
  opacity: .45; cursor: default; }




















.denkwahl {
  display: inline-flex; align-items: stretch; flex: none;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: border-color 140ms, background 140ms;
}
.denkwahl:hover { border-color: var(--line); background: var(--panel-2); }
.denkwahl[hidden] { display: none; }

.dw {
  min-width: 28px; height: 28px; padding: 0 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--faint);
  border: none; border-radius: 0;
  cursor: pointer;
  transition: color 140ms, background 140ms;
}
.dw:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.dw:last-of-type  { border-radius: 0 var(--radius) var(--radius) 0; }







.dw .dw-zeichen { display: inline-flex; }





.dw .stern {
  width: 10px; height: 10px;
  color: inherit; fill: none; stroke-width: 1.5;
}
.dw:hover { color: var(--accent-deep); background: var(--line-soft); }

.dw.on { color: var(--accent); background: var(--accent-soft); }
.dw.on .stern { fill: currentColor; fill-opacity: .72; }
.dw.on:hover { color: var(--accent-deep); }
.dw:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }



.dw .dw-lang {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}











.dw-marke {
  position: absolute; left: 50%; top: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  font-size: 10.5px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--edge);
  padding: 3px 8px;
  opacity: 0; transition: opacity 140ms;
}
.dw-marke.da { opacity: 1; }




















.zuruf-status,
.split-status {
  display: flex; align-items: center; gap: 6px;
  justify-content: flex-end;
  margin: 0 2px 14px 0;
  font-size: 10.5px;
  color: var(--faint);
}
.zuruf-status.ist-da { color: var(--accent); }
.zuruf-status.ist-fehler { color: var(--error); }
.zuruf-zeichen { display: inline-flex; }
.zuruf-zeichen svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.zuruf-mit {
  margin-top: 5px;
  font-size: 10.5px;
  opacity: 0.75;
}








.msg-zuruf {
  flex-direction: column;
  align-items: flex-end;
  margin: 10px 0 0;
}














.zeigkarte {
  margin: 12px 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  box-shadow: var(--schatten-1);
  overflow: hidden;
}
.zeig-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--linie);
  font-size: 11.5px;
  user-select: none;
}
.zeig-icon { display: inline-flex; color: var(--p); }
.zeig-icon svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.zeig-titel {
  font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


.zeig-art {
  margin-left: auto;
  color: var(--text-3); font-size: 10.5px;
  font-family: var(--mono);
  flex: 0 0 auto;
}
.zeig-warum {
  padding: 8px 12px 0;
  color: var(--text-2);
  font-size: 12px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.zeig-bild, .zeig-video {
  display: block;
  width: 100%; height: auto;
  max-height: 520px;
  object-fit: contain;
  margin: 10px 0 0;
  background: var(--grund);
  cursor: zoom-in;
}
.zeig-video { cursor: default; }


.zeig-rahmen {
  display: block; width: 100%; height: 320px;
  margin: 10px 0 0; border: 0;
  background: #fff;
}










.zeig-inhalt {
  position: relative;
  margin: 10px 0 0;
  height: 320px;
  overflow: hidden;
  background: var(--flaeche);
  border-top: 1px solid var(--linie-weich);
  border-bottom: 1px solid var(--linie-weich);
}
.zeig-inhalt.mehr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--flaeche));
  pointer-events: none;
}


.zeig-inhalt.art-text.mehr::after,
.zeig-inhalt.art-doku.mehr::after { background: none; }
.zeig-inhalt .v-codewrap { height: 100%; }
.zeig-inhalt .v-fuss { font-size: 10.5px; }

.zeig-inhalt.art-datei { height: auto; }
.zeig-inhalt.art-datei .zeig-fehlt { padding: 16px 14px; }

.zeig-laden {
  padding: 18px 14px; font-size: 12px; color: var(--text-3);
  animation: vLaden 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .zeig-laden { animation: none; } }
.zeig-md {
  padding: 16px 18px 24px;
  font-size: 13px; line-height: 1.6;
}
.zeig-md > :first-child { margin-top: 0; }
.zeig-md h1 { font-size: 17px; margin: 14px 0 8px; }
.zeig-md h2 { font-size: 14.5px; margin: 14px 0 7px; }
.zeig-md h3 { font-size: 13px; margin: 12px 0 6px; }
.zeig-md h1:first-child, .zeig-md h2:first-child { margin-top: 0; }
.zeig-md table { display: table; width: 100%; font-size: 12px; }
.zeig-md img { max-width: 100%; height: auto; }
.zeig-doku { padding: 16px 18px 24px; font-size: 12.5px; line-height: 1.55; }
.zeig-doku .vs-doc h1 { font-size: 17px; }
.zeig-doku .vs-doc h2 { font-size: 14.5px; }
.zeig-doku .vs-folie { padding: 12px 14px; }









.vl-ergebnis .zeigkarte .zeig-md h1,
.vl-ergebnis .zeigkarte .zeig-md h2,
.vl-ergebnis .zeigkarte .zeig-md h3 {
  font-weight: 700; line-height: 1.25; letter-spacing: normal;
  padding-bottom: 0; border-bottom: 0;
}
.vl-ergebnis .zeigkarte .zeig-md h1 { font-size: 17px; margin: 14px 0 8px; }
.vl-ergebnis .zeigkarte .zeig-md h2 { font-size: 14.5px; margin: 14px 0 7px; }
.vl-ergebnis .zeigkarte .zeig-md h3 { font-size: 13px; margin: 12px 0 6px; }
.vl-ergebnis .zeigkarte .zeig-md h1:first-child,
.vl-ergebnis .zeigkarte .zeig-md h2:first-child { margin-top: 0; }
.vl-ergebnis .zeigkarte .zeig-md p,
.vl-ergebnis .zeigkarte .zeig-md > p.md-titel { margin: 0 0 10px; font-size: inherit; line-height: inherit; }
.vl-ergebnis .zeigkarte .zeig-md p:last-child { margin-bottom: 0; }
.vl-ergebnis .zeigkarte .zeig-md ul + p,
.vl-ergebnis .zeigkarte .zeig-md ol + p { margin-top: 0; }
.vl-ergebnis .zeigkarte .zeig-md ul,
.vl-ergebnis .zeigkarte .zeig-md ol { margin: 0 0 10px; padding-left: 20px; }
.vl-ergebnis .zeigkarte .zeig-md li { margin: 3px 0; }
.vl-ergebnis .zeigkarte .zeig-md code { border: 1px solid var(--line-soft); padding: 1px 4px; }
.vl-ergebnis .zeigkarte .zeig-md pre { margin: 10px 0; }
.vl-ergebnis .zeigkarte .zeig-md table { margin: 10px 0; }
.vl-ergebnis .zeigkarte .zeig-md th,
.vl-ergebnis .zeigkarte .zeig-md td { padding: 6px 10px; border-color: var(--line); }
.vl-ergebnis .zeigkarte .zeig-md blockquote { margin: 10px 0; padding-left: 14px; }










.zeig-ergebnis { margin: 12px 0; }
.zeig-ergebnis > .zeig-ergebnis-karte > .zeigkarte { margin: 0; }
.zeig-liste { margin-top: 6px; }
.zeig-liste > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 2px;
  font-size: 11.5px; color: var(--text-2);
  cursor: pointer; list-style: none; user-select: none;
}
.zeig-liste > summary::-webkit-details-marker { display: none; }
.zeig-liste > summary::before {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.zeig-liste[open] > summary::before { transform: rotate(45deg); }
.zeig-liste > summary:hover { color: var(--p); }
@media (prefers-reduced-motion: reduce) { .zeig-liste > summary::before { transition: none; } }
.zl-zeilen {
  margin-top: 4px;
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r-2);
  overflow: hidden;
}
.zl-zeile {
  display: flex; align-items: baseline; gap: 12px;
  width: 100%; margin: 0; padding: 7px 12px;
  background: transparent; color: var(--text);
  border: 0; border-top: 1px solid var(--linie-weich); border-radius: 0;
  font: inherit; font-size: 11.5px; line-height: 1.4; text-align: left;
  cursor: pointer;
}
.zl-zeile:first-child { border-top: 0; }
.zl-zeile:hover { background: var(--flaeche-3); }
.zl-zeile.aktiv { background: var(--flaeche-3); }
.zl-zeile.aktiv .zl-titel { font-weight: 600; }
.zl-nr, .zl-zeit, .zl-ort, .zl-art {
  flex: 0 0 auto;
  color: var(--text-3); font-family: var(--mono); font-size: 10.5px;
  white-space: nowrap;
}
.zl-nr { min-width: 1.4em; text-align: right; }

.zl-icon { flex: 0 0 auto; display: inline-flex; align-self: center; color: var(--p); }
.zl-icon svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.zl-zeit { min-width: 6.2em; }
.zl-ort { display: inline-flex; gap: 6px; min-width: 9.5em; }
.zl-art { min-width: 5.2em; }
.zl-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeig-aussen {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 12px;
  min-width: 0;
}
.zeig-knopf {
  flex: 0 0 auto;
  margin: 10px 12px 12px;
  padding: 6px 12px;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--r-2);
  font: inherit; letter-spacing: var(--spur); font-size: 11.5px;
  cursor: pointer;
}
.zeig-aussen .zeig-knopf { margin: 0; }
.zeig-knopf:hover { border-color: var(--p); color: var(--p); }

.zeig-url {
  color: var(--text-3); font-family: var(--mono); font-size: 10.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}




.zeig-vorschau {
  display: block;
  width: 100%; height: auto;
  max-height: 260px;
  object-fit: cover; object-position: top center;
  margin: 10px 0 0;
  background: var(--grund);
  cursor: pointer;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}




.zeig-quelltitel {
  padding: 10px 12px 0;
  color: var(--text);
  font-size: 12px; font-weight: 600;
  overflow-wrap: anywhere;
}
.zeig-auszug {
  padding: 6px 12px 0;
  color: var(--text-3);
  font-size: 11.5px; line-height: 1.55;
  overflow-wrap: anywhere;
}
.zeig-kein-auszug {
  padding: 6px 12px 0;
  color: var(--text-3);
  font-size: 11.5px; font-style: italic;
}
.zeig-fuss {
  padding: 6px 12px 10px;
  color: var(--text-3); font-family: var(--mono); font-size: 10.5px;
}
.zeig-fehlt {
  padding: 10px 12px 12px;
  color: var(--text-3); font-size: 11.5px;
}







.klang-spieler {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 2px;
  min-width: 0;
}
.klang-knopf {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-radius: 50%;
  cursor: pointer;
}
.klang-knopf:hover,
.klang-spieler.spielt .klang-knopf { border-color: var(--p); color: var(--p); }
.klang-welle {
  position: relative;
  flex: 1 1 auto; min-width: 60px; height: 32px;
  cursor: pointer;
}
.klang-welle-grund, .klang-welle-voll { position: absolute; inset: 0; }
.klang-welle-grund { color: var(--text-3); opacity: .45; }
.klang-welle-voll { color: var(--p); clip-path: inset(0 100% 0 0); }


.klang-welle svg {
  display: block; width: 100%; height: 100%;
  fill: currentColor; stroke: none;
}
.klang-zeit {
  flex: 0 0 auto;
  color: var(--text-3); font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.klang-lade {
  flex: 0 0 auto;
  display: inline-flex; padding: 4px;
  color: var(--text-3); border-radius: var(--r-1);
}
.klang-lade:hover { color: var(--p); }
.klang-spieler.kaputt .klang-welle { opacity: .35; cursor: default; }



.composer-hint.wartet-zuruf { color: var(--accent); }


















.mi-schicht {
  position: fixed; inset: 0; z-index: 58;
  display: flex; justify-content: center;
  padding: 24px;
  background: var(--schleier);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.mi-schicht[hidden] { display: none; }

.mi-fenster {
  max-width: 760px; width: 100%;
  margin: auto; align-self: flex-start;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--schatten-3);
  outline: none;
  overflow: hidden;
  animation: mi-auf .22s cubic-bezier(.22, .7, .25, 1);
}
@keyframes mi-auf {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mi-fenster { animation: none; } }


.mi-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.mi-titel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.mi-titel h2 {
  margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.mi-titel p {
  margin: 2px 0 0; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mi-aktiv {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--r-1); padding: 1px 6px; font-weight: 500;
}
.mi-wuerfel { display: inline-flex; color: var(--accent); flex: none; }
.mi-wuerfel svg { width: 26px; height: 26px; stroke-width: 1.5; }
.mi-wuerfel svg .f { fill: currentColor; stroke: none; opacity: .9; }

.mi-pfeil, .mi-zu {
  flex: none; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: color 140ms, border-color 140ms, background 140ms;
}
.mi-pfeil:hover:not(:disabled), .mi-zu:hover {
  color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft);
}
.mi-pfeil:disabled { opacity: .45; cursor: default; }
.mi-pfeil:focus-visible, .mi-zu:focus-visible,
.mi-ok:focus-visible, .mi-leise:focus-visible, .mi-punkt:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.mi-zu { border-radius: 50%; }
.mi-pfeil svg, .mi-zu svg { width: 15px; height: 15px; }


.mi-koerper { padding: 24px 24px 4px; }




.mi-bau {
  margin: 16px 24px 0; padding: 10px 12px;
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
  border: 1px dashed var(--brown); border-radius: var(--radius);
  display: flex; gap: 10px; align-items: baseline;
}
.mi-bau span {
  flex: none; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brown); font-weight: 600;
}

.mi-fuss {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 24px 20px; margin-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.mi-punkte { display: flex; gap: 6px; }
.mi-punkt {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: transparent; border: 1px solid var(--faint); cursor: pointer;
  transition: background 140ms, border-color 140ms, transform 140ms;
}
.mi-punkt:hover { border-color: var(--accent); transform: scale(1.25); }
.mi-punkt.an { background: var(--accent); border-color: var(--accent); }
.mi-fuss-knoepfe { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.mi-leise {
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 8px 12px; font: inherit; letter-spacing: var(--spur); font-size: 12px; cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.mi-leise:hover { color: var(--text); border-color: var(--line); }


.mi-leise.an { color: var(--accent); border-color: var(--accent-soft); }

.mi-ok {
  background: var(--accent); color: var(--auf-farbe);
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 8px 20px; font: inherit; letter-spacing: var(--spur); font-size: 12px; font-weight: 500;
  cursor: pointer; box-shadow: var(--edge);
  transition: background 140ms;
}
.mi-ok:hover { background: var(--accent-deep); }






.mi-k1-oben { display: flex; gap: 28px; align-items: flex-start; }
.mi-k1-zahl {
  flex: none; line-height: 1; padding-top: 2px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px;
  width: 152px;
}
.mi-k1-zahl b {



  font-size: 25px; font-weight: 600; letter-spacing: -.02em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.mi-k1-zahl i {
  font-style: normal; font-size: 14px; font-weight: 500; color: var(--accent);
}
.mi-k1-zahl span {
  width: 100%; margin-top: 10px; font-size: 11.5px; color: var(--muted);
  letter-spacing: .02em;
}
.mi-k1-text p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.mi-k1-text p:last-child { margin-bottom: 0; color: var(--muted); }

.mi-k1-fakten {
  display: flex; margin-top: 24px;
  border-top: 1px solid var(--brown); border-bottom: 1px solid var(--line-soft);
}
.mi-k1-fakten > div {
  flex: 1; padding: 14px 16px 14px 0;
  display: flex; flex-direction: column; gap: 3px;
}
.mi-k1-fakten > div + div { border-left: 1px solid var(--line-soft); padding-left: 16px; }
.mi-k1-fakten b { font-size: 14px; font-weight: 600; }
.mi-k1-fakten span { font-size: 11.5px; color: var(--muted); }

.mi-k1-wann {
  margin: 20px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5;
}
.mi-k1-wann b { color: var(--text); font-weight: 600; }






.mi-k2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.mi-k2-leiter { position: relative; padding-left: 4px; }


.mi-k2-leiter::before {
  content: ""; position: absolute; left: 17px; top: 14px; bottom: 42px;
  width: 1px; background: var(--brown);
}
.mi-k2-schritt { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 20px; }
.mi-k2-schritt:last-child { padding-bottom: 0; }
.mi-k2-nr {
  position: relative; z-index: 1; flex: none;
  width: 27px; height: 27px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--accent); background: var(--panel);
  border: 1px solid var(--accent);
}
.mi-k2-schritt b { display: block; font-size: 12px; font-weight: 600; }
.mi-k2-schritt em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.mi-k2-ziel .mi-k2-nr {
  color: var(--text); border-color: var(--line); border-style: dashed;
  font-size: 12px;
}
.mi-k2-ziel b { color: var(--text); }

.mi-k2-these {
  margin: 0 0 12px; font-size: 14px; line-height: 1.5; font-weight: 500;
}
.mi-k2-these b { color: var(--accent); font-weight: 600; }
.mi-k2-rechts > p { margin: 0 0 16px; font-size: 12px; color: var(--muted); line-height: 1.5; }

.mi-k2-preis { border-top: 1px solid var(--brown); }
.mi-k2-preis > div {
  display: grid; grid-template-columns: 82px 1fr; gap: 4px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.mi-k2-preis > div:last-child { border-bottom: none; }
.mi-k2-preis span {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); font-weight: 500;
}
.mi-k2-preis b { font-size: 12px; font-weight: 600; }
.mi-k2-preis i {
  grid-column: 2; font-style: normal; font-size: 11.5px; color: var(--muted);
}










.mi-koerper.dunkel { padding: 0; }
.mi-k3 {
  background: var(--code-bg); color: var(--code-fg);
  margin: 0; padding: 24px 24px 24px;
}
.mi-k3-these {
  margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--code-weiss);
  font-weight: 500; max-width: 52ch;
}



.mi-k3-vor {
  margin: 0 0 20px; max-width: 60ch;
  font-size: 12px; line-height: 1.5; color: var(--code-fg-2);
}
.mi-k3-vor b { color: var(--auf-farbe); font-weight: 600; }




.mi-k3-band {
  display: flex; gap: 0; overflow-x: auto; padding-bottom: 4px;
  border-top: 1px solid var(--code-rand); border-bottom: 1px solid var(--code-rand);
  margin-bottom: 20px;
}
.mi-k3-glied {
  flex: none; padding: 12px 14px 12px 0; margin-right: 14px;
  border-right: 1px solid var(--code-rand);
  display: flex; flex-direction: column; gap: 4px; min-width: 88px;
}
.mi-k3-glied:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.mi-k3-glied span {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: #4ec9b0; letter-spacing: .06em;
}
.mi-k3-glied b { font-size: 11.5px; font-weight: 500; color: var(--code-fg-2); }
.mi-k3-halt span, .mi-k3-halt b { color: var(--brown); }
.mi-k3-agent span { color: var(--diff-neu); }
.mi-k3-agent b { color: var(--auf-farbe); font-weight: 600; }

.mi-k3-spalten { display: grid; grid-template-columns: 1fr 268px; gap: 28px; }
.mi-k3-text p { margin: 0 0 14px; font-size: 12px; line-height: 1.62; color: var(--code-fg-3); }
.mi-k3-text p:last-child { margin-bottom: 0; }
.mi-k3-waechter { padding-left: 12px; border: 1px solid color-mix(in srgb, var(--brown) 50%, transparent); border-radius: 8px; padding-right: 12px;}
.mi-k3-waechter b { color: var(--auf-farbe); font-weight: 600; }

.mi-k3-preis { border: 1px solid var(--diff-weg); border-radius: var(--radius); overflow: hidden; }
.mi-k3-banderole {
  background: var(--diff-weg); color: var(--code-bg);
  padding: 6px 12px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
.mi-k3-preis dl { margin: 0; padding: 4px 12px 10px; }
.mi-k3-preis dt {
  margin-top: 10px; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--code-fg-4); font-weight: 500;
}
.mi-k3-preis dd {
  margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--code-weiss);
  font-variant-numeric: tabular-nums;
}
.mi-k3-preis dd i {
  display: block; font-style: normal; font-size: 10.5px;
  font-weight: 400; color: var(--code-fg-4); margin-top: 1px;
}

.mi-k3-nicht {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--code-rand);
  font-size: 14px; color: var(--code-fg-3);
}
.mi-k3-nicht b { color: var(--auf-farbe); font-weight: 600; }



.mi-koerper.dunkel + .mi-bau { margin-top: 0; border-radius: 0;
  border-left: none; border-right: none; border-top: none; }
.mi-koerper.dunkel + .mi-fuss { margin-top: 0; }



@media (max-width: 720px) {
  .mi-schicht { padding: 12px; }
  .mi-koerper { padding: 20px 16px 4px; }
  .mi-k1-oben { flex-direction: column; gap: 16px; }
  .mi-k1-zahl { width: auto; }
  .mi-k1-zahl b { font-size: 22px; }
  .mi-k1-fakten { flex-direction: column; }
  .mi-k1-fakten > div + div {
    border-left: none; border-top: 1px solid var(--line-soft); padding-left: 0;
  }
  .mi-k2 { grid-template-columns: 1fr; gap: 20px; }
  .mi-k3 { padding: 20px 16px; }
  .mi-k3-spalten { grid-template-columns: 1fr; gap: 20px; }
  .mi-fuss { padding: 14px 16px 16px; }
  .mi-fuss-knoepfe { margin-left: 0; width: 100%; }
  .mi-ok { flex: 1; }
  .mi-bau { margin-left: 16px; margin-right: 16px; }
}









.splitkarte {
  margin: 12px 0;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 12px 8px;
  background: transparent;
}
.split-kopf {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--accent); font-weight: 600;
  user-select: none;
}
.split-icon { display: inline-flex; }
.split-icon svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}



.split-titel { white-space: nowrap; }
.split-koerper {
  margin-top: 4px;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}


.split-fuss {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--faint);
}



.split-wartet {
  margin: 10px 0 2px;
  font-size: 11.5px;
  color: var(--faint);
  display: flex; align-items: center; gap: 8px;
}




.send-btn--gabel:disabled,
.send-btn--gabel[disabled] {
  opacity: .45;
  cursor: not-allowed;
  border-color: var(--line);
  color: var(--text-muted);
}
.send-btn--gabel:disabled:hover { background: transparent; color: var(--text-muted); }











.msg-split {
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 2px;
}














.split-mit {
  margin-top: 5px;
  font-size: 10.5px;
  opacity: 0.75;
}
.split-status.ist-da { color: var(--accent); }
.split-status.ist-fehler { color: var(--error); }
.split-haken { display: inline-flex; }
.split-haken svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}









.km-deckel {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.km-deckel .kd-text {
  flex: 1; font-size: 11.5px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.km-deckel .kd-btn {
  padding: 3px 8px; font-size: 10.5px; line-height: 1.5;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
}
.km-deckel .kd-btn:hover:not(:disabled) { border-color: var(--accent);
  color: var(--accent); }
.km-deckel .kd-btn:disabled { opacity: .45; cursor: default; }




















.beetle-btn #beetle-label { white-space: nowrap; }

.beetle-fenster {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  width: min(560px, calc(100vw - 36px));
  max-height: min(660px, calc(100vh - 96px));
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--warn-linie);
  border-radius: var(--r-2);
  box-shadow: 0 12px 40px var(--schleier);
  padding: 16px 16px 16px;
}
.beetle-zu {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--faint); padding: 2px 6px;
}
.beetle-zu:hover { color: var(--text); }
.beetle-titel { font-size: 12px; font-weight: 600; color: var(--text); padding-right: 24px; }
.beetle-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }




.beetle-regeln {
  margin: 14px 0 10px; border: 1px solid var(--line); border-radius: var(--r-2);
  overflow: hidden;
}
.beetle-regel {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 10px; font-size: 11.5px;
  border-bottom: 1px solid var(--line-soft);
}
.beetle-regel:last-child { border-bottom: none; }
.beetle-regel span { color: var(--muted); }
.beetle-regel b { color: var(--text); font-weight: 600; text-align: right; word-break: break-all; }

.beetle-immer {
  font-size: 10.5px; color: var(--muted); line-height: 1.5;
  background: var(--warn-flaeche);
  border: 1px solid var(--warn-linie);
  border-radius: var(--r-2); padding: 8px 10px; margin-bottom: 12px;
}

.beetle-schritte { display: grid; gap: 8px; margin: 4px 0 12px; }
.beetle-schritt { font-size: 11.5px; color: var(--text); line-height: 1.5; }
.beetle-schritt b { color: var(--warn); margin-right: 4px; }
.beetle-schritt code {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: 1px 6px; font-size: 11.5px;
}
.beetle-hinweis { font-size: 10.5px; color: var(--muted); line-height: 1.5; }

.btn-prim {
  background: var(--warn); color: var(--auf-farbe); border: none; border-radius: var(--r-1);
  padding: 4px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  margin-left: 6px;
}
.btn-prim:hover { background: var(--warn-tief); }


.btn-warn {
  width: 100%; background: var(--error-bg); color: var(--fehler);
  border: 1px solid var(--fehler-linie); border-radius: var(--r-2);
  padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  margin-bottom: 12px;
}
.btn-warn:hover { background: var(--fehler-flaeche); }



.beetle-prot {
  background: var(--code-bg); border-radius: var(--r-2); padding: 8px 10px;
  max-height: 260px; overflow: auto;
  font-family: var(--mono, ui-monospace, "Cascadia Code", monospace);
  font-size: 10.5px; line-height: 1.65;
}
.beetle-zeile { display: flex; gap: 8px; }
.beetle-zeit { color: var(--code-fg-4); flex: none; }
.beetle-text { word-break: break-word; }
.beetle-leer { font-size: 11.5px; color: var(--muted); padding: 6px 2px; }





.beetle-plan {
  background: var(--panel-2);
  border: 1px solid var(--warn-linie);
  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
  border-radius: var(--r-2);
  padding: 10px 12px; margin: 14px 0 12px;
  font-size: 12px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}


.beetle-plan--klein { font-size: 11.5px; opacity: .82; margin-bottom: 10px; }




.beetle-wahl { display: flex; gap: 10px; margin: 4px 0 12px; }
.beetle-wahl .beetle-ja,
.beetle-wahl .beetle-nein {
  flex: 1; margin: 0; padding: 10px 12px; font-size: 12px; font-weight: 600;
}










.beetle-wahl .beetle-ja {
  background: var(--ok-flaeche);
  color: var(--ok-tief);
  border: 1px solid var(--ok-linie);
}
.beetle-wahl .beetle-ja:hover { background: var(--ok-schleier); }
@keyframes beetle-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}









.beetle-sperre[hidden] { display: none; }
.beetle-sperre {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--warn-flaeche);
  border: 1px solid var(--warn-linie);
  border-radius: var(--r-2); padding: 10px 12px; margin: 0 0 10px;
  font-size: 11.5px; line-height: 1.5; color: var(--text);
}
.beetle-sperre b { color: var(--warn-tief); }
.beetle-sperre button {
  margin-left: auto; background: var(--panel); color: var(--warn-tief);
  border: 1px solid var(--warn-linie); border-radius: var(--r-1);
  padding: 4px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.beetle-sperre button:hover { background: var(--warn-flaeche); }










.dspur {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: var(--dspur-max, 100%);
  margin: 14px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--edge);
}


.dspur-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px;
}
.dspur-icon { display: inline-flex; }
.dspur-icon svg {
  width: 14px; height: 14px;
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.dspur-titel { font-weight: 600; color: var(--accent); }
.dspur-lage { color: var(--muted); }


.dspur-summe {
  margin-left: auto;
  color: var(--ok); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dspur-summe:empty { display: none; }


.dspur-schalter { display: inline-flex; gap: 3px; margin-left: 10px; }
.dspur-schalter[hidden] { display: none; }
.ds-btn {
  font: inherit; letter-spacing: var(--spur); font-size: 10.5px; line-height: 1;
  cursor: pointer;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 8px;
}
.ds-btn:hover { color: var(--accent-deep); border-color: var(--accent); }
.ds-btn.an {
  color: var(--accent-deep); border-color: var(--accent);
  background: var(--accent-soft); font-weight: 600;
}


.dspur-bahnen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-soft);
}
.dspur[data-fokus="1"] .dspur-bahnen { grid-template-columns: 1fr; }
.dspur[data-fokus="2"] .dspur-bahnen { grid-template-columns: 1fr; }
.dspur[data-fokus="1"] .dsbahn.r2,
.dspur[data-fokus="2"] .dsbahn.r1 { display: none; }



@media (max-width: 1179px) {
  .dspur-bahnen { grid-template-columns: 1fr; }
  .dspur[data-fokus="beide"] .dsbahn.r2 { display: none; }
}

.dsbahn {
  background: var(--panel);
  padding: 10px 12px 12px;
  min-width: 0;
  border-top: 2px solid transparent;
}

.dsbahn.r1 { border-top-color: var(--brown); }
.dsbahn.r2 { border-top-color: var(--accent); }

.dsb-kopf {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 10.5px;
}
.dsb-marke { font-weight: 600; letter-spacing: .02em; }
.dsbahn.r1 .dsb-marke { color: var(--s-tief); }
.dsbahn.r2 .dsb-marke { color: var(--accent-deep); }
.dsb-art { color: var(--muted); }
.dsb-modell {
  margin-left: auto; color: var(--faint);
  font-family: var(--mono); font-size: 10.5px;
}
.dsb-auftrag {
  margin: 4px 0 6px;
  font-size: 11.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


.dsb-zahlen {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.dsb-punkt {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent);
  animation: dsPuls 1.4s ease-in-out infinite;
}
@keyframes dsPuls { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
.dsbahn[data-zustand="fertig"] .dsb-punkt,
.dsbahn[data-zustand="geparkt"] .dsb-punkt { background: var(--ok); animation: none; }
.dsbahn[data-zustand="fehler"] .dsb-punkt { background: var(--error); animation: none; }
.dsb-was { color: var(--text); }
.dsb-uhr, .dsb-schritte, .dsb-eur { font-variant-numeric: tabular-nums; }
.dsb-eur {
  margin-left: auto;
  color: var(--ok); font-weight: 600;
}
.dsb-eur:empty, .dsb-schritte:empty { display: none; }




.dsb-koerper {
  max-height: 46vh; overflow-y: auto;
  padding-top: 8px;
  overscroll-behavior: contain;
}
.dspur[data-fokus="1"] .dsb-koerper,
.dspur[data-fokus="2"] .dsb-koerper { max-height: 62vh; }
.dsb-leer { color: var(--faint); font-size: 11.5px; padding: 6px 0; }
.dsb-wartet {
  margin-top: 10px; padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent);
  background: var(--panel-2);
  font-size: 11.5px; color: var(--muted); border-radius: 8px;}



.dsb-koerper .toolcard { margin: 8px 0; }
.dsb-koerper .think { margin: 8px 0; font-size: 12px; }
.dsb-koerper .answer { margin: 8px 0 4px; }






.dspur.ist-zu {
  border-color: var(--line);
  left: 0; transform: none; width: 100%;
}
.dspur.ist-zu .dspur-bahnen { display: block; background: transparent; }
.dsbahn.eingeklappt { display: none; padding-top: 0; border-top: none; }
.dsbahn.eingeklappt.offen { display: block; }
.dspur[data-fokus="beide"] .dsbahn.eingeklappt.offen.r2 { display: block; }

.dsriegel {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; letter-spacing: var(--spur); font-size: 10.5px; text-align: left; cursor: pointer;
  background: var(--panel); color: var(--muted);
  border: none; border-top: 1px solid var(--line-soft);
  border-left: 0;
  padding: 8px 12px;
}
.dsriegel.r1 { border-color: color-mix(in srgb, var(--brown) 50%, transparent); border-color: var(--line-soft); background: color-mix(in srgb, var(--brown) 8%, var(--panel)); }
.dsriegel.r2 { border-color: color-mix(in srgb, var(--accent) 50%, transparent); border-color: var(--line-soft); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.dsriegel:hover { background: var(--panel-2); }
.dsr-marke { font-weight: 600; }
.dsriegel.r1 .dsr-marke { color: var(--s-tief); }
.dsriegel.r2 .dsr-marke { color: var(--accent-deep); }
.dsr-zahlen {
  margin-left: auto; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.dsriegel .chev {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: var(--faint); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 140ms;
}
.dsriegel.offen .chev { transform: rotate(90deg); }



.dspur-schluss {
  border-top: 1px solid var(--line);
  padding: 12px 14px 14px;
}
.dspur-schluss[hidden] { display: none; }
















.vl-strang { margin: 6px 0; }




.vl-titel {
  font-size: 11.5px; font-weight: 600; color: var(--text);
  margin: 0 0 3px 24px;
}

.vl-kosten {
  font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; margin: 0 0 6px 24px;
}
.vl-kosten[hidden] { display: none; }



.vl-lauf { position: relative; padding-left: 24px; }




.vl-strang:not(.hat-runden) .vl-hauptpfad { display: none; }


.vl-hauptpfad {
  position: absolute; left: 0; top: 21px; bottom: -34px; width: 15px;
  border: 1.5px solid var(--accent);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  pointer-events: none;
}




.vl-hauptpfad::after {
  content: ""; position: absolute; right: -7px; bottom: -4.2px;
  border-left: 7px solid var(--accent);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}








.vl-lauf.offen .vl-hauptpfad {
  bottom: 0; border-bottom: none; border-radius: var(--radius) 0 0 0;
}
.vl-lauf.offen .vl-hauptpfad::after { display: none; }



.vl-ergebnis + .vl-lauf { margin-top: 16px; }



.vl-strang.m1 .vl-hauptpfad { border-color: var(--brown); }
.vl-strang.m1 .vl-hauptpfad::after { border-left-color: var(--brown); }
.vl-strang.m1 .vl-ergebnis { border-color: var(--brown); }
.vl-strang.m1 .vl-erg-titel { color: var(--s-tief); }


.vl-reihe {
  position: relative;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 14px; align-items: start;
}




.vl-reihe::before {
  content: ""; position: absolute; left: 11px; top: 0; bottom: 0;
  border-left: 1.5px dashed var(--faint);
}
@media (max-width: 700px) {
  .vl-reihe { grid-template-columns: 1fr; gap: 6px; }
}




.vl-loop.ist-angesprungen,
.turn.ist-angesprungen { animation: vl-angesprungen 2.2s ease-out; }
.vl-loop.ist-angesprungen { border-color: var(--accent); }
@keyframes vl-angesprungen {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  25%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .vl-loop.ist-angesprungen, .turn.ist-angesprungen { animation: none; }
}
.vl-loop {
  position: relative;
  transition: border-color .5s ease;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  box-shadow: var(--edge);
  padding: 6px 10px 8px 20px;
}



.vl-loop::before {
  content: ""; position: absolute; left: 10px; top: -1px; bottom: -1px;
  border-left: 1.5px dashed var(--faint);
}
.vl-loop-kopf { display: flex; align-items: center; gap: 6px; }
.vl-nr { font-size: 11.5px; font-weight: 600; color: var(--text); }
.vl-punkt {
  width: 6px; height: 6px; border-radius: 50%; margin-left: auto;
  background: var(--accent); opacity: 0;
}
.vl-loop.laeuft { border-color: var(--accent); }
.vl-loop.laeuft .vl-punkt { opacity: 1; animation: vlPuls 1.4s ease-in-out infinite; }
@keyframes vlPuls { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
.vl-wz, .vl-zahlen {
  font-size: 10.5px; color: var(--muted); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.vl-wz[hidden], .vl-zahlen[hidden] { display: none; }



.vl-rechts { min-width: 0; }
.vl-rechts > * { margin-top: 6px; }
.vl-rechts > :first-child { margin-top: 0; }



.vl-nachricht {
  font-size: 12px; color: var(--muted); word-break: break-word;
  padding-top: 4px;
}
.vl-nachricht[hidden] { display: none; }
.vl-nachricht.md > :first-child { margin-top: 0; }
.vl-nachricht.md > :last-child { margin-bottom: 0; }





.vl-band { position: relative; padding: 16px 0; }
.vl-band:not(.hat-karten) { padding: 0; height: 30px; }
.vl-band-linien {
  position: absolute; left: 0; top: 0; pointer-events: none;
  overflow: visible;
}



.vl-band-linien path {
  fill: none; stroke: var(--faint); stroke-width: 1.5;
  stroke-dasharray: 3 3.5; stroke-linecap: round; stroke-linejoin: round;
}


.vl-band.hat-karten .vl-band-linien path { stroke: var(--muted); }







.vl-band-karten { position: relative; z-index: 1; }





.vl-band-karten:empty { display: none; }
.vl-band-karten > * { margin: 0 0 8px 0; }
.vl-band-karten > :last-child { margin-bottom: 0; }





.vl-ergebnis {
  margin: 14px 0 0 24px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 14px 12px;
  background: transparent;
}
.vl-erg-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.vl-erg-titel {
  font-size: 10.5px; font-weight: 600; color: var(--accent); letter-spacing: .02em;
}
.vl-erg-zahlen {
  margin-left: auto; font-size: 10.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.vl-erg-koerper { word-break: break-word; }
.vl-erg-koerper > :first-child { margin-top: 0; }
.vl-erg-koerper > :last-child { margin-bottom: 0; }















.vl-ergebnis { padding: 12px 18px 16px; }

.vl-erg-koerper,
.vl-ergebnis .answer.md,
.vl-ergebnis .think.md {
  font-size: 12.5px;
  line-height: 1.62;
}


.vl-ergebnis .answer.md > p,
.vl-ergebnis .answer.md > ul,
.vl-ergebnis .answer.md > ol,
.vl-ergebnis .answer.md > blockquote,
.vl-ergebnis .answer.md > h1,
.vl-ergebnis .answer.md > h2,
.vl-ergebnis .answer.md > h3,
.vl-erg-koerper.md > p,
.vl-erg-koerper.md > ul,
.vl-erg-koerper.md > ol {
  max-width: none;
}





.vl-ergebnis .md h1,
.vl-ergebnis .md h2,
.vl-ergebnis .md h3,
.vl-ergebnis .md h4 {
  margin: 22px 0 7px; line-height: 1.3; color: var(--text);
  letter-spacing: -.005em;
}
.vl-ergebnis .md h1 { font-size: 16px; font-weight: 650; }
.vl-ergebnis .md h2 { font-size: 14px; font-weight: 650; }
.vl-ergebnis .md h3 { font-size: 12.5px; font-weight: 650; }
.vl-ergebnis .md h4 { font-size: 12px; font-weight: 600; color: var(--muted); }
.vl-ergebnis .md > :first-child { margin-top: 0; }



.vl-ergebnis .md h2 {
  padding-bottom: 5px; border-bottom: 1px solid var(--line-soft);
}









.vl-ergebnis .md > p.md-titel {
  margin: 20px 0 6px; font-size: 12.5px; line-height: 1.35;
}
.vl-ergebnis .md > p.md-titel > strong { font-weight: 650; color: var(--text); }
.vl-ergebnis .md > p.md-titel:first-child { margin-top: 0; }



.vl-ergebnis .md > p.md-titel + ul,
.vl-ergebnis .md > p.md-titel + ol { margin-top: 0; }





.vl-ergebnis .md ul,
.vl-ergebnis .md ol { margin: 0 0 12px; padding-left: 22px; }
.vl-ergebnis .md li { margin: 6px 0; }
.vl-ergebnis .md li::marker { color: var(--faint); }
.vl-ergebnis .md li > ul,
.vl-ergebnis .md li > ol { margin: 6px 0 2px; }
.vl-ergebnis .md li > p { margin: 0 0 5px; }
.vl-ergebnis .md p { margin: 0 0 12px; }


.vl-ergebnis .md ul + p,
.vl-ergebnis .md ol + p { margin-top: 14px; }







.vl-ergebnis .md code {
  border: none;
  background: var(--flaeche-3);
  padding: 1px 5px; font-size: 11.5px;
}
.vl-ergebnis .md pre { margin: 12px 0; }
.vl-ergebnis .md pre code { padding: 0; background: none; }






.vl-ergebnis .md table {
  display: table; width: 100%; margin: 14px 0;
  font-variant-numeric: tabular-nums;
}
.vl-ergebnis .md th,
.vl-ergebnis .md td { border-color: var(--line-soft); padding: 7px 11px; }
.vl-ergebnis .md th {
  font-size: 11.5px; letter-spacing: .01em; color: var(--muted);
  border-bottom-color: var(--line);
}













.vl-ergebnis .md td.md-zahl {
  position: relative;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vl-ergebnis .md td.md-zahl::before {
  content: "";
  position: absolute;





  right: 11px; bottom: 5px;
  width: calc((100% - 22px) * var(--anteil-zahl, 0));
  height: 3px;
  background: var(--accent);
  opacity: .32;
  border-radius: 2px;
}




.vl-ergebnis .md th.md-zahl-kopf { text-align: right; }




.vl-ergebnis .md a { overflow-wrap: anywhere; }
.vl-ergebnis .md hr { margin: 20px 0; border-top-color: var(--line-soft); }
.vl-ergebnis .md blockquote { margin: 14px 0; padding-left: 14px; }




.vl-erg-kopf {
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}




.erg-verweis { font-size: 11.5px; color: var(--muted); font-style: italic; }





.vgabel {
  position: relative;
  left: 50%; transform: translateX(-50%);
  width: var(--vg-max, 100%);
  margin: 14px 0 16px;
}




.vg-pfad {
  position: absolute; left: 0; top: 0; z-index: 2;
  pointer-events: none; overflow: visible;
}



.vg-pfad-linie {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-linecap: round;
}
.vg-pfad-spitze { fill: var(--accent); stroke: none; }








.vgabel .vl-vorlauf { margin-left: var(--vg-stummel-links, 16px); }









.vg-stummel { height: 16px; }
.vgabel .vl-vorlauf.ist-stummel .vl-kosten { display: none; }








.vgabel .vl-vorlauf.ist-stummel .vl-hauptpfad {


  top: calc(-1 * var(--vg-luecke-oben, 0px));
  border-top: none; border-radius: 0;
}


.vgabel { margin-top: 2px; }




.vg-frage {
  display: flex; align-items: baseline; gap: 10px;





  margin: 8px 0 0 calc(var(--vg-stummel-links, 16px) + 28px);
  padding: 8px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--p-linie);
  border-radius: var(--radius);
  box-shadow: var(--edge);
}



.vg-frage-marke {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--accent-deep);
  white-space: nowrap;
}
.vg-frage-icon { display: inline-flex; }
.vg-frage-icon svg {
  width: 13px; height: 13px;
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.vg-frage-text { font-size: 12px; color: var(--text); word-break: break-word; }



.vg-gabelung { height: 26px; }
.vg-fluss { height: 52px; }
.vg-fluss[hidden] { display: none; }


.vg-spalten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  align-items: start;
}
@media (max-width: 1179px) {
  .vg-spalten { grid-template-columns: 1fr !important; gap: 20px; }
}





.vgabel[data-straenge="3"] .vg-spalten,
.vgabel[data-straenge="4"] .vg-spalten,
.vgabel[data-straenge="5"] .vg-spalten { gap: 16px; }
.vgabel[data-straenge="3"] .vl-reihe,
.vgabel[data-straenge="4"] .vl-reihe,
.vgabel[data-straenge="5"] .vl-reihe {
  grid-template-columns: 1fr; gap: 4px;
}
.vgabel[data-straenge="3"] .vl-loop,
.vgabel[data-straenge="4"] .vl-loop,
.vgabel[data-straenge="5"] .vl-loop { max-width: 220px; }




.vg-buendel {
  max-width: 752px; margin: 0 auto;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px 14px;
  box-shadow: var(--edge);
}






.zug-vor:empty, .zug-schluss:empty { display: none; }



.zug-schluss { margin-left: 24px; }
.zug-vor > * { margin-bottom: 10px; }
.zug-schluss > * { margin-top: 10px; }





.beetle-warnung {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--warn-linie);
  background: var(--warn-flaeche);
  border-radius: var(--radius);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text);
}
.beetle-warnung b { color: var(--warn-tief); }






.beetle-schirme { margin-top: 10px; }
.beetle-schirme-kopf {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.beetle-schirme-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.beetle-schirm {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; cursor: pointer;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted); font: inherit; letter-spacing: var(--spur); font-size: 10.5px; text-align: left;
}
.beetle-schirm:hover { border-color: var(--accent); }
.beetle-schirm.an { color: var(--text); border-color: var(--ok-linie); }
.beetle-schirm-lampe {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); flex: 0 0 auto;
}
.beetle-schirm.an .beetle-schirm-lampe {
  background: var(--ok); box-shadow: 0 0 5px var(--ok-linie);
}
.beetle-schirm-text { display: flex; flex-direction: column; line-height: 1.25; }
.beetle-schirm-text b { font-weight: 600; font-variant-numeric: tabular-nums; }
.beetle-schirm-text i { font-style: normal; font-size: 10.5px; color: var(--faint); }
.beetle-schirme-fuss {
  margin-top: 6px; font-size: 10.5px; color: var(--muted); line-height: 1.5;
}





.warte-liste {
  width: min(var(--eingabe-breit, 760px), calc(100% - 40px));
  margin: 0 auto 8px;
  padding: 8px 10px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 4px;
}
.wl-kopf {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; color: var(--muted);
  letter-spacing: .01em; padding: 0 2px 2px;
}
.wl-zeichen {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.wl-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 11.5px;
}


.wl-nr {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche-3); color: var(--muted);
  font-size: 10px; font-variant-numeric: tabular-nums;
}


.wl-text {
  flex: 1; min-width: 0; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}




.wl-mit {
  flex: none; color: var(--muted);
  font-size: 10.5px; white-space: nowrap;
}
.wl-weg {
  flex: none; width: 22px; height: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius);
  color: var(--muted);
}
.wl-weg svg {
  width: 11px; height: 11px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round;
}
.wl-weg:hover { color: var(--fehler); background: var(--flaeche-3); }




.wl-weiter {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--accent);
  font: inherit; font-size: 10.5px;
}
.wl-weiter svg { width: 9px; height: 9px; fill: currentColor; stroke: none; }
.wl-weiter:hover { background: var(--flaeche-3); }






.stopp-warte {
  display: flex; align-items: center; gap: 9px;
  width: min(var(--eingabe-breit, 760px), calc(100% - 40px));
  margin: 0 auto 8px;
  padding: 8px 12px;
  background: var(--fehler-flaeche);
  border: 1px solid var(--fehler-linie);
  border-radius: var(--radius);
  color: var(--fehler-tief);
  font-size: 11.5px; line-height: 1.45;
}
.sw-dreieck {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}




#btn-send.is-messer {
  background: var(--fehler);
  border-color: var(--fehler);
  color: var(--auf-farbe);
}
#btn-send.is-messer:hover { background: var(--fehler-tief); }












.messer path { stroke: none; }
.messer .m-kontur    { fill: var(--messer-kontur); }
.messer .m-klinge    { fill: var(--messer-klinge); }
.messer .m-schliff   { fill: var(--messer-schliff); }
.messer .m-zwinge    { fill: var(--messer-zwinge); }
.messer .m-griff     { fill: var(--messer-griff); }
.messer .m-blut-tief { fill: var(--messer-blut-tief); }
.messer .m-blut      { fill: var(--messer-blut); }


#btn-send.is-messer .messer {
  --messer-blut: var(--messer-knopf-blut);
  --messer-blut-tief: var(--messer-knopf-blut-tief);
  --messer-zwinge: var(--messer-knopf-zwinge);
  --messer-griff: var(--messer-knopf-griff);
  --messer-kontur: var(--messer-knopf-kontur);
}





.beetle-prozesse { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.bp-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 10.5px; color: var(--muted);
}
.bp-zeile.an { color: var(--text); border-color: var(--ok-linie); }
.bp-lampe {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--line);
}
.bp-zeile.an .bp-lampe { background: var(--ok); }
.bp-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bp-text b { font-weight: 600; font-variant-numeric: tabular-nums; }


.bp-text i {
  font-style: normal; opacity: .75;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-stopp {
  flex: none; padding: 3px 9px; cursor: pointer;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted); font: inherit; letter-spacing: var(--spur); font-size: 10.5px;
}
.bp-stopp:hover { border-color: var(--fehler); color: var(--fehler); }
.bp-stopp:disabled { opacity: .5; cursor: default; }
.bp-rest { flex: none; font-size: 10.5px; color: var(--warn); }
.bp-aus  { flex: none; font-size: 10.5px; opacity: .6; }












.ordner-leiste {
  max-width: var(--eingabe-breit);
  margin: 0 auto;
  display: flex;
  align-items: center;


  gap: 2px;
  flex-wrap: wrap;
  padding: 0 0 3px;
  font-size: 10.5px;
}
.ordner-leiste[hidden] { display: none; }
.ol-liste { display: flex; gap: 6px; flex-wrap: wrap; }




.ol-liste:empty { display: none; }
.ol-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  max-width: 200px;
}
.ol-chip b {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ol-chip button {
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  font: inherit; letter-spacing: var(--spur);
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--r-1);
}
.ol-chip button:hover { color: var(--error); background: var(--error-bg); }















.ol-schloss { color: var(--faint); }
.ol-schloss svg { width: 11px; height: 11px; display: block; }
.ol-schloss svg path { fill: none; stroke: currentColor; stroke-width: 1.6; }

.ol-chip button.ol-schloss[data-lage="auf"],
.ol-chip button.ol-schloss[data-lage="auf"]:hover     { color: var(--error); }
.ol-chip button.ol-schloss[data-lage="wartet"],
.ol-chip button.ol-schloss[data-lage="wartet"]:hover  { color: var(--warn); }
.ol-chip button.ol-schloss[data-lage="loest"],
.ol-chip button.ol-schloss[data-lage="loest"]:hover   { color: var(--warn); }
.ol-chip button.ol-schloss[data-lage="sicher"],
.ol-chip button.ol-schloss[data-lage="sicher"]:hover  { color: var(--ok); }


.ol-chip button.ol-schloss[data-lage="gemischt"],
.ol-chip button.ol-schloss[data-lage="gemischt"]:hover { color: var(--warn); }

.ol-chip button.ol-schloss:hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
}





.ol-menue {
  position: fixed;
  z-index: 60;
  width: 300px;
  max-width: 88vw;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .32);
  font-size: 12px;
}
.ol-m-kopf { display: flex; align-items: center; gap: 8px; }
.ol-m-kopf b { font-weight: 600; font-family: var(--mono); }
.ol-m-x {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.ol-m-x:hover { color: var(--error); }
.ol-m-pfad {
  margin-top: 3px;
  color: var(--faint);
  font-size: 10.5px;
  font-family: var(--mono);
  word-break: break-all;
}

.ol-m-lage {
  margin-top: 9px;
  padding: 7px 9px 7px 24px;
  position: relative;
  border-radius: var(--r-1);
  line-height: 1.5;
  background: var(--bg);
  border: 1px solid var(--line);
}
.ol-m-lage::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}
.ol-m-lage.auf      { border-color: var(--error); }
.ol-m-lage.auf::before      { background: var(--error); }
.ol-m-lage.sicher   { border-color: var(--ok); }
.ol-m-lage.sicher::before   { background: var(--ok); }
.ol-m-lage.gemischt { border-color: var(--warn); }
.ol-m-lage.gemischt::before { background: var(--warn); }
.ol-m-lage.neutral::before  { background: var(--faint); }

.ol-m-reihe { display: flex; gap: 7px; margin-top: 9px; }
.ol-m-los {
  flex: 1 1 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  letter-spacing: var(--spur);
  cursor: pointer;
}

.ol-m-los.auf:hover  { border-color: var(--warn); color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent); }
.ol-m-los.zu:hover   { border-color: var(--ok); color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent); }
.ol-m-los[disabled] { opacity: .5; cursor: default; }


.ol-m-los.ol-m-ganz {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--bg);
  font-weight: 500;
}
.ol-m-los.ol-m-ganz:hover {
  background: color-mix(in srgb, var(--ok) 86%, #000);
  color: var(--bg);
}

.ol-m-fuss, .ol-m-fuss2 {
  margin-top: 8px;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: var(--spur);
}
.ol-m-fuss2:empty { display: none; }
.ol-m-fuss2.warn { color: var(--warn); }
.ol-m-fuss b { color: var(--text); }



.ol-m-mark {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  line-height: 1.5;
}
.ol-m-mark input { margin: 1px 0 0; flex: 0 0 auto; cursor: pointer; }
.ol-m-mark em { color: var(--faint); font-style: normal; }






.ol-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ol-plus svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}






.ol-plus:hover:not(:disabled) { color: var(--accent-deep); background: var(--line-soft); }
.ol-plus:disabled { opacity: .45; cursor: default; }




.ol-plus.laedt { color: var(--accent-deep); background: var(--line-soft); }


















.beetle-knopfreihe {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.beetle-knopfreihe .btn-warn { flex: 1 1 auto; }

.btn-neutral {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-2, var(--text));
  font: inherit;
  font-size: 11px;
  letter-spacing: var(--spur);
  cursor: pointer;
  white-space: nowrap;
}
.btn-neutral:hover { border-color: var(--accent); color: var(--accent); }
.btn-neutral[disabled] { opacity: .55; cursor: default; }

.ss-kasten { position: relative; display: inline-flex; }
.ss-menue {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 330px;
  max-width: 78vw;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.ss-menue[hidden] { display: none; }

.ss-feld {
  display: flex;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-family: var(--mono);
}
.ss-feld:focus { outline: 1px solid var(--accent); border-color: var(--accent); }




.ss-liste { margin-top: 8px; max-height: 210px; overflow: auto; }
.ss-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  border-radius: var(--r-1);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
button.ss-prog:hover { background: var(--accent-soft); color: var(--accent); }
.ss-prog > b { font-weight: 500; font-family: var(--mono); }
.ss-pfeil { color: var(--ok); flex: 0 0 auto; font-size: 10px; }


.ss-prog.ss-ordner .ss-pfeil,
.ss-prog.ss-hoch .ss-pfeil { color: var(--accent); }
.ss-prog.ss-ordner > b,
.ss-prog.ss-hoch > b { font-family: inherit; }
.ss-prog.ss-hoch { color: var(--faint); }


.ss-prog.aus { cursor: default; color: var(--faint); display: block; }
.ss-prog.aus .ss-pfeil { color: var(--faint); }
.ss-prog.aus > b { color: var(--faint); }
.ss-warum {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--faint);
}



.ss-offen {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid var(--warn);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  color: var(--text);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: var(--spur);
  cursor: pointer;
}
.ss-offen input { margin: 1px 0 0; flex: 0 0 auto; cursor: pointer; }

.ss-mehr {
  margin-top: 6px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.ss-mehr:hover { color: var(--accent); }

.ss-reihe { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.ss-los {
  padding: 5px 12px;
  border: 0;
  border-radius: var(--r-1);
  background: var(--accent);
  color: var(--bg);
  font: inherit;
  font-size: 11px;
  letter-spacing: var(--spur);
  cursor: pointer;
}
.ss-los[disabled] { opacity: .5; cursor: default; }


.ss-letzte { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.ss-letzte button {
  display: block;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  background: transparent;
  border-radius: var(--r-1);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-letzte button:hover { background: var(--accent-soft); color: var(--accent); }

.ss-fuss {
  margin-top: 8px;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: var(--spur);
}
.ss-fuss.warn { color: var(--warn); }


.ss-aus {
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
  padding: 6px 8px;



  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--r-1);
  font-family: var(--mono);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
}

.schirm-kasten { position: relative; display: inline-flex; }
.schirm-menue {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 210px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.schirm-menue[hidden] { display: none; }



.sm-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  border-radius: var(--r-1);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  letter-spacing: var(--spur);
  text-align: left;
  cursor: pointer;
}
.sm-zeile:hover { background: var(--accent-soft); color: var(--accent); }


.sm-haken { width: 12px; flex: 0 0 12px; text-align: center; }
.sm-zeile.an .sm-haken { color: var(--accent); }
.sm-mass { margin-left: auto; color: var(--faint); }
.sm-fuss {
  padding: 6px 8px 4px;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.4;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
















.nke {
  position: relative;


  width: 46%; min-width: 320px;



  flex: 0 1 auto;
  display: flex; flex-direction: column;
  background: var(--code-bg);
  border-left: 1px solid var(--line);
  color: var(--code-fg);




  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.nke-grip {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 3;
}
.nke-grip:hover { background: var(--accent); opacity: .35; }





.nke-tabs {
  display: flex; flex: none; overflow-x: auto;
  background: var(--code-bg-2); border-bottom: 1px solid var(--code-bg);
  scrollbar-width: thin;
}
.nke-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 10px;
  background: var(--code-bg-3); color: var(--code-fg-3);
  border-right: 1px solid var(--code-bg-2);
  font-size: 11.5px; white-space: nowrap; cursor: pointer;
  max-width: 230px;
}
.nke-tab:hover { color: var(--code-fg-2); }
.nke-tab.aktiv {
  background: var(--code-bg); color: var(--code-weiss);
  box-shadow: inset 0 1px 0 var(--accent);
}
.nke-tab-name { overflow: hidden; text-overflow: ellipsis; }
.nke-tab-punkt {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: transparent;
}


.nke-tab.schreibt .nke-tab-punkt {
  background: var(--diff-neu);
  animation: nkePuls 1.1s ease-in-out infinite;
}
@keyframes nkePuls { 50% { opacity: .25; } }
.nke-tab-zu {
  margin-left: auto; padding: 0 3px; border-radius: 6px;
  color: var(--code-fg-4); font-size: 12px; line-height: 1;
}
.nke-tab-zu:hover { background: var(--code-bg-4); color: var(--code-fg-2); }


.nke-pfad {
  display: flex; align-items: center; gap: 4px; flex: none;
  padding: 4px 8px 4px 12px;
  background: var(--code-bg); border-bottom: 1px solid var(--code-rand);
  font-size: 10.5px; color: var(--code-fg-4);
}
.nke-pfad-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nke-spacer { flex: 1; }
.nke-btn {
  background: none; border: 1px solid transparent; border-radius: 7px;
  color: var(--code-fg-3); padding: 4px; cursor: pointer; display: inline-flex;
}
.nke-btn svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.nke-btn:hover { color: var(--auf-farbe); background: var(--code-rand); }
.nke-btn.aus { color: var(--code-aus); }
.nke-btn.getan { color: var(--diff-neu); }
.nke-btn.nke-zu:hover { color: var(--diff-weg); }


.nke-mitte { flex: 1; min-height: 0; display: flex; }
.nke-flaeche {
  flex: 1; min-width: 0;
  overflow: auto;
  padding: 6px 0 40vh;
  scrollbar-color: var(--code-rand-2) var(--code-bg);
}
.nke-code { min-width: 100%; width: max-content; }
.nke-zeilen { font-size: 11.5px; line-height: 1.55; }

.nke-z {
  display: flex; align-items: flex-start;
  min-width: 100%;
  padding-right: 16px;
}





.nke-z.wartet { display: none; }
.nke-z.aktuell { background: var(--code-hover); }
.nke-z.gezeigt { background: var(--p-schleier); transition: background .4s; }

.nke-nr {
  flex: none; width: 52px; padding-right: 12px;
  text-align: right;
  color: var(--code-nr); font-variant-numeric: tabular-nums;
  user-select: none;
}
.nke-z.neu .nke-nr { color: var(--diff-neu-nr); }
.nke-z.fehler .nke-nr { color: var(--diff-weg); }


.nke-mark {
  flex: none; width: 14px; text-align: center;
  color: var(--code-fg-5); user-select: none;
}
.nke-z.neu .nke-mark { color: var(--diff-neu); }
.nke-z.weg .nke-mark { color: var(--diff-weg); }
.nke-z.fehler .nke-mark { color: var(--diff-weg); font-weight: 700; }

.nke-txt {
  flex: 1; min-width: 0;
  white-space: pre; tab-size: 4;




  background-image: repeating-linear-gradient(to right,
    var(--code-kante) 0 1px, transparent 1px var(--nke-stufe, 4ch));
  background-size: var(--nke-ein, 0) 100%;
  background-repeat: no-repeat;
}
















.nke-z.weg.gestrichen .nke-txt {
  text-decoration: line-through;
  text-decoration-color: var(--diff-weg-strich);
  opacity: .5;
}
.nke-z.fehler .nke-txt {
  text-decoration: underline wavy var(--diff-weg);
  text-underline-offset: 3px;
}



.nke-caret {
  display: inline-block; width: 2px; height: 1.1em;
  margin: 0 0 -2px 1px;
  background: var(--code-caret);
  animation: nkeBlink 1.05s steps(1) infinite;
}
@keyframes nkeBlink { 50% { opacity: 0; } }


.nke-mm {



  position: relative; flex: none; width: 78px;
  background: var(--code-bg);
  border-left: 1px solid var(--code-rand);
  cursor: pointer;
}
.nke-mm-bild { display: block; width: 100%; height: 100%; }
.nke-mm-fenster {
  position: absolute; left: 0; right: 0;
  background: var(--code-hover);
  border-top: 1px solid var(--code-hover);
  border-bottom: 1px solid var(--code-hover);
  pointer-events: none;
}



.nke-mm-schleier {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--code-bg);
  opacity: .82;
  pointer-events: none;
}
.nke-mm-schleier[hidden] { display: none; }












.nke.gz-an .nke-flaeche { padding-bottom: 14vh; }

.nke-ganz {
  flex: 0 0 auto;
  height: var(--nke-gz-h, 45%);
  min-height: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--code-rand);
  background: var(--code-bg);
}
.nke-ganz[hidden] { display: none; }




.nke-gz-griff {
  position: relative; height: 5px; margin-bottom: -5px;
  flex: none; cursor: row-resize; z-index: 2;
}
.nke-gz-griff:hover { background: var(--accent); opacity: .35; }

.nke-gz-kopf {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 10px;
  font-size: 10.5px; color: var(--code-fg-4);
  background: var(--code-bg-2);
  border-bottom: 1px solid var(--code-rand);
}
.nke-gz-titel { color: var(--code-fg); font-weight: 600; }
.nke-gz-zahl { font-variant-numeric: tabular-nums; }

.nke-gz-flaeche {


  position: relative;
  flex: 1; min-height: 0;
  overflow: auto;
  padding: 4px 0 24px;
  scrollbar-color: var(--code-rand-2) var(--code-bg);
}
.nke-gz-flaeche[hidden] { display: none; }
.nke-gz-code { min-width: 100%; width: max-content; }
.nke.umbruch .nke-gz-code { width: auto; }

.nke-gz-leer {
  padding: 14px 12px; font-size: 11px; color: var(--code-fg-4);
  line-height: 1.5;
}
.nke-gz-leer[hidden] { display: none; }



















.nke-gz-code .nke-z.neu.frisch {
  animation: nke-gz-leuchten var(--nke-gz-frisch, 10s) ease-out both;
}
@keyframes nke-gz-leuchten {
  0%   { background: color-mix(in srgb, var(--diff-neu) 40%, transparent); }
  4%   { background: color-mix(in srgb, var(--diff-neu) 40%, transparent); }
  13%  { background: color-mix(in srgb, var(--diff-neu) 13%, transparent); }
  88%  { background: color-mix(in srgb, var(--diff-neu) 13%, transparent); }
  100% { background: transparent; }
}


@media (prefers-reduced-motion: reduce) {
  .nke-gz-code .nke-z.neu.frisch {
    animation: none;
    background: color-mix(in srgb, var(--diff-neu) 13%, transparent);
  }
}


.nke.bearbeitet .nke-ganz { display: none; }





.nke-sicht {
  position: absolute; z-index: 5; left: 8px; right: 8px;
  top: 86px; max-height: 60vh; overflow-y: auto;
  background: var(--code-bg-2); border: 1px solid var(--code-rand);
  border-radius: 8px; box-shadow: 0 8px 28px var(--code-schleier);
  font-size: 10.5px;
}
.nke-sicht[hidden] { display: none; }
.nke-si-kopf {
  padding: 7px 10px 5px; color: var(--code-fg-4);
  text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px;
  border-bottom: 1px solid var(--code-bg);
}
.nke-si {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 10px; cursor: pointer; color: var(--code-fg-2);
  border-bottom: 1px solid var(--code-bg);
}
.nke-si:last-child { border-bottom: none; }
.nke-si:hover { background: var(--code-bg-3); }
.nke-si:focus-visible { outline: 1px solid var(--auf-farbe); outline-offset: -2px; }


.nke-si-schalter {
  flex: none; width: 24px; height: 13px; border-radius: 7px; margin-top: 1px;
  background: var(--code-bg-4); position: relative; transition: background .15s;
}
.nke-si-schalter i {
  position: absolute; top: 2px; left: 2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--code-fg-4); transition: left .15s, background .15s;
}
.nke-si.an .nke-si-schalter { background: color-mix(in srgb, var(--auf-farbe) 45%, transparent); }
.nke-si.an .nke-si-schalter i { left: 13px; background: var(--auf-farbe); }
.nke-si-text { display: flex; flex-direction: column; gap: 2px; }
.nke-si-text b { font-weight: 600; }
.nke-si-was { color: var(--code-fg-4); line-height: 1.5; }



.nke.nke-ohne-balken .nke-balken { display: none; }
.nke.nke-ohne-punkte .nke-bz-spur,
.nke.nke-ohne-punkte .nke-bz-mehr,
.nke.nke-ohne-punkte .nke-bk-legende { display: none; }



.nke.nke-ohne-marken .nke-mark { visibility: hidden; }
.nke.nke-ohne-marken .nke-z.neu .nke-nr,
.nke.nke-ohne-marken .nke-z.fehler .nke-nr { color: var(--code-nr); }
.nke.nke-ohne-leuchten .nke-gz-code .nke-z.neu.frisch {
  animation: none; background: transparent;
}


.nke-probleme {
  flex: none; max-height: 22vh; overflow-y: auto;
  background: var(--code-bg-2); border-top: 1px solid var(--code-rand);
  font-size: 10.5px;
}
.nke-probleme[hidden] { display: none; }
.nke-pr-kopf {
  padding: 6px 12px; color: var(--code-fg-4);
  text-transform: uppercase; letter-spacing: .06em; font-size: 10px;
  border-bottom: 1px solid var(--code-bg);
}
.nke-pr {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 12px; color: var(--code-fg-2);
}
.nke-pr.klick { cursor: pointer; }
.nke-pr.klick:hover { background: var(--code-bg-3); }
.nke-pr-txt { flex: 1; word-break: break-word; }
.nke-pr-z { color: var(--code-fg-4); white-space: nowrap; }


.nke-status {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 4px 10px;
  background: var(--code-bg-2); border-top: 1px solid var(--code-rand);
  font-size: 10.5px; color: var(--code-fg-3);
  overflow: hidden;
}
.nke-status b { color: var(--code-fg); font-weight: 600; font-variant-numeric: tabular-nums; }



.nke-st-lauf {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; white-space: nowrap;
}
.nke-st-zahl, .nke-st-lang {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.nke-st-pos, .nke-st-btn { flex: none; }
.nke-leise { color: var(--code-fg-4); }
.nke-punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--diff-neu); flex: none;
  animation: nkePuls 1.1s ease-in-out infinite;
}
.nke-haken { color: var(--diff-neu); margin-right: 3px; }
.nke-ok { color: var(--diff-neu); }
.nke-warn { color: var(--code-warn); }
.nke-plus { color: var(--diff-neu); }
.nke-minus { color: var(--diff-weg); }
.nke-st-pos, .nke-st-zahl, .nke-st-lang {
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.nke-st-btn {
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--code-fg-3); font: inherit; letter-spacing: var(--spur); font-family: var(--mono); font-size: 10.5px;
  padding: 1px 6px; cursor: pointer; white-space: nowrap;
}
.nke-st-btn:hover { background: var(--code-bg-4); color: var(--code-weiss); }
.nke-st-btn[hidden] { display: none; }
.nke-st-probleme.hat { color: var(--code-warn); }






.nke-fassungen {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 8px 4px 10px;
  background: var(--code-bg-2); border-bottom: 1px solid var(--code-rand);
  font-size: 10.5px; color: var(--code-fg-2);
}
.nke-fassungen[hidden] { display: none; }
.nke-fbtn {
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--code-fg-3); font: inherit; letter-spacing: var(--spur); font-size: 12px; line-height: 1;
  padding: 3px 6px; cursor: pointer; display: inline-flex; align-items: center;
}
.nke-fbtn svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.nke-fbtn:hover { background: var(--code-bg-4); color: var(--code-weiss); }
.nke-f-wahl {
  flex-direction: column; align-items: flex-start; gap: 0;
  font-size: 10.5px; padding: 2px 8px;
}
.nke-f-nr { color: var(--code-fg); font-weight: 600; }
.nke-f-was { color: var(--code-fg-4); font-size: 10px; }
.nke-f-zahlen { font-variant-numeric: tabular-nums; white-space: nowrap; }



.nke-f-gilt {
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--diff-neu-rand);
  color: var(--diff-neu); font-size: 10px; white-space: nowrap;
}


.nke-f-ort {
  padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--brown);
  color: var(--brown); font-size: 10px; white-space: nowrap;
}
.nke-f-setzen {
  background: none; border: 1px solid var(--code-rand); border-radius: 6px;
  color: var(--code-fg-2); font: inherit; letter-spacing: var(--spur); font-family: var(--mono); font-size: 10px;
  padding: 2px 8px; cursor: pointer; white-space: nowrap;
}
.nke-f-setzen:hover:not(:disabled) {
  border-color: var(--accent); color: var(--code-weiss); background: var(--p-schleier);
}
.nke-f-setzen:disabled { color: var(--code-aus); cursor: not-allowed; }




.nke-fliste {
  position: absolute; z-index: 4; left: 8px; right: 8px;
  top: 86px; max-height: 52vh; overflow-y: auto;
  background: var(--code-bg-2); border: 1px solid var(--code-rand); border-radius: 8px;
  box-shadow: 0 8px 28px var(--code-schleier);
  font-size: 10.5px;
}
.nke-fliste[hidden] { display: none; }
.nke-fz {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; cursor: pointer; color: var(--code-fg-2);
  border-bottom: 1px solid var(--code-bg);
}
.nke-fz:last-child { border-bottom: none; }
.nke-fz:hover { background: var(--code-bg-3); }
.nke-fz.aktiv { background: var(--p-schleier); }
.nke-fz-nr {
  flex: none; width: 20px; text-align: right;
  color: var(--code-fg-4); font-variant-numeric: tabular-nums;
}
.nke-fz-was { flex: 1; }
.nke-fz-zeit, .nke-fz-zahlen {
  color: var(--code-fg-4); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nke-fz-warn { color: var(--code-warn); white-space: nowrap; }













.nke-baum { display: none; }




.nke.baum-an .nke-baum {
  display: block; flex: 1; min-height: 0; overflow: auto;
  padding: 0 0 24px;
}
.nke-baum-leer { padding: 24px 16px; color: var(--code-fg-4); font-size: 11.5px; }

.nke-baum-kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px;
  border-bottom: 1px solid var(--code-rand);
  font-size: 11px; color: var(--code-fg-3);
}
.nke-bk-summe b { color: var(--code-fg); font-weight: 600; }
.nke-bk-legende {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--code-fg-4);
}
.nke-bk-legende .nke-punktchen { cursor: default; margin-left: 8px; }
.nke-bk-legende .nke-punktchen:first-child { margin-left: 0; }
.nke-bk-legende .nke-punktchen:hover { transform: none; }


.nke-welt { padding: 8px 0 6px; }
.nke-welt + .nke-welt { border-top: 1px solid var(--code-rand); }
.nke-welt-rechner   { --nke-ton: var(--code-ort-rechner); }
.nke-welt-plattform { --nke-ton: var(--code-ort-plattform); }
.nke-welt { --nke-linie: color-mix(in srgb, var(--nke-ton) 42%, transparent); }
.nke-wk {
  display: flex; align-items: center; gap: 8px;
  min-height: 26px; padding: 2px 14px;
  font-size: 12px; color: var(--code-fg);
}
.nke-wk-ic {
  display: inline-flex; justify-content: center; flex: none; width: 15px;
  color: var(--nke-ton);
}
.nke-wk-ic svg { width: 15px; height: 15px; stroke-width: 1.4; }
.nke-wk-wort { font-weight: 600; letter-spacing: .01em; }
.nke-wk-neben { font-size: 10.5px; color: var(--nke-ton); }


.nke-bz {
  display: flex; align-items: stretch; min-height: 24px;
  padding: 0 14px; cursor: pointer; outline: none;
  font-size: 11.5px; color: var(--code-fg);
}
.nke-bz:hover { background: var(--code-hover); }
.nke-bz.aktiv { background: var(--code-hover-2); }
.nke-bz:focus-visible { background: var(--code-hover-2); box-shadow: inset 0 0 0 2px var(--nke-ton); }
.nke-bz-inhalt {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0; padding: 3px 0;
}




.nke-fl { display: flex; flex: none; }
.nke-fl-e { position: relative; flex: none; width: 16px; }
.nke-fl-e.weiter::before,
.nke-fl-e.ast::before {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0;
  border-left: 1px solid var(--nke-linie);
}
.nke-fl-e.ast::after {
  content: ""; position: absolute; left: 7px; right: 2px; top: 50%;
  border-top: 1px solid var(--nke-linie);
}
.nke-fl-e.ast.letzt::before {
  bottom: auto; height: 50%; right: 2px;
  border-bottom: 1px solid var(--nke-linie);
  border-bottom-left-radius: 5px;
}
.nke-fl-e.ast.letzt::after { display: none; }

.nke-bz:hover .nke-fl-e.ast::before,
.nke-bz:hover .nke-fl-e.ast::after,
.nke-bz:focus-visible .nke-fl-e.ast::before,
.nke-bz:focus-visible .nke-fl-e.ast::after { border-color: var(--nke-ton); }

.nke-bz-ic {
  display: inline-flex; justify-content: center; flex: none; width: 15px;
  color: var(--code-fg-4);
}
.nke-bz-ic svg { width: 14px; height: 14px; stroke-width: 1.3; }
.nke-bz-ordner .nke-bz-ic,
.nke-bz-ort .nke-bz-ic { color: var(--nke-ton); }
.nke-bz-datei.angelegt .nke-bz-ic { color: var(--diff-neu); }
.nke-bz-datei.geaendert .nke-bz-ic { color: var(--code-f-geaendert-hell); }




.nke-bz-schloss {
  display: inline-flex; align-items: center; flex: none; margin-left: 5px;
}
.nke-bz-schloss svg { width: 12px; height: 12px; display: block; }
.nke-bz-schloss svg path,
.nke-bz-schloss svg rect { fill: none; stroke: currentColor; stroke-width: 1.4; }
.nke-bz-schloss.zu  { color: var(--diff-neu); }
.nke-bz-schloss.auf { color: var(--code-fg-4); }

.nke-bz-name {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nke-bz-ordner .nke-bz-name { color: var(--code-fg-2); }
.nke-bz-ort .nke-bz-name { color: var(--code-fg); font-weight: 600; }
.nke-bz.zu .nke-bz-name { color: var(--code-fg-3); }
.nke-bz-anzahl { flex: none; font-size: 10.5px; color: var(--code-fg-4); white-space: nowrap; }
.nke-bz-spur {
  display: flex; align-items: center; flex: none; flex-wrap: wrap; gap: 4px;



  max-width: 46%; overflow: hidden;
}



.nke-bk-holen { gap: 5px; padding: 0 8px; }
.nke-bk-holen span { font-size: 10.5px; }
@container (max-width: 560px) { .nke-bk-holen span { display: none; } }
.nke-bz-mehr {
  flex: none; font-size: 10.5px; color: var(--code-fg-4);
  padding-right: 2px;
}
.nke-bz-zeit {
  flex: none; margin-left: auto; padding-left: 12px;
  font-size: 10.5px; color: var(--code-fg-4); font-variant-numeric: tabular-nums;
}



.nke-zahlen {
  display: inline-flex; align-items: baseline; gap: 6px; flex: none;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nke-zahlen .nke-ersetzt { color: var(--code-f-geaendert-hell); font-weight: 500; }

.nke-zahlen .nuell { color: var(--code-fg-5); font-weight: 400; }
.nke-zahlen.ungefaehr::before { content: "≈"; margin-right: -3px; color: var(--code-fg-4); font-weight: 400; }

.nke-bz-ohne { flex: none; font-size: 10.5px; color: var(--code-fg-5); white-space: nowrap; }
.nke-wk .nke-zahlen,
.nke-bz-ordner .nke-zahlen,
.nke-bz-ort .nke-zahlen { font-weight: 500; }
.nke-balken { display: inline-flex; gap: 2px; flex: none; }
.nke-balken i { width: 7px; height: 7px; border-radius: 1.5px; background: var(--code-bg-4); }
.nke-balken i.plus { background: var(--diff-neu); }
.nke-balken i.minus { background: var(--diff-weg); }



.nke.baum-an .nke-baum { container-type: inline-size; }
@container (max-width: 560px) {
  .nke-balken, .nke-bz-zeit { display: none; }
}
@container (max-width: 400px) {
  .nke-bz-spur, .nke-wk-neben { display: none; }
}



.nke-punktchen {
  width: 9px; height: 9px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1.5px solid var(--code-f-neu); background: transparent;
}
.nke-punktchen.geaendert { border-color: var(--code-f-geaendert); }
.nke-punktchen.eingefuegt { border-color: var(--code-f-eingefuegt); }
.nke-punktchen.gilt { background: currentColor; box-shadow: 0 0 0 2px var(--code-kante); }
.nke-punktchen.neu.gilt { background: var(--diff-neu); border-color: var(--diff-neu); }
.nke-punktchen.geaendert.gilt { background: var(--code-f-geaendert-hell); border-color: var(--code-f-geaendert-hell); }
.nke-punktchen.eingefuegt.gilt { background: var(--code-f-eingefuegt-hell); border-color: var(--code-f-eingefuegt-hell); }
.nke-punktchen.fehler { border-color: var(--diff-weg); }
.nke-punktchen:hover { transform: scale(1.35); }


.nke-melde {
  flex: none; padding: 6px 12px;
  background: var(--code-bg-3); border-top: 1px solid var(--code-rand);
  font-size: 10.5px; color: var(--code-fg);
}
.nke-melde[hidden] { display: none; }
.nke-melde.ok { color: var(--diff-neu); }
.nke-melde.fehler { color: var(--code-fehler); }



.nke-suchleiste {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 8px 4px 12px;
  background: var(--code-bg-2); border-bottom: 1px solid var(--code-rand);
}
.nke-suchleiste[hidden] { display: none; }
.nke-such-feld {
  flex: 1; min-width: 0;
  background: var(--code-bg); border: 1px solid var(--code-rand); border-radius: 6px;
  color: var(--code-fg); font-family: var(--mono); font-size: 11.5px;
  padding: 3px 8px;
}
.nke-such-feld:focus { outline: none; border-color: var(--accent); }
.nke-such-zahl {
  color: var(--code-fg-3); font-family: var(--mono); font-size: 10.5px; white-space: nowrap;
}
.nke-such-zahl.leer { color: var(--code-warn); }

.nke-fund { background: var(--code-fund); border-radius: 2px; }
.nke-z.treffer .nke-fund { background: var(--code-fund-aktiv); }
.nke-z.treffer { background: var(--code-hover); }





.nke.umbruch .nke-txt {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.nke.umbruch .nke-z { min-width: 0; }
.nke.umbruch .nke-code { width: auto; }


.nke-edit-lage { display: flex; height: 100%; }
.nke-edit-lage[hidden] { display: none; }


.nke-edit-nr {
  flex: none; width: 52px; padding: 6px 12px 0 0;
  text-align: right; overflow: hidden;
  background: var(--code-bg); color: var(--code-nr);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  white-space: pre; user-select: none;
}
.nke-edit {
  display: block; flex: 1; min-width: 0; height: 100%;
  box-sizing: border-box;
  padding: 6px 14px 6px 14px;
  background: var(--code-bg); color: var(--code-fg);
  border: none; resize: none;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  tab-size: 4; white-space: pre;
}
.nke-edit:focus { outline: none; }


.nke.bearbeitet .nke-mm { display: none; }
.nke.bearbeitet .nke-flaeche { padding: 0; overflow: hidden; }


.nke-strahl {
  margin: 16px 10px 8px; padding-top: 12px;
  border-top: 1px solid var(--code-rand);
}
.nke-strahl-kopf {
  color: var(--code-fg-4); font-size: 10.5px; line-height: 1.5; padding: 0 2px 8px;
}
.nke-strahl-bahn { display: flex; flex-wrap: wrap; gap: 4px; }
.nke-strahl-punkt {
  background: none; border: 1px solid var(--code-rand); border-radius: 999px;
  color: var(--code-fg-2); font: inherit; letter-spacing: var(--spur); font-family: var(--mono); font-size: 10px;
  padding: 2px 8px; cursor: pointer; white-space: nowrap;
}
.nke-strahl-punkt:hover {
  border-color: var(--accent); color: var(--code-weiss); background: var(--p-schleier);
}





.nke-dialog {
  position: absolute; inset: 0; z-index: 6;
  background: var(--code-schleier);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.nke-dlg-karte {
  width: 100%; max-width: 460px; max-height: 80%;
  display: flex; flex-direction: column;
  background: var(--code-bg-2); border: 1px solid var(--code-rand); border-radius: 10px;
  box-shadow: 0 12px 40px var(--code-schleier);
}
.nke-dlg-kopf {
  padding: 12px 14px 6px; color: var(--code-weiss); font-size: 12px; font-weight: 600;
}
.nke-dlg-text {
  padding: 0 14px 10px; color: var(--code-fg-2); font-size: 10.5px; line-height: 1.55;
}
.nke-dlg-liste {
  flex: 1; min-height: 0; overflow-y: auto;
  border-top: 1px solid var(--code-bg); border-bottom: 1px solid var(--code-bg);
}
.nke-dlg-zeile {
  display: flex; align-items: baseline; gap: 10px;
  padding: 4px 14px; font-size: 10.5px; color: var(--code-fg);
}
.nke-dlg-pfad {
  flex: 1; font-family: var(--mono); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.nke-dlg-nr { color: var(--code-fg-4); white-space: nowrap; }
.nke-dlg-fuss {
  display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px;
}


.nke-fz-verg {
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--code-fg-4); font: inherit; letter-spacing: var(--spur); font-size: 11.5px; line-height: 1;
  padding: 2px 4px; cursor: pointer;
}
.nke-fz-verg:hover { color: var(--auf-farbe); background: var(--code-bg-4); border-color: var(--code-rand); }


.nke-st-btn.an { color: var(--code-fg); border-color: var(--code-rand); }
.nke-st-btn:disabled { color: var(--code-aus); cursor: not-allowed; }
.nke-st-btn:disabled:hover { background: none; color: var(--code-aus); }










.tb-modell {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px;
  margin: 6px 0 0; font-size: 11.5px; color: var(--text-3);
}
.tb-modell-was { color: var(--faint); }
.tb-modell-wort { font-weight: 600; }
.tb-modell-wort.ok { color: var(--ok); }
.tb-modell-wort.warn { color: var(--warn); }
.tb-modell-wort.fehl { color: var(--fehler); }
.tb-modell .tb-modell-knopf { margin-left: auto; }
.tb-modell .tb-modell-knopf:disabled { opacity: .55; cursor: progress; }

.tb-kopf { display: flex; align-items: center; gap: 10px; }
.tb-kopf .tb-label { flex: 1; min-width: 0; }
.btn-editor {
  flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-1);
  color: var(--muted); font: inherit; letter-spacing: var(--spur); font-size: 10.5px;
  padding: 2px 8px; cursor: pointer;
}
.btn-editor svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.btn-editor:hover {
  color: var(--accent-deep); border-color: var(--accent);
  background: var(--accent-soft);
}




@media (max-width: 1200px) {
  .nke { width: 52%; }
  .nke-mm { display: none; }
}
@media (max-width: 900px) {
  .nke { width: 100%; min-width: 0; }
}








.hook-btn.an { color: var(--brown); }
.hook-btn.an svg { stroke: var(--brown); }
.hook-btn { position: relative; }
.hook-btn.an::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brown);
}
.hook-btn[hidden] { display: none; }



































.info-karte,
.mehr-menu,
.kosten-menu,
.media-menu,
.kmenu,
.c-menu,
.ss-blase,
.aw-info,
.dw-marke,
.dlg-card,
.schublade,
.srv-karte,
.beetle-fenster,
.kf-karte,
.wolke,
.pl-fenster,
.q-stil-menue {

  --flaeche:      var(--fenster);
  --flaeche-2:    var(--fenster-2);
  --flaeche-3:    var(--fenster-hover);
  --grund:        var(--fenster-2);
  --seitenleiste: var(--fenster-2);

  --linie:        var(--fenster-linie);
  --linie-weich:  var(--fenster-linie-weich);
  --linie-stark:  var(--fenster-linie-stark);
  --linie-bedien: var(--fenster-linie-stark);

  --text:         var(--fenster-text);
  --text-2:       var(--fenster-text-2);
  --text-3:       var(--fenster-text-3);

  --p:            var(--fenster-p);
  --p-tief:       var(--fenster-p);
  --p-hell:       var(--fenster-p);
  --p-flaeche:    rgba(166,201,205,.16);
  --p-linie:      rgba(166,201,205,.34);
  --p-schleier:   rgba(166,201,205,.14);
  --auf-farbe:    #1e2422;

  --s:            var(--fenster-s);
  --s-tief:       var(--fenster-s);
  --s-flaeche:    rgba(220,194,186,.15);
  --s-linie:      rgba(220,194,186,.32);
  --s-schleier:   rgba(220,194,186,.14);

  --ok:     var(--fenster-ok);
  --warn:   var(--fenster-warn);
  --fehler: var(--fenster-fehler);
  --ok-tief:     var(--fenster-ok);
  --warn-tief:   var(--fenster-warn);
  --fehler-tief: var(--fenster-fehler);
  --ok-flaeche:     rgba(150,216,169,.15);
  --warn-flaeche:   rgba(238,203,142,.15);
  --fehler-flaeche: rgba(242,180,180,.15);
  --ok-linie:       rgba(150,216,169,.32);
  --warn-linie:     rgba(238,203,142,.32);
  --fehler-linie:   rgba(242,180,180,.32);


  --panel:       var(--fenster);
  --panel-2:     var(--fenster-2);
  --bg:          var(--fenster-2);
  --line:        var(--fenster-linie);
  --line-soft:   var(--fenster-linie-weich);
  --muted:       var(--fenster-text-2);
  --faint:       var(--fenster-text-3);
  --accent:      var(--fenster-p);
  --accent-deep: var(--fenster-p);
  --accent-soft: rgba(166,201,205,.16);
  --brown:       var(--fenster-s);
  --error:       var(--fenster-fehler);
  --error-bg:    rgba(242,180,180,.15);
  --edge:        inset 0 1px 0 rgba(255,255,255,.07);



  --strich:      1px dashed rgba(255,255,255,.30);
  --strich-fein: 1px dashed rgba(255,255,255,.20);
  --strich-p:    1px dashed rgba(166,201,205,.45);


  --kante: inset 0 1px 0 rgba(255,255,255,.07);

  background: var(--fenster);
  color: var(--fenster-text);
  border-color: var(--fenster-linie-stark);



  box-shadow: 0 2px 6px rgba(0,0,0,.22), 0 14px 40px rgba(0,0,0,.28);
}



.dlg-card .field input,
.schublade .field input,
.beetle-fenster input {
  background: var(--fenster-2);
  color: var(--fenster-text);
}
.dlg-card .field input::placeholder,
.schublade .field input::placeholder { color: var(--fenster-text-3); }



.wolke { box-shadow: 0 2px 8px rgba(0,0,0,.30); }




























.knopf:active:not(:disabled),
.btn:active:not(:disabled),
.chip:active:not(:disabled),
.iknopf:active:not(:disabled),
.konto-punkt:active,
.info:active,
.send-btn:active:not(:disabled),
.mic-btn:active,
.attach-btn:active,
.ol-plus:active:not(:disabled),
.schrittkarte:active,
.karte.klickbar:active,
.setup-item:active,
.punkt-dazu:active,
.tab:active,
.aw:active,
.v-btn:active,
.mp-x:active,
.neue-gruppe:active {
  transform: translateY(1px);
  transition-duration: 60ms;
}



.knopf:active:not(:disabled),
.btn:active:not(:disabled),
.chip:active:not(:disabled),
.iknopf:active:not(:disabled),
.neue-gruppe:active {
  background: color-mix(in srgb, var(--flaeche-3) 80%, var(--text) 8%);
}
.knopf.p:active:not(:disabled),
.btn-primary:active:not(:disabled),
.send-btn:active:not(:disabled) {
  background: color-mix(in srgb, var(--p-tief) 88%, var(--text) 12%);
}
.knopf.s:active:not(:disabled) {
  background: color-mix(in srgb, var(--s-schleier) 70%, var(--text) 6%);
}


.nav-eintrag:active,
.conv-item:active,
.zuletzt-zeile:active,
.mehr-zeile:active,
.nav-nutzer:active,
.nav-einklappen:active,
.reiter:active,
.tabelle tbody tr:active td,
.c-item:active,
.kmenu-eintrag:active {
  background: color-mix(in srgb, var(--flaeche-3) 75%, var(--text) 10%);
  transition-duration: 60ms;
}


.nav-eintrag.aktiv:active {
  background: color-mix(in srgb, var(--p-flaeche) 70%, var(--text) 10%);
}


.schalter:active:not(:disabled)::before { width: 15px; }


@keyframes fenster-von-oben {
  from { opacity: 0; transform: translateY(-3px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes fenster-von-unten {
  from { opacity: 0; transform: translateY(3px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes fenster-mitte {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}


.mehr-menu,
.kosten-menu,
.media-menu,
.kmenu,
.c-menu,
.info-karte,
.dw-marke,
.pl-fenster {
  animation: fenster-von-oben 120ms ease-out;
}


.ss-blase { animation: fenster-von-unten 120ms ease-out; }



.schirm-menue,
.ss-menue { animation: fenster-von-unten 120ms ease-out; }



.srv-karte,
.beetle-fenster,
.kf-karte { animation: fenster-mitte 140ms ease-out; }





@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .knopf:active, .btn:active, .chip:active, .iknopf:active,
  .send-btn:active, .schrittkarte:active, .karte.klickbar:active {
    transform: none;
  }
}























.schublade-kopf { border-radius: 0; }
.mehr-menu .mehr-zeile:first-child { border-radius: calc(var(--r-2) - 4px) calc(var(--r-2) - 4px) 0 0; }
.mehr-menu .mehr-zeile:last-child  { border-radius: 0 0 calc(var(--r-2) - 4px) calc(var(--r-2) - 4px); }



.karte > .tabelle tr:first-child th:first-child { border-top-left-radius: calc(var(--r-2) - 4px); }
.karte > .tabelle tr:first-child th:last-child  { border-top-right-radius: calc(var(--r-2) - 4px); }
.karte > .tabelle tr:last-child td:first-child  { border-bottom-left-radius: calc(var(--r-2) - 4px); }
.karte > .tabelle tr:last-child td:last-child   { border-bottom-right-radius: calc(var(--r-2) - 4px); }





.srv-fuss, .beetle-prot:last-child {
  border-radius: 0 0 calc(var(--r-2) - 1px) calc(var(--r-2) - 1px);
}




.konto-punkt .punkt { box-shadow: 0 0 0 2px var(--flaeche); }




































.kachelband-spur[data-anschnitt="hinten"] {
  -webkit-mask-image: linear-gradient(90deg, var(--maske) calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, var(--maske) calc(100% - 22px), transparent 100%);
}
.kachelband-spur[data-anschnitt="beide"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--maske) 22px, var(--maske) calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, var(--maske) 22px, var(--maske) calc(100% - 22px), transparent 100%);
}
.kachelband-spur[data-anschnitt="vorn"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--maske) 22px);
          mask-image: linear-gradient(90deg, transparent 0, var(--maske) 22px);
}

.nav-liste[data-anschnitt="hinten"],
.conv-list[data-anschnitt="hinten"],
.setup-list[data-anschnitt="hinten"],
.schublade-koerper[data-anschnitt="hinten"],
.kp-liste[data-anschnitt="hinten"] {
  -webkit-mask-image: linear-gradient(180deg, var(--maske) calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(180deg, var(--maske) calc(100% - 20px), transparent 100%);
}
.nav-liste[data-anschnitt="beide"],
.conv-list[data-anschnitt="beide"],
.setup-list[data-anschnitt="beide"],
.schublade-koerper[data-anschnitt="beide"],
.kp-liste[data-anschnitt="beide"] {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--maske) 20px, var(--maske) calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, var(--maske) 20px, var(--maske) calc(100% - 20px), transparent 100%);
}
.nav-liste[data-anschnitt="vorn"],
.conv-list[data-anschnitt="vorn"],
.setup-list[data-anschnitt="vorn"],
.schublade-koerper[data-anschnitt="vorn"],
.kp-liste[data-anschnitt="vorn"] {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--maske) 20px);
          mask-image: linear-gradient(180deg, transparent 0, var(--maske) 20px);
}



.nav-liste, .conv-list, .setup-list,
.kachelband-spur, .schublade-koerper { scrollbar-width: thin; }
.kachelband-spur { padding-bottom: 6px; }






















.zahl, .kachel-wert, .band-wert, .guthaben b,
.tabelle td, .tabelle th, .session-tag,
.u-tok, .u-cost, .k-summe, .k-calls, .k-kinder, .ss-wert,
.kachel-fuss, .kf-wert, .km-tok, .km-usd, .ks-tok, .ks-usd {
  font-variant-numeric: tabular-nums;
}


.einheit,
.kachel-wert .einheit,
.band-wert .einheit,
.u-cost .einheit {
  font-size: .62em;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: .01em;
}

.kachel.p .einheit, .kachel.s .einheit, .band-zahl .einheit { color: var(--text-2); }



.hoch, .runter { font-variant-numeric: tabular-nums; font-weight: 600; }










































.answer.md > p,
.answer.md > ul,
.answer.md > ol,
.answer.md > blockquote,
.think.md > p,
.think.md > ul,
.think.md > ol,






.k-auftrag.md > p,
.k-ergebnis.md > p,
.mi-koerper p,
.platzhalter-satz,
.leerzustand p {
  max-width: 62ch;
}



.answer.md > h1, .answer.md > h2, .answer.md > h3,
.think.md > h1, .think.md > h2, .think.md > h3 {
  max-width: 48ch;
}




.answer.md > pre,
.answer.md > table,
.answer.md > .toolcard,
.answer.md > img,
.think.md > pre,
.think.md > table { max-width: none; }




.msg-user .bubble { max-width: min(78%, 62ch); }






















.skelett {
  background: var(--flaeche-3);
  border-radius: var(--r-1);




  animation: skelett-atmen 1.6s ease-in-out infinite;
}
@keyframes skelett-atmen {
  0%, 100% { opacity: .55; }
  50%      { opacity: .9; }
}
.skelett.zeile   { height: 12px; margin: 6px 0; }
.skelett.kurz    { width: 40%; }
.skelett.mittel  { width: 65%; }
.skelett.lang    { width: 88%; }
.skelett.titel   { height: 15px; width: 45%; margin-bottom: 10px; }
.skelett.kachel  { height: 64px; }
.skelett.zeile-hoch { height: 28px; margin: 4px 0; }




.skelett-liste { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; }
.skelett-liste .skelett { height: 28px; border-radius: var(--r-1); }


.skelett-liste .skelett:nth-child(2) { opacity: .8; }
.skelett-liste .skelett:nth-child(3) { opacity: .6; }
.skelett-liste .skelett:nth-child(4) { opacity: .45; }
.skelett-liste .skelett:nth-child(5) { opacity: .3; }

@media (prefers-reduced-motion: reduce) {
  .skelett { animation: none; opacity: .7; }
}




















@media print {

  :root, html[data-theme="dark"], html[data-theme="light"] {
    --grund: #ffffff; --flaeche: #ffffff; --flaeche-2: #ffffff;
    --flaeche-3: #f2f2f2; --seitenleiste: #ffffff;
    --linie: #cccccc; --linie-weich: #e5e5e5; --linie-stark: #999999;
    --linie-bedien: #999999;
    --text: #000000; --text-2: #333333; --text-3: #595959;
    --p: #2c4d50; --p-tief: #2c4d50; --p-flaeche: #f2f5f5; --p-linie: #cccccc;
    --s: #7a4d40; --s-tief: #7a4d40; --s-flaeche: #f7f2f0; --s-linie: #cccccc;
    --fenster: #ffffff; --fenster-text: #000000; --fenster-text-2: #333333;
    --schatten-1: none; --schatten-2: none; --schatten-3: none;
    --kante: none; --hebung: none;
    --kante-oben: var(--linie); --kante-unten: var(--linie);
    --grund-licht: none;
  }

  body { background: #ffffff; }


  .nav, .kopf, .composer-wrap, .sidebar, .topbar,
  .mehr-wrap, .schublade, .info-karte, .dlg-backdrop,
  .kachelband, .rueckfrage button, .rf-text,
  .stundensatz, .ss-blase, .alarm-rand { display: none !important; }


  .app { display: block; height: auto; }
  .rahmen, .inhalt, .ansicht, .herr-diener, .main { display: block; height: auto; }
  .chat-scroll { overflow: visible; height: auto; max-height: none; }
  .chat-inner { max-width: none; padding: 0; }


  .turn, .msg-user, .toolcard, .karte, .kachel { break-inside: avoid; }




  .toolcard-body { display: none; }
  .toolcard.offen .toolcard-body { display: block; }



  pre, code, .nke, .nke-flaeche, .srv-logs {
    background: #f7f7f7 !important; color: #000000 !important;
    border: 1px solid #cccccc;
  }


  .answer.md a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10px; color: #595959; word-break: break-all;
  }

  a { text-decoration: underline; }
  @page { margin: 16mm 14mm; }
}



























.heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 2px;
  --hm-farbe: var(--p);
}
.heatmap.s { --hm-farbe: var(--s); }
.heatmap-feld {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--flaeche-3);
}
.heatmap-feld[data-stufe="1"] { background: color-mix(in srgb, var(--hm-farbe) 20%, var(--flaeche-3)); }
.heatmap-feld[data-stufe="2"] { background: color-mix(in srgb, var(--hm-farbe) 40%, var(--flaeche-3)); }
.heatmap-feld[data-stufe="3"] { background: color-mix(in srgb, var(--hm-farbe) 62%, var(--flaeche-3)); }
.heatmap-feld[data-stufe="4"] { background: color-mix(in srgb, var(--hm-farbe) 82%, var(--flaeche-3)); }
.heatmap-feld[data-stufe="5"] { background: var(--hm-farbe); }


.heatmap-feld.leer { background: none; border: var(--strich-fein); }
.heatmap-legende {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--text-3);
}
.heatmap-legende i {
  width: 10px; height: 10px; border-radius: 2px; display: block;
  background: var(--flaeche-3);
}




.anteil {
  display: flex; height: 6px; width: 100%;
  border-radius: var(--r-rund); overflow: hidden;
  background: var(--flaeche-3);
}
.anteil > i { display: block; height: 100%; }
.anteil > i:nth-child(1) { background: var(--p); }
.anteil > i:nth-child(2) { background: var(--s); }
.anteil > i:nth-child(3) { background: var(--p-hell); }
.anteil > i:nth-child(4) { background: var(--text-3); }


.anteil-liste {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px;
  font-size: 10.5px; color: var(--text-2);
}
.anteil-liste span { display: inline-flex; align-items: center; gap: 4px; }
.anteil-liste i {
  width: 6px; height: 6px; border-radius: 50%; display: block; flex: none;
}
.anteil-liste span:nth-child(1) i { background: var(--p); }
.anteil-liste span:nth-child(2) i { background: var(--s); }
.anteil-liste span:nth-child(3) i { background: var(--p-hell); }
.anteil-liste span:nth-child(4) i { background: var(--text-3); }
.anteil-liste b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }








.ring { width: 28px; height: 28px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .bahn { stroke: var(--flaeche-3); }
.ring .wert {
  stroke: var(--p); stroke-linecap: round;
  stroke-dasharray: 50.27;
  transition: stroke-dashoffset 140ms ease;
}
.ring.s .wert    { stroke: var(--s); }
.ring.warn .wert { stroke: var(--warn); }
.ring.fehler .wert { stroke: var(--fehler); }

.ring-wrap { position: relative; display: inline-flex; }
.ring-wrap b {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}





.achsen {
  position: relative;
  background-image: repeating-linear-gradient(
    to top, var(--linie-weich) 0 1px, transparent 1px 25%);
  background-size: 100% 100%;
}
.achsen-marken {
  display: flex; justify-content: space-between;
  margin-top: 4px; font-size: 10.5px; color: var(--text-3);
}





.funken .jetzt { fill: var(--p); stroke: none; }
.funken.s { color: var(--s); }
.funken.s .flaeche { fill: var(--s-schleier); }
.funken.s .jetzt { fill: var(--s); }




.gemessen   { background-image: var(--textur-gemessen); }
.geschaetzt { background-image: var(--textur-geschaetzt); }


.textur-hinweis {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--text-3);
}
.textur-hinweis i {
  width: 14px; height: 14px; border-radius: 3px; display: block;
  border: 1px solid var(--linie); background-image: var(--textur-geschaetzt);
}






















.kinder-panel { position: relative; }
.kinder-panel::before {
  content: ""; position: absolute;
  left: -1px; top: 40px; bottom: 40px; width: 0;
  border-left: var(--strich);
  pointer-events: none;
}




.kp-liste .kind { position: relative; }
.kp-liste .kind:not(:last-child)::after {
  content: ""; position: absolute;
  left: 16px; bottom: -8px; height: 8px; width: 0;
  border-left: var(--strich);
  pointer-events: none;
}


.kp-liste .kind[data-status="laeuft"]:not(:last-child)::after {
  border-left: 1px solid var(--p-linie);
}










































.punkt.ring {
  position: relative;
  --stand: 0;
}
.punkt.ring::before {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--flaeche-3);
  pointer-events: none;
}
.punkt.ring::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: currentColor;
  transform: rotate(calc(var(--stand) * 360deg));
  transition: transform 180ms ease;
  pointer-events: none;
}



.punkt.ring.offen::after {
  animation: ring-wandern 1.4s linear infinite;
  transition: none;
}
@keyframes ring-wandern {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .punkt.ring.offen::after { animation-duration: 4s; }
}

























.teil-raster[hidden],
.kopf-sitzung[hidden] { display: none !important; }




#agenten-flaeche.geteilt {
  container-type: inline-size;
  container-name: teilflaeche;
}
#agenten-flaeche.geteilt > :not(.sidebar):not(.teil-raster) { display: none !important; }
#agenten-flaeche.geteilt > .teil-raster {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: grid; gap: var(--luft);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}



#agenten-flaeche.geteilt > .teil-raster[data-anzahl="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#agenten-flaeche.geteilt > .teil-raster[data-anzahl="4"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
@container teilflaeche (max-width: 1500px) {
  #agenten-flaeche.geteilt > .teil-raster[data-anzahl="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  #agenten-flaeche.geteilt > .teil-raster[data-anzahl="3"] > .teil-bereich[data-stelle="0"] {
    grid-row: 1 / 3;
  }
}

.teil-bereich {
  display: block; border: 0; background: transparent;
  margin: -3px; width: calc(100% + 6px); height: calc(100% + 6px);
  min-width: 0; min-height: 0;
  border-radius: calc(var(--r-2) + 3px);
}


.teil-bereich.blitzt { animation: teil-blitz 900ms ease-out; }
@keyframes teil-blitz {
  0%   { box-shadow: 0 0 0 0 var(--p-schleier); }
  30%  { box-shadow: 0 0 0 4px var(--p-linie); }
  100% { box-shadow: 0 0 0 0 var(--p-schleier); }
}
@media (prefers-reduced-motion: reduce) {
  .teil-bereich.blitzt { animation: none; }
}



.conv-item .c-teil {
  flex: none; display: inline-flex; align-items: center;
  color: var(--faint); margin-left: 2px;
}
.conv-item.geteilt:not(.active) { border-color: var(--linie); }



.kmenu-eintrag.aus,
.kmenu-eintrag.aus:hover { color: var(--faint); background: none; cursor: default; }





html.nk-teil .app > .nav,
html.nk-teil .kopf { display: none !important; }
html.nk-teil .app { grid-template-columns: minmax(0, 1fr); }
html.nk-teil .rahmen { grid-column: 1; }



html.nk-teil .spalt-griff,
html.nk-teil #agenten-flaeche > .sidebar { display: none; }
html.nk-teil:not(.teil-anmelden) #view-login { visibility: hidden; }

html.nk-teil[data-teil-art="teil"] body { background: transparent; }
html.nk-teil[data-teil-art="teil"] .app {
  padding: 3px; background: transparent; background-image: none;
}

html.nk-teil[data-teil-art="teil"].teil-fokus #agenten-flaeche > .main {
  border-color: var(--p);
}





.kopf-sitzung {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  height: 32px; max-width: 40%; min-width: 0;
  display: flex; align-items: center; gap: 2px;
}
.kopf-sitzung .ks-name {
  min-width: 0; padding: 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--text-3);
}
html.teil-fokus .kopf-sitzung .ks-name,
html[data-teil-art="fenster"] .kopf-sitzung .ks-name { color: var(--text); }
.kopf-sitzung .ks-zu {
  flex: none; position: relative;
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--faint); cursor: pointer;
}
.kopf-sitzung .ks-zu:hover { color: var(--text); background: var(--flaeche-3); }
.kopf-sitzung .ks-zu:focus-visible { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-schleier); }
.kopf-sitzung.eng {
  position: static; transform: none; order: 99;
  flex: 1 0 100%; max-width: none; height: 24px;
  justify-content: center;
}



.teil-verloren {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 30; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--r-2); box-shadow: var(--schatten-2);
  font-size: 12px; color: var(--text-2);
}
.teil-verloren .tv-text { min-width: 0; }















.chip { position: relative; }
.chip::before {
  content: ""; position: absolute; inset: -2px;

}








.mic-mehr { position: relative; }
.mic-mehr::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -14px;

}


.kopf-sitzung .ks-zu::before {
  content: ""; position: absolute; inset: -3px;

}
.q-oeffnen { min-width: 28px; min-height: 28px; }
.mp-feld select { height: 28px; }







.agent-pick select:focus-visible,
.mp-feld select:focus-visible,
.mic-panel select:focus-visible {
  border-color: var(--p);
  box-shadow: 0 0 0 3px var(--p-schleier);
}




.attach-item .a-spin i {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--flaeche-3); border-top-color: var(--p);
  animation: ring-wandern 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .attach-item .a-spin i { animation-duration: 4s; }
}






.beetle-sicht {
  position: fixed;
  right: calc(18px + min(560px, calc(100vw - 36px)) + 12px);














  top: var(--klein-oben, 18px);
  bottom: auto;
  z-index: 45;
  width: min(520px, calc(100vw - 36px));

  max-height: min(660px, calc(100vh - var(--klein-oben, 18px) - 132px));
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px var(--code-schleier);
  overflow: hidden;
}











.nk-rechts {
  display: flex; flex-direction: column;



  box-sizing: border-box;
  flex: 0 1 auto; min-width: 340px; min-height: 0;
  border-left: 1px solid var(--line);
  overflow: hidden;
}







.nk-rechts > .nke {
  flex: 1 1 auto; min-height: 0;
  width: 100% !important; min-width: 0;
  border-left: none;
}
.beetle-sicht.angedockt {
  position: relative;
  inset: auto;




  width: 100%; min-width: 0; flex: 0 0 auto;
  max-height: 55%;
  border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}




.beetle-sicht.angedockt .bs-bild { flex: 0 1 auto; }






@media (min-width: 1181px) {
  .beetle-sicht.allein { right: 18px; }
}







@media (max-width: 1180px) {
  .beetle-sicht {
    right: auto; bottom: auto;
    left: 18px; top: var(--klein-oben, 18px);
    width: min(520px, calc(100vw - 36px));
    max-height: min(520px, calc(100vh - var(--klein-oben, 18px) - 18px));
  }
}







.kn-fenster {
  position: fixed;
  right: calc(18px + min(560px, calc(100vw - 36px)) + 12px);
  top: var(--klein-oben, 18px); bottom: auto;
  z-index: 45;
  width: min(520px, calc(100vw - 36px));
  height: min(440px, calc(100vh - var(--klein-oben, 18px) - 132px));
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px var(--code-schleier);
  overflow: hidden;
}
.kn-f-koerper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.kn-fenster .bs-kopf { flex: none; }
.bs-quelle--konnektoren { color: var(--p); border-color: var(--p); background: var(--p-flaeche); }


.kn-f-ansicht {
  flex: none; width: 24px; height: 24px; padding: 0; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  color: var(--faint); cursor: pointer;
}
.kn-f-ansicht:hover { background: var(--line-soft); color: var(--text); }
.kn-f-ansicht[aria-pressed="true"] { border-color: var(--p); color: var(--p); background: var(--p-flaeche); }
.kn-f-ansicht svg { width: 13px; height: 13px; fill: none; stroke: currentColor;
                    stroke-width: 1.6; stroke-linecap: round; }
.kn-f-ansicht + .bs-zu { margin-left: 0; }





#netz-btn { cursor: pointer; }
#netz-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-deep); }
@media (min-width: 1181px) {
  .kn-fenster.allein { right: 18px; }
}
@media (max-width: 1180px) {
  .kn-fenster {
    right: auto; left: 18px; top: var(--klein-oben, 18px);
    height: min(420px, calc(100vh - var(--klein-oben, 18px) - 18px));
  }
}

.kn-fenster.angedockt {
  position: relative; inset: auto;
  width: 100%; min-width: 0;
  flex: 0 0 auto; height: 42%;
  border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}

.nk-rechts:has(> .kn-fenster) > .beetle-sicht.angedockt { max-height: 36%; }
.nk-rechts:has(> .beetle-sicht) > .kn-fenster.angedockt { height: 32%; }



.nk-rechts > .sd,
.nk-rechts > .viewer,
.nk-rechts > .kinder-panel {
  flex: 1 1 auto; min-height: 0;
  width: 100% !important; min-width: 0;
  border-left: none;
}




.nk-stapel {
  position: fixed;
  right: calc(18px + min(560px, calc(100vw - 36px)) + 12px);
  top: var(--klein-oben, 18px);
  z-index: 45;
  width: min(520px, calc(100vw - 36px));
  height: min(860px, calc(100vh - var(--klein-oben, 18px) - 132px));
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.nk-stapel > * { pointer-events: auto; }
@media (min-width: 1181px) {
  .nk-stapel.allein { right: 18px; }
}
@media (max-width: 1180px) {
  .nk-stapel { right: auto; left: 18px; height: calc(100vh - var(--klein-oben, 18px) - 18px); }
}
.nk-stapel > .beetle-sicht,
.nk-stapel > .kn-fenster {
  position: relative; inset: auto;
  width: 100%; min-height: 0;
}
.nk-stapel > .beetle-sicht { flex: 0 1 auto; max-height: 55%; }


.nk-stapel > .kn-fenster { flex: 1 1 0; height: auto; min-height: 220px; }
.bs-kopf {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel-2);
  font-size: 10.5px; color: var(--muted);
}
.bs-zeit { font-variant-numeric: tabular-nums; color: var(--text); }






.bs-quelle {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 4px;
    border: 1px solid;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bs-quelle--os_hook { color: #DEB887; border-color: #DEB887;
                      background: rgba(222,184,135,.12); }
.bs-quelle--browser { color: var(--accent); border-color: var(--accent);
                      background: rgba(76,117,121,.14); }



.bs-mini--browser { border-bottom: 2px solid var(--accent); }
.bs-mini--os_hook { border-bottom: 2px solid #DEB887; }
.bs-masse { font-variant-numeric: tabular-nums; }
.bs-zahl {
  margin-left: auto; padding: 1px 7px; border-radius: 9px;
  background: rgba(222, 184, 135, .18); color: #8a6d00; font-weight: 600;
}
.bs-zu {
  flex: none; width: 24px; height: 24px; padding: 0; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; background: transparent;
  color: var(--faint); cursor: pointer;
}
.bs-zahl + .bs-zu { margin-left: 0; }
.bs-zu:hover { background: var(--line-soft); color: var(--text); }
.bs-zu svg { width: 13px; height: 13px; fill: none; stroke: currentColor;
             stroke-width: 1.6; stroke-linecap: round; }

.bs-bild { position: relative; overflow: auto; line-height: 0; }
.bs-bild img { width: 100%; display: block; }




.beetle-klick {
  position: absolute;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid #DEB887;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 8px rgba(222, 184, 135, .9);
  cursor: help;
}
.beetle-klick i {
  position: absolute; top: -8px; right: -8px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: #DEB887; color: #1e1e1e;
  font: 600 10px/15px system-ui, sans-serif; letter-spacing: var(--spur); font-style: normal;
  text-align: center;
}


.bs-streifen {
  flex: none; display: flex; flex-wrap: wrap; gap: 5px;
  padding: 7px 10px; border-top: 1px solid var(--line-soft);
  background: var(--panel-2);
}
.bs-mini {
  min-width: 22px; height: 22px; padding: 0 5px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); color: var(--muted);
  font: 600 10px/1 system-ui, sans-serif; letter-spacing: var(--spur); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.bs-mini:hover { border-color: var(--accent); color: var(--accent); }
.bs-mini.an { background: #DEB887; border-color: #DEB887; color: #1e1e1e; }


.bs-auf { cursor: pointer; }
.bs-auf:hover .beetle-text { text-decoration: underline; }









.sd {
  position: relative; display: flex; flex-direction: column;









  flex: 0 1 auto; width: 48%; min-width: 380px; min-height: 0;
  border-left: 1px solid var(--line); background: var(--panel); overflow: hidden;
}
.sd-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; }
.sd-grip:hover { background: var(--accent-soft); }
.sd-kopf {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 9px; flex: none;
  border-bottom: 1px solid var(--line); background: var(--panel-2);
}


.sd-kopf-zeile { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sd-kopf-unten { gap: 10px; }
.sd-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.sd-sub > span + span::before { content: "· "; color: var(--faint); }

.sd-zeichen { width: 15px; height: 15px; flex: none; color: var(--accent); }



.sd-titel {
  font-size: 12px; font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd-sub { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sd-spacer { flex: 1; }
.sd-btn {



  width: 26px; height: 26px; flex: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius); color: var(--muted);
}
.sd-btn:hover { background: var(--flaeche-3); color: var(--text); }
.sd-btn svg { width: 13px; height: 13px; }




.sd-koerper { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.sd-strahl {
  position: relative; flex: none; width: 58px;
  border-right: 1px solid var(--line); background: var(--panel-2);
  user-select: none;


  overflow: hidden;
}
.sd-strahl.zieht { cursor: ns-resize; }
.sd-strahl svg { display: block; width: 100%; }
.sd-str-uhr { font-size: 9px; fill: var(--faint); font-variant-numeric: tabular-nums; }
.sd-str-tick { stroke: var(--line); stroke-width: 1; }


.sd-str-pause { fill: var(--grund); opacity: .5; }
.sd-str-schnitt { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 2; }


.sd-str-weg { font-size: 11px; font-weight: 600; fill: var(--muted); }


.sd-str-tag { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 2 3; }
.sd-str-datum { font-size: 8.5px; fill: var(--text-3); letter-spacing: .02em; }
.sd-str-lauf { stroke: none; }
.sd-str-lauf.ist-draussen { opacity: .28; }


.sd-str-schatten { fill: var(--grund); opacity: .58; }
.sd-str-fenster { fill: none; stroke: none; }
.sd-str-fenster.ist-gewaehlt { stroke: var(--accent); stroke-width: 1; }
.sd-str-griff { stroke: var(--accent); stroke-width: 1.5; }
.sd-str-griffbalken { fill: var(--accent); }
.sd-strahl:hover .sd-str-griffbalken { fill: var(--accent-deep); }




.sd-str-i { position: absolute; left: 6px; top: 4px; z-index: 3; }
.sd-str-marke {
  position: absolute; left: 66px; z-index: 4;
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 9px; border-radius: var(--radius);
  background: var(--fenster); border: 1px solid var(--fenster-linie);
  box-shadow: var(--fenster-schatten);
  font-size: 11px; color: var(--fenster-text-2); white-space: nowrap;
  pointer-events: none;
}
.sd-str-marke b { font-size: 11.5px; color: var(--fenster-text); font-weight: 600; }
.sd-str-marke[hidden] { display: none; }

.sd-fensterweg {
  font: inherit; font-size: 11px; color: var(--accent-deep);
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.sd-fensterweg:hover { color: var(--accent); }
.sd-fensterweg[hidden] { display: none; }

.sd-rumpf { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; }
.sd-inhalt { padding: 12px 14px 28px; display: flex; flex-direction: column; gap: 16px; }



.sd-i { width: 14px; height: 14px; font-size: 10px; }


.sd-raster1 { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sd-kachel {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.sd-k-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sd-k-titel {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-k-wert { display: flex; align-items: baseline; gap: 4px; }
.sd-k-zahl { font-size: 18px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sd-k-einheit { font-size: 10.5px; color: var(--muted); }

.sd-k-laeufe {
  margin-left: auto; align-self: center; flex: none;
  padding: 1px 8px; border-radius: 999px;
  font-size: 10px; line-height: 15px; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--text-3); background: var(--line-soft, rgba(127, 127, 127, .12));
  white-space: nowrap;
}
.sd-k-bar { height: 4px; border-radius: 3px; background: var(--flaeche-3); overflow: hidden; }
.sd-k-bar i { display: block; height: 100%; border-radius: 3px; }
.sd-k-klein { font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sd-kachel.sd-prog { border-style: dashed; background: transparent; }
.sd-kachel.sd-prog .sd-k-zahl { color: var(--text-2); }

.sd-warnung {
  display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 6px 10px;
  border-radius: var(--radius); background: var(--warn-flaeche);
  border: 1px solid var(--warn-linie); color: var(--warn-tief);
}


.sd-abschnitt { display: flex; flex-direction: column; gap: 7px; }
.sd-h {
  display: flex; align-items: center; gap: 7px; margin: 0;
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.sd-leer { font-size: 11.5px; color: var(--muted); padding: 10px; text-align: center; }


.sd-wert { display: flex; align-items: center; gap: 14px; }
.sd-wert-reihe { flex: 1; padding: 22px 34px 26px; }
.sd-wert-bahn { position: relative; height: 10px; border-radius: 5px; border: 1px solid var(--line); }
.sd-marke { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 1px dashed var(--text-3); }
.sd-marke b {
  position: absolute; top: -16px; left: 0; transform: translateX(-50%);
  font-size: 9px; font-weight: 500; font-style: normal; color: var(--text-3); white-space: nowrap;
}
.sd-marke b { line-height: 12px; }
.sd-marke.hoch b { top: -30px; }
.sd-wert-reihe.sd-wert-hoch { padding-top: 38px; }
.sd-zeiger {
  position: absolute; top: -9px; bottom: -9px; width: 3px; margin-left: -1.5px;
  border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--panel);
}
.sd-zeiger b {
  position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; font-style: normal; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sd-badge {
  flex: none; font-size: 12px; font-weight: 700; padding: 5px 10px;
  border-radius: 999px; font-variant-numeric: tabular-nums;
}


.sd-buehne {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; display: flex; flex-direction: column; gap: 6px;
}











.sd-svg { width: 100%; display: block; stroke: none; }
.sd-svg text { stroke: none; paint-order: fill; }
.sd-raster { stroke: var(--line); stroke-width: 1; }
.sd-achse { fill: var(--text-3); font-size: 10px; font-family: inherit;
            font-weight: 400; stroke: none; }
.sd-achse-r { fill: var(--sd-quote); }
.sd-balken { transition: opacity 120ms; }
.sd-balken:hover { opacity: .75; }
.sd-balken-aus { fill: var(--text); opacity: .42; }
.sd-linie { fill: none; stroke: var(--sd-quote); stroke-width: 2; stroke-linejoin: round; }
.sd-linie-duenn { fill: none; stroke: var(--text-3); stroke-width: 1; opacity: .6; }
.sd-linie-ueblich { stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sd-punkt { fill: var(--sd-quote); }
.sd-punkt-satz { stroke: var(--panel-2); stroke-width: 1.5; }
.sd-punkt-wkz { fill: var(--sd-quote); stroke: var(--panel-2); stroke-width: 1.5; }
.sd-quote-linie { fill: none; stroke: var(--sd-quote); stroke-width: 1.8; stroke-linejoin: round; }





.sd-kfeld { fill: var(--line); opacity: .07; }
.sd-kfeld[data-gerade="1"] { opacity: .13; }

.sd-kfeld, .sd-knr { cursor: pointer; }
.sd-kfeld:hover { opacity: .24; }
.sd-kflaeche { fill: var(--sd-blau); opacity: .16; stroke: none; }
.sd-kstueck { fill: none; stroke-width: 2; stroke-linecap: round; }
.sd-kstueck.sd-k-steigt { stroke: var(--sd-steigt); stroke-width: 2; }
.sd-kstueck.sd-k-faellt { stroke: var(--sd-faellt); stroke-width: 2.6; }
.sd-kstueck.sd-k-gleich { stroke: var(--sd-quote); stroke-width: 2; }
.sd-kpunkt { fill: var(--sd-quote); cursor: pointer; }
.sd-kpunkt.sd-k-start { fill: var(--sd-quote); }
.sd-kpunkt.sd-k-gleich { fill: var(--text-3); }
.sd-kpunkt.sd-k-steigt { fill: var(--sd-steigt); }
.sd-kpunkt.sd-k-faellt { fill: var(--sd-faellt); }
.sd-kpunkt:hover { stroke: var(--text); stroke-width: 1.5; }
.sd-kpunkt.ist-gewaehlt { stroke: var(--text); stroke-width: 2; r: 5; }




.sd-kdetail { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.sd-kd-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.sd-kd-wo { font-weight: 600; color: var(--text); }
.sd-kd-zahl { color: var(--sd-quote); font-variant-numeric: tabular-nums; }
.sd-kd-fehlt { color: var(--text-3); font-size: 11px; }
.sd-kd-zahlen { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; }
.sd-kd-paar { display: inline-flex; gap: 5px; align-items: baseline; }

.sd-kd-lauf { cursor: pointer; }
.sd-kd-lauf b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .95em; letter-spacing: .02em; }
.sd-kd-lauf:hover b { text-decoration: underline; }
.sd-kd-lauf.is-kopiert b { color: var(--ok, #2f7d32); }
.sd-kd-paar i { font-style: normal; color: var(--text-3); font-size: 10.5px; }
.sd-kd-paar b { font-weight: 500; color: var(--text-2);
                font-variant-numeric: tabular-nums; }
.sd-kd-wz { display: flex; flex-direction: column; gap: 5px; }
.sd-kd-w { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
           padding: 5px 8px; border-radius: 7px; background: var(--panel-2);
           border: 1px solid color-mix(in srgb, var(--sd-quote) 50%, transparent); }
.sd-kd-w.ist-fehler { border-color: color-mix(in srgb, var(--fehler) 50%, transparent); }
.sd-kd-w b { font-weight: 600; color: var(--text); }
.sd-kd-w i { font-style: normal; color: var(--text-2); }
.sd-kd-ms { color: var(--text-3); font-variant-numeric: tabular-nums;
            margin-left: auto; }
.sd-kd-kurz { flex-basis: 100%; color: var(--text-3); font-size: 10.5px; }
.sd-kd-leer { color: var(--text-3); }





.sd-zeit-luecke { fill: var(--line); opacity: .10; }
.sd-zeit-luecke-schrift { fill: var(--text-3); font-size: 10px; }
.sd-zeit-tick { stroke: var(--line); stroke-width: 1; opacity: .5; }


.sd-zeit-rahmen { fill: transparent; stroke: rgba(0,0,0,.35); stroke-width: 1;
                  cursor: pointer; }
.sd-zeit-rahmen:hover { stroke: var(--text-2); stroke-width: 1.5; }
.sd-zeit-rahmen.ist-gewaehlt { stroke: var(--text); stroke-width: 2; }



.sd-zeit-rahmen.pulst {
  stroke: var(--sd-puls); stroke-width: 2;
  animation: sd-rahmen-puls 1.1s ease-in-out infinite;
}
@keyframes sd-rahmen-puls {
  0%, 100% { stroke-opacity: .3;  stroke-width: 1.5; filter: none; }
  50%      { stroke-opacity: 1;   stroke-width: 3;   filter: drop-shadow(0 0 3px var(--sd-puls)); }
}
@media (prefers-reduced-motion: reduce) {
  .sd-zeit-rahmen.pulst { animation: none; stroke-width: 3; }
}
.sd-zeitdetail { margin-top: 10px; border-top: 1px solid var(--line);
                 padding-top: 10px; }



.sd-kmedian { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 5 4;
              opacity: .75; fill: none; }
.sd-kmedian-schrift { fill: var(--text-3); font-size: 10px; }



.sd-kluecke { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 5;
              opacity: .45; fill: none; }
.sd-kohne { stroke: var(--text-3); stroke-width: 1.4; fill: none;
            opacity: .8; cursor: pointer; }
.sd-kohne:hover { stroke: var(--text); opacity: 1; }










.sd-startschalter { margin-left: auto; border: 0; background: none;
                    padding: 0 0 1px; font: inherit; letter-spacing: var(--spur);
                    letter-spacing: inherit; text-transform: inherit;
                    color: var(--text-3); cursor: pointer;
                    border-bottom: 1px solid transparent; }
.sd-startschalter.ist-an { color: var(--text); }
.sd-startschalter:hover,
.sd-startschalter:focus-visible { color: var(--text);
                                  border-bottom-color: var(--text-3); }
.sd-kstart-linie { fill: none; stroke: var(--sd-quote); stroke-width: 1.4;
                   stroke-linecap: round; opacity: .85;
                   stroke-dasharray: 7 3; }
.sd-kstart-linie.sd-k-faellt { stroke: var(--sd-faellt); stroke-width: 2;
                               opacity: 1; }
.sd-quote-punkt { fill: var(--sd-quote); }
.sd-zeit-grund { fill: var(--flaeche-3); }

.sd-geist { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-dasharray: 4 3; }
.sd-band { fill: var(--text-3); opacity: .13; }
.sd-linie-geist { fill: none; stroke: var(--text-3); stroke-width: 1.6; stroke-dasharray: 5 4; }
.sd-trenner { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }

.sd-raum-bild { width: 100%; height: 380px; display: block; cursor: var(--nk-hand-offen); }
.sd-raum-bild:active { cursor: var(--nk-hand-zu); }
.sd-gross .sd-buehne { padding: 6px; }

.sd-legende { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.sd-lg { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-3); }
.sd-lg i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sd-lg i.geist { background: transparent; border: 1px dashed var(--text-3); }





.sd-anb-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
                margin-top: 8px; font-size: 11px; }
.sd-anb-titel { font-style: normal; color: var(--text-3); margin-right: 2px; }
.sd-anb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px;
               border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
               color: var(--text); white-space: nowrap; }
.sd-anb-chip.ist-offen { border-style: dashed; color: var(--text-2); }
.sd-anb-chip b { font-weight: 600; }
.sd-anb-n, .sd-anb-eur, .sd-anb-verm { color: var(--text-3); font-variant-numeric: tabular-nums; }
.sd-anb-leer { color: var(--text-3); }


.sd-flagge { flex: none; vertical-align: -1px; width: 16px; height: 11px; stroke: none; }
.sd-anb-punkt { fill: var(--sd-anb); }
.sd-anb-offen { fill: none; stroke: var(--sd-anb); stroke-width: 1.5; stroke-dasharray: 2 2; }
.sd-anb-linie { stroke: var(--line-soft); stroke-width: 1; }
.sd-anb-ohne { stroke: var(--text-3); stroke-width: 1; opacity: .55; }
.sd-anb-wahl { fill: var(--sd-anb); opacity: .12; }
.sd-anb-name { fill: var(--text-2); font-size: 11px; }
.sd-anb-summe { fill: var(--text-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }

.sd-anb-best { width: 12px; height: 12px; color: var(--sd-anb); }





.sd-uw .sd-k-titel { display: inline-flex; align-items: center; gap: 5px; }
.sd-uw-zeichen { width: 14px; height: 14px; color: var(--text-2); }
.sd-uw-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
               margin-top: 6px; font-size: 11px; }
.sd-uw-wert { display: inline-flex; align-items: center; gap: 4px; }
.sd-uw-wert b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sd-uw-balken { fill: var(--text); opacity: .42; }
.sd-uw-balken.ist-teil { opacity: 1; fill-opacity: .16; stroke: var(--text-2);
                         stroke-width: 1; stroke-dasharray: 3 2; }
.sd-uw-wahl { fill: var(--text); opacity: .06; }


.sd-modelle { display: flex; flex-direction: column; gap: 5px; }
.sd-modell {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 6px 9px;
  border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--line);
  font-size: 11.5px; overflow: hidden;
}
.sd-m-bar { position: absolute; left: 0; top: 0; bottom: 0; opacity: .16; z-index: 0; }
.sd-modell > span { position: relative; z-index: 1; }
.sd-m-name { flex: 1; }
.sd-m-runs { color: var(--muted); font-variant-numeric: tabular-nums; }
.sd-m-eur { font-weight: 600; font-variant-numeric: tabular-nums; }


.sd-tab-huelle { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.sd-tab { width: 100%; border-collapse: collapse; font-size: 11px; }
.sd-tab th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; white-space: nowrap;
  padding: 7px 9px; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.sd-tab td { padding: 6px 9px; white-space: nowrap; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.sd-tab tr:last-child td { border-bottom: 0; }
.sd-tab tr:hover td { background: var(--flaeche-3); }
.sd-tab .r { text-align: right; }
.sd-blass { color: var(--text-3); }
.sd-eur { font-weight: 600; }
.sd-status { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--flaeche-3); color: var(--muted); }
.sd-status[data-s="success"] { background: var(--ok-flaeche); color: var(--ok-tief); }
.sd-status[data-s="partial"] { background: var(--warn-flaeche); color: var(--warn-tief); }
.sd-status[data-s="error"]   { background: var(--fehler-flaeche); color: var(--fehler-tief); }



























.app {
  background: var(--grund);
  padding: var(--luft);
  gap: var(--luft);
}
.rahmen { gap: var(--luft); }
.herr-diener { gap: var(--luft); }
















.nav,
.kopf,
.sidebar,
.main,
.kinder-panel,
.nke,
.nk-rechts,
.sd,
.viewer,
.wk-schicht,
.af-kachel,
.ansicht.blaettert {
  border: 1px solid var(--linie);
  border-radius: var(--r-2);



  box-shadow: var(--hebung);
  border-top-color: var(--kante-oben);
  border-bottom-color: var(--kante-unten);
}



.main,
.ansicht.blaettert { background: var(--flaeche); }









.sidebar,
.kinder-panel,
.nk-rechts,
.wk-schicht,
.af-kachel,
.viewer { overflow: hidden; }






.nk-rechts > .nke,
.nk-rechts > .sd,
.nk-rechts > .viewer,
.nk-rechts > .kinder-panel {
  border: 0; border-radius: 0; box-shadow: none;
}




.topbar {
  border-radius: calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0 0;
}




.app { background-image: var(--grund-licht); }







@media (max-width: 1520px) { :root { --luft: 6px; } }


















.spalt-griff {
  position: absolute; top: 0; bottom: 0; z-index: 40;



  left: calc(-1 * (var(--luft) + 3px));
  width: calc(var(--luft) + 6px);
  cursor: col-resize;
}



.spalt-griff::before {
  content: ""; position: absolute;
  top: 10px; bottom: 10px; left: 50%; width: 2px; margin-left: -1px;
  border-radius: var(--r-rund); background: var(--p);
  opacity: 0; transition: opacity 120ms ease;
}
.spalt-griff:hover::before,
.spalt-griff.zieht::before { opacity: .5; }
body.resizing .spalt-griff::before { opacity: .5; }





body.resizing .app { transition: none; }




























.topbar .chip {
  width: 28px; height: 28px; padding: 0;
  justify-content: center;
  background: none;
  border-color: transparent;
  box-shadow: none;
  border-radius: var(--r-1);
  color: var(--text-2);
}
.topbar .chip > svg { width: 16px; height: 16px; }












.topbar .chip { font-size: 0; }
.topbar .chip > :not(svg) {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.topbar .chip:hover {
  background: var(--flaeche-3); border-color: transparent; color: var(--text);
}
.topbar .chip.on,
.topbar .chip[aria-pressed="true"] {
  background: none; border-color: transparent; color: var(--accent-deep);
}
.topbar .chip.on:hover,
.topbar .chip[aria-pressed="true"]:hover {
  background: var(--flaeche-3); border-color: transparent;
}












.topbar .mehr-menu .chip,
.topbar .mehr-menu .chip.on,
.topbar .mehr-menu .chip[aria-pressed="true"] {
  width: auto; height: 24px; padding: 0 8px;
  justify-content: flex-start;
  font-size: 11.5px;
  border-radius: var(--r-rund);
  background: var(--flaeche);
  border-color: var(--linie);
}
.topbar .mehr-menu .chip > svg { width: 13px; height: 13px; }
.topbar .mehr-menu .chip > :not(svg) {
  position: static; width: auto; height: auto;
  overflow: visible; clip-path: none;
}



.topbar .agent-knopf {
  background: none; border-color: transparent; box-shadow: none;
}
.topbar .agent-knopf:hover { background: var(--flaeche-3); border-color: transparent; }


.topbar .agent-pick > span { display: none; }


.kopf-werkzeuge .usage,
.kopf-werkzeuge .mb-main,
.kopf-werkzeuge .mb-more {
  background: none;
  border-color: transparent;
  box-shadow: none;
}



.kopf-werkzeuge .usage:not([data-lage]) svg { color: var(--text); }
.kopf-werkzeuge .mb-main svg,
.kopf-werkzeuge .mb-more svg { color: var(--text); }













.kopf-werkzeuge .usage { cursor: pointer; }
.kopf-werkzeuge .usage:hover,
.kopf-werkzeuge .kosten-wrap .kosten-btn:hover,
.kopf-werkzeuge .mb-main:hover,
.kopf-werkzeuge .mb-more:hover {
  background: var(--flaeche-3); border-color: transparent;
}
.kopf-werkzeuge .usage-wrap.offen .usage,
.kopf-werkzeuge .kosten-wrap.offen .kosten-btn,
.kopf-werkzeuge .sperre-wrap.offen .usage {
  background: var(--flaeche-3); border-color: transparent;
}








.kopf-werkzeuge .media-btn .mb-main { padding: 4px 3px 4px 6px; }
.kopf-werkzeuge .media-btn .mb-more { padding: 4px 5px 4px 1px; }

.topbar .agent-knopf { gap: 4px; }
.topbar .agent-knopf .ak-pfeil { margin-left: -1px; }


































.wk-karte {
  position: absolute;












  left: 0;
  bottom: calc(100% - 14px);



  z-index: 0;
  display: flex; align-items: center; gap: 9px;
  max-width: min(300px, 58%);
  padding: 7px 13px 9px 12px;



  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  background: var(--flaeche);
  box-shadow: var(--schatten-2), var(--kante);
  color: var(--text-2);
  font: inherit; letter-spacing: var(--spur); font-size: 12px; line-height: 1.25;
  text-align: left; cursor: pointer;
  transform-origin: 88% 100%;
  transform: rotate(-3deg);
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease;


  animation: wk-wackeln 1.1s cubic-bezier(.36,.07,.19,.97) .25s 1 both;
}
.wk-karte:hover,
.wk-karte:focus-visible {
  transform: rotate(-1.2deg) translate(-2px, -3px);
  box-shadow: var(--schatten-3), var(--kante);
  color: var(--text);
  outline: none;
}
.wk-karte:focus-visible { border-color: var(--p); }


.wk-karte[data-leer] {
  border: var(--strich);
  background: var(--flaeche-2);
  box-shadow: none;
  color: var(--text-3);
}
.wk-karte[data-leer] .wk-k-icon { color: var(--text-3); }
.wk-karte[data-leer] .wk-k-text b { color: var(--text-2); font-weight: 500; }
.wk-karte[data-leer]:hover { color: var(--text); box-shadow: var(--schatten-2); }
.wk-karte[data-leer]:hover .wk-k-icon { color: var(--p); }
.wk-k-icon { flex: none; width: 14px; height: 14px; color: var(--s-tief); }
.wk-k-icon svg { width: 14px; height: 14px; }
.wk-k-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wk-k-was {
  font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.wk-k-text b {
  font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-k-zahl {
  flex: none; height: 18px; min-width: 18px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-rund);
  background: var(--p-flaeche); color: var(--p-tief);
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wk-k-zahl[hidden] { display: none; }
@keyframes wk-wackeln {
  0%   { transform: rotate(-3deg) translateY(8px); opacity: 0; }
  35%  { transform: rotate(-6deg) translateY(0);   opacity: 1; }
  58%  { transform: rotate(-.8deg); }
  78%  { transform: rotate(-4deg); }
  100% { transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-karte { animation: none; }
  .wk-karte:hover, .wk-karte:focus-visible { transform: rotate(-3deg); }
  .wk-schicht, .wk-pop { animation: none; }
}








.wk-schicht [data-farbe="gut"],      .wk-karte [data-farbe="gut"],
.wk-schicht [data-farbe="gruen"],    .wk-karte [data-farbe="gruen"]
  { --wm: var(--marke-gut);      --wf: var(--fenster-ok); }
.wk-schicht [data-farbe="frage"],    .wk-karte [data-farbe="frage"],
.wk-schicht [data-farbe="blau"],     .wk-karte [data-farbe="blau"]
  { --wm: var(--marke-frage);    --wf: var(--fenster-warn); }
.wk-schicht [data-farbe="kritisch"], .wk-karte [data-farbe="kritisch"],
.wk-schicht [data-farbe="rot"],      .wk-karte [data-farbe="rot"]
  { --wm: var(--marke-kritisch); --wf: var(--fenster-fehler); }
.wk-schicht [data-farbe="hinweis"],  .wk-karte [data-farbe="hinweis"],
.wk-schicht [data-farbe="hell"],     .wk-karte [data-farbe="hell"]
  { --wm: var(--marke-hinweis);  --wf: var(--fenster-s); }










.wk-schicht {
  position: relative;




  flex: 0 1 auto;











  width: 62%;




  min-width: 360px;
  max-width: calc(100% - 300px);
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans); font-size: 12px; line-height: 1.5;
  overflow: hidden;
  animation: wk-auf 140ms ease-out;
}
@keyframes wk-auf {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: none; }
}
.wk-schicht[hidden] { display: none !important; }








.wk-spaltgriff {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  cursor: col-resize; z-index: 6;
}
.wk-spaltgriff:hover, .wk-spaltgriff.zieht { background: var(--p-flaeche); }




















.wk-kopf {
  flex: none; min-height: 44px;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 4px;
  padding: 5px 10px 5px 14px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  box-shadow: var(--kante);
}
.wk-gruppe { flex: none; }

.wk-rechts { margin-left: auto; }
.wk-kopf > * { flex: none; }
.wk-titel { flex: 0 1 auto; }


.wk-rechts { position: sticky; right: -10px; background: var(--flaeche);
             padding-left: 6px; }
.wk-titel {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; margin-right: 10px;
}
.wk-t-icon { flex: none; color: var(--s); display: inline-flex; }
.wk-titel b {
  font-size: 12px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-titel code {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-titel code[hidden] { display: none; }
.wk-gruppe { display: flex; align-items: center; gap: 2px; }
.wk-gruppe .info { margin-left: 5px; }
.wk-trenner { flex: none; width: 1px; height: 18px; margin: 0 8px; background: var(--linie); }
.wk-rechts { margin-left: auto; display: flex; align-items: center; gap: 2px; }


.wk-wz {
  width: 28px; height: 28px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--text-2); cursor: pointer;
  transition: 140ms ease;
}
.wk-wz svg { width: 15px; height: 15px; }
.wk-wz:hover { background: var(--flaeche-3); color: var(--text); }
.wk-wz[aria-pressed="true"],
.wk-wz[aria-expanded="true"] {
  background: var(--p-flaeche); border-color: var(--p-linie); color: var(--p-tief);
}
.wk-wz:active { transform: translateY(1px); transition-duration: 60ms; }
.wk-wz.wk-zu:hover { color: var(--fehler); }



.wk-gewichte { display: flex; align-items: center; gap: 3px; }
.wk-gewicht {
  width: 18px; height: 18px; flex: none; padding: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--linie); border-radius: 3px;
  cursor: pointer; transition: 140ms ease;
}
.wk-gewicht i {
  display: block; width: 100%; height: 100%;
  background: var(--text-2); border-radius: 1px;
}
.wk-gewicht:hover { border-color: var(--linie-stark); }
.wk-gewicht[aria-pressed="true"] { border-color: var(--p); background: var(--p-flaeche); }
.wk-gewicht[aria-pressed="true"] i { background: var(--p-tief); }


.wk-farben { gap: 7px; padding: 0 3px; }
.wk-farbe {
  width: 16px; height: 16px; flex: none; padding: 0;
  position: relative;
  border: 1px solid var(--linie-stark); border-radius: 50%;
  background: var(--wf); cursor: pointer;
  transition: 140ms ease;
}
.wk-farbe::after { content: ""; position: absolute; inset: -6px; }
.wk-farbe:hover { transform: scale(1.12); }
.wk-farbe[aria-pressed="true"] {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 3.5px var(--text);
}


.wk-koerper { flex: 1 1 auto; display: flex; min-height: 0; }
.wk-buehne {
  flex: 1 1 auto; position: relative; min-width: 0;
  background: var(--buehne);
  overflow: hidden;
}
.wk-buehne iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; background: var(--buehne);
}



.wk-zeichnen { position: absolute; inset: 0; pointer-events: none; }







.wk-buehne .wk-zeichnen { pointer-events: auto; }
.wk-buehne[data-werkzeug="zeiger"] .wk-zeichnen { pointer-events: none; }
.wk-buehne[data-werkzeug="rahmen"]   { cursor: crosshair; }
.wk-buehne[data-werkzeug="pinsel"]   { cursor: cell; }
.wk-buehne[data-werkzeug="radierer"] { cursor: not-allowed; }
.wk-buehne[data-werkzeug="bauen"]    { cursor: pointer; }
.wk-buehne[data-werkzeug="waehlen"]  { cursor: default; }
.wk-zeichnen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }




.wk-nummer {
  position: absolute;
  height: 18px; min-width: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-1);
  background: var(--wm); color: var(--marke-text);
  font: 600 10.5px/1 var(--sans); letter-spacing: var(--spur); font-variant-numeric: tabular-nums;
  white-space: nowrap; pointer-events: auto; cursor: pointer;
  box-shadow: var(--schatten-1);
}
.wk-nummer.ist-gewaehlt { box-shadow: 0 0 0 2px var(--buehne), 0 0 0 3.5px var(--wm); }
.wk-buehne[data-nummern="aus"] .wk-nummer { display: none; }




.wk-fuehler {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  max-width: calc(100% - 20px);
  display: inline-flex; align-items: center; gap: 8px;
  height: 24px; padding: 0 10px;
  border: 1px solid var(--linie-stark); border-radius: var(--r-rund);
  background: var(--flaeche); color: var(--text);
  font-family: var(--mono); font-size: 10.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.wk-fuehler[hidden] { display: none; }
.wk-fuehler i { font-style: normal; color: var(--text-3); }


.wk-spalte {
  flex: none; width: var(--wk-spalte, 320px); min-width: 260px; max-width: 60%;
  position: relative;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--linie);
  background: var(--grund);
}
.wk-griff {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 2;
}
.wk-griff:hover, .wk-griff.zieht { background: var(--p); opacity: .35; }

.wk-spalte-kopf {
  flex: none; height: 40px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 6px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.wk-spalte-kopf .reiter-reihe { border-bottom: none; align-self: stretch; }
.wk-spalte-kopf .reiter {
  height: 100%; padding: 0 8px; margin-bottom: 0;
  border-bottom-width: 2px; font-size: 12px;
}
.wk-zaehler { margin-left: auto; display: flex; align-items: center; gap: 3px; }


.wk-zf {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px 0 6px;
  background: none; border: 1px solid transparent; border-radius: var(--r-rund);
  color: var(--text-2); font: inherit; letter-spacing: var(--spur); font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: 140ms ease;
}
.wk-zf::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wf); }
.wk-zf:hover { background: var(--flaeche-3); color: var(--text); }
.wk-zf[aria-pressed="true"] { border-color: var(--linie-stark); background: var(--flaeche-3); color: var(--text); }

.wk-liste {
  flex: 1 1 auto; overflow-y: auto; padding: 10px;
  scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent;
}
.wk-leer {
  height: 100%; min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-3); font-size: 11.5px;
}
.wk-leer svg { width: 22px; height: 22px; opacity: .7; }


.wk-notiz {
  position: relative;
  margin-bottom: 8px; padding: 8px 10px 9px 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r-2);
  box-shadow: var(--kante);
  transition: 140ms ease;
}
.wk-notiz::before {
  content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--wf);
}
.wk-notiz.ist-gewaehlt { border-color: var(--p-linie); box-shadow: 0 0 0 1px var(--p-linie), var(--kante); }
.wk-n-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wk-n-nr {
  flex: none; height: 18px; min-width: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--wf) 22%, transparent); color: var(--wf);
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wk-n-ziel {
  min-width: 0; flex: 1 1 auto;
  font-family: var(--mono); font-size: 11.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-n-weg {
  flex: none; width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-1); background: none;
  color: var(--text-3); cursor: pointer;
}
.wk-n-weg svg { width: 12px; height: 12px; }
.wk-n-weg:hover { background: var(--fehler-flaeche); color: var(--fehler); }
.wk-notiz textarea {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 44px; resize: vertical;
  padding: 6px 8px;
  background: var(--flaeche-2); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--r-1);
  font: inherit; letter-spacing: var(--spur); font-size: 12px; line-height: 1.45;
}
.wk-notiz textarea::placeholder { color: var(--text-3); }
.wk-notiz textarea:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px var(--p-schleier); }
.wk-n-fuss { display: flex; align-items: center; gap: 8px; margin-top: 7px; min-height: 16px; }
.wk-n-fuss .wk-farben { gap: 6px; padding: 0 2px; }
.wk-n-fuss .wk-farbe { width: 13px; height: 13px; }
.wk-n-fuss .wk-farbe[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 3px var(--text); }

.wk-n-code {
  margin-left: auto; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-n-code b { font-weight: 600; color: var(--text-2); }
.wk-n-code .punkt { width: 3px; height: 3px; background: var(--linie-stark); }
.wk-n-code.laedt b { color: var(--text-3); animation: punkt-atmen 1.6s ease-in-out infinite; }

.wk-spalte-fuss {
  flex: none; padding: 10px;
  background: var(--flaeche); border-top: 1px solid var(--linie);
}
.wk-spalte-fuss .btn { width: 100%; height: 32px; }


.wk-vorschau {
  margin: 0; padding: 10px 12px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: var(--r-1);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.55; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
}






.wk-ablage {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--grund);
}
.wk-a-karte {
  width: min(420px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 28px 24px 24px;
  border: var(--strich); border-radius: var(--r-3);
  background: var(--flaeche);
  text-align: center;
  transition: 140ms ease;
}
.wk-ablage.drueber .wk-a-karte {
  border: 1px dashed var(--p);
  background: var(--p-flaeche);
}
.wk-a-icon { color: var(--text-3); margin-bottom: 4px; }
.wk-a-icon svg { width: 26px; height: 26px; }
.wk-ablage.drueber .wk-a-icon { color: var(--p); }
.wk-a-karte h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.wk-a-zeile {
  display: flex; align-items: center; gap: 6px;
  margin: 0; font-size: 11.5px; color: var(--text-3);
}
.wk-a-knoepfe { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.wk-a-knoepfe .btn { height: 30px; }
.wk-a-stand {
  margin: 12px 0 0; font-size: 11.5px; color: var(--text-2);
  max-width: 100%; word-break: break-word;
}
.wk-a-stand[data-art="fehler"] { color: var(--fehler); }
.wk-a-stand[hidden] { display: none; }





.wkb {
  max-width: var(--eingabe-breit); margin: 0 auto 6px;
  position: relative;
  border: 1px solid var(--p-linie); border-radius: var(--r-1);
  background: var(--p-flaeche);
  overflow: hidden;
}
.wkb-kopf {
  width: 100%;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 34px 6px 10px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-2); font: inherit; letter-spacing: var(--spur); font-size: 12px; text-align: left;
}
.wkb-kopf:hover { background: color-mix(in srgb, var(--p-flaeche) 60%, var(--flaeche-3)); }
.wkb-kopf svg { width: 14px; height: 14px; flex: none; color: var(--p-tief); }
.wkb-was {
  font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--p-tief); flex: none;
}
.wkb-kopf b {
  font-weight: 600; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wkb-zahl, .wkb-kritisch {
  flex: none; height: 17px; padding: 0 7px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-rund);
  font-size: 11px; font-variant-numeric: tabular-nums;
  background: var(--flaeche); color: var(--text-2);
}
.wkb-kritisch { background: var(--fehler-flaeche); color: var(--fehler); }
.wkb-schub { flex: 1 1 auto; }
.wkb-pfeil { transition: transform 140ms ease; }
.wkb.offen .wkb-pfeil { transform: rotate(180deg); }
.wkb-weg {
  position: absolute; right: 6px; top: 5px;
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-1); background: none;
  color: var(--text-3); cursor: pointer;
}
.wkb-weg svg { width: 12px; height: 12px; }
.wkb-weg:hover { background: var(--fehler-flaeche); color: var(--fehler); }
.wkb-text {
  margin: 0; padding: 8px 10px 10px;
  max-height: 240px; overflow: auto;
  border-top: 1px solid var(--p-linie);
  background: var(--flaeche);
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
}
.wkb-text[hidden] { display: none; }








#agenten-flaeche.wk-ganz > .main { display: none; }
.wk-schicht.wk-voll {
  width: auto; flex: 1 1 auto; max-width: none; min-width: 0;
}




.wk-buehne[data-ansicht="schirm"] iframe,
.wk-buehne[data-ansicht="tablet"] iframe,
.wk-buehne[data-ansicht="handy"] iframe {
  left: 50%; right: auto;
  transform-origin: top center;
  translate: -50% 0;
  border: 1px solid var(--linie);
  box-shadow: var(--schatten-2);
}
.wk-buehne[data-ansicht="tablet"],
.wk-buehne[data-ansicht="handy"] { background: var(--flaeche-2); }
.wk-ansichten { gap: 1px; }






.wk-buehne[data-werkzeug="pfeil"],
.wk-buehne[data-werkzeug="linie"],
.wk-buehne[data-werkzeug="kasten"],
.wk-buehne[data-werkzeug="kreis"],
.wk-buehne[data-werkzeug="raute"],
.wk-buehne[data-werkzeug="dreieck"],
.wk-buehne[data-werkzeug="zylinder"] { cursor: crosshair; }
.wk-buehne[data-werkzeug="text"] { cursor: text; }
.wk-wz:disabled { opacity: .35; cursor: default; }





.wk-seiten { top: 44px; left: 10px; width: 320px; }
.wk-s-eintrag {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; margin-bottom: 2px;
  background: none; border: 1px solid transparent; border-radius: var(--r-1);
  color: var(--fenster-text-2); font: inherit; letter-spacing: var(--spur); font-size: 12px;
  text-align: left; cursor: pointer;
  transition: 140ms ease;
}
.wk-s-eintrag:hover { background: var(--fenster-hover); color: var(--fenster-text); }
.wk-s-eintrag.ist-offen {
  border-color: var(--fenster-linie-stark);
  background: var(--fenster-hover);
  color: var(--fenster-text);
}
.wk-s-icon { flex: none; display: inline-flex; color: var(--fenster-p); }
.wk-s-icon svg { width: 14px; height: 14px; }
.wk-s-eintrag b {
  flex: 1 1 auto; min-width: 0; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-s-her { flex: none; font-size: 10.5px; color: var(--fenster-text-3); }
.wk-s-leer { margin: 2px 0 0; font-size: 12px; color: var(--fenster-text-3); }


.wk-bau { width: 300px; max-height: 74vh; overflow-y: auto; }
.wk-bau .wk-e-titel:first-of-type { margin-top: 2px; }
.wk-bau-text {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 4px; padding: 6px 8px; resize: vertical;
  background: var(--fenster-2); color: var(--fenster-text);
  border: 1px solid var(--fenster-linie); border-radius: var(--r-1);
  font: inherit; letter-spacing: var(--spur); font-size: 12px; line-height: 1.45;
}
.wk-bau-text:focus { outline: none; border-color: var(--fenster-p); }
.wk-e-reihe input[type="color"] {
  flex: none; width: 34px; height: 22px; padding: 0;
  border: 1px solid var(--fenster-linie); border-radius: var(--r-1);
  background: none; cursor: pointer;
}
.wk-e-reihe output { font-variant-numeric: tabular-nums; }


.wk-pop {
  position: absolute; z-index: 5;
  width: 300px; padding: 10px 12px 12px;



  background: var(--fenster); color: var(--fenster-text);
  border: 1px solid var(--fenster-linie-stark); border-radius: var(--r-2);
  box-shadow: var(--fenster-schatten);
  animation: fenster-von-oben 120ms ease-out;
}
.wk-einst { top: 44px; right: 10px; }
.wk-e-titel {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 2px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3);
}
.wk-e-titel:first-child { margin-top: 0; }
.wk-e-reihe { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.wk-e-reihe > span:first-child { flex: 1 1 auto; font-size: 12px; color: var(--text-2); }
.wk-e-reihe output {
  flex: none; width: 42px; text-align: right;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.wk-e-reihe input[type="range"] { flex: none; width: 104px; margin: 0; accent-color: var(--p); cursor: pointer; }
.wk-e-reihe .wk-farben { gap: 6px; }
.wk-e-wahl { display: flex; gap: 2px; }
.wk-e-wahl button {
  height: 22px; padding: 0 9px;
  background: none; border: 1px solid var(--linie); border-radius: var(--r-rund);
  color: var(--text-2); font: inherit; letter-spacing: var(--spur); font-size: 10.5px; cursor: pointer;
  transition: 140ms ease;
}
.wk-e-wahl button:hover { background: var(--flaeche-3); color: var(--text); }
.wk-e-wahl button[aria-pressed="true"] { background: var(--p-flaeche); border-color: var(--p-linie); color: var(--p-tief); }
.wk-e-fuss {
  display: flex; justify-content: flex-end;
  margin-top: 10px; padding-top: 8px; border-top: var(--strich-fein);
}
.wk-e-fuss .btn { height: 26px; padding: 0 10px; font-size: 11.5px; }



.wk-bau { width: 280px; }
.wk-bau h4 {
  margin: 0 0 6px;
  font: 600 11.5px/1.4 var(--mono); letter-spacing: var(--spur); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-bau .wk-e-reihe > span:first-child { flex: none; width: 74px; }
.wk-bau .wk-e-reihe input[type="range"] { flex: 1 1 auto; width: auto; min-width: 0; }
.wk-bau-knoepfe { display: flex; gap: 6px; margin-top: 10px; }
.wk-bau-knoepfe .btn { flex: 1 1 auto; height: 28px; font-size: 11.5px; padding: 0 8px; }

























.composer,
input[type="text"], input[type="password"], input[type="search"],
textarea:not(#input) {
  border-top-color: var(--kante-unten);
  border-bottom-color: var(--kante-oben);
  box-shadow: inset 0 1px 2px rgba(42,35,29,.07);
}
html[data-theme="dark"] .composer,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea:not(#input) {
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .composer,
  :root:not([data-theme="light"]) input[type="text"],
  :root:not([data-theme="light"]) input[type="password"],
  :root:not([data-theme="light"]) input[type="search"],
  :root:not([data-theme="light"]) textarea:not(#input) {
    box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
  }
}


.composer,
input[type="text"], input[type="password"], input[type="search"],
input[type="number"], input[type="email"],
textarea:not(#input), select {
  border-radius: var(--r-mulde);
}


















.btn-primary, .send-btn {
  box-shadow: var(--kante), 0 1px 2px rgba(0,0,0,.16);
}
.btn:active, .send-btn:active,
.topbar .chip:active, .kopf-werkzeuge .usage:active,
.conv-item:active, .nav-eintrag:active {
  transform: translateY(.5px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}









.mehr-menu, .kosten-menu, .media-menu, .kmenu,
.schublade, .beetle-fenster, .wolke {
  background: color-mix(in srgb, var(--flaeche) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
  border-top-color: var(--kante-oben);
}


@supports not (backdrop-filter: blur(1px)) {
  .mehr-menu, .kosten-menu, .media-menu, .kmenu,
  .schublade, .beetle-fenster, .wolke { background: var(--flaeche); }
}











@supports (animation-timeline: scroll()) {
  .main { timeline-scope: --verlauf; }
  .chat-scroll { scroll-timeline: --verlauf block; }

  @keyframes nk-leiste-oben {
    from { box-shadow: 0 1px 0 transparent, 0 8px 16px -12px transparent; }
    to   { box-shadow: 0 1px 0 var(--linie), 0 8px 16px -12px rgba(0,0,0,.35); }
  }
  @keyframes nk-leiste-unten {
    from { box-shadow: 0 -1px 0 var(--linie), 0 -8px 16px -12px rgba(0,0,0,.35); }
    to   { box-shadow: 0 -1px 0 transparent, 0 -8px 16px -12px transparent; }
  }
  .topbar {
    border-bottom-color: transparent;
    position: relative; z-index: 2;
    animation: nk-leiste-oben linear both;
    animation-timeline: --verlauf;
    animation-range: 0 48px;
  }
  .composer-wrap {
    position: relative; z-index: 2;
    animation: nk-leiste-unten linear both;
    animation-timeline: --verlauf;
    animation-range: calc(100% - 48px) 100%;
  }
}









@keyframes nk-eintritt {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes nk-menue-auf {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.nav, .kopf, .sidebar, .main, .sd, .viewer, .kinder-panel,
.ansicht.blaettert {
  animation: nk-eintritt var(--d3) var(--ease-out) both;
}
.kopf    { animation-delay: 40ms; }
.sidebar { animation-delay: 80ms; }
.main    { animation-delay: 120ms; }
.sd, .viewer, .kinder-panel { animation-delay: 160ms; }

.conv-item { animation: nk-eintritt var(--d2) var(--ease-out) both; }
.conv-item:nth-child(1) { animation-delay: 140ms; }
.conv-item:nth-child(2) { animation-delay: 165ms; }
.conv-item:nth-child(3) { animation-delay: 190ms; }
.conv-item:nth-child(4) { animation-delay: 215ms; }
.conv-item:nth-child(5) { animation-delay: 240ms; }
.conv-item:nth-child(6) { animation-delay: 265ms; }
.conv-item:nth-child(7) { animation-delay: 290ms; }
.conv-item:nth-child(8) { animation-delay: 315ms; }
.conv-item:nth-child(n+9) { animation-delay: 340ms; }






.conv-item.eingetreten { animation: none; }

.mehr-menu, .kosten-menu, .media-menu, .kmenu {
  transform-origin: top right;
  animation: nk-menue-auf var(--d2) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .nav, .kopf, .sidebar, .main, .sd, .viewer, .kinder-panel,
  .ansicht.blaettert, .conv-item,
  .mehr-menu, .kosten-menu, .media-menu, .kmenu { animation: none; }
}








@media (min-resolution: 1.5dppx) {
  .nav, .kopf, .sidebar, .main, .sd, .viewer, .kinder-panel,
  .karte, .sd-kachel, .sd-buehne, .mediacard, .composer, .btn {
    border-width: .5px;
  }
}




.nav, .kopf, .sidebar, .main, .sd, .viewer, .kinder-panel,
.karte, .sd-kachel, .sd-buehne, .composer, .mediacard,
.btn, .send-btn, .msg-user .bubble,
.mehr-menu, .kosten-menu, .media-menu, .kmenu {
  corner-shape: squircle;
}










* {
  scrollbar-width: thin;
  scrollbar-color: var(--linie-stark) transparent;
}



.kopf-titel h1, .karte-titel, .karte-kopf h3,
.empty-state h2, .sd-titel, .band h2 { text-wrap: balance; }
.turn .answer p, .empty-state p, .leerzustand p { text-wrap: pretty; }



.sd-k-zahl, .sd-k-klein, .sd-sub, .usage, .turn-meta, .kosten-btn,
.conv-item .c-flags, .guthaben, .session-tag, .sd-tab {
  font-variant-numeric: tabular-nums slashed-zero;
}













.sd-kachel, .karte, .mediacard { position: relative; overflow: hidden; }
.sd-kachel::after, .karte::after, .mediacard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.07), transparent 62%);
  transition: opacity var(--d2) var(--ease-out);
}
.sd-kachel:hover::after, .karte:hover::after,
.mediacard:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sd-kachel::after, .karte::after, .mediacard::after { display: none; }
}





















:root { view-transition-name: none; }
.inhalt { view-transition-name: bereich; }

::view-transition-old(bereich),
::view-transition-new(bereich) {
  animation-duration: var(--d3);
  animation-timing-function: var(--ease-out);
}


@keyframes nk-weg {
  from { opacity: 1; filter: brightness(1);   transform: none; }
  to   { opacity: 0; filter: brightness(.72); transform: translateY(-6px); }
}
@keyframes nk-her {
  from { opacity: 0; filter: brightness(.72); transform: translateY(8px); }
  to   { opacity: 1; filter: brightness(1);   transform: none; }
}
::view-transition-old(bereich) { animation-name: nk-weg; }
::view-transition-new(bereich) { animation-name: nk-her; }





.chat-inner.nk-wechsel {
  animation: nk-her var(--d2) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(bereich),
  ::view-transition-new(bereich) { animation: none; }
  .chat-inner.nk-wechsel { animation: none; }
}





















.composer-wrap::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(to top, var(--flaeche) 12%, transparent);
}



.rueckfrage:not([hidden]) ~ .composer-wrap::before { display: none; }
.rueckfrage:not([hidden]) { position: relative; }
.rueckfrage:not([hidden])::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(to top, var(--flaeche) 12%, transparent);
}



@keyframes nk-weg {
  from { opacity: 1; filter: brightness(1);   transform: none; }
  to   { opacity: 0; filter: brightness(.78); transform: translateY(-4px); }
}
@keyframes nk-her {
  from { opacity: 0; filter: brightness(.78); transform: translateY(5px); }
  to   { opacity: 1; filter: brightness(1);   transform: none; }
}














.composer {
  transition: max-width var(--d2) var(--ease-out),
              border-color var(--d1) var(--ease-out),
              box-shadow var(--d1) var(--ease-out);
}

.send-btn {


  border-radius: 11px;
  transition: background var(--d1) var(--ease-out),
              box-shadow var(--d1) var(--ease-out),
              transform var(--d1) var(--ease-out),
              opacity var(--d1) var(--ease-out);
}


.send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--kante), 0 3px 8px -2px rgba(0,0,0,.3);
}



.send-btn:not(:disabled):active {
  transform: translateY(.5px) scale(.97);
  box-shadow: var(--kante), 0 1px 1px rgba(0,0,0,.2);
}




.send-btn svg { transition: transform var(--d1) var(--ease-out); }
.send-btn:hover:not(:disabled):not(.is-stop) svg { transform: translateX(-1px); }







.attach-btn, .mic-btn, .iknopf, .ol-plus,
.topbar .chip, .kopf-werkzeuge .usage,
.media-btn .mb-main, .media-btn .mb-more, .sd-btn, .nke-btn {
  transition: background var(--d1) var(--ease-out),
              color var(--d1) var(--ease-out),
              border-color var(--d1) var(--ease-out);
}
.attach-btn svg, .mic-btn svg, .iknopf svg, .ol-plus svg,
.topbar .chip > svg, .kopf-werkzeuge .usage svg,
.media-btn .mb-main svg, .media-btn .mb-more svg, .sd-btn svg {
  transition: transform var(--d1) var(--ease-out);
}
.attach-btn:hover svg, .mic-btn:hover svg, .iknopf:hover svg,
.ol-plus:hover:not(:disabled) svg,
.topbar .chip:hover > svg, .kopf-werkzeuge .usage:hover svg,
.media-btn .mb-main:hover svg, .media-btn .mb-more:hover svg,
.sd-btn:hover svg {
  transform: scale(1.06);
}


.media-btn .mb-more svg,
.agent-knopf .ak-pfeil {
  transition: transform var(--d2) var(--ease-out);
}
.media-btn.offen .mb-more svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .send-btn, .send-btn svg,
  .attach-btn svg, .mic-btn svg, .iknopf svg, .ol-plus svg,
  .topbar .chip > svg, .kopf-werkzeuge .usage svg,
  .media-btn .mb-main svg, .media-btn .mb-more svg, .sd-btn svg {
    transition: none;
  }
  .send-btn:hover:not(:disabled),
  .send-btn:not(:disabled):active { transform: none; }
  .attach-btn:hover svg, .mic-btn:hover svg, .iknopf:hover svg, .ol-plus:hover svg,
  .topbar .chip:hover > svg, .kopf-werkzeuge .usage:hover svg { transform: none; }
}


















.band, .kachel, .kachel.p, .kachel.s, .karte,
.sd-kachel, .sd-buehne, .kachelband-spur > .kachel {
  box-shadow: var(--hebung);
  border-top-color: var(--kante-oben);
  border-bottom-color: var(--kante-unten);
  background-image: var(--block-schimmer);
}










.kachel.offen, .karte.offen {
  background-image: none; box-shadow: none;
  border-top-color: var(--linie); border-bottom-color: var(--linie);
}



.karte.klickbar, .kachel.klickbar {
  transition: box-shadow var(--d2) var(--ease-out),
              border-color var(--d2) var(--ease-out),
              transform var(--d2) var(--ease-out);
}
.karte.klickbar:hover, .kachel.klickbar:hover {
  transform: translateY(-1px);
  box-shadow: var(--schatten-2);
}
@media (prefers-reduced-motion: reduce) {
  .karte.klickbar:hover, .kachel.klickbar:hover { transform: none; }
}


































.nke, .nke * {
  font-family: var(--sans);
}
.nke .nke-code, .nke .nke-code *,
.nke .nke-gz-code, .nke .nke-gz-code *,
.nke .nke-edit, .nke .nke-edit-nr {
  font-family: var(--mono);
}







.nke-btn {
  width: 26px; height: 26px; padding: 0;
  align-items: center; justify-content: center;
  border-radius: var(--r-1);
}
.nke-btn svg { width: 15px; height: 15px; }
.nke-fbtn svg, .nke-fz-verg svg { width: 15px; height: 15px; }



.nke-btn svg, .nke-fbtn svg, .nke-st-btn, .nke-fz-verg svg,
.nke-tab-zu svg {
  transition: transform var(--d1) var(--ease-out);
}
.nke-btn:hover svg, .nke-fbtn:hover svg, .nke-fz-verg:hover svg,
.nke-tab-zu:hover svg { transform: scale(1.06); }
.nke-btn:active svg, .nke-fbtn:active svg { transform: scale(.96); }




.nke-status { gap: 10px; }
.nke-st-btn {
  padding: 2px 7px; border-radius: var(--r-1);
  font-family: var(--sans);
}

.nke-status b { font-variant-numeric: tabular-nums slashed-zero; }




.nke-tab { border-radius: var(--r-1) var(--r-1) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .nke-btn svg, .nke-fbtn svg, .nke-st-btn, .nke-fz-verg svg,
  .nke-tab-zu svg { transition: none; }
  .nke-btn:hover svg, .nke-fbtn:hover svg, .nke-fz-verg:hover svg,
  .nke-tab-zu:hover svg { transform: none; }
}





















.composer-werkzeuge { flex-wrap: wrap; row-gap: 6px; }

.cw-rechts {
  display: inline-flex; align-items: center; gap: 8px;




  flex: 0 1 auto; margin-left: auto;


  flex-wrap: wrap; justify-content: flex-end; row-gap: 6px;
}















.herr-diener > .main { min-width: 380px; }



























@media (max-width: 900px) { .herr-diener > .main { min-width: 0; } }
















@media (max-width: 1560px) { :root { --liste-breit: 200px; } }





.sd-kpunkt.ist-ersatz {
  stroke: var(--warn, #e0a030);
  stroke-width: 2;
  fill: var(--warn, #e0a030);
}











.vl-band.hat-karten .vl-band-linien path.vl-folger { stroke: var(--accent); }
.toolcard.tk-schritt .toolcard-head { padding-top: 6px; padding-bottom: 6px; }
.toolcard.tk-schritt .t-rg-nr {
  flex: none; padding: 0 6px;
  border-radius: var(--r-rund);
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.toolcard.tk-schritt .t-sub .tk-akt {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; color: var(--muted);
}
.toolcard.tk-schritt.fehl { border-color: var(--error); }
.toolcard.tk-schritt.fehl .t-name { color: var(--error); }
.toolcard.tk-schritt.offen { border-style: dashed; opacity: .6; }
.toolcard.tk-schritt .tb-pre {
  margin: 0; padding: 8px 12px; max-height: 320px; overflow: auto;
  font-family: var(--mono, ui-monospace, monospace); font-size: 11px;
  white-space: pre-wrap; word-break: break-word;
}













.wgkarte {
  margin: 12px 0;
  background: var(--flaeche);


  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: var(--r-2);
  box-shadow: var(--schatten-1);
  overflow: hidden;
}
.wg-kopf {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 4px 6px 4px 12px;
  border-bottom: 1px solid var(--linie);
  font-size: 11.5px;
  user-select: none;
}
.wg-icon { display: inline-flex; flex: 0 0 auto; color: var(--p); }
.wg-icon svg,
.wg-knopf svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.wg-titel {
  min-width: 0;
  font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


.wg-art {
  flex: 0 0 auto;
  color: var(--text-3); font-size: 10.5px;
  font-family: var(--mono);
}
.wg-knoepfe {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto;
}
.wg-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; color: var(--text-2);
  border: 0; border-radius: var(--r-1);
  cursor: pointer;
}
.wg-knopf:hover { background: var(--flaeche-2); color: var(--text); }
.wg-knopf:focus-visible { outline: 1px solid var(--p); outline-offset: 1px; }


.wg-knopf[aria-pressed="true"] { color: var(--p); }
.wg-knoepfe .info { margin-left: 4px; }

.wg-warum {
  padding: 8px 12px 0;
  color: var(--text-2);
  font-size: 12px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.wg-warum + .wg-koerper { margin-top: 8px; }
.wg-warum + .wg-koerper .wg-rahmen,
.wg-warum + .wg-koerper .wg-platz,
.wg-warum + .wg-koerper .wg-3d { border-top: 1px solid var(--linie-weich); }




.wg-rahmen {
  display: block; width: 100%;
  border: 0;
  background: var(--flaeche);
}
.wg-platz {
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche);
}
.wg-laden {
  font-size: 12px; color: var(--text-3);
  animation: vLaden 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .wg-laden { animation: none; } }
.wg-fehlt {
  padding: 16px 14px;
  font-size: 12px; color: var(--text-3);
}



.wg-fuss {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 5px 6px 5px 12px;
  border-top: 1px solid var(--linie-weich);
  font-size: 10.5px; color: var(--text-3);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.wg-fuss[hidden] { display: none; }
.wg-daten,
.wg-fehler {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wg-fuss.ist-fehler { color: var(--fehler); }
.wg-fuss .wg-melden { margin-left: auto; flex: 0 0 auto; }






.wg-3d { position: relative; width: 100%; }
.w3-buehne {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--flaeche);
}
.w3-flaeche {
  display: block;
  width: 100%; height: 100%;
  outline: none;
  cursor: var(--nk-hand-offen);
}
.w3-flaeche:active { cursor: var(--nk-hand-zu); }


.w3-standbild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.w3-meldung {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  z-index: 2;
  padding: 6px 10px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r-1);
  font-size: 11.5px; color: var(--text-2);
  pointer-events: none;
}
.w3-meldung[hidden] { display: none; }
.w3-meldung.fehler { color: var(--fehler); border-color: var(--fehler); }


.w3-hinweis {
  position: absolute; top: 10px; left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: var(--r-rund);
  background: var(--text); color: var(--flaeche);
  font-size: 11px;
  opacity: 0;
  transition: opacity var(--d2) var(--ease-out);
  pointer-events: none;
}
.w3-hinweis.an { opacity: .9; }



.viewer-body.v-3d { background: var(--flaeche); }
.viewer-body.v-3d .w3-buehne { flex: 1 1 auto; min-height: 0; height: auto; }

.zeig-inhalt.art-3d .w3-buehne { height: 100%; }





.sb-kopf { cursor: pointer; user-select: none; }
.sb-kopf .gk-icon svg { transition: transform .15s ease; }
.sb-kopf.zu .gk-icon svg { transform: rotate(-90deg); }
.sb-kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sb-zeile {
  display: flex; align-items: center; gap: 7px;
  min-height: 28px; box-sizing: border-box; padding: 3px 10px;
  margin-bottom: 2px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 13px; letter-spacing: var(--spur); color: var(--text);
  cursor: pointer;
}
.sb-zeile:hover { background: var(--line-soft); }
.sb-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sb-zeile.active { background: var(--panel); border-color: var(--line);
                   box-shadow: var(--kante), var(--schatten-1); }
.sb-zeichen { display: inline-flex; flex: none; width: 14px; justify-content: center;
              color: var(--muted); }
.sb-zeichen svg { width: 13px; height: 13px; display: block; }
.sb-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.sb-name, .sb-unter { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-unter { font-size: 11px; color: var(--faint); }
.sb-platz { padding-left: 24px; }
.sb-gruppe .sb-zeichen svg { transition: transform .15s ease; }
.sb-gruppe.zu .sb-zeichen svg { transform: rotate(-90deg); }
.sb-eingang .sb-name { font-weight: 600; }


.sb-live {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 35%, transparent);
  animation: sb-live 1.8s ease-out infinite;
}
@keyframes sb-live {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 35%, transparent); }
  70%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .sb-live { animation: none; } }

.sb-nachricht {
  margin: 0 4px 6px 24px; padding: 7px 9px;
  background: var(--flaeche-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); font-size: 12px; color: var(--text);
}
.sb-nachricht-kopf { font-size: 11px; color: var(--faint); margin-bottom: 4px; }
.sb-nachricht-text { white-space: pre-wrap; max-height: 180px; overflow: auto; line-height: 1.45; }
.sb-knopf, .sb-mitlesen {
  font: inherit; font-size: 11.5px; margin-top: 6px; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--text); cursor: pointer;
}
.sb-knopf:hover, .sb-mitlesen:hover { border-color: var(--accent); color: var(--accent-deep); }
.sb-mitlesen { margin: 0 0 0 8px; padding: 1px 7px; font-size: 11px; }
.sb-mehr { margin: 2px 10px 8px; font-size: 11px; color: var(--faint); }



.mitlese-band {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 7px 11px;
  background: var(--flaeche-2); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 12px; color: var(--muted);
}
.mitlese-marke {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ok); border: 1px solid currentColor; border-radius: 3px; padding: 0 5px;
}
.mitlese-text { flex: 1 1 auto; min-width: 0; }
.mitlese-id { font-size: 11px; color: var(--faint); }




.sitz-chip {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 0 7px; margin: 0 1px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--flaeche-2); color: var(--text);
  font-size: .92em; line-height: 1.55; white-space: nowrap;
  vertical-align: baseline; cursor: pointer;
}
.sitz-chip:hover, .sitz-chip:focus-visible { border-color: var(--accent); color: var(--accent-deep); }
.sitz-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sitz-name { overflow: hidden; text-overflow: ellipsis; }
.sitz-chip.sitz-sucht .sitz-name { color: var(--faint); }
.sitz-chip.sitz-still { cursor: inherit; background: none; border-color: currentColor; color: inherit; }



.sitz-puls { animation: sitz-puls 1.2s ease-in-out infinite; }
@keyframes sitz-puls {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); }
  50%      { box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 95%, transparent),
                         0 0 14px 2px color-mix(in srgb, var(--text) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .sitz-puls { animation: none; box-shadow: 0 0 0 2px var(--text); }
}




















.pl-stueck, .pl-marke, .pl-sprung, .pl-zelle, .pl-f-nr, .pl-f-zustand {
  --pl-ton: var(--text-3);
}
:is(.pl-stueck, .pl-marke, .pl-zelle, .pl-f-nr, .pl-f-zustand).z-laeuft        { --pl-ton: var(--p); }
:is(.pl-stueck, .pl-marke, .pl-zelle, .pl-f-nr, .pl-f-zustand).z-fertig        { --pl-ton: var(--ok); }
:is(.pl-stueck, .pl-marke, .pl-zelle, .pl-f-nr, .pl-f-zustand).z-teilweise     { --pl-ton: var(--warn); }
:is(.pl-stueck, .pl-marke, .pl-zelle, .pl-f-nr, .pl-f-zustand).z-uebersprungen { --pl-ton: var(--text-3); }
:is(.pl-stueck, .pl-marke, .pl-zelle, .pl-f-nr, .pl-f-zustand).z-liegen        { --pl-ton: var(--text-3); }

.vl-reihe > .pl-stueck,
.vl-band > .pl-stueck {
  position: absolute; top: 0; bottom: 0;
  left: -42px; width: 12px;
  z-index: 1; cursor: pointer;
}
.vl-reihe > .pl-stueck.bahn-1, .vl-band > .pl-stueck.bahn-1 { left: -36px; }
.vl-reihe > .pl-stueck.bahn-2, .vl-band > .pl-stueck.bahn-2 { left: -48px; }
.pl-stueck::before {
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0;
  border-left: 2px solid var(--pl-ton);
}
.pl-stueck.z-laeuft::before,
.pl-stueck.z-liegen::before       { border-left-style: dashed; }
.pl-stueck.z-uebersprungen::before { border-left-style: dotted; }

.pl-stueck.pl-anfang::before { top: 6px; }
.pl-stueck.pl-ende::before   { bottom: 6px; }
.pl-stueck:hover::before     { border-left-width: 3px; left: 4.5px; }

.vl-reihe > .pl-marke,
.vl-reihe > .pl-sprung {
  position: absolute; top: 4px; left: -36px;
  transform: translateX(-50%);
  min-width: 22px; height: 17px; padding: 0 4px;
  font: 600 9.5px/15px var(--mono); letter-spacing: var(--spur);
  text-align: center; white-space: nowrap;
  border-radius: var(--r-rund);
  border: 1px solid var(--pl-ton);
  background: var(--flaeche); color: var(--pl-ton);
  z-index: 2; cursor: pointer;
}
.vl-reihe > .pl-marke.bahn-1 { left: -30px; }
.vl-reihe > .pl-marke.bahn-2 { left: -42px; }
.vl-reihe > .pl-marke.z-laeuft {
  background: var(--p); border-color: var(--p); color: var(--auf-farbe);
}
.vl-reihe > .pl-marke.z-liegen { border-style: dashed; }


.vl-reihe > .pl-marke.pl-geschaetzt { border-style: dashed; }
.pl-f-geschaetzt { color: var(--warn-tief); }
.vl-reihe > .pl-marke.z-uebersprungen,
.vl-reihe > .pl-sprung {
  border-style: dotted; color: var(--text-3); border-color: var(--text-3);
  text-decoration: line-through;
}
.vl-reihe > .pl-marke:hover,
.vl-reihe > .pl-sprung:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pl-ton) 30%, transparent); }
.vl-reihe > .pl-marke:focus-visible,
.vl-reihe > .pl-sprung:focus-visible { outline: 2px solid var(--p); outline-offset: 1px; }


.vl-strang > .pl-kopf {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin: 0 0 7px 24px;
  font-size: 10.5px; letter-spacing: var(--spur); color: var(--text-3);
}
.pl-kopf-name { font-weight: 600; color: var(--text-2); }
.pl-zellen { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.pl-zelle {
  width: 16px; height: 8px; padding: 0;
  border: 1px solid var(--linie-stark); border-radius: 4px;
  background: transparent; cursor: pointer;
  transition: transform var(--d1, 120ms) var(--ease-out, ease-out);
}
.pl-zelle.z-laeuft       { background: var(--p); border-color: var(--p); animation: pl-puls 1.8s ease-in-out infinite; }
.pl-zelle.z-fertig       { background: var(--ok); border-color: var(--ok); }
.pl-zelle.z-teilweise    { background: linear-gradient(90deg, var(--warn) 55%, transparent 55%); border-color: var(--warn); }
.pl-zelle.z-uebersprungen {
  border-style: dashed; border-color: var(--text-3);
  background: repeating-linear-gradient(-45deg, var(--text-3) 0 1px, transparent 1px 3px);
}
.pl-zelle.z-liegen       { border-style: dashed; border-color: var(--p); }
.pl-zelle:hover          { transform: translateY(-1px); }
.pl-zelle:focus-visible  { outline: 2px solid var(--p); outline-offset: 1px; }
.pl-kopf-stand { font-variant-numeric: tabular-nums; color: var(--text-2); }
.pl-kopf-alt   { color: var(--s-tief); }
@keyframes pl-puls { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }


.live-pending .p-plan {
  font: inherit; font-size: 10.5px; line-height: 1.5;
  margin: 0 8px 0 6px; padding: 0 7px;
  border: 1px solid var(--p-linie); border-radius: var(--r-rund);
  background: var(--p-flaeche); color: var(--p-tief);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.live-pending .p-plan:hover { border-color: var(--p); }


.pl-fenster {
  position: fixed; z-index: 95;
  width: min(560px, calc(100vw - 24px));
  max-height: min(74vh, 660px);
  display: flex; flex-direction: column;
  border: 1px solid var(--linie); border-radius: var(--r-2);
  padding: 10px 12px 12px;
  font-size: 11.5px; letter-spacing: var(--spur);
}


.pl-fenster > :not(.pl-f-plan) { flex: none; }
.pl-f-kopf { display: flex; align-items: center; gap: 4px; }
.pl-f-zurueck, .pl-f-vor, .pl-f-zu {
  flex: none; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--text-2);
  font: 500 15px/22px var(--sans); cursor: pointer;
}
.pl-f-zu { margin-left: 4px; }
.pl-f-zurueck:hover, .pl-f-vor:hover, .pl-f-zu:hover { background: var(--flaeche-3); color: var(--text); }
.pl-f-zurueck:disabled, .pl-f-vor:disabled { opacity: .3; cursor: default; background: transparent; }
.pl-f-nr {
  flex: none; padding: 1px 7px;
  font: 600 11px/16px var(--mono);
  border: 1px solid var(--pl-ton); border-radius: var(--r-rund);
  color: var(--pl-ton);
}
.pl-f-nr.z-laeuft { background: var(--p); color: var(--auf-farbe); }
.pl-f-titel {
  flex: 1; min-width: 0; margin-left: 4px;
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-f-lage {
  display: flex; flex-wrap: wrap; gap: 3px 10px;
  margin: 6px 0 0 30px;
  font-size: 10.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.pl-f-zustand { font-weight: 600; color: var(--pl-ton); }
.pl-f-zustand.z-offen, .pl-f-zustand.z-liegen { color: var(--text-2); }
.pl-f-notiz {
  margin: 6px 0 0 30px; padding-left: 8px;
  border: 1px solid var(--linie-stark);
  color: var(--text-2); line-height: 1.45; border-radius: 8px; padding-right: 8px;}
.pl-f-check {
  margin: 6px 0 0 30px; color: var(--text-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pl-f-check-wort { font-weight: 600; color: var(--text-3); }
.pl-f-felder {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 10px; margin: 10px 0 0; padding: 8px 10px;
  background: var(--flaeche-2); border-radius: var(--r-1);
}
.pl-f-felder dt { font-size: 10.5px; color: var(--text-3); line-height: 1.5; }
.pl-f-felder dd { margin: 0; color: var(--text); line-height: 1.45; }
.pl-f-ort {
  display: flex; justify-content: space-between; gap: 8px;
  margin: 10px 0 4px;
  font: 10px/1.4 var(--mono); color: var(--text-3);
}
.pl-f-alt { color: var(--s-tief); font-family: var(--sans); }
.pl-f-plan {
  flex: 1 1 auto; min-height: 120px; overflow: auto;
  border-top: var(--strich-fein); padding: 6px 4px 0 0;
  font-size: 11.5px;
}
.pl-f-plan .md { font-size: 11.5px; }
.pl-f-plan .md h1 { font-size: 13px; }
.pl-f-plan .md h2 { font-size: 12px; margin-top: 12px; }
.pl-f-treffer {
  margin: 4px 0; padding: 4px 8px 4px 10px;
  border: 1px solid color-mix(in srgb, var(--p) 50%, transparent);
  border-radius: var(--r-1);
  background: var(--p-flaeche);
}
.pl-f-lade, .pl-f-leer { padding: 10px 2px; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .pl-zelle.z-laeuft { animation: none; }
  .pl-zelle { transition: none; }
}












.vk {
  display: flex; align-items: center; gap: 16px;
  margin: 6px 0 10px; padding: 4px 2px;
}
.vk-wuerfel { color: var(--p); display: inline-flex; flex: none; }
.vk-wuerfel .vk-wuerfel-svg {
  width: 44px; height: 44px; stroke-width: 1.1; overflow: visible;
}

.vk-wuerfel .f { fill: currentColor; stroke: none; fill-opacity: .1;
                 transition: fill-opacity var(--d3) var(--ease-out); }
.vk-wuerfel .f[data-f="1"] { animation: vk-atmen 2.4s var(--ease-in-out) infinite; }
.vk-wuerfel .f[data-f="2"] { fill-opacity: .72; }
@keyframes vk-atmen { 0%, 100% { fill-opacity: .16; } 50% { fill-opacity: .5; } }


.vk-wuerfel .vk-licht {
  fill: none; stroke: var(--p); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 5 60; animation: vk-kante 2.6s linear infinite;
}
@keyframes vk-kante { to { stroke-dashoffset: -65; } }
.vk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vk-stufe { font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--text); }
.vk-zeile { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.vk-zeile b { font-weight: 500; color: var(--text-2); }


.vk-nachher {
  display: flex; align-items: center; gap: 7px; margin: 2px 0 10px;
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.vk-nachher .vk-stufe { font-size: 11px; color: var(--text-2); }
.vk-haken { color: var(--ok); display: inline-flex; }
.vk-haken svg { width: 13px; height: 13px; stroke-width: 1.8; }

@media (prefers-reduced-motion: reduce) {
  .vk-wuerfel .f, .vk-wuerfel .vk-licht { animation: none; }
}







html.nk-verdeckt #aw-auge,
html.nk-verdeckt #aw-info,
html.nk-verdeckt #denkwahl,
html.nk-verdeckt #btn-gabel,
html.nk-verdeckt #kosten-wrap,
html.nk-verdeckt #usage-wrap,
html.nk-verdeckt #chip-euro,
html.nk-verdeckt #chip-metrik,
html.nk-verdeckt #stundensatz,
html.nk-verdeckt #kinder-btn,
html.nk-verdeckt #kinder-panel,
html.nk-verdeckt #editor-btn,
html.nk-verdeckt #paket-btn,
html.nk-verdeckt #werkstatt-btn,
html.nk-verdeckt #netz-btn,
html.nk-verdeckt #live-btn,
html.nk-verdeckt .af-kachel[data-art="browser"],
html.nk-verdeckt #sperre-wrap,
html.nk-verdeckt .leer-modell,
html.nk-verdeckt .pl-kopf,
html.nk-verdeckt .p-plan,
html.nk-verdeckt #modusInfoSchicht { display: none !important; }
















.ragkarte.ab {
  border-radius: var(--r-2);
  box-shadow: var(--kante), var(--schatten-1);
}
.ragkarte.ab .rk-kopf { border-color: color-mix(in srgb, var(--s) 50%, transparent); padding: 9px 14px 9px 11px; }
.ragkarte.ab .rk-sub { font-size: 11px; }
.ragkarte.ab:not(.offen) .ab-koerper,
.ragkarte.ab:not(.offen) .ab-detail,
.ragkarte.ab:not(.offen) .ab-verlauf { display: none; }
.ragkarte.ab .rk-kopf .chev { transition: transform var(--d1) var(--ease-out); }
.ragkarte.ab.offen .rk-kopf .chev { transform: rotate(90deg); }

.ab-koerper { position: relative; padding: 14px 16px 16px 14px; }
.ab-leitung {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0;
  fill: none; stroke: none; overflow: visible;
}
.ab-leitung path { fill: none; stroke: var(--linie-stark); stroke-width: 1.5;
                   stroke-linecap: round; stroke-linejoin: round; }
.ab-leitung path.an { stroke: var(--p); }
.ab-leitung path.fliesst { stroke: var(--p); stroke-dasharray: 3 5;
                           animation: ab-fluss .8s linear infinite; }
.ab-leitung path.lose { stroke-dasharray: 2 4; }
.ab-leitung path.lose.an { stroke: var(--p-hell); }
.ab-leitung text { fill: var(--text-3); stroke: none; font: 500 9.5px var(--sans); }
@keyframes ab-fluss { to { stroke-dashoffset: -8; } }

.ab-reihe {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 70px minmax(0, 1fr);
  column-gap: 12px; align-items: start;
}
.ab-reihe[hidden] { display: none; }
.ab-reihe:not([hidden]) ~ .ab-reihe:not([hidden]) { margin-top: 26px; }
.ab-phase {
  padding-top: 8px;
  font: 600 10px/1.2 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.ab-phase i { display: block; margin-top: 3px; font-style: normal; font-weight: 500;
              letter-spacing: var(--spur); text-transform: none;
              font-variant-numeric: tabular-nums; }
.ab-inhalt { display: flex; justify-content: center; min-width: 0; }


.ab-frage {
  display: inline-flex; align-items: center; gap: 8px; max-width: 86%;
  padding: 6px 12px 6px 7px; border-radius: var(--r-rund);
  background: var(--flaeche-2); border: 1px solid var(--linie);
  font-size: 11.5px; color: var(--text-2);
}
.ab-zitat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ab-tag {
  font: 600 9px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 5px; border-radius: var(--r-rund); white-space: nowrap;
  color: var(--text-3); background: var(--flaeche-3);
}
.ab-tag.pflicht { color: var(--s-tief); background: var(--s-flaeche); }
.ab-tag.kuer { background: none; border: 1px dashed var(--linie-stark); padding: 2px 4px; }


.ab-raster {
  display: grid; gap: 8px; width: 100%;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
}
.ab-raster.schmal { width: 64%; }
.ab-spalte { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ab-kinder { margin-top: 22px; width: 78%; }

.ab-kachel {
  position: relative; min-width: 0; text-align: left;
  display: flex; flex-direction: column; gap: 5px;
  padding: 8px 9px 7px; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: var(--spur);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-1); box-shadow: var(--schatten-1);
  transition: border-color var(--d1) var(--ease-out), box-shadow var(--d1) var(--ease-out);
}
.ab-kachel:hover { border-color: var(--linie-stark); box-shadow: var(--schatten-2); }
.ab-kachel.still, .ab-kachel.kind { cursor: default; }
.ab-kachel.still:hover, .ab-kachel.kind:hover { border-color: var(--linie); box-shadow: var(--schatten-1); }
.ab-kachel.gewaehlt { border-color: var(--p); }
.ab-kachel[data-stand="laeuft"] { border-color: var(--p-linie); }
.ab-kachel[data-stand="wartet"] { background: var(--flaeche-2); box-shadow: none; border-style: dashed; }
.ab-kachel.kuer { border-style: dashed; }
.ab-kachel.kind { padding: 6px 8px; }
.ab-k1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.ab-name { font-weight: 600; font-size: 11.5px; line-height: 1.25; min-width: 0;
           hyphens: auto; overflow-wrap: anywhere; }
.ab-was {
  font-size: 10.5px; line-height: 1.35; color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.ab-fuss {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.ab-fuss .rechts { margin-left: auto; white-space: nowrap; }
.ab-fuss .wort-ok { color: var(--ok); font-weight: 600; }
.ab-fuss .wort-lauf { color: var(--p-tief); font-weight: 600; }
.ab-fuss .wort-warn { color: var(--s-tief); font-weight: 600; }
.ab-fuss .wort-warte { color: var(--text-3); }
.ab-uhr { font-variant-numeric: tabular-nums; }


.ab-kachel.breit { flex-direction: row; align-items: center; gap: 10px; width: 70%; padding: 9px 12px; }
.ab-kachel.breit .ab-k1 { justify-content: flex-start; gap: 8px; }
.ab-kachel.breit .ab-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; hyphens: manual; }
.ab-kachel.agent { border-color: var(--linie-stark); }
.ab-kachel.agent .ab-name { font-size: 12.5px; }
.ab-mitte { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }

.ab-marke {
  --ab-ring: var(--linie-stark);
  position: relative; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 600 10px/1 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--text-2); background: var(--flaeche);
  box-shadow: inset 0 0 0 1.5px var(--ab-ring);
}
.ab-marke svg { width: 13px; height: 13px; }
.ab-marke.eckig { border-radius: 7px; }
.ab-marke.gross { width: 30px; height: 30px; font-size: 11px; }
.ab-marke.gross.eckig { border-radius: 9px; }
.ab-marke.gross svg { width: 15px; height: 15px; }
.ab-marke.klein { width: 18px; height: 18px; font-size: 9px; }
.ab-marke.klein.eckig { border-radius: 5px; }
.ab-marke.klein svg { width: 11px; height: 11px; }
.ab-marke[data-stand="wartet"] { box-shadow: none; border: 1.5px dashed var(--linie-stark);
                                 color: var(--text-3); background: transparent; }
.ab-marke[data-stand="laeuft"] { --ab-ring: var(--p-linie); color: var(--p-tief); background: var(--p-flaeche); }

.ab-marke[data-stand="laeuft"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid transparent; border-top-color: var(--p); border-right-color: var(--p);
  animation: ab-dreh 1.1s linear infinite;
}


.ab-marke.eckig[data-stand="laeuft"]::after {
  border-color: var(--p); animation: ab-atmen 1.2s var(--ease-in-out) infinite;
}
@keyframes ab-dreh { to { transform: rotate(360deg); } }
@keyframes ab-atmen { 50% { opacity: .3; } }
.ab-marke[data-stand="fertig"] { --ab-ring: var(--ok); color: var(--ok-tief); background: var(--ok-flaeche); }
.ab-marke[data-stand="warn"] { --ab-ring: var(--s); color: var(--s-tief); background: var(--s-flaeche); }
.ab-marke[data-stand="fehler"] { --ab-ring: var(--fehler); color: var(--fehler-tief); background: var(--fehler-flaeche); }
.ab-marke.kuer[data-stand="fertig"] { box-shadow: none; border: 1.5px dashed var(--ok); }



.ab-modell {
  display: inline-flex; align-items: center; gap: 3px; max-width: 100%;
  font: 10px/1.6 var(--mono); color: var(--p-tief); background: var(--p-flaeche);
  border-radius: var(--r-1); padding: 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ab-modell.ersetzt::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--s); flex: none; margin-left: 1px;
}
.ab-datei {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font: 10px/1.6 var(--mono); color: var(--text-2);
  border: 1px solid var(--linie); border-radius: var(--r-1); padding: 1px 6px;
  background: var(--flaeche-2);
}
.ab-datei svg { width: 12px; height: 12px; }


.ab-halt {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--text-3);
  padding: 4px 10px; border-radius: var(--r-rund);
  border: 1px dashed var(--linie-stark); background: var(--flaeche);
}
.ab-halt svg { width: 13px; height: 13px; }
.ab-halt[data-stand="laeuft"] { border-style: solid; border-color: var(--p-linie);
                                color: var(--p-tief); background: var(--p-flaeche); }
.ab-halt[data-stand="fertig"] { border-style: solid; }
.ab-halt[data-stand="warn"] { border-style: solid; border-color: var(--s-linie); color: var(--s-tief); }


.ab-note { display: inline-flex; align-items: center; gap: 8px; flex: none;
           font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ab-note b { font-weight: 600; }
.ab-note-balken { display: inline-flex; gap: 2px; align-items: center; }
.ab-note-balken i { width: 4px; height: 10px; border-radius: 1px; background: var(--linie); }
.ab-note-balken i.voll { background: var(--ok); }
.ab-note-balken i.schwelle { box-shadow: 0 -3px 0 -1px var(--text-3); }


.ab-detail {
  margin: 0 14px 14px; padding: 12px 14px;
  border: 1px solid var(--linie); border-radius: var(--r-1); background: var(--flaeche-2);
}
.ab-detail[hidden] { display: none; }
.ab-dkopf { display: flex; align-items: center; gap: 8px; }
.ab-dname { font-weight: 600; font-size: 12.5px; }
.ab-dwas { color: var(--text-3); font-size: 11px; min-width: 0;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-dzu { margin-left: auto; background: none; border: 0; color: var(--text-3);
          cursor: pointer; padding: 2px; border-radius: var(--r-1); }
.ab-dzu:hover { color: var(--text); background: var(--flaeche-3); }
.ab-fakten { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 10px 0 0; font-size: 11px; }
.ab-fakten dt { color: var(--text-3); }
.ab-fakten dd { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ab-auszug-kopf { margin-top: 10px; font-size: 10.5px; color: var(--text-3); }
.ab-auszug { margin-top: 6px; padding: 6px 10px 2px; max-height: 260px; overflow: auto;
             border: 1px solid var(--linie); font-size: 12px; line-height: 1.5; color: var(--text-2); border-radius: 8px;}


.ab-verlauf { margin: 0 14px 12px; }
.ab-verlauf[hidden] { display: none; }
.ab-vknopf {
  font: 500 10.5px/1 var(--sans); letter-spacing: var(--spur); color: var(--text-3);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.ab-vknopf:hover { color: var(--text-2); }
.ab-verlauf:not(.offen) .rk-vliste { display: none; }





.ab-koerper { container-type: inline-size; container-name: ablauf; }
.ab-kachel.breit { flex-wrap: wrap; }
@container ablauf (max-width: 640px) {
  .ab-reihe { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .ab-phase { padding-top: 0; display: flex; gap: 8px; align-items: baseline; }
  .ab-phase i { display: inline; margin: 0; }
  .ab-kachel.breit, .ab-raster.schmal, .ab-kinder { width: 100%; }

  .ab-mitte { flex: 1 1 150px; }
  .ab-was { display: none; }
}
@container ablauf (max-width: 460px) {
  .ab-raster { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ab-marke::after, .ab-leitung path.fliesst { animation: none !important; }
}
















.af {
  position: relative;
  flex: 0 1 auto;
  width: calc(var(--af-anteil, .5) * 100%);
  min-width: 360px; min-height: 0;
  display: flex; flex-direction: column; gap: var(--luft);
}



.af-griff { cursor: col-resize; }

/* ── Griffe mit dem Finger (03.11.2026, js/griffe_beruehren.js) ─
   Auf dem iPad schob ein Finger auf einer Trennlinie die Seite, statt
   zu ziehen. `touch-action: none` sagt dem Browser, dass er hier nichts
   selbst tun soll. Für die Werkstatt-Griffe (Pointer-Ereignisse)
   reicht das allein, die anderen übersetzt griffe_beruehren.js.

   SIEBEN PIXEL TRIFFT KEIN FINGER. Bei grobem Zeiger (Finger, Stift)
   wächst die Trefffläche unsichtbar auf jeder Seite um 8 px — als
   ::after, weil `.spalt-griff` ::before schon für den Faden braucht.
   Mit der Maus bleibt alles, wie es war. */
.spalt-griff, .v-grip, .nke-grip, .nke-gz-griff, .sd-grip,
.wk-spaltgriff, .wk-griff { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) {
  .spalt-griff::after, .v-grip::after, .nke-grip::after, .sd-grip::after,
  .wk-spaltgriff::after, .wk-griff::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -8px; right: -8px;
  }
  .nke-gz-griff::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
}




html.hat-arbeitsflaeche .herr-diener > .main { flex: 1 1 0; }

.af-raster {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: var(--luft);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "a";
}

.af-raster[data-n="2"] {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "a" "b";
}
.af-raster[data-n="3"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas: "a a" "b c";
}
.af-raster[data-n="4"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "a b" "c d";
}

.af-kachel {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--flaeche);
  transition: box-shadow var(--d1) var(--ease-out), border-color var(--d1) var(--ease-out);
}
.af-kopf {
  flex: none; position: relative;
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--linie);
  font-size: 12px; letter-spacing: var(--spur);
  user-select: none;
  cursor: var(--nk-hand-offen);
}
body.resizing .af-kopf { cursor: var(--nk-hand-zu); }

.af-kopf::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 0;
  height: 2px; border-radius: 0 0 2px 2px;
  background: var(--accent); opacity: 0;
  transition: opacity var(--d2) var(--ease-out);
}
.af-kachel.aktiv .af-kopf::before { opacity: .85; }
.af-symbol { display: inline-flex; flex: none; }
.af-symbol svg { width: 14px; height: 14px; color: var(--accent); }
.af-titel { flex: none; font-weight: 600; color: var(--text); }
.af-kopf-links {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px; overflow: hidden;
}
.af-luft { flex: 0 0 2px; }
.af-kopf-rechts { flex: none; display: flex; align-items: center; gap: 6px; }
.af-knopf {
  flex: none; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--faint); cursor: pointer;
}
.af-knopf:hover { background: var(--line-soft); color: var(--text); }
.af-knopf:disabled { opacity: .45; cursor: default; background: transparent; }
.af-knopf svg { width: 14px; height: 14px; }
.af-koerper {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; flex-direction: column;
}




.af-kachel.af-fremd > .af-koerper > * {
  flex: 1 1 auto; min-height: 0;
  width: 100% !important; min-width: 0; max-width: none;
  border: 0; border-radius: 0; box-shadow: none;
}




.af-kachel .nke-grip,
.af-kachel .v-grip { display: none; }
.af-kachel .af-fremdkopf { cursor: var(--nk-hand-offen); }
.af-kachel .af-fremdkopf :is(button, input, a) { cursor: pointer; }
.af-kachel .beetle-sicht {
  position: relative; inset: auto; z-index: auto;
  width: 100%; max-height: none;
  background: var(--flaeche);
}
.af-kachel .beetle-sicht .bs-bild { flex: 1 1 auto; min-height: 0; }
.af-kachel .srv-lage.srv-in-kachel {
  position: static; inset: auto; z-index: auto;
  display: flex; padding: 0; background: none;


  align-items: stretch; justify-content: stretch;
}
.af-kachel .srv-in-kachel .srv-karte {
  width: 100%; height: auto; flex: 1 1 auto; min-height: 0;
  border: 0; border-radius: 0; box-shadow: none;
}




.af-kachel .srv-in-kachel .srv-kopf { flex-wrap: wrap; row-gap: 6px; padding: 6px 8px; gap: 6px 8px; }
.af-kachel .srv-in-kachel .srv-kopf-text { flex: 1 1 150px; min-width: 0; }
.af-kachel .srv-in-kachel .srv-kopf-text > * {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.af-kachel .srv-in-kachel .srv-spacer { display: none; }
.af-kachel .srv-in-kachel .srv-werte {
  padding: 5px 10px; gap: 2px 12px;
  flex-wrap: nowrap; overflow: hidden;
}


.af-kachel .srv-in-kachel .srv-karte { overflow-y: auto; }


.af-kachel .srv-in-kachel .srv-w { flex: none; max-width: 100%; }
.af-kachel .srv-in-kachel .srv-w:first-child,
.af-kachel .srv-in-kachel .srv-w:last-child { flex: 0 1 auto; min-width: 48px; }
.af-kachel .srv-in-kachel .srv-w code {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.af-kachel .srv-in-kachel .srv-buehne { min-height: 64px; }
.af-kachel .srv-in-kachel .srv-logs { height: auto; flex: 0 1 38%; min-height: 56px; }


.af-kachel.af-zieht { opacity: .55; }
.af-kachel.af-ziel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--hebung); }

.af-leiste { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
.af-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  font: inherit; font-size: 11.5px; letter-spacing: var(--spur); color: var(--muted);
  background: var(--flaeche); border: 1px solid var(--line); border-radius: var(--r-rund);
  box-shadow: var(--hebung); cursor: pointer;
}
.af-chip:hover { border-color: var(--accent); color: var(--text); }
.af-chip svg { width: 13px; height: 13px; color: var(--accent); }


.lb-url {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.lb-mass {
  flex: none; padding: 1px 7px;
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  border: 1px solid var(--linie); border-radius: var(--r-rund);
}
.lb-chip {
  flex: none; padding: 1px 8px; font-size: 10.5px; font-weight: 600;
  border-radius: var(--r-rund); white-space: nowrap;
}
.lb-wartet { color: var(--warn-tief); background: var(--warn-flaeche); border: 1px solid var(--warn-linie); }
.lb-steuert { color: var(--auf-farbe); background: var(--warn); }


.lb-schloss[aria-pressed="true"] { color: var(--warn); border-color: var(--warn); background: var(--warn-flaeche); }
.lb.lb-greift { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn), var(--hebung); }


.lb[data-lage="live"] .af-symbol svg { color: var(--ok); }
.lb[data-lage="zu"] .af-symbol svg,
.lb[data-lage="verbinde"] .af-symbol svg { color: var(--faint); }
.lb[data-lage="fehler"] .af-symbol svg { color: var(--fehler); }

.lb-buehne {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow: hidden; background: var(--flaeche-2);
}
.lb-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }


.lb-schicht { position: absolute; left: 0; top: 0; width: 0; height: 0;
              overflow: hidden; pointer-events: none; }
.lb-leer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--faint); font-size: 12px; letter-spacing: var(--spur);
}
.lb-leer svg { width: 28px; height: 28px; }



.lb-fang { position: absolute; inset: 0; cursor: default; outline: none; }
.lb-fang.greift { cursor: default; }
.lb-tasten {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  padding: 0; border: 0; opacity: 0; resize: none; pointer-events: none;
}
.lb-zeile {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: 24px; padding: 0 10px;
  border-top: 1px solid var(--linie);
  font-size: 11px; letter-spacing: var(--spur); color: var(--muted);
}
.lb-tat { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rate { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }





.lb-zeiger {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 20px; height: 24px; margin: -2px 0 0 -2px;
  transition: transform var(--d2) var(--ease-out);
  will-change: transform;
}


.lb-zeiger-svg {
  display: block; width: 20px; height: 24px;
  fill: var(--zeiger); stroke: var(--zeiger-rand);
  stroke-width: 1.4; stroke-linejoin: round;
}
.lb-marke { position: absolute; pointer-events: none; }
.lb-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 2px solid var(--marke-frage);
  animation: lb-ring 700ms var(--ease-out) forwards;
}
@keyframes lb-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.lb-kasten { position: absolute; pointer-events: none; border-radius: 4px; }
.lb-k-ziel { outline: 2px solid var(--marke-frage); outline-offset: 2px;
             animation: lb-weg 700ms ease-in forwards; }
.lb-k-tippen { outline: 2px solid var(--marke-gut); outline-offset: 2px;
               animation: lb-weg 1800ms ease-in forwards; }
.lb-k-zeigen { outline: 2px dashed var(--marke-hinweis); outline-offset: 2px;
               animation: lb-weg 1400ms ease-in forwards; }
.lb-k-rahmen { outline: 2px solid var(--marke-kritisch);
               animation: lb-weg 2600ms ease-in forwards; }
.lb-k-wort,
.lb-k-nr {
  position: absolute; left: -2px; top: -21px;
  padding: 0 6px; border-radius: 4px;
  font: 600 10.5px/17px var(--sans); letter-spacing: var(--spur);
  color: var(--marke-text); background: var(--marke-gut); white-space: nowrap;
}
.lb-k-nr { background: var(--marke-kritisch); }
.lb-rollen {
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--code-schleier);
  animation: lb-weg 900ms ease-in forwards;
}
.lb-rollen svg { width: 22px; height: 22px; fill: none; stroke: var(--marke-text); stroke-width: 2; }
.lb-rollen.hoch svg { transform: rotate(180deg); }
.lb-taste {
  left: 50%; bottom: 14px; transform: translateX(-50%);
  min-width: 28px; padding: 4px 10px; border-radius: 6px;
  font: 600 12px/16px var(--mono); text-align: center;
  color: var(--marke-text); background: var(--code-schleier);
  animation: lb-weg 1100ms ease-in forwards;
}
.lb-blitz { inset: 0; background: var(--buehne); animation: lb-blitz 450ms ease-out forwards; }
@keyframes lb-blitz { from { opacity: .7; } to { opacity: 0; } }
@keyframes lb-weg { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }


#live-btn { cursor: pointer; }
#live-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-deep); }

@media (max-width: 1100px) { .af { min-width: 300px; } }
@media (prefers-reduced-motion: reduce) {
  .lb-zeiger { transition: none; }
  .lb-ring, .lb-kasten, .lb-rollen, .lb-taste, .lb-blitz { animation: none; }
}


















.vl-mess {
  display: grid; gap: 3px; margin-top: 4px;
  font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}


.vl-mess-tun {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 8px;
}
.vl-mess-wort { font-weight: 600; overflow-wrap: anywhere; }
.vl-mess-wort.akzent { color: var(--accent-deep); }
.vl-mess-wort.leise  { color: var(--text-3); font-weight: 500; }
.vl-mess-wort.fehler { color: var(--fehler); }
.vl-mess-datei { font-family: var(--mono); font-weight: 500; }
.vl-mess-zeit { color: var(--text-3); white-space: nowrap; }
.vl-mess-zahlen { color: var(--text-2); }
.vl-mess .ca, .k-laeuft .ca { color: var(--text-3); font-weight: 400; }
.vl-deckel {
  height: 3px; margin-top: 3px; overflow: hidden;
  background: var(--linie); border-radius: var(--r-rund);
}
.vl-deckel i {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: inherit;
  transition: width .6s ease;
}
.vl-deckel.knapp i { background: var(--warn); }
.vl-loop.abgebrochen { border-color: var(--fehler); }
.vl-loop.abgebrochen .vl-punkt { display: none; }
.vl-loop.abgebrochen .vl-deckel i { background: var(--fehler); }

.kosten-wrap .k-laeuft { display: none; }
.kosten-wrap.laeuft .k-laeuft:not(:empty) { display: inline; }
.k-laeuft { margin-left: 6px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.k-laeuft .k-leise { color: var(--text-3); }
.k-abbruch { color: var(--fehler); }

.turn .note.note--abbruch {
  display: block;
  font-size: 12px; line-height: 1.55; color: var(--text-2);
  border: 1px solid color-mix(in srgb, var(--fehler) 50%, transparent);
  padding: 6px 12px 6px 12px; margin: 8px 0;
  font-variant-numeric: tabular-nums;
}
.note--abbruch .note__wort { color: var(--fehler); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .vl-deckel i { transition: none; }
}




























.vl-lauf > .vl-block {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 4000px;
  overflow-clip-margin: 48px;
}



.vl-lauf > .vl-block.vl-block--jung { content-visibility: visible; }

















#chat-inner > .turn:not(.live) { contain-intrinsic-block-size: auto 1500px; }
#chat-inner.zug-ruht > .turn:not(.live) { content-visibility: auto; overflow-clip-margin: 48px; }














.nke-gz-code .nke-z.neu.frisch {
  animation: none;
  position: relative;
  isolation: isolate;
}
.nke-gz-code .nke-z.neu.frisch::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--diff-neu);
  animation: nke-gz-leuchten-deckung var(--nke-gz-frisch, 10s) ease-out both;
}
@keyframes nke-gz-leuchten-deckung {
  0%, 4%   { opacity: .40; }
  13%, 88% { opacity: .13; }
  100%     { opacity: 0; }
}


@media (prefers-reduced-motion: reduce) {
  .nke-gz-code .nke-z.neu.frisch::before { display: none; }
}
.nke.nke-ohne-leuchten .nke-gz-code .nke-z.neu.frisch::before { display: none; }













.nk-genie {
  position: fixed; inset: 0; z-index: 99000;
  pointer-events: none; overflow: hidden;
}
.nk-genie-flug { position: absolute; inset: 0; }


.nk-genie-flug, .nk-genie-flug * { animation: none !important; transition: none !important; }
.nk-genie-streifen { position: absolute; overflow: hidden; will-change: transform; }

.nk-genie-leer { background: var(--flaeche-2); }
.nk-genie-rahmen {
  display: flex; align-items: flex-start;
  padding: 10px 12px; box-sizing: border-box; overflow: hidden;
  font-size: 12px; color: var(--text-2);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-2);
}



#bewegung-knopf .w-oben, #bewegung-knopf .w-unten, #bewegung-knopf .strich { display: none; }
#bewegung-knopf[data-bewegung="voll"] .w-oben,
#bewegung-knopf[data-bewegung="voll"] .w-unten { display: inline; }
#bewegung-knopf[data-bewegung="voll"] .w-mitte { display: none; }
#bewegung-knopf[data-bewegung="aus"] .strich { display: inline; }
#bewegung-knopf[data-bewegung="aus"] { color: var(--text-3); }


















@keyframes vl-ein {
  from { opacity: 0; translate: -10px 0; clip-path: inset(0 100% 0 0 round var(--radius)); }
  to   { opacity: 1; translate: 0 0;     clip-path: inset(0 0 0 0 round var(--radius)); }
}
.vl-loop.vl-ein { animation: vl-ein 300ms var(--ease-out) both; }

@keyframes vl-fertig {
  0%   { box-shadow: var(--edge), 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  100% { box-shadow: var(--edge), 0 0 0 7px transparent; }
}
.vl-loop.vl-fertig { animation: vl-fertig 900ms ease-out; }




@keyframes vl-fluss { to { stroke-dashoffset: -6.5; } }
html[data-bewegung="voll"] .vl-band.vl-fliesst .vl-band-linien path {
  animation: vl-fluss 700ms linear infinite;
}




html[data-bewegung="voll"] .vl-lauf.vl-aktiv::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: -2px; width: 5.5px; top: 21px; bottom: 0;
  border-radius: 3px;
  background-image: linear-gradient(to bottom, transparent,
                    color-mix(in srgb, var(--accent) 55%, transparent) 50%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 72px;
  background-position: 0 -72px;
  animation: vl-funke 2.6s var(--ease-in-out) infinite;
}
html[data-bewegung="voll"] .vl-strang.m1 .vl-lauf.vl-aktiv::before {
  background-image: linear-gradient(to bottom, transparent,
                    color-mix(in srgb, var(--brown) 55%, transparent) 50%, transparent);
}
@keyframes vl-funke {
  from { background-position: 0 -72px; }
  to   { background-position: 0 calc(100% + 72px); }
}







.af.af-ueber { position: fixed; flex: none; z-index: 50; }






.chat-inner.nk-glatt { overflow: clip; overflow-clip-margin: 120px; }



















.vl-ergebnis {
  border: 0; padding: 0; border-radius: 0; background: none;
  position: relative;
  --eg-seite: clamp(220px, 31%, 320px);
  --eg-dauer: 3000ms;
}
.vl-erg-haupt {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 18px 16px;
  --eg-rahmen: var(--accent);
}
.vl-strang.m1 .vl-erg-haupt { --eg-rahmen: var(--brown); }



.vl-erg-haupt::before,
.eg-block::before {
  content: ""; position: absolute; inset: -1px; z-index: 1;
  border: 1px solid var(--eg-rahmen, var(--linie-stark));
  border-radius: inherit; pointer-events: none;
}


.eg-block {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 8px 12px 12px;
  min-width: 0;
}
.eg-kopf {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.eg-titel { font-size: 10.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.eg-zahl {
  margin-left: auto; font-size: 10.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.eg-zahl:empty { display: none; }



.eg-spalte-knopf {
  display: none; flex: none; align-self: center; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin: -5px -5px -5px auto; padding: 0;
  border: 0; border-radius: 7px; background: none; color: var(--faint); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.eg-zahl:not(:empty) + .eg-spalte-knopf { margin-left: 0; }
.vl-ergebnis.eg-spalte-frei .eg-spalte-knopf { display: inline-flex; }
.eg-spalte-knopf:hover { background: var(--line-soft); color: var(--text); }
.eg-spalte-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.eg-spalte-knopf svg { width: 14px; height: 14px; display: block; overflow: visible; }
.eg-spalte-knopf .eg-sk-fuell { opacity: .55; transition: opacity .2s; }
.eg-spalte-knopf.eg-sk-zu .eg-sk-fuell { opacity: 0; }
.eg-block.eg-ein { visibility: hidden; }
.eg-inhalt { margin: 0; min-width: 0; }

.eg-block:has(> .eg-inhalt:empty) { display: none; }


.vl-ergebnis.mit-seite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-items: start;
}
.vl-ergebnis.mit-seite.eg-neben {
  grid-template-columns: minmax(0, 1fr) var(--eg-seite);
  column-gap: var(--a-6);
}
.vl-ergebnis.mit-seite > .vl-erg-haupt { grid-column: 1; grid-row: 1 / span 3; }
.vl-ergebnis.mit-seite > .eg-block {
  grid-column: 1 / -1; order: 2;
  margin-top: var(--a-6);
}
.vl-ergebnis.mit-seite.eg-neben > .eg-block[data-platz="seite"] {
  grid-column: 2; order: 1; margin-top: 0;
}
.vl-ergebnis.mit-seite.eg-neben > .eg-block[data-platz="seite"] ~ .eg-block[data-platz="seite"] {
  margin-top: var(--a-6);
}



.vl-ergebnis.eg-neben > .vl-erg-haupt::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  right: calc(var(--a-6) / -2 - 2px);
  border-left: var(--strich-fein);
  opacity: 0; pointer-events: none;
}
.eg-block::after {
  content: ""; position: absolute; left: 0; right: 0; display: none;
  top: calc(var(--a-6) / -2 - 1px);
  border-top: var(--strich-fein);
  opacity: 0; pointer-events: none;
}
.vl-ergebnis.mit-seite > .eg-block[data-platz="unten"]::after,
.vl-ergebnis.eg-neben > .eg-block[data-platz="seite"] ~ .eg-block[data-platz="seite"]::after { display: block; }

.vl-ergebnis.erg-ruhig > .vl-erg-haupt::after,
.vl-ergebnis.erg-ruhig > .eg-block::after { opacity: 1; }
.vl-ergebnis.erg-ruhig > .vl-erg-haupt::before,
.vl-ergebnis.erg-ruhig > .eg-block::before { display: none; }





@property --eg-wisch { syntax: "<percentage>"; inherits: false; initial-value: -18%; }
@keyframes eg-wisch { from { --eg-wisch: -18%; } to { --eg-wisch: 100%; } }
@keyframes eg-strich-ein { from { opacity: 0; } to { opacity: 1; } }
.vl-ergebnis.erg-loest > .vl-erg-haupt::before,
.vl-ergebnis.erg-loest > .eg-block::before {
  -webkit-mask-image: linear-gradient(to top left, transparent var(--eg-wisch), currentcolor calc(var(--eg-wisch) + 18%));
          mask-image: linear-gradient(to top left, transparent var(--eg-wisch), currentcolor calc(var(--eg-wisch) + 18%));
  animation: eg-wisch var(--eg-dauer) var(--ease-in-out, ease-in-out) forwards;
}
.vl-ergebnis.erg-loest > .vl-erg-haupt::after,
.vl-ergebnis.erg-loest > .eg-block::after {
  animation: eg-strich-ein var(--eg-dauer) ease-in forwards;
}
html[data-bewegung="aus"] .vl-ergebnis.erg-loest > .vl-erg-haupt::before,
html[data-bewegung="aus"] .vl-ergebnis.erg-loest > .eg-block::before,
html[data-bewegung="aus"] .vl-ergebnis.erg-loest > .vl-erg-haupt::after,
html[data-bewegung="aus"] .vl-ergebnis.erg-loest > .eg-block::after { animation-duration: 1ms; }







.eg-inhalt { display: flex; flex-direction: column; gap: var(--a-3); }
.eg-kacheln, .eg-dateien { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-3); }
.eg-kacheln:empty, .eg-dateien:empty { display: none; }


.eg-block[data-platz="unten"] .eg-kacheln {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: stretch;
}
.eg-block[data-platz="unten"] .eg-kacheln > * { max-width: 480px; }

.eg-block[data-platz="unten"] .eg-dateien {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--a-2) var(--a-3);
}
.eg-block[data-platz="unten"] .eg-dateien > * { max-width: 560px; }


.eg-block.eg-artefakte[data-platz="unten"] .eg-inhalt {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
}
.eg-block.eg-artefakte[data-platz="unten"] .eg-inhalt > .mediawrap,
.eg-block.eg-artefakte[data-platz="unten"] .eg-inhalt > .mediacard { max-width: 480px; }
.eg-block.eg-artefakte[data-platz="unten"] .eg-inhalt > .wgkarte,
.eg-block.eg-artefakte[data-platz="unten"] .eg-inhalt > .zeig-ergebnis,
.eg-block.eg-artefakte[data-platz="unten"] .eg-inhalt > .m-notiz { grid-column: 1 / -1; }


.eg-block .wgkarte,
.eg-block .zeigkarte,
.eg-block .zeig-ergebnis,
.eg-block .mediacard { margin: 0; }
.eg-block .m-notiz { font-size: 10.5px; color: var(--faint); }





.eg-block .mediawrap {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--grund);
}
.eg-block .mediawrap > .mediacard {
  border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; box-shadow: none;
  background: var(--flaeche);
}
.eg-block .m-preview {
  display: block; flex: 1 1 auto; width: 100%; height: auto; min-height: 120px; max-height: 320px;
  object-fit: contain; background: var(--grund); border: 0; border-radius: 0; cursor: zoom-in;
}
.eg-block[data-platz="seite"] .m-preview { max-height: 300px; }




.eg-block .mediacard { min-width: 0; padding: 6px 10px; }
.eg-block .mediacard .m-name { min-width: 0; flex: 1 1 auto; direction: rtl; text-align: left; }
.eg-dateien > .mediacard { padding: 6px 12px; }


.eg-block .mv-vorschau { margin: 0; border: 0; cursor: zoom-in; }
.eg-block .mv-vorschau .zeig-md,
.eg-block .mv-vorschau .v-doku-inhalt { font-size: 11px; }


.eg-block .zeigkarte .zeig-rahmen { height: 260px; }
.eg-block .zeigkarte .zeig-inhalt { height: 240px; }
.eg-block .mediawrap > .mv-vorschau { height: 190px; }
.eg-block .mediawrap > iframe.mv-vorschau { height: 200px; }








.turn.hat-erg > .turn-meta,
.turn.hat-erg > .unbelegt,
.turn.hat-erg > .turn-error,
.turn.hat-erg > .medialist { margin-left: 24px; }









.md blockquote > :first-child { margin-top: 0; }
.md blockquote > :last-child { margin-bottom: 0; }





.nke-ft { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 15px; height: 15px; }
.nke-ft svg { width: 15px; height: 15px; display: block; }
.nke-tab .nke-ft { margin: 0 6px 0 2px; }
.nke-bz-sprache {
  display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; padding-left: 12px;
  font-size: 10.5px; color: var(--code-fg-4); white-space: nowrap;
}
.nke-bz-zeit { margin-left: 0; }
.nke-st-lang { display: inline-flex; align-items: center; gap: 6px; }
.nke-st-lang .nke-ft, .nke-st-lang .nke-ft svg { width: 13px; height: 13px; }
@container (max-width: 340px) { .nke-bz-sprache .nke-sprname { display: none; } }






html[data-codebunt="bunt"] { --tok-control: #6EA8FF; }
html[data-codebunt="bunt"] .bn-eig { color: #E08CFF; }
html[data-codebunt="bunt"] .bn-v0 { color: #FF8FA3; }
html[data-codebunt="bunt"] .bn-v1 { color: #FFB070; }
html[data-codebunt="bunt"] .bn-v2 { color: #E6D96B; }
html[data-codebunt="bunt"] .bn-v3 { color: #9BE37D; }
html[data-codebunt="bunt"] .bn-v4 { color: #6FE3C1; }
html[data-codebunt="bunt"] .bn-v5 { color: #6CCBFF; }
html[data-codebunt="bunt"] .bn-v6 { color: #9D9BFF; }
html[data-codebunt="bunt"] .bn-v7 { color: #F5A0D2; }
html[data-codebunt="bunt"] .bn-g2 { color: #FF9151; }
html[data-codebunt="bunt"] .bn-g3 { color: #5EDFEE; }
html[data-codebunt="bunt"] .bn-g4 { color: #A2DF60; }
html[data-codebunt="bunt"] .bn-g5 { color: #AC99FE; }
html[data-codebunt="bunt"] .bn-av-class { color: #A2DF60; }
html[data-codebunt="bunt"] .bn-av-id { color: #FF9151; }
html[data-codebunt="bunt"] .bn-av-url { color: #5EDFEE; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
html[data-codebunt="bunt"] .bn-av-misc { color: #E08CFF; }







.nke {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 40px;
  grid-template-rows: minmax(0, 1fr) auto;
}
.nke-haupt {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
}
.nke-status { grid-column: 1 / -1; grid-row: 2; }



.nke-pfad-text,
.nke-pfad [data-act="baum"],
.nke-pfad [data-act="auto"],
.nke-fassungen [data-act="f-baum"],
.nke-status [data-act="gesamt"],
.nke-status [data-act="ganz"],
.nke-status [data-act="umbruch"],
.nke-status [data-act="tempo"] { display: none !important; }


.nke-pfad { min-height: 34px; padding: 0 6px 0 12px; font-size: 11.5px; color: var(--code-fg-3); }
.nke-kr {
  display: flex; align-items: center; gap: 5px; min-width: 0; flex: 0 1 auto;
  overflow: hidden; white-space: nowrap;
}
.nke-kr > * { flex: none; }
.nke-kr i { font-style: normal; color: var(--code-fg-5); }
.nke-kr .nke-wbi { color: var(--code-ort-plattform); }
.nke-kr b { font-weight: 500; color: var(--code-weiss); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nke-kr .nke-kr-o { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nke-kr .nke-ft, .nke-kr .nke-ft svg { width: 14px; height: 14px; }
.nke-seg {
  display: inline-flex; flex: none; margin-right: 6px; padding: 2px; gap: 1px;
  background: color-mix(in srgb, var(--code-bg) 70%, #000); border: 1px solid var(--code-rand); border-radius: 8px;
}
.nke-seg button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--code-fg-4); font: 500 11px/1.2 var(--sans); white-space: nowrap;
}
.nke-seg button:hover { color: var(--code-fg-2); background: var(--code-hover); }
.nke-seg button.an { background: var(--code-bg-4); color: var(--code-weiss); }
.nke-seg button:disabled { opacity: .4; cursor: default; background: none; }


.nke-rail {
  grid-column: 3; grid-row: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
  background: var(--code-bg-2); border-left: 1px solid var(--code-rand);
}
.nke-rl {
  position: relative; width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--code-fg-4);
}
.nke-rl:hover { color: var(--code-fg-2); background: var(--code-hover); }
.nke-rl.an { color: var(--code-weiss); background: var(--code-bg-4); }
.nke-rl.unten { margin-top: auto; }
.nke-rl-zahl {
  position: absolute; top: 2px; right: 2px; min-width: 13px; height: 13px; padding: 0 3px; box-sizing: border-box;
  border-radius: 7px; background: var(--code-warn); color: #1e1e1e;
  font: 700 8.5px/13px var(--sans); font-style: normal; text-align: center;
}
.nke-rl-zahl[hidden] { display: none; }


.nke-seite {
  grid-column: 2; grid-row: 1;
  display: none; flex-direction: column; width: 300px; min-height: 0; overflow: hidden;
  background: color-mix(in srgb, var(--code-bg) 88%, #000); border-left: 1px solid var(--code-rand);
}
.nke.seite-an .nke-seite { display: flex; }
.nke.nke-schmal { grid-template-columns: minmax(0, 1fr) 0 40px; }
.nke.nke-schmal .nke-seite {
  grid-column: 1 / 3; justify-self: end; z-index: 4;
  width: min(300px, calc(100% - 24px));
  box-shadow: -12px 0 30px var(--code-schleier);
}
.nke-se-kopf {
  display: flex; align-items: center; gap: 2px; flex: none; height: 34px; padding: 0 6px 0 12px;
  border-bottom: 1px solid var(--code-rand);
}
.nke-se-titel {
  flex: 1; min-width: 0; color: var(--code-fg-3);
  font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.nke-se-knoepfe { display: flex; gap: 2px; }
.nke-se-inhalt { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--code-rand-2) transparent; }
.nke-se-p { display: flex; flex-direction: column; padding-bottom: 10px; }
.nke-se-p[hidden] { display: none; }
.nke-se-leer { padding: 18px 14px; color: var(--code-fg-4); font-size: 11.5px; line-height: 1.55; }
.nke-se-gr {
  padding: 10px 12px 5px; color: var(--code-fg-5);
  font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.nke-chip {
  display: inline-flex; align-items: center; flex: none; padding: 1px 7px; border-radius: 9px;
  background: color-mix(in srgb, var(--diff-neu) 15%, transparent); color: var(--diff-neu);
  font-size: 10px; font-weight: 500; white-space: nowrap;
}
.nke-chip.grau { background: var(--code-bg-3); color: var(--code-fg-3); }
.nke-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px 10px 5px; flex: none; }
.nke-chips button {
  padding: 2px 8px; border: 1px solid var(--code-rand); border-radius: 10px; background: none; cursor: pointer;
  color: var(--code-fg-4); font: 10.5px/1.4 var(--sans); white-space: nowrap;
}
.nke-chips button i { font-style: normal; color: var(--code-fg-5); }
.nke-chips button:hover { color: var(--code-fg-2); border-color: var(--code-rand-2); }
.nke-chips button.an { background: color-mix(in srgb, var(--code-fg) 90%, var(--code-bg)); border-color: transparent; color: #1b1b1b; font-weight: 600; }
.nke-chips button.an i { color: #555; }


.nke-se-p.nke-se-dateien { height: 100%; padding-bottom: 0; box-sizing: border-box; }
.nke-seite .nke-baum { display: block; flex: 1; min-height: 0; overflow: auto; padding: 0 0 8px; container-type: inline-size; }
.nke-seite .nke-baum-kopf { padding: 5px 10px 6px; gap: 8px; font-size: 10.5px; }
.nke-seite .nke-bk-legende { display: none; }
.nke-seite .nke-welt { padding: 3px 0 4px; }
.nke-seite .nke-wk { min-height: 24px; padding: 0 10px; gap: 6px; font-size: 12px; }
.nke-seite .nke-wk-ic, .nke-seite .nke-bz-ic { width: 13px; }
.nke-seite .nke-wk-ic svg { width: 14px; height: 14px; }
.nke-seite .nke-wk-neben { display: inline; }



.nke-seite .nke-wk-wort, .nke-seite .nke-wk .nke-bz-anzahl, .nke-seite .nke-wk .nke-zahlen { white-space: nowrap; flex: none; }
.nke-seite .nke-wk-neben { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
@container (max-width: 300px) { .nke-seite .nke-wk-neben { display: none; } }
.nke-seite .nke-bz { min-height: 21px; margin: 0 4px; padding: 0 6px 0 6px; border-radius: 5px; font-size: 11.8px; }
.nke-seite .nke-bz.aktiv { background: color-mix(in srgb, var(--code-f-geaendert) 13%, var(--code-bg-3)); }
.nke-seite .nke-bz-inhalt { gap: 6px; padding: 1px 0; }
.nke-seite .nke-fl-e { width: 14px; }
.nke-seite .nke-fl-e.weiter::before,
.nke-seite .nke-fl-e.ast::before,
.nke-seite .nke-fl-e.ast::after { left: 6px; }
.nke-seite .nke-bz-ic svg { width: 13px; height: 13px; }
.nke-seite .nke-bz-spur { display: flex; gap: 3px; max-width: 34%; }
.nke-seite .nke-punktchen { width: 7px; height: 7px; border-width: 1.3px; }
.nke-seite .nke-zahlen { font-size: 10px; gap: 4px; }
.nke-seite .nke-balken,
.nke-seite .nke-bz-zeit,
.nke-seite .nke-bz-sprache .nke-sprname,
.nke-se-dateien .nke-strahl { display: none; }
.nke-seite .nke-bz-sprache { padding-left: 6px; }
.nke-seite .nke-bz-sprache .nke-ft, .nke-seite .nke-bz-sprache .nke-ft svg { width: 13px; height: 13px; }
.nke.nke-ohne-punkte .nke-seite .nke-bz-spur { display: none; }


.nke-steck {
  flex: none; margin: 6px 8px 8px; padding: 9px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--code-bg-2) 70%, var(--code-bg)); border: 1px solid var(--code-rand);
}
.nke-steck[hidden] { display: none; }
.nke-sk-o { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nke-sk-ic .nke-ft, .nke-sk-ic .nke-ft svg { width: 22px; height: 22px; }
.nke-sk-t { display: flex; flex-direction: column; min-width: 0; }
.nke-sk-t b { color: var(--code-weiss); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nke-sk-t small { color: var(--code-fg-4); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nke-sk-kv { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 7px 0 8px; color: var(--code-fg-4); font-size: 10.5px; }
.nke-sk-kv b { color: var(--code-fg); font-weight: 600; }
.nke-sk-gilt { color: var(--diff-neu); }
.nke-sk-k { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.nke-sk-kn, .nke-se-kn {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 5px 8px; border-radius: 7px; border: 1px solid var(--code-rand); background: var(--code-bg-3); cursor: pointer;
  color: var(--code-fg-3); font: 11px/1.3 var(--sans); white-space: nowrap; text-align: left;
}
.nke-sk-kn span, .nke-se-kn span { overflow: hidden; text-overflow: ellipsis; }
.nke-sk-kn:hover, .nke-se-kn:hover { background: var(--code-bg-4); color: var(--code-weiss); }
.nke-wbi { display: block; flex: none; }


.nke-vs {
  display: flex; align-items: center; gap: 8px; margin: 0 8px 3px; padding: 5px 8px;
  border-radius: 7px; border: 1px solid var(--code-rand); background: var(--code-bg-2); cursor: pointer;
  color: var(--code-fg-4); font: 11.5px/1.3 var(--sans); text-align: left;
}
.nke-vs b { color: var(--code-fg); font-weight: 600; }
.nke-vs:hover { border-color: var(--code-rand-2); background: var(--code-bg-3); }
.nke-vs-z, .nke-vk-zahl { margin-left: auto; font: 600 10.5px/1 var(--mono); white-space: nowrap; }
.nke-vk { position: relative; display: flex; gap: 9px; padding: 0 10px 8px; }
.nke-vk::before {
  content: ""; position: absolute; left: 20px; top: 22px; bottom: 0; width: 2px; background: var(--code-rand);
}
.nke-vk:last-of-type::before { display: none; }
.nke-vk-pk {
  position: relative; z-index: 1; flex: none; width: 22px; height: 22px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--code-bg-3); border: 1px solid var(--code-rand-2); color: var(--code-fg-2); font: 700 10.5px/1 var(--sans);
}
.nke-vk-pk.gilt { background: var(--diff-neu); border-color: var(--diff-neu); color: #172012; }
.nke-vk.an .nke-vk-pk:not(.gilt) { border-color: var(--code-f-geaendert); color: var(--code-f-geaendert); }
.nke-vk-k {
  flex: 1; min-width: 0; padding: 7px 9px; border-radius: 9px;
  background: var(--code-bg-2); border: 1px solid var(--code-rand);
}
.nke-vk.an .nke-vk-k { border-color: color-mix(in srgb, var(--code-f-geaendert) 38%, var(--code-rand)); }
.nke-vk-o { display: flex; align-items: center; gap: 7px; font-size: 12px; min-width: 0; }
.nke-vk-o b { color: var(--code-weiss); font-weight: 600; white-space: nowrap; }
.nke-vk-zeit { color: var(--code-fg-4); font-size: 10.5px; }
.nke-vk-u { margin-top: 3px; color: var(--code-fg-4); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nke-vk-kn { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.nke-vk-kn:empty { display: none; }
.nke-vk-kn button, .nke-mz-kn {
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--code-rand); background: var(--code-bg-3); cursor: pointer;
  color: var(--code-fg-2); font: 10.5px/1.3 var(--sans); white-space: nowrap;
}
.nke-vk-kn button:hover, .nke-mz-kn:hover { background: var(--code-bg-4); color: var(--code-weiss); }
.nke-vk-kn button.hell { background: color-mix(in srgb, var(--code-fg) 90%, var(--code-bg)); border-color: transparent; color: #1a1a1a; font-weight: 600; }
.nke-se-verlauf .nke-se-kn { margin: 6px 10px 0; }
.nke-se-verlauf .nke-strahl { margin: 12px 10px 4px; }


.nke-sa-kopf { padding: 8px 10px 2px; }
.nke-sa-box {
  display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 4px 0 9px; box-sizing: border-box;
  border-radius: 7px; border: 1px solid var(--code-rand-2); background: color-mix(in srgb, var(--code-bg) 70%, #000);
  color: var(--code-fg-4);
}
.nke-sa-box:focus-within { border-color: var(--accent); }
.nke-sa-feld {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  color: var(--code-fg); font: 12px/1.3 var(--sans);
}
.nke-sa-opt {
  padding: 3px 5px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  color: var(--code-fg-4); font: 600 10.5px/1 var(--mono);
}
.nke-sa-opt.an { background: var(--code-bg-4); color: var(--code-weiss); }
.nke-sa-wo { padding: 6px 0 0; }
.nke-sa-gr { display: flex; align-items: center; gap: 7px; padding: 8px 10px 3px; color: var(--code-fg); font-size: 11.8px; }
.nke-sa-gr b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nke-sa-gr i { margin-left: auto; padding: 1px 6px; border-radius: 8px; background: var(--code-bg-3); color: var(--code-fg-4); font: 10px/1.4 var(--sans); font-style: normal; }
.nke-sa-z {
  display: block; width: calc(100% - 30px); margin: 0 6px 0 24px; padding: 2px 7px; box-sizing: border-box;
  border: 0; border-radius: 5px; background: none; cursor: pointer; text-align: left;
  color: var(--code-fg-3); font: 11.2px/1.55 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nke-sa-z:hover { background: var(--code-hover-2); color: var(--code-weiss); }
.nke-sa-nr { color: var(--code-fg-5); margin-right: 7px; }
.nke-sa-z mark { background: var(--code-fund); color: inherit; border-radius: 2px; }


.nke-se-gliederung { padding-top: 4px; }
.nke-gl {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 3px 10px; box-sizing: border-box;
  border: 0; background: none; cursor: pointer; text-align: left; color: var(--code-fg-3);
}
.nke-gl:hover { background: var(--code-hover); color: var(--code-weiss); }
.nke-gl-sy {
  flex: none; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 4px;
  font: 700 9.5px/1 var(--mono); background: var(--code-bg-3); color: var(--code-fg-3);
}
.nke-gl-fn .nke-gl-sy { color: var(--code-f-neu); background: color-mix(in srgb, var(--code-f-neu) 14%, transparent); }
.nke-gl-kl .nke-gl-sy { color: var(--code-f-geaendert); background: color-mix(in srgb, var(--code-f-geaendert) 14%, transparent); }
.nke-gl-k .nke-gl-sy { color: var(--code-warn); background: color-mix(in srgb, var(--code-warn) 14%, transparent); }
.nke-gl-sel .nke-gl-sy { color: var(--code-f-eingefuegt); background: color-mix(in srgb, var(--code-f-eingefuegt) 14%, transparent); }
.nke-gl-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11.5px/1.5 var(--mono); }
.nke-gl-h .nke-gl-n { font-family: var(--sans); }
.nke-gl-z { flex: none; color: var(--code-fg-5); font-size: 10px; font-variant-numeric: tabular-nums; }


.nke-pk {
  display: block; width: calc(100% - 16px); margin: 0 8px 6px; padding: 8px 10px; box-sizing: border-box;
  border-radius: 9px; border: 1px solid var(--code-rand); background: var(--code-bg-2); text-align: left;
  color: var(--code-fg); font: 11.8px/1.45 var(--sans);
}
.nke-pk[data-act] { cursor: pointer; }
.nke-pk[data-act]:hover { border-color: var(--code-rand-2); background: var(--code-bg-3); }
.nke-pk-o { display: flex; align-items: flex-start; gap: 7px; }
.nke-pk-o .nke-wbi { color: var(--code-warn); margin-top: 2px; }
.nke-pk-o b { flex: 1; min-width: 0; font-weight: 500; word-break: break-word; }
.nke-pk-z { flex: none; color: var(--code-fg-4); font-size: 10.5px; white-space: nowrap; }


.nke-seite .nke-sicht {
  position: static; max-height: none; overflow: visible;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.nke-se-mehr { border-top: 1px solid var(--code-rand); }
.nke-mz { display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--code-fg-2); font-size: 11.5px; }
.nke-mz > span:first-child { flex: 1; }
.nke-mseg {
  display: inline-flex; padding: 2px; gap: 1px; border-radius: 6px;
  background: color-mix(in srgb, var(--code-bg) 70%, #000); border: 1px solid var(--code-rand);
}
.nke-mseg button {
  padding: 2px 8px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  color: var(--code-fg-4); font: 10.5px/1.3 var(--sans);
}
.nke-mseg button.an { background: color-mix(in srgb, var(--code-fg) 90%, var(--code-bg)); color: #1a1a1a; font-weight: 600; }


.nke.nke-gr-s .nke-zeilen, .nke.nke-gr-s .nke-edit, .nke.nke-gr-s .nke-edit-nr, .nke.nke-gr-s .nke-vgl-flaeche { font-size: 10.5px; }
.nke.nke-gr-l .nke-zeilen, .nke.nke-gr-l .nke-edit, .nke.nke-gr-l .nke-edit-nr, .nke.nke-gr-l .nke-vgl-flaeche { font-size: 13px; }


.nke.vgl-an .nke-mitte,
.nke.vgl-an .nke-ganz,
.nke.vgl-an .nke-suchleiste,
.nke.vgl-an .nke-fliste { display: none; }
.nke-vgl { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nke-vgl[hidden] { display: none; }
.nke-vgl-kopf {
  display: grid; grid-template-columns: 1fr 1fr; flex: none;
  background: var(--code-bg-2); border-bottom: 1px solid var(--code-rand);
}
.nke-vgl-seite {
  display: flex; align-items: center; gap: 7px; min-width: 0; height: 30px; padding: 0 10px;
  color: var(--code-fg-4); font-size: 11px;
}
.nke-vgl-seite + .nke-vgl-seite { border-left: 1px solid var(--code-rand); }
.nke-vgl-seite select {
  min-width: 0; max-width: 60%; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--code-rand);
  background: var(--code-bg); color: var(--code-fg); font: 11px/1.3 var(--sans);
}
.nke-vgl-zahl { margin-left: auto; font: 600 10.5px/1 var(--mono); white-space: nowrap; color: var(--code-fg-4); }
.nke-vgl-flaeche {
  flex: 1; min-height: 0; overflow: auto; padding: 4px 0 30vh;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  scrollbar-color: var(--code-rand-2) var(--code-bg);
}

.nke .nke-vgl-flaeche, .nke .nke-vgl-flaeche *,
.nke .nke-sa-z, .nke .nke-sa-z *,
.nke .nke-gl-n, .nke .nke-gl-sy { font-family: var(--mono); }
.nke .nke-gl-h .nke-gl-n { font-family: var(--sans); }
.nke-vr { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px minmax(0, 1fr); }
.nke-vn {
  padding-right: 8px; text-align: right; color: var(--code-nr); user-select: none;
  font-variant-numeric: tabular-nums;
}
.nke-vn:nth-child(3) { border-left: 1px solid var(--code-rand); }
.nke-vt { padding: 0 10px 0 4px; white-space: pre; overflow: hidden; color: var(--code-fg); }
.nke.umbruch .nke-vt { white-space: pre-wrap; overflow-wrap: anywhere; }
.nke-vt.w, .nke-vn.w { background: rgba(254, 55, 118, .12); }
.nke-vt.n, .nke-vn.n { background: rgba(162, 223, 96, .11); }
.nke-vn.w { color: var(--diff-weg); }
.nke-vn.n { color: var(--diff-neu); }
.nke-vt.l, .nke-vn.l { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, .025) 6px 12px); }



.nke .nke-si.an .nke-si-schalter { background: color-mix(in srgb, var(--code-fg) 88%, var(--code-bg)); }
.nke .nke-si.an .nke-si-schalter i { background: #1a1a1a; }


.nke.nke-schmal .nke-kr > span:not(.nke-ft),
.nke.nke-schmal .nke-kr > i { display: none; }


.nke.nke-eng .nke-seg button span,
.nke.nke-eng .nke-kr > span:not(.nke-ft),
.nke.nke-eng .nke-kr > i,
.nke.nke-eng .nke-kr > .nke-wbi { display: none; }









.nke-flaeche { position: relative; }
.nke-zeilen.nke-tippt { isolation: isolate; }


.nke-band {
  position: absolute; left: 0; right: 0; top: 0; height: 1.55em; z-index: -1; pointer-events: none;
  background: var(--code-hover);
  transition: transform 170ms cubic-bezier(.2, .7, .2, 1); will-change: transform;
}

.nke-marke {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: 2px; height: 1.15em; margin-top: -.575em; border-radius: 1px;
  background: var(--code-caret); box-shadow: 0 0 6px rgba(255, 255, 255, .35);
  transition: transform var(--nke-gleit, 75ms) linear; will-change: transform;
}
.nke-marke.springt { transition: none; }
.nke-zeilen.nke-ruht .nke-marke { animation: nkeBlink 1.05s steps(1) infinite; }



.nke-z .nke-nr, .nke-z .nke-mark { transition: opacity .3s; }
.nke-z.nke-geruest .nke-nr, .nke-z.nke-geruest .nke-mark { opacity: .32; }
.nke-z.nke-geruest .nke-txt span, .nke-zc.zg {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(transparent 36%, color-mix(in srgb, currentColor 24%, transparent) 36% 70%, transparent 70%);
}
.nke-zc.zg.zl { background: none; }
.nke-z.nke-geruest.nke-kommt .nke-txt {
  transform-origin: left center;
  animation: nkeGeruest .42s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--nke-d, 0ms);
}
@keyframes nkeGeruest { from { opacity: 0; transform: scaleX(.25); } }


.nke-zc.zw { opacity: 0; }
.nke-zc.zr { color: var(--code-fg-4); }
.nke-zc.zf { transition: color .32s ease; }
.nke-zeilen.nke-schnell .nke-zc.zf { transition: none; }



.nke-zeilen.nke-weich .nke-zc.ze { display: inline-block; animation: nkeFeder var(--nke-weich, 180ms) cubic-bezier(.2, .65, .25, 1) backwards; }
.nke.umbruch .nke-zeilen.nke-weich .nke-zc.ze { display: inline; animation-name: nkeFederFlach; }
@keyframes nkeFeder {
  from { opacity: 0; transform: translateY(.32em); filter: blur(2px); }
  55% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes nkeFederFlach { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nke-zeilen.nke-weich .nke-zc.ze { animation: none; }
  .nke-band, .nke-marke { transition: none; }
}






.nke { grid-template-rows: auto minmax(0, 1fr) auto; }
.nke > .nke-pfad { grid-column: 1 / -1; grid-row: 1; border-bottom: 1px solid var(--code-rand); }
.nke-haupt, .nke-seite, .nke-rail { grid-row: 2; }
.nke-status { grid-row: 3; }
.nke-pfad { min-height: 38px; padding: 0 6px 0 0; gap: 2px; background: var(--code-bg-2); }
.nke-pfad .nke-kr, .nke-pfad .nke-spacer { display: none; }
.nke-pfad > .nke-tabs {
  flex: 1 1 auto; min-width: 0; align-self: stretch; align-items: flex-end;
  overflow: hidden; background: none; border-bottom: 0; padding-left: 6px;
}
.nke-pfad .nke-tab { flex: 0 1 auto; min-width: 112px; max-width: 210px; padding-top: 7px; padding-bottom: 7px; }

.nke-pfad .nke-tab:not(.schreibt) .nke-tab-punkt { display: none; }
.nke-pfad .nke-tab.aktiv { flex-shrink: 0; }
.nke-pfad .nke-tab-name { min-width: 0; }
.nke-pfad .nke-tab.nke-tab-weg { display: none; }

.nke-pfad .nke-tab:not(.aktiv):not(:hover) .nke-tab-zu { visibility: hidden; }
.nke-tabs-mehr {
  flex: none; align-self: center; height: 24px; margin: 0 6px 0 4px; padding: 0 8px;
  border: 0; border-radius: 6px; background: var(--code-bg-4); color: var(--code-fg-2);
  font: 600 11px/1 var(--sans); cursor: pointer; font-variant-numeric: tabular-nums;
}
.nke-tabs-mehr:hover { color: var(--code-weiss); }
.nke-tabs-mehr[hidden] { display: none; }
.nke-tabs-menue {
  position: absolute; z-index: 30; min-width: 220px; max-width: 340px; max-height: 60vh; overflow: auto;
  padding: 5px; border: 1px solid var(--code-rand); border-radius: 10px;
  background: var(--code-bg-3); box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.nke-tm-z {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--code-fg-2); font: 12px/1.3 var(--sans); text-align: left; cursor: pointer;
}
.nke-tm-z:hover { background: var(--code-hover); color: var(--code-weiss); }
.nke-tm-z .nke-ft, .nke-tm-z .nke-ft svg { width: 14px; height: 14px; flex: none; }
.nke-tm-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nke-pfad .nke-zu { width: 30px; height: 30px; margin-left: 2px; }
.nke-pfad .nke-zu:hover { background: color-mix(in srgb, var(--fehler, #f85149) 16%, transparent); color: var(--fehler, #f85149); }

.nke-unterkopf {
  display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; min-height: 34px; padding: 0 0 0 10px;
  background: var(--code-bg-2); border-bottom: 1px solid var(--code-rand);
}
.nke-unterkopf .nke-seg { margin: 0; }
.nke-unterkopf .nke-fassungen { flex: 1 1 auto; min-width: 0; border-bottom: 0; background: none; padding-left: 2px; }





.tm-kurz { display: inline-flex; align-items: baseline; flex-wrap: wrap; min-width: 0; margin-right: -8px; }
.tm-kurz > span { white-space: nowrap; }
.tm-kurz > span + span::before { content: "\00b7"; padding: 0 7px; color: var(--faint); opacity: .6; }
.tm-kurz .turn-modell { color: var(--text-2); }
.tm-kurz .turn-betrag { color: var(--text-2); font-weight: 600; }
.tm-kurz, .tm-det { font-variant-numeric: tabular-nums; }

.tm-det-knopf {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px 0 4px;
  border: 1px solid var(--line-soft); border-radius: 999px; background: transparent;
  color: var(--faint); font: inherit; line-height: 1; cursor: pointer;
  transition: color var(--d1) var(--ease-out), border-color var(--d1) var(--ease-out);
}
.tm-det-knopf:hover { color: var(--text); border-color: var(--line); }
.tm-det-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tm-sw {
  position: relative; flex: none; width: 21px; height: 12px; border-radius: 999px;
  background: var(--line); transition: background var(--d1) var(--ease-out);
}
.tm-sw i {
  position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform var(--d1) var(--ease-out);
}
.tm-det-knopf[aria-pressed="true"] { color: var(--text-2); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.tm-det-knopf[aria-pressed="true"] .tm-sw { background: var(--ok); }
.tm-det-knopf[aria-pressed="true"] .tm-sw i { transform: translateX(9px); }

.tm-det {
  display: none; order: 9; flex: 0 0 100%; box-sizing: border-box; min-width: 0; max-width: 860px; margin: 2px 0;
  padding: 10px 14px 8px; border: 1px solid var(--line-soft); border-radius: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 26px; font-size: 11px;
}
html.tm-details-an .tm-det { display: grid; }
.tm-det-kopf {
  margin-bottom: 2px; font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
}
.tm-det-reihe { display: flex; justify-content: space-between; gap: 12px; line-height: 1.7; }
.tm-det-wert { color: var(--text-2); white-space: nowrap; }
.tm-det-wert.tm-det-stark { font-weight: 600; }
.tm-det-fuss {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 4px 16px; padding-top: 6px; border-top: 1px solid var(--line-soft); font-size: 10.5px;
}
.tm-det-zeit > span + span::before { content: "\00b7"; padding: 0 6px; opacity: .6; }
.tm-det-fuss .turn-lauf { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .tm-det-knopf, .tm-sw, .tm-sw i { transition: none; } }



.tm-kurz .turn-agent { color: var(--text-2); }
.tm-det-modelle {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line-soft);
}
.tm-det-modelle .tm-det-kopf { margin: 0; }
.tm-det-modell { white-space: nowrap; }