@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }

/* Catppuccin Mocha. Colour carries meaning: mauve draft, peach "you are up", blue app/prepared, green sent/good, teal conversation, red gap/rejection */
:root {
  color-scheme: dark;
  --crust: #11111b; --mantle: #181825; --base: #1e1e2e;
  --s0: #313244; --s1: #45475a; --s2: #585b70;
  --ov2: #9399b2; --sub0: #a6adc8; --sub1: #bac2de; --text: #cdd6f4;
  --lavender: #b4befe; --blue: #89b4fa; --teal: #94e2d5;
  --green: #a6e3a1; --yellow: #f9e2af; --peach: #fab387; --red: #f38ba8; --mauve: #cba6f7;
  --font: "IBM Plex Sans", "Noto Sans", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  --r-lg: 14px; --r-md: 10px; --r-sm: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--base); color: var(--text); font: 15px/1.55 var(--font); font-variant-numeric: tabular-nums; }
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--lavender); color: var(--crust); padding: 6px 12px; border-radius: 999px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 22px 64px; }
h1, h2, h3, h4 { margin: 0; }
h2 { font-size: 22px; line-height: 1.25; font-weight: 700; margin: 6px 0 12px; }
h3 { font-size: 17px; font-weight: 600; }
p { margin: 6px 0; color: var(--sub0); max-width: 72ch; }
ul { margin: 4px 0; padding-left: 18px; color: var(--sub0); }
li { margin: 3px 0; }
code { font-family: var(--mono); font-size: 12.5px; color: var(--sub1); background: var(--s0); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
pre { font: 12.5px/1.6 var(--mono); background: var(--crust); border-radius: var(--r-md); padding: 12px 14px; margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sub1); }
.hinweis { font-size: 13px; color: var(--ov2); }
.leer { color: var(--ov2); }

/* Kopf */
.app-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 16px 0 10px; }
.app-kopf .name { font-weight: 700; font-size: 16px; color: var(--text); text-decoration: none; }
.app-kopf nav { display: flex; flex-wrap: wrap; gap: 2px; }
.app-kopf nav a { color: var(--sub0); text-decoration: none; padding: 5px 12px; border-radius: 999px; font-size: 14px; }
.app-kopf nav a:hover { color: var(--text); background: var(--s0); }
.app-kopf nav a[aria-current="page"] { background: var(--s0); color: var(--text); font-weight: 600; }
.app-kopf .abmelden { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Readers (login without admin): every action form is hidden except the note for Claude; the server answers 403 anyway. */
.nur-lesen form[hx-post]:not(.notiz) { display: none; }
.login { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
.login form { display: grid; gap: 6px; }
.login input { font: 15px var(--font); padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--s1); background: var(--s0); color: var(--text); }
.login .btns { margin-top: 10px; }

/* Buttons */
.btn { display: inline-block; font: 600 13.5px var(--font); color: var(--text); background: var(--s0); border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; text-decoration: none; line-height: 1.5; }
.btn:hover { background: var(--s1); }
.btn.primary { background: var(--blue); color: var(--crust); }
.btn.primary:hover { background: var(--lavender); }
.btn.klein { padding: 3px 11px; font-size: 12.5px; }
.btn.stark { background: color-mix(in srgb, var(--red) 22%, var(--s0)); }
.btn[disabled], .btn[aria-disabled="true"] { color: var(--ov2); background: var(--mantle); box-shadow: inset 0 0 0 1px var(--s0); cursor: not-allowed; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
form.inline { display: inline; margin: 0; }
.htmx-request .btn { opacity: .6; }

/* Meldungen */
.meldung { border-radius: var(--r-md); padding: 10px 14px; margin: 0 0 14px; font-size: 14px; background: var(--mantle); box-shadow: inset 0 0 0 1px var(--s1); }
.meldung.ok { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 55%, transparent); }
.meldung.fehler { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 60%, transparent); }
.meldung b { font-weight: 600; }
.meldung pre { margin-bottom: 0; }

/* Heute zu tun */
.heute { background: var(--mantle); border-radius: var(--r-lg); padding: 14px 18px 8px; margin-bottom: 18px; }
.heute-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.heute-kopf .anz { color: var(--peach); font-weight: 600; font-size: 14px; }
.todo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--s0); }
.todo:first-of-type { border-top: 0; }
.todo .was { min-width: 0; }
.todo .was b { font-weight: 600; }
.todo .warum { display: block; font-size: 13px; color: var(--ov2); }
.todo .btns { margin: 0; justify-content: flex-end; }
@media (max-width: 700px) { .todo { grid-template-columns: minmax(0, 1fr); } .todo .btns { justify-content: flex-start; } }

/* Status colours: dot, tag */
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ov2)); flex: none; display: inline-block; }
.s-entwurf { --c: var(--mauve); } .s-bereit { --c: var(--peach); } .s-vorbereitet { --c: var(--blue); }
.s-gesendet { --c: var(--green); } .s-gespraech { --c: var(--teal); } .s-angebot { --c: var(--green); }
.s-keine_antwort { --c: var(--ov2); } .s-absage { --c: var(--red); } .s-zurueckgezogen { --c: var(--ov2); }
details.archiv { margin-top: 14px; color: var(--sub0); font-size: 13.5px; }
details.archiv summary { cursor: pointer; color: var(--sub0); padding: 4px 0; }
details.archiv summary:hover { color: var(--text); }

/* Übersicht: Tabelle aller Stellen und Bewerbungen, nach Firma gruppiert */
.uebersicht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 4px; }
.uebersicht-kopf h2 { margin: 6px 0; }
.abschnitt-titel { margin: 14px 0 8px; font-size: 15px; }
.tabelle-scroll { overflow-x: auto; border-radius: var(--r-lg); background: var(--mantle); margin: 6px 0 4px; }
.uebersicht-tabelle { table-layout: auto; min-width: 980px; font-size: 13.5px; }
.uebersicht-tabelle th, .uebersicht-tabelle td { padding: 7px 10px; border-bottom: 1px solid var(--s0); }
.uebersicht-tabelle thead th { white-space: nowrap; }
a.sortierung { color: var(--ov2); text-decoration: none; white-space: nowrap; }
a.sortierung:hover, th[aria-sort] a.sortierung { color: var(--text); }
.uebersicht-tabelle td.stelle { min-width: 280px; width: 36%; }
.uebersicht-tabelle td.stelle a.titel { color: var(--text); font-weight: 600; text-decoration: none; }
.uebersicht-tabelle td.stelle a.titel:hover { text-decoration: underline; }
.uebersicht-tabelle .wer { font-size: 12.5px; color: var(--sub0); }
.uebersicht-tabelle .hinweis { font-size: 12px; margin: 2px 0 0; }
.uebersicht-tabelle .fit { min-width: 90px; }
.uebersicht-tabelle .score-zahl { font-size: 17px; color: var(--lavender); }
.uebersicht-tabelle .dran { font-size: 12.5px; color: var(--peach); font-weight: 600; }
.uebersicht-tabelle td .btns { margin-top: 6px; }
.uebersicht-tabelle td .grund, .uebersicht-tabelle td .ausnahme { font-size: 12px; margin: 4px 0 0; padding: 4px 8px; }
.uebersicht-tabelle tr[data-zeile] { cursor: pointer; }
.uebersicht-tabelle tr[data-zeile]:hover td { background: color-mix(in srgb, var(--s0) 55%, transparent); }
.uebersicht-tabelle tr.zeile-offen td { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.uebersicht-tabelle tr.zeile-offen td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.uebersicht-tabelle tbody.gruppe { box-shadow: inset 3px 0 0 var(--s2); }
.uebersicht-tabelle tr.gruppe-kopf th { background: var(--s0); color: var(--text); font-size: 13.5px; padding: 8px 10px; }
.uebersicht-tabelle tr.gruppe-kopf .wer { display: inline; margin-left: 10px; }
.uebersicht-tabelle tr.in-gruppe td.stelle { padding-left: 24px; }
.uebersicht .archiv > summary { padding: 6px 0; font-weight: 600; }
@media (max-width: 700px) { .uebersicht-tabelle { min-width: 760px; } }

/* Passung bar: one segment per requirement, equal width */
.fit { display: flex; gap: 2px; height: 5px; border-radius: 3px; overflow: hidden; }
.fit i { display: block; flex: 1; background: var(--s2); }
.fit .v { background: var(--green); } .fit .p { background: var(--yellow); } .fit .l { background: var(--red); }
.fit-gross .fit { height: 8px; }
.fit-gross { margin: 2px 0 12px; }
.fit-gross .fit-txt { font-size: 13px; color: var(--sub0); margin-top: 6px; }

/* Score bars */
progress.bar { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--s0); overflow: hidden; display: block; }
progress.bar::-webkit-progress-bar { background: var(--s0); border-radius: 4px; }
progress.bar::-webkit-progress-value { background: var(--blue); border-radius: 4px; }
progress.bar::-moz-progress-bar { background: var(--blue); border-radius: 4px; }
progress.bar.gesamt { height: 10px; }
progress.bar.gesamt::-webkit-progress-value { background: var(--green); }
progress.bar.gesamt::-moz-progress-bar { background: var(--green); }
.score { display: grid; gap: 8px; margin: 8px 0; }
.score .zeile { display: grid; grid-template-columns: 84px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 13.5px; }
.score .zeile span:first-child { color: var(--sub0); }
.score .zeile span:last-child { text-align: right; color: var(--sub1); }
.score .zeile.gesamt { font-weight: 600; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--s0); }
.score .zeile.gesamt span:first-child, .score .zeile.gesamt span:last-child { color: var(--text); }
.score.kompakt .zeile { grid-template-columns: 70px minmax(0, 1fr) 64px; font-size: 12.5px; gap: 8px; }
.score.kompakt progress.bar { height: 6px; }

/* Tags */
.tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; color: var(--c, var(--sub1)); background: color-mix(in srgb, var(--c, var(--ov2)) 16%, transparent); }
.t-voll { --c: var(--green); } .t-teils { --c: var(--yellow); } .t-luecke { --c: var(--red); } .t-unklar { --c: var(--ov2); }
.t-ausnahme { --c: var(--peach); } .t-fehl { --c: var(--red); } .t-ok { --c: var(--green); } .t-neutral { --c: var(--ov2); }

/* Detail */
.zurueck { color: var(--sub0); text-decoration: none; font-size: 13.5px; }
.zurueck:hover { color: var(--text); }
.detail-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.detail-kopf h2 { margin: 0; font-size: 22px; }
.detail { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .detail { grid-template-columns: minmax(0, 1fr); } }
.spalte-stapel { display: grid; gap: 14px; min-width: 0; }
.panel { background: var(--mantle); border-radius: var(--r-lg); padding: 14px 16px; min-width: 0; }
.panel h3 { font-size: 15px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.panel.jetzt { box-shadow: 0 0 0 1px color-mix(in srgb, var(--peach) 45%, transparent); }
.eckdaten { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.eckdaten dt { color: var(--ov2); }
.eckdaten dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ausnahme { background: color-mix(in srgb, var(--peach) 12%, transparent); border-radius: var(--r-md); padding: 8px 12px; margin: 10px 0 0; font-size: 13.5px; color: var(--text); max-width: none; }
.ausnahme b { color: var(--peach); font-weight: 600; }
.gehalt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 6px 0; }
.gehalt div { background: var(--s0); border-radius: var(--r-md); padding: 8px 12px; min-width: 0; }
.gehalt .l { display: block; font-size: 12.5px; color: var(--ov2); }
.gehalt .w { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.gehalt .w.klein { font-size: 13px; }
@media (max-width: 460px) { .gehalt { grid-template-columns: minmax(0, 1fr); } }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--s0); vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--ov2); font-weight: 600; font-size: 12.5px; }
td .tag { white-space: normal; }
td code { margin: 0 3px 3px 0; display: inline-block; overflow-wrap: normal; word-break: keep-all; }
p code { display: inline-block; margin: 0 4px 4px 0; }
.zeit { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.zeit li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; padding: 5px 0; color: var(--sub1); }
.zeit .d { color: var(--ov2); }
.dateien { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.dateien li { padding: 4px 0; overflow-wrap: anywhere; }
.sha { color: var(--ov2); font-family: var(--mono); font-size: 11.5px; display: block; }
.mail-eintrag { border-bottom: 1px solid var(--s0); padding: 6px 0; font-size: 13.5px; }
.mail-eintrag summary { cursor: pointer; color: var(--sub1); }
.mail-eintrag pre { margin: 6px 0 0; }
.vorschlag-box { margin-top: 6px; }

/* Befehl zum Kopieren */
.cmd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.cmd code { user-select: all; padding: 5px 10px; font-size: 13px; }
.cmd .btn { flex: none; }

/* Datumseingabe, Felder */
input[type="date"] { font: inherit; color: var(--text); background: var(--s0); border: 1px solid var(--s1); border-radius: var(--r-sm); padding: 3px 8px; color-scheme: dark; }
.feld { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 13.5px; color: var(--sub0); }
.notiz label { display: block; margin: 0 0 6px; }
.notiz textarea { display: block; width: 100%; min-height: 6rem; resize: vertical; font: 14px/1.5 var(--font); color: var(--text); background: var(--s0); border: 1px solid var(--s1); border-radius: var(--r-sm); padding: 8px 10px; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 14px; border-bottom: 1px solid var(--s0); }
.tabs a { padding: 6px 12px; font-size: 14px; color: var(--sub0); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"], .tabs a.aktiv { color: var(--text); font-weight: 600; border-bottom-color: var(--lavender); }
.grund { font-size: 13px; color: var(--sub0); margin: 6px 0 0; max-width: none; }

/* Belege */
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 900px) { .zwei { grid-template-columns: minmax(0, 1fr); } }
.belege-tabelle a { margin-right: 8px; display: inline-block; white-space: nowrap; }
.stapelbar-hinweis { margin-top: 10px; }
@media (max-width: 600px) {
  .stapel thead { display: none; }
  .stapel, .stapel tbody, .stapel tr, .stapel td { display: block; width: auto !important; }
  .stapel tr { padding: 8px 0; border-bottom: 1px solid var(--s0); }
  .stapel td { border: 0; padding: 2px 0; }
  .stapel td:first-child { color: var(--text); font-weight: 600; }
  .stapel td[data-label] { position: relative; padding-left: 8.5em; }
  .stapel td[data-label]::before { content: attr(data-label); position: absolute; left: 0; width: 8em; color: var(--sub0); font-size: 12px; line-height: 1.6; }
  .firmen-tabelle.stapel tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; padding: 6px 0; }
  .firmen-tabelle.stapel td { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
  .firmen-tabelle.stapel td div.hinweis { display: none; }
  .firmen-tabelle.stapel .pot-details { margin-top: 0; }
  .firmen-tabelle.stapel td:first-child { grid-column: 1 / -1; }
  .firmen-tabelle.stapel td[data-label] { padding: 0; font-size: 13px; }
  .firmen-tabelle.stapel td[data-label]::before { position: static; display: block; width: auto; font-size: 11px; line-height: 1.3; }
  .eckdaten { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .eckdaten dd { margin-bottom: 6px; }
}

/* Firmen (Potential) */
.firmen-tabelle .wer { font-size: 12.5px; color: var(--sub0); margin: 2px 0 0; }
.firmen-tabelle .hinweis { font-size: 12px; margin: 2px 0 0; }
.firmen-tabelle details.firma-details { margin-top: 2px; }
.firmen-tabelle details.firma-details summary, .pot-details summary { padding: 2px 0; }
.firmen-tabelle details.firma-details p { font-size: 13px; max-width: none; }
.pot-gesamt { font-size: 18px; color: var(--lavender); }
.pot-details { margin-top: 2px; font-size: 12px; color: var(--sub0); }
.pot-details summary { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pot { list-style: none; padding: 0; margin: 4px 0 0; font-size: 12px; color: var(--sub0); }
.pot li { padding: 1px 0; }

/* Stellen-Details: Schublade rechts (htmx-Fragment) und dieselbe Ansicht als Seite */
.schaetzung { color: var(--peach); text-decoration: underline dotted; text-underline-offset: 3px; }
.schaetzung:hover { color: var(--text); }
body.schublade-offen { overflow: hidden; }
.schublade-hg { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--crust) 72%, transparent); }
.schublade { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(760px, 100vw); background: var(--base); box-shadow: -10px 0 32px color-mix(in srgb, var(--crust) 80%, transparent); overflow-y: auto; overscroll-behavior: contain; outline: none; }
.schublade-kopf { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; background: var(--base); border-bottom: 1px solid var(--s0); }
.schublade-kopf .btn { flex: none; }
.schublade-titel h2 { margin: 0 0 4px; font-size: 18px; overflow-wrap: anywhere; }
.schublade-titel .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--sub0); }
.schublade-titel .meta b { color: var(--text); }
.schublade-inhalt { display: grid; gap: 12px; padding: 14px 16px 40px; }
.schublade-inhalt [id^="h-"] { scroll-margin-top: 96px; }
.schublade-seite { max-width: 760px; }
.schublade-seite .schublade-titel { margin: 6px 0 14px; }
.schublade-seite .schublade-inhalt { padding: 0; }
.st-kandidat { --c: var(--blue); } .st-uebernommen { --c: var(--green); } .st-aussortiert { --c: var(--red); }
.grundlage .spanne { color: var(--sub1); font-weight: 600; }
.verlauf { list-style: none; padding: 0; margin: 0 0 4px; font-size: 13.5px; color: var(--sub1); }
.hinweis.regel { max-width: none; }
.andere td .hinweis { margin: 2px 0 0; font-size: 12px; }
.andere td .fit { margin-top: 4px; }
.panel details.firma-details { margin-top: 8px; }
.md { margin-top: 12px; font-size: 14px; }
.md h4 { font-size: 14px; font-weight: 600; margin: 14px 0 4px; color: var(--text); }
.md p, .md li { max-width: none; }
.md ul, .md ol { padding-left: 20px; }
.md pre { font-size: 12px; }
.md .md-tabelle { font-size: 13px; }
.md-seite { display: grid; gap: 14px; max-width: 920px; }
.md-seite .panel { scroll-margin-top: 12px; }
.md-seite .panel .md { margin-top: 0; }
.md-seite .md h4 { font-size: 14.5px; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--s0); }
.md-seite .md > h4:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
.info { display: grid; gap: 14px; max-width: 920px; }
.info .panel ul { margin: 6px 0; padding-left: 20px; }
.info .panel li { margin: 4px 0; }
.info-zahlen { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.info-zahlen b { color: var(--peach); font-size: 18px; }
.info-rechnung { font-size: 14px; }
/* Checklist tables (Regel | Quelle | Status | Beweis): narrow Quelle/Status, room for the proof. */
.md-seite .md-tabelle th:first-child:nth-last-child(4) { width: 30%; }
.md-seite .md-tabelle th:nth-child(2):nth-last-child(3) { width: 11%; }
.md-seite .md-tabelle th:nth-child(3):nth-last-child(2) { width: 8%; }
.md-seite-toc ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
/* Wide screens: split view. The list stays usable on the left third (no backdrop, not inert, rows switch the drawer), the details take
   the right two thirds. The overview keeps only Stelle, Fortschritt and Score there; the rest is in the drawer anyway. */
@media (min-width: 1100px) {
  body.schublade-offen { overflow: auto; }
  body.schublade-offen .wrap { width: 33.333vw; max-width: none; margin: 0; padding: 0 14px 64px; }
  body.schublade-offen .schublade-hg { display: none; }
  .schublade { width: 66.667vw; border-left: 1px solid var(--s0); }
  body.schublade-offen .uebersicht-tabelle { min-width: 0; }
  body.schublade-offen .uebersicht-tabelle td.stelle { min-width: 0; width: auto; }
  body.schublade-offen .uebersicht-tabelle thead th:nth-child(n+4), body.schublade-offen .uebersicht-tabelle td:nth-child(n+4) { display: none; }
  body.schublade-offen .uebersicht-tabelle tr.gruppe-kopf .wer { display: block; margin-left: 0; }
  .schublade .pdf-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 14px; }
  .schublade .pdf-paar iframe { height: 44rem; }
  .schublade .panel p { max-width: none; }
}
@keyframes schublade-rein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes schublade-ein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .schublade { animation: schublade-rein .18s ease-out; }
  .schublade-hg { animation: schublade-ein .18s ease-out; }
}

/* Firmentyp: Abzug und Geschäftsmodell */
.score .zeile.abzug { grid-template-columns: minmax(0, 1fr) 64px; color: var(--peach); }
.score .zeile.abzug span:first-child, .score .zeile.abzug span:last-child { color: var(--peach); }
.pot li.abzug { color: var(--peach); }
.geschaeft { margin: 0 0 10px; }
.geschaeft p { margin: 0 0 6px; }
.geschaeft .eckdaten { font-size: 13.5px; }
.firmen-tabelle .geschaeft .eckdaten { grid-template-columns: 78px minmax(0, 1fr); font-size: 12.5px; }

/* Status and size tags in the overview table stay on one line ("Aussortiert" must not break); the column grows instead. */
.uebersicht-tabelle td .tag { white-space: nowrap; }

/* Drawer: "Vorschau" panel with both PDFs inline and the letter as text. */
.pdf-vorschau { margin: 10px 0 0; }
.pdf-vorschau figcaption { font-size: 13px; color: var(--sub1); margin-bottom: 4px; }
.pdf-vorschau iframe { display: block; width: 100%; height: 34rem; border: 0; border-radius: var(--r-md); background: var(--s0); }
.panel .fehlt { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peach) 45%, transparent); }
.panel .fehlt p { margin: 0 0 4px; }
.panel .fehlt ul { margin: 0 0 6px; padding-left: 18px; }
.panel h4 { font-size: 13.5px; margin: 14px 0 4px; color: var(--sub1); }
.anschreiben-text { font-size: 14px; }
.anschreiben-text p { margin: 0 0 8px; }
.meldung:focus { outline: 2px solid var(--lavender); outline-offset: 2px; }