/* Farbtoken (Cupertino Obsidian): hell als Standard, dunkel nach Systemwahl oder Umschalter (data-modus) */
:root{color-scheme:light;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Inter,sans-serif;font-size:14px;--hintergrund:#f2f2f7;--seitenleiste:#ffffff;--flaeche:#ffffff;--flaeche-2:#ececf0;--text:#1c1c1e;--gedaempft:#636366;--linie:#e5e5ea;--linie-stark:#c7c7cc;--eingabe-linie:#d1d1d6;--hover:#ececf0;--akzent-zart:color-mix(in srgb,var(--akzent) 9%,var(--flaeche));--zart-tief:#ececf0;--diff:#f7f7f9;--spalte:#ececf0;--ziehziel:color-mix(in srgb,var(--akzent) 14%,var(--flaeche));--akzent:#147efb;--akzent-text:#000000;--link:color-mix(in srgb,var(--akzent) 72%,#000000);--fokus:color-mix(in srgb,var(--akzent) 55%,#ffffff);--ok-flaeche:#eef7f2;--ok-text:#2f6448;--ok-linie:#c6dfd1;--warn-flaeche:#fff4dc;--warn-text:#725a2c;--warn-linie:#ead9b7;--frist-text:#924321;--fehler-flaeche:#fff1ef;--fehler-text:#8e3027;--fehler-linie:#eac5bf;--chat:#ffffff;--schatten:0 12px 32px rgb(0 0 0/.12);color:var(--text);background:var(--hintergrund)}
@media (prefers-color-scheme:dark){:root:not([data-modus=hell]){color-scheme:dark;--hintergrund:#1c1c1e;--seitenleiste:#242426;--flaeche:#2c2c2e;--flaeche-2:#3a3a3c;--text:#f2f2f7;--gedaempft:#aeaeb2;--linie:#333335;--linie-stark:#48484a;--eingabe-linie:#48484a;--hover:#333336;--akzent-zart:color-mix(in srgb,var(--akzent) 18%,var(--flaeche));--zart-tief:#242426;--diff:#242426;--spalte:#242426;--ziehziel:color-mix(in srgb,var(--akzent) 25%,var(--flaeche));--akzent-text:#000000;--link:color-mix(in srgb,var(--akzent) 68%,#ffffff);--fokus:color-mix(in srgb,var(--akzent) 70%,#ffffff);--ok-flaeche:#132a21;--ok-text:#a8dcc0;--ok-linie:#24503e;--warn-flaeche:#2f2612;--warn-text:#ecd08f;--warn-linie:#54441f;--frist-text:#f0b48a;--fehler-flaeche:#33191a;--fehler-text:#f2b8b1;--fehler-linie:#5f3330;--chat:#111113;--schatten:0 12px 32px rgb(0 0 0/.5)}}
:root[data-modus=dunkel]{color-scheme:dark;--hintergrund:#1c1c1e;--seitenleiste:#242426;--flaeche:#2c2c2e;--flaeche-2:#3a3a3c;--text:#f2f2f7;--gedaempft:#aeaeb2;--linie:#333335;--linie-stark:#48484a;--eingabe-linie:#48484a;--hover:#333336;--akzent-zart:color-mix(in srgb,var(--akzent) 18%,var(--flaeche));--zart-tief:#242426;--diff:#242426;--spalte:#242426;--ziehziel:color-mix(in srgb,var(--akzent) 25%,var(--flaeche));--akzent-text:#000000;--link:color-mix(in srgb,var(--akzent) 68%,#ffffff);--fokus:color-mix(in srgb,var(--akzent) 70%,#ffffff);--ok-flaeche:#132a21;--ok-text:#a8dcc0;--ok-linie:#24503e;--warn-flaeche:#2f2612;--warn-text:#ecd08f;--warn-linie:#54441f;--frist-text:#f0b48a;--fehler-flaeche:#33191a;--fehler-text:#f2b8b1;--fehler-linie:#5f3330;--chat:#111113;--schatten:0 12px 32px rgb(0 0 0/.5)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-size:13.5px;-webkit-font-smoothing:antialiased}
a{color:var(--link)}
h1{font-size:22px;font-weight:600;letter-spacing:-.3px;margin:4px 0 10px}
h2{font-size:14px;font-weight:600;margin:0 0 14px}
p{line-height:1.6}
.rubrik{font-size:11px;letter-spacing:.4px;font-weight:500;color:var(--gedaempft);margin:0 0 6px;text-transform:uppercase}
.intro{color:var(--gedaempft);line-height:1.6;margin:0 0 24px;max-width:680px}
.karte{border:1px solid var(--linie);border-radius:10px;background:var(--flaeche);padding:20px;margin:0 0 16px}
.verwalten-ansicht{max-width:760px;margin:0 auto}
.nummer{display:inline-block;background:var(--akzent-zart);color:var(--link);font-size:10px;padding:4px 7px;border-radius:5px;margin-right:8px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.breit{grid-column:1/-1}
label{display:grid;gap:6px;font-size:12px;font-weight:500}
input,textarea,select{width:100%;padding:8px 10px;border:1px solid var(--eingabe-linie);border-radius:7px;font:400 13.5px ui-sans-serif,system-ui,sans-serif;color:var(--text);background:var(--hintergrund)}
input:hover,textarea:hover,select:hover{border-color:var(--linie-stark)}
textarea{resize:vertical}
button{border:1px solid var(--linie);background:var(--flaeche);border-radius:7px;color:var(--text);padding:7px 12px;font:500 13px ui-sans-serif,system-ui,sans-serif;cursor:pointer}
button:hover{background:var(--hover)}
button.primaer{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
button.primaer:hover{background:var(--akzent);filter:brightness(1.08)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
.aktionen{display:flex;align-items:center;gap:12px;margin:8px 0 16px;flex-wrap:wrap}
.aktionen h2{margin:0 auto 0 0}
.aktionen a{font-size:13px}
.schalter{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:400}
.schalter input{width:16px;height:16px;accent-color:var(--akzent)}
.foto{margin-top:20px}
.foto small,.hinweis{font-weight:400;color:var(--gedaempft);font-size:12px}
.entwicklungsmodus{background:var(--warn-flaeche);border-bottom:1px solid var(--warn-linie);color:var(--warn-text);padding:8px 16px;font-size:12px}
.erfolg{padding:10px 14px;border:1px solid var(--ok-linie);border-radius:8px;background:var(--ok-flaeche);color:var(--ok-text);margin:0 0 16px}
.stilwahl{display:flex;gap:16px;align-items:flex-end;margin-bottom:20px}
.stilwahl label{min-width:210px}
.stilwahl a{font-size:13px;padding-bottom:9px}
iframe{width:100%;height:770px;border:1px solid var(--linie);border-radius:8px;background:var(--zart-tief)}
.import{max-width:650px}
.import button{margin-top:20px}
.vorschlagkopf{display:flex;justify-content:space-between;gap:12px}
.etikett{font-size:11px;color:var(--gedaempft)}
.diff{padding:14px 14px 14px 30px;background:var(--diff);border-radius:6px;font-size:13px;line-height:1.8;overflow-wrap:anywhere}
.htmx-request{opacity:.6}
.chat-eingabe.htmx-request{opacity:1}
@media(max-width:800px){.felder{grid-template-columns:1fr}.stilwahl{flex-wrap:wrap}}
/* Bearbeitung des Grundprofils */
h3{font-size:17px;margin:0 0 8px}h4{font-size:13px;margin:24px 0 14px}summary{cursor:pointer;color:var(--link);font-size:13px;padding:12px 0}details[open]>summary{margin-bottom:12px}.unterkarte{background:var(--hintergrund);border:1px solid var(--linie);padding:18px;border-radius:8px;margin:14px 0}.unterkarte>form>button{margin-top:10px}.kleine-aktionen{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}.kleine-aktionen button{padding:7px 10px}.kleine-aktionen form{margin:0}.kleine-aktionen .formularfehler{max-width:230px}.formularfehler{background:var(--fehler-flaeche);color:var(--fehler-text);border:1px solid var(--fehler-linie);border-radius:8px;padding:13px 17px;overflow-wrap:anywhere}button:disabled{opacity:.35;cursor:default}.sichtbarkeit{margin:10px 0}.sichtbarkeit button[aria-pressed=true]{background:var(--ok-flaeche);border-color:var(--ok-linie);color:var(--ok-text)}.sichtbarkeit .etikett{margin-left:10px}.qualifikation{border-top:1px solid var(--linie);margin-top:22px;padding-top:22px}.verweis{font-size:13px;overflow-wrap:anywhere}.unterkarte p:first-child{margin-top:0}.vorschlagkopf>div:first-child{min-width:0}.vorschlagkopf h3{overflow-wrap:anywhere}@media(max-width:600px){.vorschlagkopf{flex-wrap:wrap}.kleine-aktionen{margin-bottom:8px}.karte{padding:20px}.unterkarte{padding:14px}}
.feld{display:grid;gap:8px;align-content:start;min-width:0}
.tabelle{overflow-x:auto}
.tabelle table{width:100%;border-collapse:collapse}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:8px;border-bottom:1px solid var(--linie)}
.tabelle input[type=text],.tabelle input:not([type]){width:100%;min-width:12em}
/* Übersicht und Termine */
.uebersicht-filter{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:24px 0}.uebersicht-filter label:first-child{flex:1;min-width:200px}.uebersicht-filter a{padding:10px 0;font-size:13px}.aktionen button[aria-pressed=true]{background:var(--hover);border-color:var(--akzent)}/* Board: Kopf mit Symbolknöpfen, Kanban seitlich scrollbar mit festen Spalten */
.board-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.board-kopf h1{margin:0}
.board-werkzeuge{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.board-werkzeuge .seg{display:inline-flex;gap:2px;padding:3px;margin:0;border-radius:12px;background:var(--flaeche)}
.board-werkzeuge .seg .symbolknopf[aria-pressed=true]{background:var(--flaeche-2);color:var(--text)}
.symbolknopf.aktiv,.symbolknopf[aria-pressed=true]{background:var(--akzent-zart);color:var(--text)}
.symbolknopf.primaer{background:var(--akzent);color:var(--akzent-text)}
.symbolknopf.primaer:hover{background:var(--akzent);filter:brightness(1.08);color:var(--akzent-text)}
.werkzeug{position:relative;display:inline-flex}
.werkzeug>summary{list-style:none}
.werkzeug>summary::-webkit-details-marker{display:none}
.werkzeug[open]>summary{background:var(--flaeche-2);color:var(--text)}
.werkzeug-flaeche{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(340px,calc(100vw - 32px));box-sizing:border-box;margin:0;padding:14px;display:grid;gap:12px;background:var(--seitenleiste);border:1px solid var(--linie);border-radius:16px;box-shadow:var(--schatten)}
.werkzeug-flaeche.uebersicht-filter{display:grid;align-items:stretch}
.werkzeug-flaeche.uebersicht-filter label:first-child{min-width:0}
.werkzeug-aktionen{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.werkzeug-aktionen a{font-size:13px;margin-right:auto}
.werkzeug-aktionen button{display:inline-flex;align-items:center;gap:8px}
.export-form fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.export-form legend{font-size:12px;font-weight:600;color:var(--gedaempft);padding:0;margin:0 0 6px}
.export-form fieldset label{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--linie-stark);border-radius:16px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text)}
.export-form fieldset input{position:absolute;opacity:0;width:1px;height:1px}
.export-form fieldset label:has(input:checked){background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
.export-form fieldset label:has(input:focus-visible){outline:2px solid var(--fokus);outline-offset:2px}
.export-form .ui-symbol{width:14px;height:14px}
.export-form:not(:has([value=pdf]:checked)) .export-pdf-hinweis,.export-form:not(:has([value=docx]:checked)) .export-word-hinweis,.export-form:not(:has([value=eigen]:checked)) .export-eigen{display:none}
.export-pdf-hinweis,.export-word-hinweis{margin:-4px 0 0}
.export-eigen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.board-zaehler{margin:0 0 16px;font-size:12.5px;color:var(--gedaempft)}
.kanban{display:flex;gap:16px;align-items:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 16px;margin-bottom:28px}
.kanban:focus-visible{outline:2px solid var(--fokus);outline-offset:2px;border-radius:12px}
.kanban-spalte{flex:0 0 300px;min-height:125px;box-sizing:border-box;scroll-snap-align:start;background:var(--seitenleiste);border:1px solid var(--linie);border-radius:16px;padding:12px}
.kanban-spalte:not([open]){flex-basis:200px}
.kanban-spalte>summary{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:var(--gedaempft);cursor:pointer;list-style:none;padding:2px 4px}
.kanban-spalte>summary::-webkit-details-marker{display:none}
.kanban-spalte .anzahl{margin-left:auto;border-radius:20px;background:var(--flaeche);padding:2px 9px;font-weight:500;font-variant-numeric:tabular-nums}
.kanban-spalte[open]>summary{margin-bottom:4px}
.kanban-karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:12px 14px;margin:10px 0 0;overflow-wrap:anywhere;cursor:grab}
.kanban-karte:hover{border-color:var(--linie-stark)}
.kanban-karte h2{margin:0 0 2px;font-size:14px}
.kanban-karte>p{margin:6px 0}
.kanban-karte h2 a{text-decoration:none;color:var(--text)}
.kanban-karte h2 a:hover{color:var(--link)}
.kanban-karte .hinweis{font-size:12px}
.kanban-karte .phasenformular summary{font-size:12px;color:var(--gedaempft)}
.phase-punkt[data-punkt=abgeschlossen]{background:var(--linie-stark)}
.wird-gezogen{opacity:.5}
.kanban-spalte.ziehziel{outline:2px solid var(--akzent);background:var(--ziehziel)}
.frist{font-size:12px}.frist-knapp,.nachfassen-faellig{color:var(--frist-text);background:var(--warn-flaeche);border-radius:4px;padding:4px 7px}.naechster-schritt{font-size:13px}.phasenformular form{display:grid;gap:10px}.phasenformular summary{font-size:12px}.uebersicht-tabelle{overflow-x:auto;margin-bottom:28px}.uebersicht-tabelle table{border-collapse:collapse;background:var(--flaeche);width:100%;font-size:13px}.uebersicht-tabelle th,.uebersicht-tabelle td{text-align:left;vertical-align:top;padding:14px;border-bottom:1px solid var(--linie);min-width:110px}.uebersicht-tabelle caption{text-align:left;padding:10px 0}.naechste-termine ul{padding-left:20px}.naechste-termine li{margin:14px 0;line-height:1.8}#termine form{display:grid;gap:12px}#termine details{margin:12px 0}dialog{border:1px solid var(--linie);border-radius:12px;padding:28px;max-width:520px;width:calc(100% - 40px);color:var(--text)}dialog::backdrop{background:#19324688}dialog form,dialog [data-versand]{display:grid;gap:16px}dialog [hidden]{display:none}@media(min-width:1400px){.inhalt:has(#uebersicht){max-width:1700px}}
/* Oberfläche: Anmeldehinweis, Sichtbarkeit */
[hidden]{display:none!important}
.anmeldung-hinweis{position:fixed;right:24px;bottom:24px;z-index:50;display:grid;gap:10px;max-width:380px;padding:22px;background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;box-shadow:0 12px 32px #0002}
.anmeldung-hinweis h2{margin:0}.anmeldung-hinweis p{margin:0}.anmeldung-hinweis .aktionen{margin:4px 0 0}
/* Darstellungseinstellungen */
.darstellung-gruppe{border:1px solid var(--linie);border-radius:8px;padding:14px 18px;margin:0 0 20px}.darstellung-gruppe legend{font-size:13px;font-weight:600;padding:0 6px}
.farbwahl{display:flex;flex-wrap:wrap;gap:6px 22px}.farbprobe{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;border:1px solid var(--linie-stark)}
.eigene-farbe{margin-top:16px;align-items:end}.eigene-farbe input[type=color]{height:44px;padding:4px;cursor:pointer}
.darstellung-probe{font-size:13px;margin-top:24px}
/* PDF-Fläche (Lebenslauf-Vorschau) */
.stilwahl{flex-wrap:wrap;gap:12px 16px}
.pdf-vorschau iframe{display:block;width:100%;height:calc(100vh - 250px);min-height:520px;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche)}
html[data-zieht=breite]{cursor:col-resize;user-select:none}
/* Aufklappbare Abschnitte und Speicherstatus (Autosave) */
.abschnitt-aufklapp{margin:0 0 18px}.abschnitt-aufklapp>summary h2{display:inline;font-size:16px}.abschnitt-aufklapp>.vorschlagkopf{margin-top:8px}.speicherstatus{font-size:12px;color:var(--gedaempft);align-self:center}.speicherstatus.formularfehler{background:none;border:0;padding:0;color:var(--fehler-text)}
/* Link-Symbole der Praxisbelege (Lucide, inline, Farbe im SVG) */
.symbol svg{width:1.2em;height:1.2em;vertical-align:-.25em;margin-right:.3em}.beleg-symbol{margin:6px 0}
/* App-Rahmen: linke Leiste und rechter KI-Chat als schwebende Karten, dazwischen die Mitte */
.ui-symbol{width:16px;height:16px;flex:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Breiten: gespeicherte Werte, aber so begrenzt, dass die Mitte mindestens 360 Pixel behält. Eingeklappt bleibt eine schmale Leiste. */
.app{--rand:12px;--leiste-ist:min(var(--leiste-breite,272px),30vw);--leiste-platz:var(--leiste-ist);--panel-ist:clamp(280px,var(--panel-breite,360px),100vw - var(--leiste-platz) - 365px);display:grid;grid-template-columns:var(--leiste-ist) minmax(0,1fr);grid-template-areas:"leiste mitte";height:100vh;overflow:hidden}
html[data-panel=an] .app{grid-template-columns:var(--leiste-ist) minmax(0,1fr) 5px var(--panel-ist);grid-template-areas:"leiste mitte griff panel"}
html[data-seitenleiste=aus] .app{--leiste-ist:76px;--leiste-platz:76px}
.seitenleiste{grid-area:leiste}.mitte{grid-area:mitte}.panel-griff{grid-area:griff}.panel{grid-area:panel}
.app.ohne-anmeldung{display:block;height:auto;overflow:visible}
.symbolknopf{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--gedaempft);cursor:pointer;text-decoration:none;flex:none}
.symbolknopf:hover{background:var(--hover);color:var(--text)}
.symbolknopf[aria-pressed=true],.symbolknopf[aria-expanded=true].hervorheben{color:var(--text)}
.symbolknopf form{margin:0}
.symbolknopf.klein{width:26px;height:26px}
.nur-schmal,.nur-schmal-leiste,.leiste-oeffner{display:none}
.seitenleiste{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative;margin:var(--rand) 0 var(--rand) var(--rand);background:var(--seitenleiste);border:1px solid var(--linie);border-radius:20px}
/* Griffe zum Ziehen der Breite: breite Trefferfläche, beim Überfahren eine farbige Linie (Doppelklick: Standard). */
.leiste-griff{position:absolute;top:16px;bottom:16px;right:-8px;width:10px;cursor:col-resize;touch-action:none;z-index:5}
.leiste-griff::before{content:"";position:absolute;top:0;bottom:0;left:4px;width:2px;border-radius:2px;background:transparent;transition:background .15s .1s}
.leiste-griff:hover::before,.leiste-griff:focus-visible::before,html[data-zieht=breite] .leiste-griff:active::before{background:var(--akzent)}
.leiste-griff:focus-visible{outline:none}
.leiste-kopf{height:60px;display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;flex:none;position:relative}
.marke{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--text);text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.2px;border-radius:10px}
.marke:hover .marke-text{color:var(--link)}
.signet{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--akzent);color:var(--akzent-text);font:italic 600 18px Georgia,serif;flex:none;transition:opacity .12s}
.leiste-suche{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:0 12px;height:38px;border-radius:12px;background:var(--hintergrund);color:var(--gedaempft);font-weight:400;flex:none}
.leiste-suche input{border:0;background:transparent;padding:0;height:100%;min-width:0;flex:1;font-size:13.5px}
.leiste-suche input:focus-visible{outline:none}
.leiste-suche:focus-within{box-shadow:0 0 0 2px var(--fokus)}
.leiste-nav{display:grid;gap:1px;padding:0 8px;flex:none}
.leiste-nav a,.leiste-zeile>a{display:flex;align-items:center;gap:10px;min-width:0;padding:7px 10px;border-radius:10px;color:var(--gedaempft);text-decoration:none;font-size:13.5px}
.leiste-nav a:hover,.leiste-zeile:hover>a{background:var(--hover);color:var(--text)}
.leiste-nav a[aria-current],.leiste-zeile>a[aria-current]{background:var(--hover);color:var(--text);font-weight:500}
.leiste-titelzeile{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 12px 2px 18px;padding-top:10px;border-top:1px solid var(--linie);flex:none}
.leiste-titel{display:flex;align-items:center;justify-content:space-between;margin:0;font-size:11.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--gedaempft)}
.leiste-scroll{flex:1;overflow-y:auto;padding:2px 8px 12px;min-height:0}
.leiste-gruppen{display:grid;gap:10px}
.leiste-gruppe-titel{display:flex;align-items:center;gap:8px;margin:0;padding:4px 10px;font-size:12px;font-weight:600;color:var(--gedaempft)}
.leiste-gruppe-titel .zaehler{margin-left:auto;font-weight:400;font-variant-numeric:tabular-nums}
.leiste-liste{display:grid;gap:1px;margin:0;padding:0;list-style:none}
.leiste-zeile{display:flex;align-items:center;border-radius:10px;position:relative}
.leiste-zeile>a{flex:1;color:var(--text)}
.leiste-zeile .zeilentext{display:grid;min-width:0}
.leiste-zeile .zeilentext span,.leiste-zeile .zeilentext small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leiste-zeile small{font-size:11.5px;color:var(--gedaempft)}
.leiste-leer{margin:4px 10px;font-size:12px;color:var(--gedaempft)}
.phase-punkt{width:8px;height:8px;border-radius:50%;flex:none;background:var(--gedaempft)}
.phase-punkt:is([data-phase=bereit],[data-punkt=bereit]){background:#147efb}.phase-punkt:is([data-phase=versendet],[data-punkt=versendet]){background:#ff9f0a}.phase-punkt:is([data-phase=im_gespraech],[data-punkt=im_gespraech]){background:#53d769}
.leiste-fuss{display:flex;align-items:center;gap:4px;padding:8px;border-top:1px solid var(--linie);flex:none}
.leiste-fuss form{margin:0;display:contents}
.profil{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:6px;border-radius:12px;color:var(--text);text-decoration:none;font-size:13.5px;font-weight:500}
.profil:hover,.profil[aria-current]{background:var(--hover)}
.profil-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--flaeche-2);color:var(--text);flex:none}
/* Eingeklappt: schmale Leiste nur mit Symbolen; über dem Signet erscheint der Knopf zum Aufklappen. */
@media(min-width:641px){
html[data-seitenleiste=aus] .leiste-kopf{justify-content:center;padding:0}
html[data-seitenleiste=aus] .marke{flex:none}
html[data-seitenleiste=aus] .marke-text,html[data-seitenleiste=aus] .leiste-suche,html[data-seitenleiste=aus] .leiste-titel,html[data-seitenleiste=aus] .leiste-scroll,html[data-seitenleiste=aus] .profil-text,html[data-seitenleiste=aus] .leiste-griff{display:none}
html[data-seitenleiste=aus] .leiste-umschalter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;background:var(--hover);transition:opacity .12s}
html[data-seitenleiste=aus] .leiste-kopf:hover .leiste-umschalter,html[data-seitenleiste=aus] .leiste-umschalter:focus-visible{opacity:1;pointer-events:auto}
html[data-seitenleiste=aus] .leiste-kopf:hover .signet{opacity:0}
html[data-seitenleiste=aus] .nur-schmal-leiste{display:inline-grid;align-self:center;margin:0 0 6px}
html[data-seitenleiste=aus] .leiste-nav a{justify-content:center;padding:8px;gap:0;font-size:0}
html[data-seitenleiste=aus] .leiste-titelzeile{justify-content:center;margin:8px 12px 0}
html[data-seitenleiste=aus] .leiste-fuss{flex-direction:column;margin-top:auto}
html[data-seitenleiste=aus] .profil{flex:none;padding:2px}}
.mitte{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.inhalt{flex:1;min-height:0;overflow-y:auto}
.inhalt-rahmen{max-width:1080px;margin:0 auto;padding:28px 36px 64px}
.inhalt-rahmen:has(#uebersicht){max-width:1700px}
.ohne-anmeldung .inhalt-rahmen{max-width:420px;padding-top:12vh}
.unterpunkte{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 20px;padding:0 0 12px;border-bottom:1px solid var(--linie)}
.unterpunkt{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--gedaempft);font-size:13px;text-decoration:none;white-space:nowrap}
.unterpunkt:hover{background:var(--hover);color:var(--text)}
.unterpunkt[aria-current]{background:var(--flaeche-2);color:var(--text)}
.unterpunkt[aria-current]{font-weight:600;box-shadow:inset 0 -2px 0 var(--akzent)}
.unterpunkt .zaehler{font-size:11px;line-height:16px;padding:0 6px;border-radius:10px;background:var(--hover);color:var(--gedaempft)}
.eckdaten{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px 20px;margin:0 0 12px}
.eckdaten div{min-width:0}.eckdaten dt{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--gedaempft);margin:0 0 3px}
.eckdaten dd{margin:0;overflow-wrap:anywhere}
.karte details form{margin-top:4px}
.karte.gefahr{border-color:var(--fehler-linie)}
/* Im rechten Bereich zeigt eine Unterseite nur ihren Inhalt; der Chat auch ohne Seitenkopf. */
html[data-eingebettet] .unterpunkte,html[data-eingebettet] .nur-chat .bewerbung-kopf{display:none}
/* Rechts: der KI-Chat der offenen Bewerbung */
.panel-griff{cursor:col-resize;position:relative;touch-action:none;background:transparent;margin:28px 0}
.panel-griff::before{content:"";position:absolute;top:0;bottom:0;left:1px;width:2px;border-radius:2px;background:transparent}
.panel-griff::after{content:"";position:absolute;top:0;bottom:0;left:-3px;right:-3px;z-index:5}
.panel-griff:hover::before,.panel-griff:focus-visible::before,.panel-griff:active::before{background:var(--akzent);transition:background .15s .1s}
.panel-griff:focus-visible{outline:none}
.panel{display:none;flex-direction:column;min-width:0;min-height:0;position:relative;margin:var(--rand) var(--rand) var(--rand) 0;background:var(--chat);border:1px solid var(--linie);border-radius:20px;overflow:hidden}
.panel-griff{display:none}
html[data-panel=an] .panel{display:flex}
html[data-panel=an] .panel-griff{display:block}
.panel-kopf{height:56px;display:flex;align-items:center;gap:6px;padding:0 10px;border-bottom:1px solid var(--linie);flex:none}
.panel-kopf h2{flex:1;margin:0;font-size:13px;font-weight:600;color:var(--gedaempft)}
.panel-inhalt{flex:1;position:relative;min-height:0}
.panel-inhalt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:var(--chat)}
.panel-leer{display:grid;place-items:center;align-content:center;gap:10px;height:100%;padding:24px;text-align:center;color:var(--gedaempft);font-size:13px}
.panel-leer strong{color:var(--text);font-weight:500}
.panel-leer .ui-symbol{width:28px;height:28px;opacity:.6}
/* Zugeklappt nimmt der Chat keinen Platz weg; nur der Knopf schwebt oben rechts. */
.panel-oeffner{position:fixed;top:calc(var(--rand,12px) + 10px);right:calc(var(--rand,12px) + 10px);z-index:20;width:36px;height:36px;border-radius:10px;background:var(--seitenleiste);border:1px solid var(--linie)}
html[data-panel=an] .panel-oeffner{display:none}
/* Ohne offene Bewerbung gibt es (noch) keinen Chat: die Mitte bekommt die ganze Breite. */
html[data-panel] .app.ohne-chat{grid-template-columns:var(--leiste-ist) minmax(0,1fr);grid-template-areas:"leiste mitte"}
.app.ohne-chat .panel,.app.ohne-chat .panel-griff,.app.ohne-chat .panel-oeffner{display:none}
html[data-panel=aus] .app.ohne-chat .inhalt-rahmen{padding-right:36px}
@media(max-width:1320px){html[data-panel=aus] .inhalt-rahmen{padding-right:64px}}
.menue{position:absolute;z-index:40;min-width:230px;max-height:70vh;overflow:auto;padding:5px;background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;box-shadow:var(--schatten)}
.menue button,.menue a{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;border-radius:6px;background:none;color:var(--text);font-size:13px;text-align:left;text-decoration:none}
.menue button:hover,.menue a:hover,.menue button:focus-visible{background:var(--hover);outline:none}
.menue .menue-titel{padding:8px 9px 4px;font-size:11.5px;color:var(--gedaempft)}
html[data-zieht] iframe{pointer-events:none}
/* Eingebettet im rechten Bereich: nur der Inhalt, auf dem Hintergrund des Chats */
html[data-eingebettet],html[data-eingebettet] body{background:var(--chat)}
html[data-eingebettet] .entwicklungsmodus,html[data-eingebettet] .seitenleiste,html[data-eingebettet] .panel,html[data-eingebettet] .panel-griff,html[data-eingebettet] .panel-oeffner,html[data-eingebettet] .leiste-oeffner{display:none!important}
html[data-eingebettet] .app{display:block;height:auto;overflow:visible}
html[data-eingebettet] .inhalt{overflow:visible}
html[data-eingebettet] .inhalt-rahmen{max-width:none;padding:14px 14px 24px}
html[data-eingebettet] .chat-eingabe{box-shadow:0 0 0 8px var(--chat),var(--schatten)}
html[data-eingebettet] .chat-kopf h2{display:none}
/* Einstellungen als Kacheln mit Symbol */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:0 0 24px}
.kachel{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:16px;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche);color:var(--text);text-decoration:none;font:inherit;text-align:left;width:100%}
.kachel:hover{background:var(--hover);border-color:var(--linie-stark)}
.kachel .ui-symbol{grid-row:span 2;width:20px;height:20px;margin-top:1px;color:var(--gedaempft)}
.kachel strong{font-weight:500}
.kachel small{color:var(--gedaempft);font-size:12px;line-height:1.5}
@media(max-width:640px){
.app,html[data-panel=an] .app,html[data-seitenleiste=aus] .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"mitte"}
.leiste-griff{display:none}
.symbolknopf.nur-schmal{display:inline-grid}
.leiste-oeffner{display:inline-grid;position:fixed;top:10px;left:10px;z-index:25;width:36px;height:36px;border-radius:10px;background:var(--seitenleiste);border:1px solid var(--linie)}
.seitenleiste{position:fixed;inset:0 auto 0 0;width:min(300px,85vw);margin:0;border-radius:0 20px 20px 0;z-index:30;box-shadow:var(--schatten)}
html:not([data-seitenleiste-mobil=an]) .seitenleiste{display:none}
html[data-panel=an] .panel{position:fixed;inset:0;z-index:35;margin:0;border-radius:0}html[data-panel=an] .panel-griff{display:none}
.panel-oeffner{top:10px;right:10px}
html[data-panel] .app.ohne-chat{grid-template-columns:minmax(0,1fr);grid-template-areas:"mitte"}
.inhalt-rahmen,html[data-panel=aus] .inhalt-rahmen,html[data-panel=aus] .app.ohne-chat .inhalt-rahmen{padding:58px 16px 48px}}
/* KI-Chat im Stil von T3 Code */
.chat{margin:8px 0 24px}
.nur-chat .chat{max-width:780px;margin:0 auto;min-height:calc(100vh - 60px);display:flex;flex-direction:column}
.nur-chat .chat-verlauf,.nur-chat .chat-leer{flex:1}
.chat-kopf{display:flex;align-items:center;gap:4px;min-height:40px;margin:0 0 14px;position:sticky;top:0;z-index:4;background:var(--hintergrund);padding:6px 0}
html[data-eingebettet] .chat-kopf{background:var(--chat);margin:-14px -14px 14px;padding:8px 10px;border-bottom:1px solid var(--linie)}
.chat-kopf form{margin:0}
.chat-kopf .abstand{flex:1}
.chat-gespraech{position:relative;min-width:0;flex:0 1 auto}
.chat-gespraech-knopf{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%;padding:5px 9px;border-radius:8px;cursor:pointer;list-style:none;font-size:13px;font-weight:500;color:var(--text)}
.chat-gespraech-knopf::-webkit-details-marker{display:none}
.chat-gespraech-knopf span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-gespraech-knopf .ui-symbol{width:15px;height:15px;flex:none;color:var(--gedaempft)}
.chat-gespraech-knopf:hover,.chat-gespraech[open] .chat-gespraech-knopf{background:var(--hover)}
.chat-gespraech-flaeche{position:absolute;top:calc(100% + 6px);left:0;width:min(380px,calc(100vw - 28px));max-height:min(420px,70vh);display:flex;flex-direction:column;background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:12px;box-shadow:var(--schatten);overflow:hidden}
.chat-gespraech-suche{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--linie);color:var(--gedaempft)}
.chat-gespraech-suche input{flex:1;min-width:0;border:0;padding:0;background:none;outline:none;font:inherit;font-size:13px;color:var(--text)}
.chat-gespraech-suche .ui-symbol{width:15px;height:15px}
.chat-gespraech-suche kbd{font:11px ui-sans-serif,system-ui,sans-serif;padding:1px 5px;border:1px solid var(--linie);border-radius:4px}
.chat-gespraech-liste{list-style:none;margin:0;padding:4px;overflow:auto}
.chat-gespraech-liste form{margin:0}
.chat-gespraech-eintrag{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border:0;border-radius:7px;background:none;text-align:left;font-weight:400;font-size:13px;color:var(--text)}
.chat-gespraech-eintrag:hover,.chat-gespraech-eintrag.aktiv,.chat-gespraech-eintrag:focus-visible{background:var(--hover);outline:none}
.chat-gespraech-eintrag[aria-current=true]{font-weight:500}
.chat-gespraech-titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-gespraech-eintrag time{flex:none;font-size:12px;color:var(--gedaempft)}
.chat-gespraech-eintrag .ui-symbol{width:14px;height:14px;flex:none;color:var(--akzent)}
.chat-gespraech-leer{margin:0;padding:14px;font-size:13px;color:var(--gedaempft);text-align:center}
.chat-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;font-size:14px}
.chat-verlauf,.chat-vorschlaege{list-style:none;padding:0;margin:0;display:grid;gap:14px;align-content:start}
.chat-vorschlaege{gap:10px;margin-top:12px}
.chat-nachricht{display:grid;min-width:0;scroll-margin-bottom:150px}
.chat-person{justify-items:end}
.chat-blase{max-width:82%;padding:10px 14px;border-radius:16px;background:var(--flaeche-2);border:1px solid var(--linie)}
.chat-system .chat-text{font-size:12.5px;color:var(--gedaempft)}
.chat-meta{margin:6px 2px 0;font-size:11.5px;color:var(--gedaempft);opacity:0;transition:opacity .15s}
.chat-nachricht:hover .chat-meta,.chat-nachricht:focus-within .chat-meta,.chat-nachricht:last-child .chat-meta{opacity:1}
.chat-leer{display:grid;place-items:center;align-content:center;gap:6px;padding:48px 16px;text-align:center;color:var(--gedaempft)}
.chat-leer .ui-symbol{width:26px;height:26px;margin-bottom:6px;opacity:.7}
.chat-leer p{margin:0;max-width:420px;font-size:13px;line-height:1.6}
.chat-starter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;max-width:520px}
.chat-starter-knopf{padding:7px 12px;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche);color:var(--text);font-size:13px;font-weight:400}
.chat-starter-knopf:hover{background:var(--hover);border-color:var(--linie-stark)}.chat-leer strong{color:var(--text);font-weight:500;font-size:14px}
/* Änderungsvorschläge als Karten mit Vorher/Nachher */
.vorschlag-karte{border:1px solid var(--linie);border-radius:12px;background:var(--flaeche);overflow:hidden}
.vorschlag-kopf{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;border-bottom:1px solid var(--linie)}
.vorschlag-kopf .ui-symbol{color:var(--gedaempft)}
.vorschlag-kopf strong{font-weight:500;min-width:0;flex:1}
.vorschlag-status{flex:none;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:500;background:var(--flaeche-2);color:var(--gedaempft)}
.vorschlag-karte[data-status=uebernommen] .vorschlag-status{background:color-mix(in srgb,#22c55e 16%,transparent);color:#16a34a}
.vorschlag-karte[data-status=veraltet] .vorschlag-status{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#b45309}
.vorschlag-karte[data-status=verworfen]{opacity:.65}
.vorschlag-grund{margin:0;padding:8px 12px 0;font-size:12.5px;color:var(--gedaempft)}
.chat-diff{display:grid;margin:8px 0 0;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.diff-zeile{display:grid;grid-template-columns:22px minmax(0,1fr);padding:6px 12px 6px 0}
.diff-zeile .chat-text{font:inherit}
.diff-zeichen{text-align:center;user-select:none}
.diff-alt{background:color-mix(in srgb,#ef4444 9%,transparent)}.diff-alt .diff-zeichen{color:#ef4444}
.diff-neu{background:color-mix(in srgb,#22c55e 10%,transparent)}.diff-neu .diff-zeichen{color:#16a34a}
.wort-weg{background:color-mix(in srgb,#ef4444 28%,transparent);border-radius:3px;text-decoration:line-through;text-decoration-color:color-mix(in srgb,#ef4444 60%,transparent)}
.wort-neu{background:color-mix(in srgb,#22c55e 32%,transparent);border-radius:3px}
.vorschlag-aktionen{display:flex;justify-content:flex-end;gap:6px;padding:8px 10px}
.vorschlag-aktionen form{margin:0}
.chat-nachricht>.vorschlag-aktionen{padding:8px 0 0}
button.klein{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:12.5px;border-radius:8px}
button.klein .ui-symbol{width:14px;height:14px}
/* Eingabe unten: abgerundete Fläche mit Textfeld, Modus, Modell und rundem Sende-Knopf */
.chat-eingabe{position:sticky;bottom:10px;z-index:2;margin:22px 0 0;border:1px solid var(--linie-stark);border-radius:20px;background:var(--flaeche);box-shadow:0 0 0 8px var(--hintergrund),var(--schatten)}
.chat-eingabe:focus-within{border-color:color-mix(in srgb,var(--text) 35%,var(--linie-stark))}
.chat-eingabe textarea{display:block;border:0;background:transparent;resize:none;padding:14px 16px 6px;min-height:52px;max-height:240px;font-size:14px;line-height:1.55;border-radius:20px 20px 0 0}
.chat-eingabe textarea:focus-visible{outline:none}
.chat-textfeld{position:relative}
.chat-text-spiegel{display:none;position:absolute;inset:0;padding:14px 16px 6px;font:400 14px/1.55 ui-sans-serif,system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:break-word;overflow:hidden;color:var(--text);pointer-events:none}
.chat-textfeld.mit-verweis .chat-text-spiegel{display:block}
.chat-textfeld.mit-verweis textarea{color:transparent;caret-color:var(--text);position:relative;z-index:1}
.chat-textfeld.mit-verweis textarea::selection{color:transparent;background:color-mix(in srgb,var(--akzent) 30%,transparent)}
.chat-text-verweis{position:relative;border-radius:5px;background:var(--akzent-zart);color:var(--link);box-shadow:0 0 0 2px var(--akzent-zart)}
.chat-text-verweis .verdeckt{color:transparent}
.chat-text-verweis::before{content:'';position:absolute;left:calc(var(--verweis-kopf,3.2em) / 2 - 7px);top:50%;width:14px;height:14px;margin-top:-7px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E") center/contain no-repeat}
.chat-eingabe .formularfehler{margin:10px 12px 0}
.chat-bezug{display:flex;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 24px);margin:10px 12px 0;padding:3px 4px 3px 9px;border-radius:8px;background:var(--flaeche-2);font-size:12px;color:var(--gedaempft)}
.chat-bezug a{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;color:inherit}.chat-bezug a:hover{background:var(--hover);color:var(--text)}
.chat-bezug .ui-symbol{width:13px;height:13px}
.chat-werkzeuge{display:flex;align-items:center;gap:4px;padding:4px 8px 8px 10px}
.chat-werkzeuge .abstand{flex:1}
.chip-auswahl{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;border-radius:8px;color:var(--gedaempft);font-size:12.5px;font-weight:400;cursor:pointer;position:relative}
.chip-auswahl:hover,.chip-auswahl:focus-within{background:var(--hover);color:var(--text)}
.chip-auswahl .ui-symbol{width:14px;height:14px}
.chip-auswahl select{width:auto;border:0;padding:0 2px;background:transparent;color:inherit;font-size:12.5px;cursor:pointer;appearance:none;-webkit-appearance:none}
.chip-auswahl select:focus-visible{outline:none}
.chat-anhang{flex:none;position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--gedaempft);cursor:pointer}
.chat-anhang:hover,.chat-anhang:focus-visible{background:var(--hover);color:var(--text)}
.chat-anhang .ui-symbol{width:17px;height:17px}
.chat-erwaehnung[hidden]{display:none}
.chat-erwaehnung{max-height:min(320px,50vh);overflow:auto}
.chat-erwaehnung .chat-anhang-option.aktiv{background:var(--hover)}
.chat-anhang-zahl{position:absolute;top:1px;right:0;min-width:14px;height:14px;padding:0 3px;box-sizing:border-box;border-radius:7px;background:var(--text);color:var(--hintergrund);font-size:9.5px;line-height:14px;text-align:center;font-weight:600}
.chat-anhang-flaeche{position:absolute;left:8px;bottom:calc(100% + 6px);z-index:30;width:min(320px,calc(100% - 16px));box-sizing:border-box;display:grid;gap:2px;padding:6px;background:var(--seitenleiste);border:1px solid var(--linie);border-radius:14px;box-shadow:var(--schatten)}
.chat-anhang-titel{margin:4px 8px 4px;font-size:11.5px;font-weight:500;color:var(--gedaempft)}
.chat-anhang-option{display:flex;align-items:center;gap:8px;min-height:34px;padding:4px 8px;border-radius:8px;font-size:13px;color:var(--text);cursor:pointer}
.chat-anhang-option:hover,.chat-anhang-option:focus-within{background:var(--hover)}
.chat-anhang-option input[type=checkbox]{width:auto;min-height:0;padding:0;margin:0;flex:none}
.chat-anhang-option .ui-symbol{width:15px;height:15px;flex:none;color:var(--gedaempft)}
.chat-anhang-option span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-anhang-hochladen{border-top:1px solid var(--linie);border-radius:0 0 8px 8px;margin-top:4px;padding-top:8px}
.chat-anhang-hinweis{display:flex;gap:6px;align-items:flex-start;margin:2px 8px 6px;font-size:12px;line-height:1.45;color:var(--gedaempft)}
.chat-anhang-hinweis .ui-symbol{width:14px;height:14px;flex:none;margin-top:1px;color:var(--akzent)}
.chat-anhang-fuss{margin:4px 8px 2px;font-size:11px;line-height:1.4;color:var(--gedaempft)}
.chat-anhang-liste{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0}
.chat-person .chat-anhang-liste{justify-content:flex-end}
.chat-anhang-entwurf{margin:10px 12px 0}.chat-anhang-entwurf:empty{display:none}
.chat-bild-liste{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0;justify-content:flex-end}
.chat-bild-liste[hidden],.chat-bild-liste:empty{display:none}
.chat-bild{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--linie-stark);background:var(--flaeche-2)}
.chat-bild a,.chat-bild img{display:block;width:100%;height:100%}
.chat-bild img{object-fit:cover}
.chat-person .chat-bild{width:120px;height:120px}
.chat-bild-entwurf{justify-content:flex-start;margin:12px 12px 0}
.chat-bild-weg{position:absolute;top:3px;right:3px;width:20px;height:20px;padding:0;border-radius:50%;border:0;background:rgb(0 0 0/.65);color:rgb(255 255 255);font-size:14px;line-height:20px;display:grid;place-items:center;opacity:0;transition:opacity .12s}
.chat-bild:hover .chat-bild-weg,.chat-bild-weg:focus-visible{opacity:1}
@media (hover:none){.chat-bild-weg{opacity:1}}
.chat-bild-hinweis{margin:8px 14px 0;font-size:12px;color:var(--warn-text)}
.chat-eingabe.chat-ziehen{border-color:var(--akzent);box-shadow:0 0 0 8px var(--hintergrund),0 0 0 10px var(--akzent-zart),var(--schatten)}
.chat-bild-verweis{display:inline-flex;align-items:center;gap:4px;padding:0 6px;margin:0 1px;border-radius:6px;background:var(--akzent-zart);color:var(--link);font-size:.92em;white-space:nowrap;vertical-align:baseline}
.chat-bild-verweis .ui-symbol{width:13px;height:13px}
.chat-anhang-trenner{border:0;border-top:1px solid var(--linie);margin:8px 0}
.chat-anhang-chip{display:inline-flex;align-items:center;gap:6px;max-width:260px;height:28px;padding:0 4px 0 9px;border:1px solid var(--linie);border-radius:8px;background:var(--flaeche-2);font-size:12px;color:var(--text)}
.chat-nachricht .chat-anhang-chip{padding-right:9px}
.chat-anhang-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-anhang-chip .ui-symbol{width:13px;height:13px;flex:none;color:var(--gedaempft)}
.chat-anhang-chip button{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--gedaempft)}
.chat-anhang-chip button:hover{background:var(--hover);color:var(--text)}
.chat-modell{flex:0 1 auto;min-width:0}
.chat-modell-knopf{list-style:none;display:flex;align-items:center;gap:7px;min-width:0;height:32px;padding:0 8px 0 9px;border-radius:9px;cursor:pointer;font-size:13.5px;color:var(--text);user-select:none}
.chat-modell-knopf::-webkit-details-marker{display:none}
.chat-modell-knopf:hover,.chat-modell[open]>.chat-modell-knopf{background:var(--hover)}
.chat-modell-logo{display:inline-grid;flex:none}
.chat-modell-logo>*{width:16px;height:16px}
.chat-modell-logo>.ui-symbol{color:var(--akzent)}
.chat-modell-stufe{flex:none;color:var(--gedaempft);font-weight:400}
.chat-modell-stufe:empty{display:none}
.chat-modell-knopf>.ui-symbol:last-child{width:13px;height:13px;flex:none;color:var(--gedaempft);transition:transform .15s}
.chat-modell[open]>.chat-modell-knopf>.ui-symbol:last-child{transform:rotate(180deg)}
.chat-modell-name{min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.modellwahl{position:absolute;right:8px;bottom:calc(100% + 6px);z-index:30;width:min(680px,calc(100% - 16px));height:min(400px,65vh);box-sizing:border-box;display:grid;grid-template-columns:50px minmax(0,1fr) 190px;grid-template-rows:minmax(0,1fr) auto;background:var(--seitenleiste);border:1px solid var(--linie);border-radius:16px;box-shadow:var(--schatten);overflow:hidden;font-weight:400}
.modellwahl [hidden]{display:none!important}
.modellwahl-leiste{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border-right:1px solid var(--linie);overflow:auto}
.modellwahl-reiter{position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--gedaempft)}
.modellwahl-reiter:hover{background:var(--hover);color:var(--text)}
.modellwahl-reiter[aria-current=true]{color:var(--text)}
.modellwahl-reiter[aria-current=true]::after{content:'';position:absolute;right:-8px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--akzent)}
.modellwahl-reiter .ui-symbol,.modellwahl-reiter .anbieter-logo{width:20px;height:20px}
.modellwahl-reiter[data-modellwahl-reiter=favoriten] .ui-symbol{fill:currentColor}
.modellwahl-kuerzel{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;border:1.5px solid currentColor;font-size:11.5px;font-weight:600;line-height:1}
.modellwahl-trenner{width:24px;height:1px;margin:2px 0;background:var(--linie)}
.modellwahl-haupt{display:flex;flex-direction:column;min-width:0;min-height:0}
.modellwahl-suche{display:flex;align-items:center;gap:8px;margin:6px 12px 4px;border-bottom:1px solid var(--linie);color:var(--gedaempft);font-size:13.5px;font-weight:400}
.modellwahl-suche:focus-within{border-bottom-color:var(--akzent)}
.modellwahl-suche .ui-symbol{width:15px;height:15px;flex:none}
.modellwahl-suche input{flex:1;min-width:0;width:auto;padding:9px 0;border:0;border-radius:0;background:transparent;font-size:13.5px}
.modellwahl-suche input:focus-visible{outline:none}
.modellwahl-liste{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;gap:1px;padding:4px 6px 8px}
.modellwahl-gruppe{margin:8px 8px 2px;font-size:11px;font-weight:500;color:var(--gedaempft)}
.modellwahl-option{display:flex;align-items:center;gap:9px;min-height:36px;padding:2px 6px 2px 10px;border-radius:9px;font-size:13.5px;font-weight:400;color:var(--text);cursor:pointer}
.modellwahl-option:hover,.modellwahl-option.ist-aktiv{background:var(--hover)}
.modellwahl-logo{display:inline-grid;flex:none}
.modellwahl-logo>*{width:17px;height:17px}
.modellwahl-logo>.ui-symbol{color:var(--gedaempft)}
.modellwahl-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modellwahl-option small{flex:none;font-size:11px;color:var(--gedaempft)}
.modellwahl-haken{display:inline-grid;margin-right:auto;visibility:hidden;color:var(--gedaempft)}
.modellwahl-haken .ui-symbol{width:15px;height:15px}
.modellwahl-option:has(input:checked) .modellwahl-haken{visibility:visible}
.modellwahl-stern{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--gedaempft);opacity:0}
.modellwahl-option:hover .modellwahl-stern,.modellwahl-option.ist-aktiv .modellwahl-stern,.modellwahl-stern:focus-visible,.modellwahl-stern[aria-pressed=true]{opacity:1}
.modellwahl-stern:hover{background:var(--flaeche-2);color:var(--text)}
.modellwahl-stern[aria-pressed=true]{color:#e0a82e}.modellwahl-stern[aria-pressed=true] .ui-symbol{fill:currentColor}
.modellwahl-stern .ui-symbol{width:14px;height:14px}
.modellwahl-taste{display:inline-grid;place-items:center;flex:none;min-width:22px;height:22px;box-sizing:border-box;padding:0 6px;border-radius:6px;background:var(--flaeche-2);color:var(--gedaempft);font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace}
.modellwahl-mehr{justify-self:start;margin:2px 4px 0;padding:6px;border:0;border-radius:7px;background:transparent;color:var(--gedaempft);font-size:13px}
.modellwahl-mehr:hover{color:var(--text);background:var(--hover)}
.modellwahl-leer{margin:12px 10px;font-size:13px;line-height:1.5;color:var(--gedaempft)}
/* Logos: Simple Icons in Markenfarbe; schwarz-weiße Marken folgen der Textfarbe. */
.anbieter-logo{display:block;flex:none;border-radius:4px}
.logo-claude{color:#d97757}.logo-gemini{color:#8e75b2}.logo-meta{color:#0467df}.logo-huggingface{color:#ffd21e}.logo-perplexity{color:#1fb8cd}
.logo-openai,.logo-ollama{color:var(--text)}
img.anbieter-logo{border-radius:5px}
.modellwahl-denken{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--linie);padding:6px 6px 8px;overflow:auto}
.modellwahl-spaltenkopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:4px 6px 6px;padding:5px 0 10px;border-bottom:1px solid var(--linie);font-size:13.5px;color:var(--gedaempft)}
.modellwahl-denken-modell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}
.modellwahl-stufen{display:grid;gap:1px}
.modellwahl-stufe{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:2px 8px 2px 10px;border-radius:9px;font-size:13.5px;font-weight:400;color:var(--text);cursor:pointer}
.modellwahl-stufe:hover,.modellwahl-stufe:focus-within{background:var(--hover)}
.modellwahl-stufe .ui-symbol{width:15px;height:15px;flex:none;visibility:hidden}
.modellwahl-stufe:has(input:checked) .ui-symbol{visibility:visible}
.modellwahl-denken .modellwahl-leer{margin:8px 6px}
/* Schmale Chat-Spalte: dieselben drei Spalten wie breit, nur kompakter; die Denkstufe bleibt rechts. */
.chat-eingabe{container-type:inline-size}
@container (max-width:600px){
 .modellwahl{grid-template-columns:44px minmax(0,1fr) minmax(104px,32%);height:min(360px,calc(100vh - 260px))}
 .modellwahl-leiste{padding:6px 0}
 .modellwahl-reiter{width:32px;height:32px}
 .modellwahl-reiter[aria-current=true]::after{right:-6px}
 .modellwahl-suche{margin:4px 8px 2px;font-size:13px}
 .modellwahl-liste{padding:4px 4px 6px}
 .modellwahl-option{gap:7px;padding:2px 4px 2px 7px;font-size:13px}
 .modellwahl-option small,.modellwahl-taste{display:none}
 .modellwahl-denken{padding:4px 4px 6px}
 .modellwahl-spaltenkopf{flex-direction:column;align-items:flex-start;gap:1px;margin:4px 6px 4px;padding:4px 0 8px;font-size:12.5px}
 .modellwahl-denken-modell{max-width:100%;font-size:11px}
 .modellwahl-stufe{min-height:32px;padding:2px 6px 2px 8px;font-size:13px}
 .modellwahl-denken .modellwahl-leer{margin:6px;font-size:12px}
 .modellwahl .modellwahl-fuss{padding:6px 6px 6px 12px}
}
.modellwahl-fuss{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:7px 8px 7px 14px;border-top:1px solid var(--linie);font-size:12px;color:var(--gedaempft)}
.modellwahl-fuss>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modellwahl-fuss a{display:inline-flex;align-items:center;gap:6px;flex:none;padding:5px 8px;border-radius:7px;color:var(--gedaempft);text-decoration:none}
.modellwahl-fuss a:hover{background:var(--hover);color:var(--text)}
.modellwahl-fuss .ui-symbol{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.chat-modell-knopf>.ui-symbol:last-child{transition:none}}
.chat-senden{flex:none}
.chat-senden{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--text);color:var(--hintergrund)}
.chat-senden:hover{background:var(--text);filter:brightness(.88)}
.chat-senden .ui-symbol{width:17px;height:17px}
.chat-eingabe:has(textarea:placeholder-shown) .chat-senden{opacity:.3}
.chat-arbeitet{display:block;padding:0;font-size:13px;color:var(--gedaempft)}
.chat-arbeitet-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px 8px;border-bottom:1px solid var(--linie)}
.chat-arbeitet-zeit{font-variant-numeric:tabular-nums}
.chat-schritte{list-style:none;margin:0;padding:8px 2px 0;display:grid;gap:6px}
.chat-schritt{display:flex;align-items:baseline;gap:8px;min-width:0}
.chat-schritt .ui-symbol{width:15px;height:15px;flex:none;align-self:center}
.chat-schritt-text{white-space:nowrap}
.chat-schritt-details{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}
.chat-schritt.fertig{opacity:.6}
.chat-schritt.aktiv .chat-schritt-text{color:var(--text);background:linear-gradient(90deg,var(--gedaempft) 0%,var(--text) 45%,var(--gedaempft) 90%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:chat-schimmer 2s linear infinite}
@keyframes chat-schimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.chat-schritt.aktiv .chat-schritt-text{animation:none;-webkit-text-fill-color:currentColor}}
.chat-stopp{margin-left:4px;padding:2px 10px;border-radius:999px;font-size:12px;color:var(--text);background:var(--flaeche-2);border-color:var(--linie)}
.chat-stopp:hover{border-color:var(--fehler-linie);background:var(--fehler-flaeche);color:var(--fehler-text)}
.chat-gestoppt{font-size:13px;color:var(--gedaempft);border-left:2px solid var(--linie-stark);padding:2px 0 2px 10px}
.chat-korrigieren{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}
.chat-korrigieren:hover{color:var(--text)}
.chat-anfrage{margin:0 0 8px;font-size:13px;color:var(--gedaempft)}
.chat-anfrage>summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;padding:2px 0;border-radius:4px;outline:none;color:var(--gedaempft)}
.chat-anfrage>summary::-webkit-details-marker{display:none}
.chat-anfrage>summary:hover,.chat-anfrage[open]>summary{color:var(--text)}
.chat-anfrage>summary:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}
.chat-anfrage>summary .ui-symbol{width:14px;height:14px;transition:transform .15s}
.chat-anfrage[open]>summary .ui-symbol{transform:rotate(90deg)}
.chat-anfrage-info{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:12px}
.chat-anfrage-info .ui-symbol{width:13px;height:13px}
.chat-anfrage-teile{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--linie);border-radius:8px;overflow:hidden}
.chat-anfrage-teile>li+li{border-top:1px solid var(--linie)}
.chat-anfrage-teile summary{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;cursor:pointer;color:var(--text)}
.chat-anfrage-teile summary small{color:var(--gedaempft);white-space:nowrap;font-variant-numeric:tabular-nums}
.chat-anfrage-teile pre{margin:0;padding:8px 10px;max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--diff);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
.chat-senden .senden-stopp{display:none}
/* Wie in T3 Code: während die KI arbeitet, wird Senden zu einem roten Stopp-Knopf. */
.chat-eingabe[data-chat-eingabe][data-chat-sendet] .chat-senden,.chat-eingabe[data-chat-sendet]:has(textarea:placeholder-shown) .chat-senden{opacity:1;background:#ef4444;color:rgb(255 255 255);cursor:pointer}
.chat-eingabe[data-chat-sendet] .chat-senden:hover{filter:brightness(.92)}
.chat-eingabe[data-chat-sendet] .senden-pfeil{display:none}
.chat-eingabe[data-chat-sendet] .senden-stopp{display:contents}
.chat-eingabe[data-chat-sendet] .senden-stopp .ui-symbol{width:13px;height:13px}
.punkte{display:inline-flex;gap:3px}.punkte span{width:5px;height:5px;border-radius:50%;background:currentColor;animation:punkt 1.2s infinite ease-in-out}
.punkte span:nth-child(2){animation-delay:.15s}.punkte span:nth-child(3){animation-delay:.3s}
@keyframes punkt{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.chat-wartet{opacity:.75}
.chat-fuss{margin:16px 4px 0;font-size:11.5px;color:var(--gedaempft);text-align:center}
@media (prefers-reduced-motion:reduce){.punkte span{animation:none}.chat-meta{transition:none}}
/* Dateien einer Bewerbung: Anschreiben, Lebenslauf, alles zusammen */
.dateien{margin:0 0 24px}
.dateien-kopf{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:0 0 10px}
.dateien-kopf h2{display:flex;align-items:center;gap:8px;margin:0}
.dateien-kopf button{display:inline-flex;align-items:center;gap:8px}
.dateien-kopf kbd{font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 5px;border-radius:5px;background:color-mix(in srgb,currentColor 16%,transparent);opacity:.85}
.dateien-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.datei{display:flex;align-items:flex-start;gap:4px;padding:6px 6px 6px 4px;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche)}
.datei:hover{border-color:var(--linie-stark)}
.datei-oeffnen{text-decoration:none;display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0;padding:10px;border:0;border-radius:7px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.datei-oeffnen:hover{background:var(--hover)}
.datei-oeffnen .ui-symbol{width:20px;height:20px;margin-top:1px;color:var(--akzent)}
.datei-oeffnen span{display:grid;gap:3px;min-width:0}
.datei-oeffnen strong{font-weight:500}
.datei-oeffnen small{color:var(--gedaempft);font-size:12px;line-height:1.45}
.datei .symbolknopf{margin-top:6px}
.chat-hinweis{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;border:1px solid var(--linie);border-radius:12px;background:var(--flaeche);color:var(--gedaempft);font-size:13px}
.chat-hinweis .ui-symbol{color:var(--akzent)}

/* Neue Bewerbung: Kopf mit Speicherstatus, Karten ohne Knöpfe */
.seiten-kopf{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.seiten-kopf h1{margin:0}
.seiten-kopf .speicherstatus{margin:0 0 0 auto}
.karten-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.karten-kopf h2{margin:0}
.neue-bewerbung{max-width:860px;margin:0 auto}
.neue-bewerbung textarea{min-height:84px}

/* Einstellungen: Titel und Reiter wie im Entwurf, Karten im Raster, keine Speichern-Knöpfe mit Skript */
.einstellungen-titel{margin:0 0 14px}
.profil-reiter{margin-bottom:24px}
html[data-js] form[data-autosave] button:not([type=button]):not([formaction]){display:none}
.karten-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:start;margin:0 0 16px}
.karten-raster .karte{margin:0}
.felder.einspaltig{grid-template-columns:1fr}
div.sichtbarkeit{display:grid;gap:2px;margin-top:14px;padding-top:10px;border-top:1px solid var(--linie)}
div.sichtbarkeit .schalter{margin:6px 0}
.neu-karte>summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;color:var(--gedaempft);list-style:none}
.neu-karte>summary::-webkit-details-marker{display:none}
.neu-karte>summary:hover{color:var(--text)}
.neu-karte[open]>summary{margin-bottom:14px;color:var(--text)}
/* Aufklappbare Blöcke wie im Entwurf: Karte mit Pfeil, Titel in Textfarbe */
#bearbeitung>.abschnitt-aufklapp{border:1px solid var(--linie);border-radius:16px;background:var(--flaeche);padding:4px 18px;margin:0 0 14px}
#bearbeitung>.abschnitt-aufklapp[open]{padding-bottom:16px}
.abschnitt-aufklapp>summary{display:flex;align-items:center;gap:10px;list-style:none;color:var(--text)}
.abschnitt-aufklapp>summary::-webkit-details-marker{display:none}
.abschnitt-aufklapp>summary::before{content:"";width:7px;height:7px;flex:none;border-right:2px solid var(--gedaempft);border-bottom:2px solid var(--gedaempft);transform:rotate(-45deg);transition:transform .15s;margin:0 4px 0 2px}
.abschnitt-aufklapp[open]>summary::before{transform:rotate(45deg)}
.abschnitt-aufklapp>summary h2{margin:0}
/* Bewerbung: Kopf mit Firma, Stelle und Werkzeugen; bleibt beim Scrollen oben */
.bewerbung-kopf{position:sticky;top:0;z-index:4;background:var(--hintergrund);margin:0 0 16px;padding-top:4px}
html[data-eingebettet] .bewerbung-kopf{position:static}
.dokument-kopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 0 10px}
.kopf-titel{min-width:0;flex:1}.kopf-titel h1{margin:0 0 2px;overflow-wrap:anywhere}
.kopf-titel p{margin:0;color:var(--gedaempft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.phase-etikett{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 9px;border-radius:20px;background:var(--flaeche-2);color:var(--text)}
.dokument-werkzeuge{display:flex;align-items:center;gap:6px}
.dokument-werkzeuge form{margin:0}
.dokument-werkzeuge .seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--flaeche)}
.dokument-werkzeuge .seg .symbolknopf[aria-pressed=true]{background:var(--flaeche-2);color:var(--text)}
.symbolknopf.primaer{background:var(--akzent);border-color:var(--akzent);color:var(--akzent-text)}
/* Anschreiben als Blatt: direkt im Brief schreiben; Farben aus den Token, dunkel bleibt das Blatt dunkel */
.papier{--papier:var(--flaeche);--papier-text:var(--text);--papier-leise:var(--gedaempft);--papier-hover:var(--hintergrund);background:var(--papier);color:var(--papier-text);border:1px solid var(--linie);border-radius:6px;box-shadow:0 6px 24px rgb(0 0 0/.08);max-width:720px;margin:20px auto 16px;padding:56px 64px;font:400 14px/1.6 Georgia,'Iowan Old Style','Times New Roman',serif}
.papier p{margin:0}
.brief-absender{font-size:11px;color:var(--papier-leise);border-bottom:1px solid var(--linie);padding-bottom:6px;margin-bottom:24px!important}
.brief-empfaenger{font-style:normal;white-space:pre-line;margin:0 0 28px}
.brief-datum{text-align:right;margin:0 0 24px!important}
.papier label{display:block;font:inherit}
.papier input,.papier textarea{background:transparent;border:1px solid transparent;color:inherit;font:inherit;padding:2px 6px;margin:0 -7px;width:calc(100% + 14px);border-radius:5px;resize:none;field-sizing:content}
.papier input:hover,.papier textarea:hover{border-color:transparent;background:var(--papier-hover)}
.papier input:focus,.papier textarea:focus{outline:none;background:var(--papier-hover);border-color:var(--linie-stark)}
.brief-betreff input{font-weight:700}
.brief-betreff,.brief-anrede{margin:0 0 14px}
.brief-absaetze{display:grid;gap:10px}
.brief-absatz{position:relative}
.absatz-werkzeuge{position:absolute;top:0;right:-50px;display:flex;flex-direction:column;gap:2px;padding:2px;border-radius:8px;background:var(--flaeche);border:1px solid var(--linie);box-shadow:0 2px 8px rgb(0 0 0/.12);opacity:0;pointer-events:none;transition:opacity .12s;font-family:ui-sans-serif,system-ui,sans-serif}
.absatz-werkzeuge button,.absatz-werkzeuge a{padding:2px 7px;font-size:12px;border:0;background:transparent;border-radius:5px;color:var(--text);text-decoration:none}
.absatz-werkzeuge :is(button,a):hover{background:var(--hover)}
.brief-absatz:is(:hover,:focus-within) .absatz-werkzeuge{opacity:1;pointer-events:auto}
@media (hover:none){.absatz-werkzeuge{position:static;opacity:1;pointer-events:auto;justify-content:flex-end;box-shadow:none;margin-top:4px}}
.brief-absatz-neu{display:block;margin:8px auto 0;border:1px dashed var(--linie-stark);background:transparent;color:var(--papier-leise);border-radius:20px;padding:2px 14px}
.brief-gruss{margin:22px 0 4px}
.brief-name{margin-top:28px!important}
.brief-fuss{display:flex;align-items:center;gap:12px;justify-content:flex-end;max-width:720px;margin:0 auto 24px;flex-wrap:wrap}
.brief-fuss .hinweis{margin:0}
@media(max-width:700px){.papier{padding:28px 22px}.absatz-werkzeuge{position:static;flex-direction:row;justify-content:flex-end;box-shadow:none;margin-top:4px}.dokument-werkzeuge{width:100%;justify-content:flex-end}}
/* Links & Websites: kompakte Zeilen mit Symbol, Plus oben rechts */
.links-karte{position:relative}
.link-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.link-zeile{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px;border-radius:12px;background:var(--hintergrund)}
.link-zeile .formularfehler,.link-zeile .speicherstatus:not(:empty){flex-basis:100%;margin:0 4px 2px;font-size:12px}
.link-zeile .speicherstatus:empty{display:none}
.link-symbol{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--flaeche);color:var(--text);flex:none}
.link-symbol .ikon,.link-symbol svg{width:15px;height:15px}
.link-zeile label{display:block;font-weight:400}
.link-name{flex:0 1 150px;min-width:90px}.link-url{flex:1 1 200px;min-width:140px}
.link-zeile input{border-color:transparent;background:transparent;padding:6px 8px}
.link-name input{font-weight:600}
.link-zeile input:hover{border-color:var(--linie)}.link-zeile input:focus{background:var(--flaeche)}
.link-neu>summary{list-style:none;position:absolute;top:14px;right:14px}
.link-neu>summary::-webkit-details-marker{display:none}
.link-neu[open]>form{margin-top:6px}
.link-neu:not([open])>summary:hover{background:var(--hover)}
/* Praxisbelege als Chips; ein offener Chip zeigt Details und Bearbeitung in voller Breite */
.beleg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.beleg-chip>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;max-width:320px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--flaeche-2);color:var(--text);font-size:12.5px;cursor:pointer}
.beleg-chip>summary::-webkit-details-marker{display:none}
.beleg-chip>summary span:not(.symbol){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.beleg-chip>summary svg{width:14px;height:14px;flex:none;color:var(--gedaempft)}
.beleg-chip>summary .symbol{display:inline-grid;line-height:0}
.beleg-chip>summary:hover{background:var(--hover)}
.beleg-chip.aus>summary{opacity:.55}
.beleg-chip.entfernt>summary{background:var(--fehler-flaeche);color:var(--fehler-text)}
.beleg-chip[open]{flex-basis:100%}
.beleg-chip[open]>summary{background:var(--akzent-zart);color:var(--link)}
.beleg-neu>summary{padding:4px 8px;background:transparent;border:1px dashed var(--linie-stark);color:var(--gedaempft)}
.beleg-detail{margin:8px 0 6px;padding:14px;border:1px solid var(--linie);border-radius:12px;background:var(--hintergrund)}
.beleg-detail>p:first-child{margin-top:0}
.beleg-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.beleg-leiste .sichtbarkeit{margin:0}
/* Profil-Listen: Werkzeuge als Symbole in einer Zeile, Bearbeiten hinter dem Stift */
.werkzeugzeile{display:flex;align-items:center;gap:2px;flex:none}
.werkzeugzeile form,.symbol-aktionen form{margin:0}
.symbol-aktionen{gap:2px;flex-wrap:nowrap}
.symbol-aktionen .symbolknopf{padding:0}
.symbol-aktionen .symbolknopf:disabled{opacity:.3}
.symbolknopf:hover:not(:disabled){background:var(--hover);color:var(--text)}
.symbolknopf.gefahr:hover:not(:disabled){color:var(--fehler-text)}
.symbolknopf[aria-pressed=true]{color:var(--link)}
.auge[aria-pressed=false]{opacity:.55}
.bearbeiten-knopf{cursor:pointer}
.bearbeiten-knopf:has(input:checked){background:var(--akzent-zart);color:var(--link)}
.bearbeiten-knopf:has(input:focus-visible){outline:2px solid var(--fokus);outline-offset:2px}
.bearbeiten-inhalt{display:none;margin:4px 0 12px;padding:14px;border:1px solid var(--linie);border-radius:12px;background:var(--hintergrund)}
[data-bearbeitbar]:has(>.vorschlagkopf [data-bearbeiten]:checked)>.bearbeiten-inhalt{display:block}
section.karte[id^=kategorie-]{position:relative}
.kategorie-werkzeuge>.vorschlagkopf{position:absolute;top:22px;right:20px}
.neu-pille>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:4px 12px 4px 8px;border-radius:999px;border:1px dashed var(--linie-stark);color:var(--gedaempft);font-size:12.5px}
.neu-pille>summary::-webkit-details-marker{display:none}
.neu-pille>summary svg{width:14px;height:14px}
.neu-pille[open]>summary{color:var(--link);border-style:solid}
.qualifikation.ausgeblendet h3{color:var(--gedaempft)}
.abschnitt-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.abschnitt-leiste form,.abschnitt-leiste .hinweis{margin:0}
.pille-schalter{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;font-size:12.5px;background:var(--flaeche);color:var(--gedaempft)}
.pille-schalter svg{width:14px;height:14px}
.pille-schalter[aria-pressed=true]{background:var(--akzent-zart);border-color:transparent;color:var(--link)}
/* Stationspunkte als Stichpunkte */
.punkt-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.punkt{display:flex;align-items:flex-start;gap:6px}
.punkt::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gedaempft);flex:none;margin:13px 0 0 6px}
.punkt .punkt-text{flex:1;min-width:0;margin:0}
.punkt .punkt-text label{display:block;font-weight:400}
.punkt textarea{border-color:transparent;background:transparent;resize:none;field-sizing:content;min-height:0;padding:4px 8px;line-height:1.5}
.punkt textarea:hover{border-color:var(--linie)}.punkt textarea:focus{background:var(--hintergrund)}
.punkt .speicherstatus:empty{display:none}
.punkt .symbol-aktionen{opacity:0;transition:opacity .12s}
.punkt:is(:hover,:focus-within) .symbol-aktionen{opacity:1}
@media (hover:none){.punkt .symbol-aktionen{opacity:1}}
.punkt-neu{display:flex;align-items:flex-start;gap:6px;margin-top:8px}
.punkt-neu label{flex:1;display:block}
/* Anlagen: kompakte Zeilen mit Nummer, Kategorie-Pille und Symbolwerkzeugen */
.anlagen-liste{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.anlage-zeile{padding:6px 8px;border-radius:12px}
.anlage-zeile:hover{background:var(--hintergrund)}
.anlage-zeile>.vorschlagkopf{align-items:center;gap:10px}
.anlage-nr{width:20px;text-align:center;font-size:12px;color:var(--gedaempft);flex:none}
.anlage-symbol{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--flaeche-2);flex:none}
.anlage-symbol svg{width:17px;height:17px}
.anlage-info{flex:1;min-width:0}
.anlage-info h3{font-size:14px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anlage-info p{margin:0;overflow-wrap:anywhere}
.kategorie-pille{--farbe:#8e8e93;flex:none;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;color:var(--farbe);background:color-mix(in srgb,var(--farbe) 16%,transparent)}
.kategorie-pille[data-kategorie=arbeitszeugnis]{--farbe:#147efb}
.kategorie-pille[data-kategorie=schulzeugnis]{--farbe:#af52de}
.kategorie-pille[data-kategorie=zertifikat]{--farbe:#34a853}
.anlage-zeile .bearbeiten-inhalt{margin:8px 0 4px 64px}
@media(max-width:700px){.anlage-zeile>.vorschlagkopf{flex-wrap:wrap}.anlage-zeile .bearbeiten-inhalt{margin-left:0}}
/* Stichpunkte oder Fließtext je Station */
.punkte-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:24px 0 8px}
.punkte-kopf h4{margin:0}
.punkte-kopf .seg{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:var(--hintergrund)}
.punkte-kopf .seg form{margin:0}
.punkte-kopf .seg .symbolknopf{width:28px;height:28px}
.punkte-kopf .seg .symbolknopf[aria-pressed=true]{background:var(--flaeche-2);color:var(--text)}
.punkt-liste[data-als=absatz] .punkt::before{visibility:hidden}
/* Bewerbungsseite ohne Unterseiten-Leiste: Kopf trennt sich mit einer feinen Linie */
.bewerbung-kopf{border-bottom:1px solid var(--linie);margin-bottom:20px}
.dokument-kopf>.symbolknopf{align-self:flex-start;margin:4px -4px 0 -8px}
.blatt-hinweis{max-width:720px;margin:0 auto 6px}
/* Lebenslauf als Blatt: Blöcke mit Werkzeugen beim Überfahren, Darstellung oben rechts */
.lebenslauf-ansicht{position:relative;max-width:760px;margin:0 auto}
.knopf-form{margin:0;display:inline-flex}
.blatt-panel{position:absolute;top:12px;right:12px;z-index:3}
.blatt-panel>summary{list-style:none;background:var(--flaeche);border:1px solid var(--linie)}
.blatt-panel>summary::-webkit-details-marker{display:none}
.blatt-panel[open]>summary{background:var(--flaeche-2);color:var(--text)}
.blatt-panel-inhalt{position:absolute;right:0;top:40px;width:320px;max-height:70vh;overflow:auto;background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;box-shadow:0 10px 30px rgb(0 0 0/.25);padding:14px;font-family:ui-sans-serif,system-ui,sans-serif}
.blatt-panel-inhalt h2{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--gedaempft);margin:6px 0 6px}
.block-liste{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.block-zeile{display:flex;align-items:center;gap:6px;padding:2px 2px 2px 8px;border-radius:8px}
.block-zeile:hover{background:var(--hover)}
.block-zeile>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block-zeile.aus>span{color:var(--gedaempft);text-decoration:line-through}
.block-zeile .blatt-steuerung{flex:none;position:static;opacity:1;pointer-events:auto;box-shadow:none;border:0;background:transparent;padding:0}
.block-zeile .spalte-hinweis{color:var(--gedaempft);font-size:11px;margin-left:4px}
.stil-form{display:grid;gap:8px;margin-bottom:8px}
html[data-js] .stil-form button{display:none}
.blatt-panel-fuss{display:flex;gap:4px;justify-content:flex-end;border-top:1px solid var(--linie);padding-top:8px}
.papier.lebenslauf{max-width:none;padding:48px 56px}
.lebenslauf-kopf{margin:0 0 18px;padding-right:40px}
.lebenslauf-name{font-size:24px;font-weight:700;margin:0 0 4px!important}
.lebenslauf-kontakt{font-size:12px;color:var(--papier-leise)}
.lebenslauf-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px!important}
.lebenslauf-link{font-size:12px;border:1px solid var(--linie);border-radius:20px;padding:1px 9px}
.lebenslauf-block{position:relative;padding:8px 0 10px;border-radius:8px}
.block-titel{font-size:13px;letter-spacing:.6px;text-transform:uppercase;border-bottom:1px solid var(--linie);padding-bottom:4px;margin:0 0 10px}
.blatt-steuerung{position:absolute;top:2px;right:-6px;display:flex;gap:2px;padding:2px;border-radius:9px;background:var(--flaeche);border:1px solid var(--linie);box-shadow:0 2px 8px rgb(0 0 0/.15);opacity:0;pointer-events:none;transition:opacity .12s;font-family:ui-sans-serif,system-ui,sans-serif;z-index:2}
.blatt-steuerung .symbolknopf{width:26px;height:26px}
.blatt-steuerung .sync{color:var(--akzent)}
:is(.lebenslauf-eintrag,.eintrag-punkt):is(:hover,:focus-within)>.blatt-steuerung,
.lebenslauf-block>.blatt-steuerung:is(:hover,:focus-within),.lebenslauf-block:has(>.block-titel:hover)>.blatt-steuerung{opacity:1;pointer-events:auto}
.lebenslauf-eintrag:is(:hover,:focus-within):has(.eintrag-punkt:is(:hover,:focus-within))>.blatt-steuerung{opacity:0;pointer-events:none}
.lebenslauf-eintrag{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:6px 0;border-radius:6px}
.lebenslauf-eintrag.aus,.eintrag-punkt.aus,.lebenslauf-eintrag.aus .eintrag-punkt{opacity:.45}
.eintrag-zeit{font-size:12px;color:var(--papier-leise);padding-top:2px}
.eintrag-titel{font-weight:700}
.eintrag-ort{font-size:13px;color:var(--papier-leise)}
.eintrag-punkte{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:1px}
.eintrag-punkt{position:relative;display:flex;gap:6px}
.eintrag-punkt::before{content:"•";color:var(--papier-leise);padding-top:3px}
.eintrag-punkte.absatz .eintrag-punkt::before{content:none}
.eintrag-punkt .blatt-steuerung{top:-2px;right:-8px}
/* Datum aller Stationen links oder rechts (Panel „Darstellung & Blöcke“) */
.datum-wahl{display:flex;align-items:center;gap:8px;margin-top:8px}
/* Darstellung einer Station in dieser Bewerbung: Stichpunkte oder Fließtext */
.punkte-darstellung{display:flex;justify-content:flex-start;margin:6px 0 2px;font-family:ui-sans-serif,system-ui,sans-serif}
.punkte-darstellung .symbolknopf{width:26px;height:26px}
.eintrag-fliesstext{position:relative;display:flex;margin-top:4px}
.eintrag-fliesstext:is(:hover,:focus-within)>.blatt-steuerung{opacity:1;pointer-events:auto}
.lebenslauf-eintrag:is(:hover,:focus-within):has(.eintrag-fliesstext:is(:hover,:focus-within))>.blatt-steuerung{opacity:0;pointer-events:none}
.blatt-text{flex:1;margin:0;min-width:0}
.blatt-text label{display:block}
.blatt-text .speicherstatus:empty{display:none}
.blatt-text .speicherstatus{font:12px ui-sans-serif,system-ui,sans-serif;color:var(--gedaempft)}
.lebenslauf-kenntnisse{display:grid;gap:8px}
.kenntnis-ki{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 10px}
.kenntnis-ki>.hinweis{margin:0}
.kenntnis-ki-ergebnis{flex:1 1 100%;font:13px ui-sans-serif,system-ui,sans-serif;color:var(--papier-leise)}
.kenntnis-ki-ergebnis>summary{cursor:pointer;min-height:32px;padding:6px 0}
.kenntnis-ki-ergebnis ol{margin:4px 0 0;padding-left:20px;display:grid;gap:3px}
.kenntnis-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px!important}
.kenntnis-chip{font:13px Georgia,'Times New Roman',serif;padding:2px 10px;border-radius:20px;border:1px solid var(--linie);background:transparent;color:var(--papier-text)}
.kenntnis-chip[aria-pressed=false]{opacity:.45;text-decoration:line-through}
.blatt-wieder{display:flex;flex-wrap:wrap;gap:6px;border-top:1px dashed var(--linie-stark);margin-top:14px;padding-top:12px}
.neu-pille-knopf{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--linie-stark);background:transparent;color:var(--papier-leise);border-radius:20px;padding:3px 12px;font:12px ui-sans-serif,system-ui,sans-serif}
@media (hover:none){.blatt-steuerung{opacity:1;pointer-events:auto;position:static;box-shadow:none;width:max-content;margin:2px 0 0 auto}}
@media(max-width:700px){.papier.lebenslauf{padding:24px 18px}.lebenslauf-eintrag{grid-template-columns:1fr;gap:2px}}
/* Alles: die ganze Bewerbung als PDF in voller Höhe */
.alles-ansicht{max-width:900px;margin:0 auto}
.alles-pdf{display:block;width:100%;height:calc(100vh - 190px);min-height:520px;border-radius:10px}
/* Board-Karte wie im Entwurf */
.karte-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.karte-kopf>div{min-width:0}
.karte-stelle{margin:0;color:var(--gedaempft);font-size:13px;line-height:1.4}
/* Kartenmenü im Board: schlanke Liste wie ein Kontextmenü */
/* Der ⋯-Knopf sitzt rechts in der Symbolzeile der Karte; das Menü klappt darunter in der Karte auf. */
.kanban-karte:has(>.karten-menue) .karte-fuss{padding-right:30px}
.karten-menue{display:block;margin-top:-26px}
.karten-menue>summary{display:flex;list-style:none;cursor:pointer;margin-left:auto;width:26px;height:26px}
.karten-menue[open]>.karten-menue-flaeche{margin-top:8px}
.karten-menue>summary::-webkit-details-marker,.menue-mehr>summary::-webkit-details-marker{display:none}
.karten-menue-flaeche{margin-top:4px;padding:4px;display:grid;gap:1px;background:var(--flaeche-2);border:1px solid var(--linie);border-radius:10px;cursor:auto}
.karten-menue-flaeche form{margin:0}
.menue-eintrag{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:5px 8px;border:0;border-radius:6px;background:transparent;color:var(--text);font:inherit;font-size:12.5px;line-height:1.3;text-align:left;cursor:pointer;list-style:none}
.menue-eintrag:hover,.menue-mehr[open]>.menue-eintrag{background:var(--hover)}
.menue-eintrag .ui-symbol{width:14px;height:14px;flex:none;color:var(--gedaempft)}
.menue-formular{display:grid;gap:4px;padding:4px 6px 6px 30px}
.menue-zeile{display:flex;gap:4px}
.menue-formular input{min-width:0;flex:1;box-sizing:border-box;height:26px;padding:2px 6px;font-size:12px;border-radius:6px}
.menue-formular .primaer{flex:none;width:26px;height:26px;padding:0;display:grid;place-items:center;border-radius:6px}
.menue-formular .primaer .ui-symbol{width:14px;height:14px}
.menue-trenner{border:0;border-top:1px solid var(--linie);margin:3px 4px}
.karte-nachgehakt{margin:4px 0 0;font-size:11.5px;color:var(--gedaempft)}
.karte-tag{flex:none;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;background:var(--flaeche-2);color:var(--gedaempft)}
.karte-tag.warn{background:color-mix(in srgb,#ff9f0a 18%,transparent);color:#ff9f0a}
.kanban-karte>.karte-naechster{margin:8px 0 0;font-size:12.5px;color:var(--text)}
.karte-naechster.nachfassen-faellig{color:#ff9f0a}
.karte-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;font-size:12px;color:var(--gedaempft)}
.karte-symbole{display:inline-flex;gap:2px}
.karte-symbole .symbolknopf{width:26px;height:26px}
.uebersicht-tabelle .status{display:inline-flex;align-items:center;gap:6px}
.uebersicht-tabelle td a{color:var(--text);text-decoration:none;font-weight:600}
.uebersicht-tabelle td a:hover{color:var(--link)}
/* Foto und Unterschrift als Zeilen */
.bild-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bild-zeile{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:12px;background:var(--hintergrund)}
.bild-zeile form{margin:0}
.bild-vorschau{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--flaeche-2);color:var(--gedaempft);overflow:hidden;flex:none}
.bild-vorschau img{width:100%;height:100%;object-fit:cover}
.bild-info{flex:1;min-width:0;display:grid}
.bild-info small{color:var(--gedaempft);font-size:12px}
html[data-js] .bild-senden{display:none}
/* Änderungsverlauf: Einträge wie Commits auf GitHub, mit Zeitleiste links und aufklappbarem Diff */
.verlauf-ansicht{max-width:860px;margin:0 auto}
.verlauf-kopf{display:flex;align-items:center;gap:10px}
.verlauf-kopf h2{display:flex;align-items:center;gap:8px;margin:0;font-size:18px}
.verlauf-zahl{padding:1px 8px;border-radius:999px;background:var(--flaeche-2);font-size:12px;color:var(--gedaempft)}
.commit-liste{list-style:none;margin:18px 0 0;padding:0 0 0 18px;border-left:2px solid var(--linie);display:grid;gap:12px}
.commit{position:relative;border:1px solid var(--linie);border-radius:10px;background:var(--flaeche)}
.commit-punkt{position:absolute;left:-31px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--hintergrund);border:2px solid var(--linie);color:var(--akzent)}
.commit-punkt .ui-symbol{width:13px;height:13px}
.commit-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.commit-kopf::-webkit-details-marker{display:none}
.commit-kopf>.ui-symbol{width:16px;height:16px;color:var(--gedaempft);transition:transform .15s}
.commit details[open] .commit-kopf>.ui-symbol{transform:rotate(180deg)}
.commit-text{flex:1;min-width:0;display:grid;gap:2px}
.commit-titel{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.commit-meta{font-size:12px;color:var(--gedaempft)}
.commit-zurueck{color:var(--warn-text);font-weight:500}
.commit[data-zurueckgenommen] .commit-titel{text-decoration:line-through;color:var(--gedaempft)}
.commit-dateien{list-style:none;margin:0;padding:0 14px 4px;display:grid;gap:10px}
.commit-datei{border:1px solid var(--linie);border-radius:8px;overflow:hidden}
.commit-datei-titel{display:flex;align-items:center;gap:6px;margin:0;padding:7px 10px;background:var(--flaeche-2);font-size:12.5px}
.commit-datei-titel .ui-symbol{width:14px;height:14px}
.commit-datei .chat-diff{border:0;border-radius:0;margin:0}
.diff-absatz{margin:0;padding:5px 10px;font-size:11.5px;color:var(--gedaempft);background:var(--diff);border-top:1px solid var(--linie)}
.commit-aktionen{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:8px 14px 12px}
.commit-aktionen form{margin:0}
.modellwahl-reiter{position:relative}
.modellwahl-bot{position:absolute;z-index:1;right:3px;bottom:3px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--akzent);color:var(--akzent-text);font:600 9px/14px ui-sans-serif,system-ui,sans-serif;text-align:center}
/* Hermes-Logo ist schwarz: im dunklen Modus hell darstellen */
@media (prefers-color-scheme:dark){:root:not([data-modus=hell]) img.anbieter-logo[src*="anbieter-hermes"]{filter:invert(1)}}
:root[data-modus=dunkel] img.anbieter-logo[src*="anbieter-hermes"]{filter:invert(1)}