/* Entwurf C · Arbeitskorb, übernommen aus Design Web/C-arbeitskorb.html */
  /* Variante C · Arbeitskorb: Das Büro startet bei dem, was zu tun ist. Links der Korb, rechts die Akte mit dem Lebenslauf des Auftrags und genau einer nächsten Aktion. Ruhiges Hellgrau, Indigo als Akzent, dunkle Seitenleiste. */
  :root {
    --grund: #f5f6f8; --flaeche: #ffffff; --flaeche-2: #eff1f5; --linie: #e3e6ec; --linie-stark: #cbd1db;
    --text: #131924; --text-2: #566073; --akzent: #3b34c4; --akzent-tief: #2c26a3; --akzent-text: #ffffff; --akzent-weich: #ecebfc;
    --rot: #b3261e; --rot-weich: #fcebe9; --gelb: #845a00; --gelb-punkt: #f2b300; --gelb-weich: #fff4d6;
    --gruen: #1c7a3c; --gruen-weich: #e4f3e8; --info: #1f69a8; --info-weich: #e6f0f9;
    --radius: 10px; --radius-klein: 6px; --block-pad: 16px; --block-abstand: 12px;
  }
  body { font-size: 14px; }
  .app { display: grid; grid-template-columns: 76px 1fr; min-height: 100vh; }
  .seite { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 8px; background: #161b26; color: #c7ccd6; }
  .seite .logo { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px; background: #2a3142; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; }
  .seite button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px; border: 0; border-radius: 10px; background: none; color: inherit; font-size: 11px; cursor: pointer; }
  .seite button .ic { width: 20px; height: 20px; }
  .seite button:hover { background: #222838; color: #fff; }
  .seite button[aria-current="page"] { background: #2d2a86; color: #fff; }
  .seite .zahl-marke { position: absolute; top: 4px; right: 10px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; }
  .seite .fuss { margin-top: auto; text-align: center; font-size: 10.5px; color: #8a92a3; }
  .arbeit { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; min-height: 100vh; }
  .korb { border-right: 1px solid var(--linie); background: var(--flaeche); display: flex; flex-direction: column; min-width: 0; }
  .korb-kopf { padding: 18px 18px 10px; }
  .korb-kopf h1 { font-size: 20px; letter-spacing: -.01em; }
  .korb-kopf p { margin-top: 6px; }
  .korb-liste { flex: 1; overflow: auto; padding: 0 10px 140px; }
  .korb h2 { font-size: 12px; font-weight: 700; color: var(--text-2); padding: 14px 8px 6px; display: flex; justify-content: space-between; }
  .aufgabe { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; width: 100%; padding: 10px 10px; border: 0; border-radius: var(--radius-klein); background: none; text-align: left; cursor: pointer; }
  .aufgabe:hover { background: var(--flaeche-2); }
  .aufgabe[aria-current="true"] { background: var(--akzent-weich); }
  .aufgabe .ic { margin-top: 2px; }
  .aufgabe b { font-size: 13.5px; }
  .aufgabe .zeile2 { grid-column: 2; font-size: 12.5px; color: var(--text-2); }
  .aufgabe .zeile2 strong { color: var(--text); font-weight: 600; }
  .s--hoch .ic { color: var(--rot); }
  .s--mittel .ic { color: var(--gelb); }
  .s--info .ic { color: var(--text-2); }
  .termin-kurz { display: grid; grid-template-columns: 84px 1fr; gap: 2px 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-klein); background: none; text-align: left; cursor: pointer; font-size: 12.5px; }
  .termin-kurz:hover { background: var(--flaeche-2); }
  .termin-kurz[aria-current="true"] { background: var(--akzent-weich); }
  .termin-kurz .zt { font-weight: 700; font-size: 13px; }
  .termin-kurz .info { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: flex-start; }
  .akte { min-width: 0; padding: 18px 24px 140px; }
  .akte-leer { display: grid; place-items: center; height: 60vh; color: var(--text-2); text-align: center; }
  .akte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
  .akte-kopf h2 { font-size: 24px; letter-spacing: -.015em; }
  .akte-kopf span { color: var(--text-2); }
  .naechste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 18px; padding: 14px 16px; border-radius: var(--radius); background: var(--akzent); color: #fff; }
  .naechste small { color: #d9d7ff; display: block; font-size: 12px; }
  .naechste b { font-size: 16px; }
  .naechste .knopf { background: #fff; color: var(--akzent); border-color: #fff; }
  .naechste--warten { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie-stark); }
  .naechste--warten small { color: var(--text-2); }
  .naechste--fertig { background: var(--gruen-weich); color: var(--gruen); }
  .naechste--fertig small { color: var(--gruen); }
  .lauf { list-style: none; margin: 0; padding: 0; position: relative; }
  .lauf::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--linie); }
  .lauf > li { position: relative; padding-left: 44px; margin-bottom: 10px; }
  .lauf > li::before { content: ""; position: absolute; left: 7px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--linie-stark); }
  .lauf > li.erledigt::before { background: var(--gruen); border-color: var(--gruen); box-shadow: inset 0 0 0 3px var(--flaeche); }
  .lauf > li.jetzt::before { border-color: var(--akzent); background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-weich); }
  .lauf > li.achtung::before { border-color: var(--rot); }
  .stufe-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: 100%; padding: 10px 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); text-align: left; cursor: pointer; }
  .stufe-kopf:hover { border-color: var(--linie-stark); }
  .stufe-kopf b { font-size: 14.5px; min-width: 150px; }
  .stufe-kopf .stufe-stand { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; color: var(--text-2); font-size: 12.5px; }
  .stufe-kopf .ic { margin-left: auto; transition: transform .18s; color: var(--text-2); }
  .offen > .stufe-kopf { border-radius: var(--radius) var(--radius) 0 0; border-bottom-color: transparent; }
  .offen > .stufe-kopf .ic:last-child { transform: rotate(90deg); }
  .stufe-inhalt { padding: 12px; border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--flaeche-2); }
  .stufe-inhalt .block { border-color: var(--linie); }
  .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .zwei > .block + .block, .zwei > * + .block { margin-top: 0; }
  .zwei + *, * + .zwei { margin-top: 12px; }
  /* Heute als Zeitleiste */
  .ansicht { padding: 18px 24px 140px; min-width: 0; }
  .ansicht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
  .ansicht-kopf h1 { font-size: 22px; letter-spacing: -.01em; }
  .tagwahl { display: inline-flex; align-items: center; gap: 4px; }
  .tagwahl button { min-height: 30px; padding: 0 8px; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--flaeche); cursor: pointer; }
  .leiste-zeit { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 14px 14px; overflow-x: auto; }
  .zeit-raster { position: relative; display: grid; grid-template-columns: 150px 1fr; min-width: 860px; }
  .stunden { position: relative; height: 22px; grid-column: 2; }
  .stunden span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--text-2); }
  .zeit-zeile { display: contents; }
  .zeit-name { padding: 12px 10px 12px 0; border-top: 1px solid var(--linie); font-size: 13px; }
  .zeit-name small { display: block; }
  .zeit-bahn { position: relative; height: 86px; border-top: 1px solid var(--linie); background-image: repeating-linear-gradient(to right, var(--linie) 0 1px, transparent 1px calc(100% / 13)); }
  .jetzt-linie { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rot); z-index: 2; }
  .jetzt-linie.erste::before { content: "09:30"; position: absolute; top: -18px; left: -16px; font-size: 10.5px; font-weight: 700; color: var(--rot); }
  .block-zeit { position: absolute; top: 8px; bottom: 8px; padding: 6px 9px; border-radius: var(--radius-klein); background: var(--akzent-weich); border: 1px solid #cfcbf7; overflow: hidden; cursor: pointer; text-align: left; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
  .block-zeit:hover { border-color: var(--akzent); }
  .block-zeit b { font-size: 12.5px; }
  .block-zeit.f--ueberfaellig, .block-zeit.f--fehlt { background: var(--rot-weich); border-color: #f2b8b2; }
  .block-zeit.f--bald { background: var(--gelb-weich); border-color: #f1d27a; }
  .block-zeit.frei { background: repeating-linear-gradient(-45deg, var(--flaeche), var(--flaeche) 6px, var(--flaeche-2) 6px, var(--flaeche-2) 12px); border-style: dashed; }
  .liste-karte { margin-top: 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow-x: auto; }
  .liste-karte tr[data-oeffne] { cursor: pointer; }
  .liste-karte tr[data-oeffne]:hover td { background: var(--flaeche-2); }
  /* Woche als Agenda */
  .kol-uebersicht { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 16px; }
  .kol-uebersicht > div { padding: 12px 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
  .kol-uebersicht b { display: block; }
  .kol-uebersicht small { display: block; margin: 2px 0 8px; }
  .agenda-tag { margin-bottom: 14px; }
  .agenda-tag h2 { font-size: 14px; margin-bottom: 6px; }
  .agenda-tag h2.heute { color: var(--akzent); }
  /* Geld */
  .fragen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .fragen button { min-height: 34px; padding: 0 14px; border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--flaeche); cursor: pointer; font-size: 13px; }
  .fragen button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
  .antwort { margin-bottom: 10px; font-size: 14px; }
  .antwort b { font-size: 16px; }
  @media (max-width: 1100px) { .arbeit { grid-template-columns: 1fr; } .korb { border-right: 0; } .korb-liste { padding-bottom: 12px; max-height: 50vh; } .zwei { grid-template-columns: 1fr; } }
  @media (max-width: 700px) { .app { grid-template-columns: 1fr; } .seite { position: static; height: auto; flex-direction: row; padding: 6px; } .seite .logo, .seite .fuss { display: none; } .seite button { flex: 1; } .akte, .ansicht { padding: 14px 16px 150px; } }

  /* Bewegung aus „C Büro mit Effekten“ (Codex). app.js setzt akte-wechsel, stufe-wechsel, fortschritt-jetzt und panel-neu nur bei Klick oder Aktion, nie beim ruhigen Abgleich.
     Füllmodus backwards statt both: Nach dem Ende bleiben transform und clip-path nicht stehen, sonst werden Fokusrahmen abgeschnitten. */
  :root { --bewegung-auslauf: cubic-bezier(.16, 1, .3, 1); }
  .akte-wechsel .akte-kopf { animation: akte-einzug 340ms var(--bewegung-auslauf) backwards; }
  .akte-wechsel .naechste { animation: akte-einzug 380ms var(--bewegung-auslauf) 25ms backwards; }
  .akte-wechsel .lauf { animation: akte-einzug 410ms var(--bewegung-auslauf) 45ms backwards; }
  .stufe-wechsel .stufe-inhalt { animation: stufe-auf 300ms var(--bewegung-auslauf) backwards; }
  .stufe-wechsel.offen > .stufe-kopf .ic:last-child { animation: pfeil-auf 210ms var(--bewegung-auslauf); }
  .stufe-wechsel:not(.offen) > .stufe-kopf .ic:last-child { animation: pfeil-zu 170ms var(--bewegung-auslauf); }
  .lauf > li.fortschritt-jetzt::before { animation: stufe-erreicht 480ms var(--bewegung-auslauf); }
  .naechste.fortschritt-jetzt { animation: naechste-erreicht 430ms var(--bewegung-auslauf); }
  .seitenpanel.panel-neu { animation: panel-einzug 320ms var(--bewegung-auslauf) backwards; }
  .toast { background: #211b40; border: 1px solid #6356a2; }
  .toast-text { display: block; }
  .toast--an .toast-text { animation: meldung-eingang 290ms var(--bewegung-auslauf); }
  .seite button, .aufgabe, .termin-kurz, .stufe-kopf {
    transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
  }
  @keyframes akte-einzug {
    from { opacity: .3; transform: translateX(-20px); clip-path: inset(0 9% 0 0); }
    to { opacity: 1; transform: translateX(0); clip-path: inset(0); }
  }
  @keyframes stufe-auf {
    from { opacity: .5; transform: translateY(-6px); clip-path: inset(0 0 12px); }
    to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  }
  @keyframes pfeil-auf { from { transform: rotate(0); } to { transform: rotate(90deg); } }
  @keyframes pfeil-zu { from { transform: rotate(90deg); } to { transform: rotate(0); } }
  @keyframes stufe-erreicht {
    from { box-shadow: 0 0 0 8px #c3baf3; }
    to { box-shadow: 0 0 0 4px var(--akzent-weich); }
  }
  @keyframes naechste-erreicht {
    from { box-shadow: 0 0 0 4px #cec6f8; }
    to { box-shadow: 0 0 0 0 transparent; }
  }
  @keyframes panel-einzug {
    from { opacity: .5; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes meldung-eingang {
    from { opacity: .45; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (max-width: 1100px) {
    @keyframes akte-einzug {
      from { opacity: .4; transform: translateY(12px); clip-path: inset(0 0 9%); }
      to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }