:root {
  --bg: #efe1c2;
  --card-bg: #faf3e2;
  --border: #c9ad82;
  --border-strong: #4a3120;
  --text: #3d2b1a;
  --muted: #8a7256;
  --accent: #b5792a;
  --danger: #a83a2a;
  --positive: #2f855a;
  --negative: #c53030;
  /* Deckkraft des unscharfen Logo-Scheins hinter den Kacheln
     (.project-chooser-tile und .funder-sidebar-tile). Beide teilen sich diese
     eine Stellschraube, damit der Effekt an allen Stellen gleich stark bleibt.
     Das Logo-Medaillon hat bewusst einen eigenen Wert, weil dort nur der
     schmale Ring neben dem Kreis sichtbar ist und derselbe Wert dort viel
     schwaecher wirken wuerde (siehe .header-logo-shadow-host::before). */
  --tile-glow-strength: 0.2;
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
}

h1, h2, .topnav .brand { font-family: Bahnschrift, "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif; font-weight: 600; letter-spacing: 0.01em; }

input[type="checkbox"] { accent-color: var(--danger); }

html { scrollbar-color: var(--border) var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

.topnav {
  background: var(--border-strong);
  padding: 0.75rem 1.5rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 90;
}
.topnav a {
  color: var(--card-bg);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.topnav .brand { font-weight: bold; margin-right: 1rem; color: var(--card-bg); cursor: context-menu; }
.topnav a:hover { background: rgba(255, 255, 255, 0.1); }
.topnav a.active { background: var(--accent); color: var(--border-strong); font-weight: 600; }
.topnav a.active:hover { background: var(--accent); }
.topnav .current-project { margin-left: auto; color: #d9c39a; font-size: 0.9rem; }

/* Schiebt Backup zusammen mit allem, was danach im Markup folgt (Handbuch,
   Info, Projekt-Umschalter), als zusammenhaengende Gruppe an den rechten Rand -
   die vorherigen Links (Projektinfo/KFP/Dokumentenuebersicht) bleiben dadurch
   linksbuendig. */
.nav-backup { margin-left: auto; }

.project-switcher { position: relative; }
.project-switcher-btn {
  background: transparent; border: 1px solid rgba(250, 243, 226, 0.35); border-radius: 4px;
  color: var(--card-bg); font: inherit; font-size: 0.9rem; padding: 0.35rem 0.7rem;
  cursor: pointer; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap;
}
.project-switcher-btn:hover { background: rgba(255, 255, 255, 0.08); }
.project-switcher-caret { font-size: 0.7rem; opacity: 0.8; }
.project-switcher-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  background: var(--card-bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-width: 220px; padding: 0.4rem; flex-direction: column; gap: 0.1rem;
}
.project-switcher-menu:not([hidden]) { display: flex; }
.project-switcher-form { display: contents; }
.project-switcher-item {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  border-radius: 5px; padding: 0.45rem 0.6rem; font-size: 0.9rem; color: var(--text);
  text-decoration: none; cursor: pointer; font-family: inherit;
}
button.project-switcher-item:hover { background: var(--bg); }
.project-switcher-item.active { color: var(--accent); font-weight: 600; cursor: default; }
.project-switcher-divider { border-top: 1px solid var(--border); margin: 0.35rem 0.2rem; }
.project-switcher-new { color: var(--accent); font-weight: 600; }
.project-switcher-new:hover { background: var(--bg); }
/* .topnav a { color: #fff } hat sonst Vorrang (Typ+Klasse schlägt Klasse) und
   macht den einzigen <a>-Eintrag im Menü weiß auf weiß, da unsichtbar. */
.project-switcher-menu a.project-switcher-item { color: var(--text); text-decoration: none; }
.project-switcher-menu a.project-switcher-new { color: var(--accent); }
.project-switcher-thumb { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; border-radius: 3px; }

.topnav .brand .version { font-weight: normal; font-size: 0.75rem; color: #e0b878; margin-left: 0.3rem; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
  align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay:not([hidden]) { display: flex; }
.modal-box {
  position: relative; background: var(--card-bg); border-radius: 10px;
  padding: 1.75rem 2rem; width: 380px; max-width: calc(100vw - 2rem);
  /* Ohne Hoehenbegrenzung wuerde .modal-overlays align-items:center einen zu
     hohen Inhalt (z.B. die Ausfuellhilfe mit viel Text) beidseitig ueber den
     sichtbaren Bereich hinaus zentrieren - im eingebetteten, oft niedrigeren
     Splitscreen-iframe rutscht dabei sogar der Schliessen-Button nach oben aus
     dem Sichtbereich. Stattdessen scrollt der Inhalt intern. */
  max-height: calc(100vh - 2rem); overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
/* Rueckfrage-Dialog (siehe appConfirm in base.html). Liegt bewusst ueber den
   uebrigen Modals, weil eine Rueckfrage auch aus einem offenen Popup heraus
   kommen kann (z.B. Dokument loeschen im Dokumente-Popup). */
.app-confirm-overlay { z-index: 200; }
.app-confirm-box { width: 430px; }
/* pre-line, damit die Absaetze in laengeren Warnungen (z.B. der Export-
   Hinweis auf nicht zugeordnete Kostenpositionen) erhalten bleiben. */
.app-confirm-text { white-space: pre-line; margin: 0.7rem 0 0; }
.app-confirm-actions { margin-top: 1.4rem; justify-content: flex-end; }

.modal-box h2 { margin: 0 0 0.2rem; }
.modal-box .version { color: var(--muted); margin: 0 0 0.9rem; font-size: 0.9rem; }
.fillhelp-list { margin: 0.9rem 0 0; padding-left: 1.2rem; }
.fillhelp-list li { margin-bottom: 0.55rem; }
.fillhelp-list li:last-child { margin-bottom: 0; }
.fillhelp-list strong { color: var(--text); }
.modal-close {
  position: absolute; top: 0.6rem; right: 0.6rem;
  background: transparent; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer;
  color: var(--muted); width: 1.8em; height: 1.8em; border-radius: 4px;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-maximize {
  position: absolute; top: 0.6rem; right: 2.5rem;
  background: transparent; border: none; font-size: 1rem; line-height: 1; cursor: pointer;
  color: var(--muted); width: 1.8em; height: 1.8em; border-radius: 4px;
}
.modal-maximize:hover { background: var(--bg); color: var(--text); }
.info-contact { margin: 1rem 0 0.5rem; }
.info-contact dt { font-weight: 600; font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.info-contact dd { margin: 0; }
.info-copyright { font-size: 0.8rem; margin-top: 1rem; margin-bottom: 0; }

.content { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
/* Kalkulationsseite: braucht die volle Fensterbreite, damit der Splitscreen
   mit dem Feld-Designer wirklich Platz zum Arbeiten hat (siehe .funder-sidebar.expanded) -
   die sonst app-weit geltende Lesebreite von 1100px wuerde das im maximierten
   Fenster unnoetig ausbremsen. */
.kalkulation-body .content { max-width: none; }
/* Projektinfo: die beiden Spalten (project-card/stammdaten-section, siehe
   .projektinfo-columns) sind ohnehin flex-basiert und wuerden mit mehr Platz
   sinnvoll mitwachsen (breiteres Beschreibungsfeld, mehrspaltige Stammdaten,
   siehe .field-grid) - die sonst app-weite Lesebreite von 1100px liess das
   Fenster beim Maximieren bislang wirkungslos aussehen, weil bereits ein
   normal breiter Monitor die Grenze erreicht. */
.project-detail-body .content { max-width: none; }
/* Handbuch: die Inhaltsspalte (.handbuch-content, siehe unten) ist flex-basiert
   und soll beim Maximieren mitwachsen statt links/rechts Leerraum stehen zu
   lassen - die sonst app-weite Lesebreite von 1100px wuerde das ausbremsen. */
.handbuch-body .content { max-width: none; }

.content-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.content-topline-left { flex: 1; min-width: 0; }
.content-badge { height: 64px; width: auto; flex-shrink: 0; }

.header-logo-shadow-host { position: relative; display: inline-block; margin-bottom: 1rem; isolation: isolate; }
/* Der farbige Schein hinter dem Medaillon. Anders als bei den Kacheln
   (.project-chooser-tile / .funder-sidebar-tile), wo der Schein die ganze
   Flaeche einfaerbt, ist hier nur der schmale Ring sichtbar, der hinter dem
   weissen Kreis hervorschaut. Mit "cover" traefe dieser Ring genau den
   weissen Bildrand, den fast jedes hochgeladene Logo hat - der Schein waere
   weiss auf hellem Grund, also unsichtbar. Deshalb zoomt background-size
   bewusst in den farbigen Kern des Logos hinein. */
.header-logo-shadow-host::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image: var(--tile-glow, none); background-size: 240%; background-position: center;
  filter: blur(12px) saturate(1.5); opacity: 0.78;
  transform: translate(8px, -8px) scale(1.28);
  z-index: -1;
}
.header-logo-medallion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #b8863b;
  box-shadow: 0 0 0 3px rgba(184, 134, 59, 0.14);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.header-logo-medallion:hover {
  box-shadow: 0 0 0 3px rgba(184, 134, 59, 0.28);
  transform: translateY(-1px);
}
.header-logo-medallion img { width: 100%; height: 100%; object-fit: contain; padding: 7px; pointer-events: none; }
.header-logo-fallback {
  font-family: Bahnschrift, "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  color: #8f6528;
  pointer-events: none;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

h1 { margin-top: 0; }

.table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.table th, .table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.table td.num, .table th.num { text-align: right; }
.num { text-align: right; }
.table input, .table select { width: 100%; font-size: 0.9rem; padding: 0.2rem; font-family: inherit; color: inherit; background: #fdfcf9; border: 1px solid #d9d9d9; box-shadow: inset 0 1px 2px rgba(74, 49, 32, 0.14); }
.table input.num { text-align: right; }

.table.calc th, .table.calc td { padding: 0.04rem 0.35rem; font-size: 0.85rem; }
.table.calc input, .table.calc select { font-size: 0.85rem; padding: 0.03rem 0.25rem; line-height: 1.3; }
.table.calc tbody tr:hover { background: #f4e9d0; }
.table.calc td.num { white-space: nowrap; min-width: 5.5em; }
.table.calc .funder-col { background: #efe0bd; }

/* Ledger-Optik: Zahlenspalten (Menge/Einzelpreis/Summe) in einer
   Tabellenschrift statt der normalen Fliesstextschrift, dazu eine senkrechte
   Trennlinie vor der Summenspalte, wie in einem klassischen Kassenbuch. */
.table.calc input.num, .table.calc td.num {
  font-family: Consolas, "Courier New", monospace;
}
.table.calc thead th:nth-child(4),
.table.calc tbody td:nth-child(4) { border-left: 1px solid var(--border-strong); }
.table.calc thead th { border-bottom: 2px solid var(--border-strong); }
.table.calc tfoot td { border-top: 2px solid var(--border-strong); font-weight: 700; }
.table.calc tfoot td.num { border-left: 1px solid var(--border-strong); border-bottom: 3px double var(--border-strong); }

/* Feste Tabellenspalten (Bezeichnung/Menge/Einzelpreis/Summe/Lösch-Button),
   damit die Fördergeber-Spalten den gesamten restlichen Platz automatisch
   zu gleichen Teilen untereinander aufteilen - unabhaengig von der Laenge
   des jeweiligen Fördergeber-Namens. Je mehr Fördergeber aktiviert sind,
   desto schmaler wird ihr gemeinsamer Anteil pro Spalte; ein langer Name
   bricht dabei um, statt die Spalte (und damit alle anderen) zu verbreitern. */
.table.calc { table-layout: fixed; }
.table.calc thead th:nth-child(1) { width: 24em; }
.table.calc thead th:nth-child(2),
.table.calc thead th:nth-child(3),
.table.calc thead th:nth-child(4) { width: 5.5em; }
.table.calc thead th:last-child { width: 1.8em; }
.table.calc th.funder-col, .table.calc td.funder-col {
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Fördergeber mit Online-Eingabemaske haben keine Zuordnungsfelder (die
   entstehen nur beim Einrichten eines Feldes im PDF-Designer/der Excel-
   Zuordnung) - ihre Spalte ist deshalb kein Dropdown, sondern zeigt nur
   lesend, unter welcher Bezeichnung eine Zeile zuletzt im Auswahl-Modus fuer
   diesen Fördergeber dokumentiert wurde. Dezent-graue Fuellung statt der
   bläulichen Dropdown-Spalten, damit der Unterschied "nur informativ" auch
   optisch erkennbar ist. Bewusst so schmal wie moeglich (statt wie die
   uebrigen Fördergeber-Spalten am verbleibenden Platz beteiligt) - Titel wie
   Inhalt werden einzeilig abgeschnitten, der volle Text erscheint als
   natives Tooltip beim Darueberstehen (title-Attribut, siehe positions.html). */
.table.calc th.funder-col-info, .table.calc td.funder-col-info {
  width: 3.4em;
  max-width: 3.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table.calc td.funder-col-info {
  background: #ede4d0;
  color: var(--muted);
  font-size: 0.85em;
  font-style: italic;
  text-align: center;
}
.table.calc th.funder-col-info { background: #e4d8ba; cursor: default; }

/* Ersetzt das frühere native <select> fuer die Fördergeber-Kategorie-
   Zuordnung (siehe .funder-cat-trigger in positions.html/openFunderCatMenu) -
   bei vielen Kategorien liess sich die native Dropdown-Liste in der
   gepackten App (WebView2) nicht zuverlaessig scrollen. */
.funder-cat-trigger {
  display: block; width: 100%; box-sizing: border-box;
  background: #d6c7a9; border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 0.85rem; line-height: 1.3; text-align: left;
  padding: 0.03rem 1.1rem 0.03rem 0.25rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
}
.funder-cat-trigger:hover, .funder-cat-trigger:focus { background: #c7b58f; }
.funder-cat-trigger::after {
  content: "▾"; position: absolute; right: 0.35rem; top: 50%;
  transform: translateY(-50%); font-size: 0.7em; color: var(--muted); pointer-events: none;
}
/* Gesperrt, weil eine uebergeordnete Position bei diesem Fördermittelgeber
   bereits selbst zugeordnet ist - deren komplette Teilbaum-Summe zaehlt dann
   dort, eine abweichende Zuordnung hier wuerde stillschweigend ignoriert
   (siehe _collect_zuordnung in exporter.py). Bleibt bewusst sichtbar (nicht
   versteckt) und zeigt den zuletzt gespeicherten Wert weiter an, nur eben
   nicht mehr anwaehlbar - ausblenden waere hier verwirrender als anzuzeigen,
   dass die Auswahl gerade wirkungslos ist. */
.funder-cat-trigger:disabled {
  color: var(--muted); font-style: italic; cursor: default; opacity: 0.75;
}
.funder-cat-trigger:disabled::after { content: ""; }

.bezeichnung-cell { display: flex; align-items: center; gap: 0.2rem; }
.bezeichnung-cell input[type="text"] { flex: 1; min-width: 0; }
.btn-note {
  flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  width: 1.5em; height: 1.5em; padding: 0; cursor: pointer; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center; opacity: 0.45;
}
.btn-note:hover { opacity: 0.8; }
.btn-note.has-note { opacity: 1; border-color: #d69e2e; background: #fef8ee; }

/* Nur ein kleiner farbiger Punkt statt eines sichtbaren Dropdowns (spart Platz
   in der engen Bezeichnungsspalte) - das Auswahlmenue (siehe .kat-menu, wird
   fuer denselben Zweck wiederverwendet) erscheint erst per Klick, siehe
   openStatusMenu() in positions.html. Als <button> in der Zeile klickbar, als
   <span> innerhalb des Menuepunkts nur Farb-Vorschau (nicht klickbar). */
.foerderstatus-dot {
  flex-shrink: 0;
  width: 0.8em; height: 0.8em; min-width: 0.8em;
  border-radius: 50%; padding: 0; box-sizing: border-box;
  border: 1.5px solid var(--border); background: transparent; cursor: pointer;
}
.foerderstatus-dot.foerderstatus-offen { opacity: 0.5; }
.foerderstatus-dot.foerderstatus-beantragt { background: #d69e2e; border-color: #d69e2e; }
.foerderstatus-dot.foerderstatus-genehmigt { background: var(--positive); border-color: var(--positive); }
.foerderstatus-dot.foerderstatus-abgelehnt { background: var(--negative); border-color: var(--negative); }
.foerderstatus-menu-item { display: flex; align-items: center; gap: 0.5em; }
.foerderstatus-menu-item .foerderstatus-dot { cursor: default; }

.btn-doc {
  flex-shrink: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  width: 1.5em; height: 1.5em; padding: 0; cursor: pointer; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center; opacity: 0.45;
}
.btn-doc:hover { opacity: 0.8; }
.btn-doc.has-docs { opacity: 1; border-color: var(--accent); background: #eaf2fb; }

.doc-popup { width: 260px; }
.doc-popup .documents-list { max-height: 220px; overflow-y: auto; }

.note-popup {
  position: fixed; z-index: 60;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 0.6rem; width: 240px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Dokumente-Popup (siehe .doc-popup) ist zugleich Drag&Drop-Ziel (siehe
   window.setupDropzone in base.html) - Ring statt gestricheltem Rahmen wie
   bei den einfacheren Dropzones, da .note-popup schon einen eigenen soliden
   Rahmen/Schatten hat. */
.note-popup.dragover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184, 134, 59, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25); }
.note-popup-textarea {
  width: 100%; min-height: 80px; resize: vertical;
  padding: 0.4rem; border: 1px solid var(--border); border-radius: 4px;
  font-family: inherit; font-size: 0.85rem; margin-bottom: 0.5rem;
}
.note-popup-actions { display: flex; gap: 0.4rem; }

.kat-menu {
  position: fixed; z-index: 100;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 0.3rem; min-width: 180px; max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.05rem;
}
.kat-menu-item {
  background: transparent; border: none; text-align: left; padding: 0.35rem 0.6rem;
  border-radius: 4px; cursor: pointer; font-size: 0.85rem; color: var(--text); font-family: inherit;
}
.kat-menu-item:hover { background: #f0f4f8; }
.kat-menu-item.active { font-weight: 600; color: var(--accent); }
.kat-menu-item.danger { color: var(--danger); }
.kat-menu-item.danger:hover { background: #fdecec; }

.new-row td { background: #f2e6c9; border-bottom: none; }
.new-row input::placeholder { color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------------- */
/* Kalkulation: kompaktere Kostenbloecke, farblich getrennt nach Art       */
/* ---------------------------------------------------------------------- */

.kalkulation-page .card { padding: 0.85rem 1.1rem; margin-bottom: 0.9rem; }
.kalkulation-page .card h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.kalkulation-page .card.kostenblock { padding-bottom: 0.7rem; }

/* -------------------------------------------------------------------- */
/* Kalkulation: Sidebar mit allen Foerdergebern. Beim Oeffnen eines       */
/* Formulars ersetzt die Sidebar ihre Kachel-Liste durch den Feld-       */
/* Designer (iframe) und verbreitert sich dabei auf ca. die Haelfte -    */
/* zwei Haelften insgesamt (Kalkulation | Sidebar), nie drei Spalten.    */
/* Ersetzt die frühere eigenstaendige Foerdergeber-Seite und den         */
/* Rechtsklick-Mehrfenster-Mechanismus.                                  */
/* -------------------------------------------------------------------- */

/* Kalkulationsseite bekommt eine feste, den Bildschirm ausfuellende Hoehe -
   Kalkulation (links) und Sidebar/Feld-Designer (rechts) sind darin zwei
   eigenstaendige Spalten mit jeweils eigenem Scrollbalken, statt dass die
   ganze Seite als ein langer Block scrollt. */
.kalkulation-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.kalkulation-body .content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.kalkulation-body .content-topline { flex-shrink: 0; }

.kalkulation-layout { display: flex; align-items: stretch; gap: 1.25rem; flex: 1 1 auto; min-height: 0; }
/* Scrollt nicht mehr selbst (siehe .kalkulation-scroll-area weiter unten) -
   dient nur noch als Breiten-/Hoehenrahmen fuer .kalkulation-page. */
.kalkulation-main { flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }
.kalkulation-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.kalkulation-page-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kalkulation-page-head h1 { margin: 0; }
.kalkulation-page-title { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kalkulation-tree-actions { display: flex; gap: 0.5rem; }
.kalkulation-quick-category { display: flex; align-items: center; gap: 0.5rem; }
.kalkulation-quick-category input[type="text"] { width: 12rem; }
.kalkulation-scroll-area { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.funder-sidebar {
  flex: 0 0 auto;
  width: min(20%, 220px);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
  overflow-y: auto;
}
.funder-sidebar.expanded {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  overflow: hidden;
}

.funder-sidebar-tile-wrap { position: relative; }
.funder-sidebar-tile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem 0.5rem 2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative; overflow: hidden; isolation: isolate;
}
.funder-sidebar-tile::before {
  content: ""; position: absolute; inset: -25%;
  background-image: var(--tile-glow, none); background-size: cover; background-position: center;
  filter: blur(18px); opacity: var(--tile-glow-strength); z-index: -1;
}
.funder-sidebar-tile > * { position: relative; }
.funder-sidebar-tile:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.funder-sidebar-tile .funder-tile-icon { width: 34px; height: 34px; border-radius: 7px; flex-shrink: 0; }
.funder-sidebar-tile .funder-tile-icon img { padding: 3px; }
.funder-sidebar-tile .funder-tile-fallback { font-size: 1rem; }
.funder-sidebar-tile-name { font-size: 0.85rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.funder-sidebar-empty { font-size: 0.85rem; }
.funder-sidebar-inactive-toggle {
  display: flex; align-items: center; gap: 0.4rem;
  background: transparent; border: none; padding: 0.3rem 0.2rem;
  color: var(--muted); font-size: 0.8rem; cursor: pointer; text-align: left;
}
.funder-sidebar-inactive-toggle:hover { color: var(--text); }
.funder-sidebar-inactive-toggle .up-toggle-glyph { font-size: 0.75rem; flex-shrink: 0; }
.funder-sidebar-inactive-list:not([hidden]) { display: flex; flex-direction: column; gap: 0.6rem; }

/* Feld-Designer-Ansicht innerhalb der erweiterten Sidebar */
.designer-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.designer-pane-title { font-weight: 600; font-size: 0.92rem; display: flex; align-items: center; gap: 0.4rem; }
.designer-pane-title .funder-tile-icon { width: 1.4rem; height: 1.4rem; border-radius: 5px; }
.designer-pane-title .funder-tile-icon img { padding: 0; object-fit: cover; }
.designer-pane-title .funder-tile-fallback { font-size: 0.8rem; }
.designer-pane-close {
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  white-space: nowrap;
}
.designer-pane-close:hover { background: var(--border); }
.designer-pane-frame { flex: 1 1 auto; width: 100%; border: 0; min-height: 0; }

.kalkulation-resizer {
  flex: 0 0 6px;
  align-self: stretch;
  cursor: col-resize;
  position: relative;
}
.kalkulation-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  right: 2px;
  border-radius: 3px;
  background: var(--border);
}
.kalkulation-resizer:hover::after,
.kalkulation-resizer.dragging::after {
  background: var(--accent);
}

@media (max-width: 900px) {
  .kalkulation-layout { flex-direction: column; }
  .funder-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .funder-sidebar.expanded { flex-direction: column; }
  .funder-sidebar-tile { width: auto; }
  .kalkulation-resizer { display: none; }
}

.modal-box.funder-popup {
  width: min(560px, 92vw);
  height: min(640px, 85vh);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.funder-popup-frame { flex: 1; width: 100%; border: 0; border-radius: 10px; }

.modal-box.bewerbungsmappe-popup {
  width: min(820px, 95vw);
  height: min(760px, 90vh);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: width 0.15s ease, height 0.15s ease;
}
.modal-box.bewerbungsmappe-popup.maximized {
  width: 98vw;
  height: 98vh;
}
.bewerbungsmappe-popup-head {
  display: flex; justify-content: flex-end; align-items: center; gap: 0.1rem;
  padding: 0.3rem 0.4rem; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.bewerbungsmappe-popup-head .modal-maximize,
.bewerbungsmappe-popup-head .modal-close { position: static; }
.bewerbungsmappe-popup-frame { flex: 1; width: 100%; border: 0; border-radius: 10px; }

/* In einem iframe eingebettete Seite (Splitscreen-Feld-Designer bzw.
   Stammdaten-Popup, siehe positions.html): eigene Navigation, Kopfzeile und
   Foerdergeber-interne Tabs sind hier ueberfluessig, da Sidebar bzw. Popup
   den Kontext schon liefern. Erkennung per Script in base.html (<head>). */
html.embedded .topnav,
html.embedded .content-topline,
html.embedded .funder-nav-tabs,
html.embedded .funder-page-title {
  display: none;
}
html.embedded .content { padding: 0.85rem; max-width: none; }

.art-block {
  border-left: 3px solid var(--border);
  border-radius: 3px;
  padding: 0.35rem 0 0.35rem 0.65rem;
  margin-bottom: 0.5rem;
}
.art-block:last-child { margin-bottom: 0; }
.art-block table.calc { margin-top: 0.25rem; }
.art-block-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.art-block.art-ausgabe { border-left-color: var(--negative); background: rgba(197, 48, 48, 0.045); }
.art-block.art-ausgabe .art-block-label { color: var(--negative); }
.art-block.art-einnahme { border-left-color: var(--positive); background: rgba(47, 133, 90, 0.05); }
.art-block.art-einnahme .art-block-label { color: var(--positive); }

.art-block.art-ausgabe .summe-cell { color: var(--negative); }
.art-block.art-einnahme .summe-cell { color: var(--positive); }
.art-block.art-ausgabe tfoot td { color: var(--negative); font-weight: 700; font-size: 0.95rem; }
.art-block.art-einnahme tfoot td { color: var(--positive); font-weight: 700; font-size: 0.95rem; }

.art-dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.45em; }
.art-dot-ausgabe { background: var(--negative); }
.art-dot-einnahme { background: var(--positive); }

.gesamtsumme-row.ausgabe td { color: var(--negative); font-weight: 700; font-size: 1.05rem; }
.gesamtsumme-row.einnahme td { color: var(--positive); font-weight: 700; font-size: 1.05rem; }

.kostenblock-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.kostenblock-header h2 { margin: 0; }
.kostenblock-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  font-size: 0.85rem; line-height: 1; color: var(--text); cursor: pointer;
}
.btn-icon:hover { background: var(--bg); }
.btn-icon.danger { color: var(--danger); border-color: var(--danger); }
.btn-icon.accent { color: var(--accent); border-color: var(--accent); font-weight: 700; }
.btn-icon.danger:hover { background: #fdecec; }

.table.calc input:disabled, .table.calc select:disabled { opacity: 0.4; background: transparent; }
.table.calc input:read-only { opacity: 0.5; background: transparent; }

.up-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 1.1em; height: 1.1em; padding: 0; margin: 0;
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.75rem; line-height: 1;
}
.up-toggle:hover { color: var(--text); }
/* Je Verschachtelungstiefe (bis zu 9, siehe MAX_UNTERPOSITIONEN_TIEFE in
   backend/routers/positions.py) ein eigener, dezenter Farbton - auf einen
   Blick erkennbar, zu welcher Ebene eine Unterposition gehoert, unabhaengig
   von der Einrueckung. Gilt auch fuer die "Neu"-Leerzeilen derselben Tiefe,
   damit die Farbgruppierung durchgaengig bleibt. Tiefe 1/2 bewusst wie
   bisher belassen, 3-9 daran anschliessend um den Farbkreis verteilt. */
.up-depth-1 { background: #eef2fb; }
.up-depth-1:hover { background: #e4ebf8; }
.up-depth-2 { background: hsl(8, 68%, 89%); }
.up-depth-2:hover { background: hsl(8, 62%, 83%); }
.up-depth-3 { background: hsl(38, 70%, 92%); }
.up-depth-3:hover { background: hsl(38, 65%, 87%); }
.up-depth-4 { background: hsl(0, 65%, 95%); }
.up-depth-4:hover { background: hsl(0, 60%, 90%); }
.up-depth-5 { background: hsl(320, 55%, 95%); }
.up-depth-5:hover { background: hsl(320, 50%, 90%); }
.up-depth-6 { background: hsl(270, 55%, 95%); }
.up-depth-6:hover { background: hsl(270, 50%, 90%); }
.up-depth-7 { background: hsl(190, 55%, 92%); }
.up-depth-7:hover { background: hsl(190, 50%, 87%); }
.up-depth-8 { background: hsl(90, 40%, 91%); }
.up-depth-8:hover { background: hsl(90, 38%, 86%); }
.up-depth-9 { background: hsl(48, 75%, 90%); }
.up-depth-9:hover { background: hsl(48, 70%, 85%); }

/* Schriftgewicht und -groesse nehmen mit der Tiefe ab, ab Ebene 3 kommt
   Kursivschrift dazu, ab Ebene 5 zusaetzlich ein Wechsel auf die
   Serifenschrift (siehe unten) - mehrere zugleich abgestufte Signale, weil
   Farbe und Einrueckung allein bei vielen Ebenen kaum noch unterscheidbar
   sind. Ab Ebene 5 bleiben Gewicht/Groesse konstant, dort traegt der
   Schriftartwechsel die Unterscheidung weiter. */
.position-row:not(.up-row-inline) input[type="text"].bezeichnung-field,
tr[id^="np-row-"] input[type="text"] {
  font-weight: 700;
}
.up-depth-1 input[type="text"] { font-weight: 600; font-size: 0.84rem; }
.up-depth-2 input[type="text"] { font-weight: 500; font-size: 0.82rem; }
/* Ab Ebene 3 zusaetzlich kursiv - Schriftschnitt allein (Fett/Normal) wird auf
   den unteren Ebenen kaum noch wahrgenommen, Kursivschrift setzt hier einen
   deutlicheren zweiten Akzent. */
.up-depth-3 input[type="text"] { font-weight: 450; font-style: italic; font-size: 0.80rem; }
.up-depth-4 input[type="text"] { font-weight: 400; font-style: italic; font-size: 0.78rem; }
/* Ab Ebene 5 zusaetzlich Schriftartwechsel auf die Serifenschrift, die auch
   im Logo-Platzhalter verwendet wird (siehe .header-logo-fallback) - so tief
   verschachtelte Baeume sind der Ausnahmefall, dort darf sich die Optik
   deutlich vom Rest der (serifenlosen) Tabelle abheben. */
.up-depth-5 input[type="text"],
.up-depth-6 input[type="text"],
.up-depth-7 input[type="text"],
.up-depth-8 input[type="text"],
.up-depth-9 input[type="text"] {
  font-weight: 400; font-style: italic; font-size: 0.76rem;
  font-family: Georgia, "Iowan Old Style", serif;
}

.muted { color: var(--muted); }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.card.positive { border-left: 4px solid var(--positive); color: var(--positive); }
.card.negative { border-left: 4px solid var(--negative); color: var(--negative); }

.form { display: flex; flex-direction: column; gap: 0.75rem; max-width: 640px; }
.form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.form input, .form select, .form textarea { padding: 0.4rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem; }
.form .row { display: flex; gap: 1rem; }
.form .row > label { flex: 1; }
fieldset { border: 1px solid var(--border); border-radius: 4px; }

.inline-form { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.inline-form.tight { display: inline-flex; margin: 0; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
.btn.small { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.btn.danger { background: var(--danger); }
.btn:hover { opacity: 0.9; }
.btn-x {
  display: inline-block;
  background: transparent;
  color: var(--danger);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.3rem;
}
.btn-x:hover { opacity: 0.7; }

.tabs { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.tab { padding: 0.5rem 1rem; text-decoration: none; color: var(--text); border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; }
.tab.active { background: var(--card-bg); border-color: var(--border); font-weight: bold; }
/* .tab auf einem <button> statt <a> (siehe project_detail.html Stammdaten-
   Reiter, clientseitig ohne Neuladen umgeschaltet): Browser-Grundstil des
   <button> zuruecksetzen, damit es optisch nicht von den Link-Varianten
   (z.B. Fördergeber-Reiter) abweicht. */
button.tab { cursor: pointer; background: transparent; font: inherit; }

.mapping-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.grid-scroll { flex: 1; overflow: auto; max-height: 70vh; border: 1px solid var(--border); background: var(--card-bg); }
.sidebar { width: 340px; flex-shrink: 0; max-height: 70vh; overflow-y: auto; }
.sidebar .card { margin-bottom: 0.75rem; padding: 0.9rem; }
.sidebar h3 { margin-top: 0; font-size: 1rem; }

.category-checklist {
  display: flex; flex-direction: column; gap: 0.2rem;
  max-height: 160px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem;
}
.category-checklist label {
  display: flex; align-items: center; gap: 0.4rem; font-weight: normal; font-size: 0.9rem;
}
.category-checklist label input { width: auto; }
.category-checklist-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.btn-rename-category {
  background: transparent; border: none; color: var(--accent); cursor: pointer;
  font-size: 0.8rem; padding: 0 0.2rem; flex-shrink: 0;
}
.btn-rename-category:hover { opacity: 0.7; }

.excel-grid { border-collapse: collapse; font-size: 0.8rem; }
.excel-grid th { background: #eee; position: sticky; top: 0; padding: 0.2rem 0.4rem; border: 1px solid var(--border); z-index: 1; }
.excel-grid th:first-child { left: 0; z-index: 2; }
.gridcell {
  position: relative;
  border: 1px solid #e2e2e2;
  padding: 0.2rem 0.4rem;
  min-width: 60px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.gridcell:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.gridcell.merged { background: #f5f5f5; cursor: default; }
.gridcell.selected { outline: 2px solid #d69e2e; outline-offset: -2px; }
.gridcell.mapped-sum, .gridcell.mapped-total, .gridcell.mapped-single, .gridcell.mapped-stammdaten { font-weight: 600; }
.gridcell.mapped-sum, .gridcell.mapped-total { background: #feebc8; }
.gridcell.mapped-single { background: #e9d8fd; }
.gridcell.mapped-stammdaten { background: #bee3f8; }
.cell-delete-form { position: absolute; top: 1px; right: 1px; display: none; }
.gridcell:hover .cell-delete-form { display: block; }
.cell-delete-form button {
  background: var(--danger); color: #fff; border: none; border-radius: 2px;
  width: 14px; height: 14px; line-height: 12px; font-size: 10px; padding: 0; cursor: pointer;
}

.pager { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.75rem; }
.pager-zoom { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.pdf-canvas-outer { overflow: auto; max-height: 75vh; border: 1px solid var(--border); background: #666; margin-bottom: 1.5rem; padding: 1.8em 1.8em 0.6em 0.6em; }
.pdf-canvas-wrap { position: relative; display: inline-block; cursor: crosshair; user-select: none; transform-origin: 0 0; }
.pdf-canvas-wrap.panning { cursor: grabbing; }
.pdf-canvas-wrap img { display: block; max-width: none; }

.field-box {
  position: absolute;
  border: 1px dashed rgba(43, 108, 176, 0.7);
  background: rgba(255, 255, 255, 0.7);
}
.field-box.field-box-gesamtsumme {
  border: 2px solid #c05621;
  background: rgba(192, 86, 33, 0.15);
  display: flex;
  align-items: center;
  padding: 0 3px;
  gap: 3px;
}
.field-box.field-box-gesamtsumme .field-box-label { background: #c05621; }
.field-edit-form.gesamtsumme-form { width: auto; height: auto; flex-shrink: 0; }
.field-box.field-box-stammdaten {
  border: 2px solid #2c7a7b;
  background: rgba(44, 122, 123, 0.15);
  display: flex;
  align-items: center;
  padding: 0 3px;
  gap: 3px;
}
.field-box.field-box-stammdaten .field-box-label { background: #2c7a7b; }
.field-box-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #111;
}
.field-edit-form.stammdaten-form { width: auto; height: auto; flex-shrink: 0; }
.btn-edit-stammdaten {
  background: transparent; border: none; color: #2c7a7b; cursor: pointer;
  font-size: 0.85rem; padding: 0 2px; line-height: 1;
}
.field-box.field-box-unassigned {
  border: 2px dashed #a0aec0;
  background: rgba(160, 174, 192, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.field-edit-form.unassigned-form { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.btn-assign-type {
  background: #fff; border: 1px solid #a0aec0; color: #4a5568; cursor: pointer;
  font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; white-space: nowrap; font-family: inherit;
}
.btn-assign-type:hover { background: #edf2f7; }
.field-box.field-box-pending {
  border: 2px dashed #718096;
  background: rgba(113, 128, 150, 0.15);
  display: flex;
  align-items: center;
  padding: 0 3px;
}
.field-box-placeholder { font-size: 0.75rem; color: #4a5568; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.candidate-hover-outline {
  position: absolute;
  border: 2px dashed #38a169;
  background: rgba(56, 161, 105, 0.12);
  pointer-events: none;
  z-index: 2;
}
.btn-edit-categories {
  background: transparent; border: none; color: #c05621; cursor: pointer;
  font-size: 0.85rem; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.field-box-label {
  position: absolute;
  top: -1.5em;
  left: -2px;
  background: #2b6cb0;
  color: #fff;
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
.field-edit-form { width: 100%; height: 100%; }
.field-box-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 2px;
  font-family: inherit;
  color: #111;
  text-align: left;
}
.field-box-input:focus { outline: 1px solid #2b6cb0; background: #fff; }
.field-box-textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.3;
}
.field-box.field-box-active {
  outline: 2px dashed #d69e2e;
  outline-offset: 2px;
}
.field-box .field-delete { position: absolute; top: -1.1em; right: -1.1em; z-index: 3; }
.field-box .field-delete button {
  background: var(--danger); color: #fff; border: none; border-radius: 50%;
  width: 1.3em; height: 1.3em; cursor: pointer; font-size: 0.75rem; line-height: 1;
}
.field-box.field-box-longpress {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.category-picker {
  position: fixed;
  z-index: 50;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 0.6rem;
  width: 240px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
.category-picker-list {
  display: flex; flex-direction: column; gap: 0.2rem;
  max-height: 160px; overflow-y: auto; margin-bottom: 0.5rem;
}
.category-picker-list label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.category-picker-list label input { width: auto; }
.category-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.category-picker-actions { display: flex; gap: 0.4rem; }
.picker-cell-label { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; }
.picker-section { margin-bottom: 0.5rem; }
.picker-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; }
.picker-text-input, .picker-new-category-input, .picker-select {
  width: 100%; padding: 0.35rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem;
}
.picker-new-category-input { margin-top: 0.4rem; }
.picker-hint { font-size: 0.72rem; color: var(--muted); margin: 0.3rem 0 0; }
.picker-divider { text-align: center; font-size: 0.75rem; color: var(--muted); margin: 0.4rem 0; }
.picker-rename-btn {
  background: transparent; border: none; color: var(--accent); cursor: pointer;
  font-size: 0.8rem; padding: 0 0.2rem; flex-shrink: 0;
}
.picker-rename-btn:hover { opacity: 0.7; }
.picker-delete-btn {
  background: transparent; border: none; color: var(--danger); cursor: pointer;
  font-size: 0.9rem; padding: 0 0.2rem; flex-shrink: 0; line-height: 1;
}
.picker-delete-btn:hover { opacity: 0.7; }

.resize-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #2b6cb0;
  border: 1px solid #fff;
  border-radius: 2px;
  cursor: nwse-resize;
  z-index: 3;
}

/* ---------------------------------------------------------------------- */
/* Handbuch                                                                */
/* ---------------------------------------------------------------------- */

.nav-handbuch { white-space: nowrap; }

.handbuch-header { margin-bottom: 1.5rem; }
.handbuch-header p { color: var(--muted); max-width: 70ch; }

.handbuch-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.5rem;
  position: sticky;
  top: 0.75rem;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.handbuch-search-bar input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 0.3rem 0.1rem;
  background: transparent;
  color: var(--text);
}
.handbuch-search-count { color: var(--muted); font-size: 0.85rem; white-space: nowrap; min-width: 6.5em; text-align: right; }
.handbuch-search-bar button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 1.9em;
  height: 1.9em;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
}
.handbuch-search-bar button:hover { background: var(--bg); }

mark.search-hit { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; }
mark.search-hit.search-hit-current { background: #f6ad2e; }

.handbuch-layout { display: flex; gap: 2.5rem; align-items: flex-start; }

.handbuch-toc {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  font-size: 0.9rem;
}
.handbuch-toc h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.6rem; }
.handbuch-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.handbuch-toc li { counter-increment: toc; margin-bottom: 0.35rem; }
.handbuch-toc a {
  display: block;
  color: var(--text);
  text-decoration: none;
  padding: 0.2rem 0.4rem 0.2rem 0;
  border-radius: 4px;
}
.handbuch-toc a::before { content: counter(toc) ". "; color: var(--accent); font-weight: 600; }
.handbuch-toc a:hover { background: var(--card-bg); text-decoration: underline; }

.handbuch-content { flex: 1; min-width: 0; }
.handbuch-content section { margin-bottom: 3rem; scroll-margin-top: 4.5rem; }
.handbuch-part {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin: 2.5rem 0 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.handbuch-part-num {
  font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--accent);
  border-radius: 20px; padding: 0.15rem 0.65rem; letter-spacing: 0.02em; flex-shrink: 0;
}
.handbuch-part-title { font-size: 1rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; }
.handbuch-part-hint { color: var(--muted); font-size: 0.88rem; }
.handbuch-toc-part { font-size: 0.72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; margin: 0.9rem 0 0.3rem; }
.handbuch-toc-part:first-child { margin-top: 0; }
.handbuch-content h2 {
  font-size: 1.4rem;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}
.handbuch-content h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.handbuch-content p { line-height: 1.6; }
.handbuch-content ul, .handbuch-content ol { line-height: 1.6; padding-left: 1.4rem; }
.handbuch-content li { margin-bottom: 0.3rem; }
.handbuch-content code {
  background: #eef0f2; border-radius: 3px; padding: 0.1em 0.35em; font-size: 0.9em;
}
.handbuch-content dl { line-height: 1.7; }
.handbuch-content dt { font-weight: 600; margin-top: 0.9rem; }
.handbuch-content dd { margin-left: 0; color: var(--text); }

.handbuch-box {
  border-left: 4px solid var(--accent);
  background: #eef4fb;
  border-radius: 0 6px 6px 0;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  font-size: 0.95rem;
}
.handbuch-box strong { color: var(--accent); }
.handbuch-box.warnung { border-left-color: var(--danger); background: #fdeeee; }
.handbuch-box.warnung strong { color: var(--danger); }

.handbuch-swatch {
  display: inline-block; width: 0.85em; height: 0.85em; border-radius: 2px;
  margin-right: 0.35em; vertical-align: middle; position: relative; top: -1px;
}
.handbuch-swatch.gruen { background: #c6f6d5; border: 1px solid #9ae6b4; }
.handbuch-swatch.orange { background: #feebc8; border: 1px solid #f6ad55; }
.handbuch-swatch.lila { background: #e9d8fd; border: 1px solid #d6bcfa; }
.handbuch-swatch.blau { background: #2b6cb0; }
.handbuch-swatch.gruen2 { background: #38a169; }
.handbuch-swatch.rot { background: var(--danger); }

.handbuch-back-to-top { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; }

/* ---------------------------------------------------------------------- */
/* Begruessungs-/Info-Inhalt (frueher eigenes Overlay, jetzt Teil des      */
/* Info-Popups #infoOverlay in base.html)                                 */
/* ---------------------------------------------------------------------- */

.welcome-badge img { width: 84px; height: auto; margin: 0 auto 0.75rem; display: block; }

.project-chooser-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-top: 1.5rem;
}
.project-chooser-form { display: contents; }
.project-chooser-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.25rem 1rem; cursor: pointer; text-decoration: none; color: var(--text); font: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative; overflow: hidden; isolation: isolate;
}
.project-chooser-tile::before {
  content: ""; position: absolute; inset: -25%;
  background-image: var(--tile-glow, none); background-size: cover; background-position: center;
  filter: blur(22px); opacity: var(--tile-glow-strength); z-index: -1;
}
.project-chooser-tile > * { position: relative; }
.project-chooser-tile:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(74, 49, 32, 0.12); }
.project-chooser-tile.active { border-color: var(--accent); border-width: 2px; }
.project-chooser-logo {
  width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 2px solid #b8863b;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.project-chooser-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.project-chooser-fallback { font-family: Bahnschrift, "Segoe UI Semibold", "Segoe UI", sans-serif; font-weight: 600; font-size: 1.5rem; color: #8f6528; }
.project-chooser-name { font-size: 0.9rem; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.project-chooser-active-hint { font-size: 0.72rem; color: var(--muted); margin-top: -0.4rem; }
.project-chooser-new { border-style: dashed; color: var(--muted); }
.project-chooser-new:hover { color: var(--accent); }
.project-chooser-new .project-chooser-logo { background: transparent; border-style: dashed; border-color: var(--border); }
.project-chooser-new .project-chooser-fallback { color: var(--muted); font-size: 1.8rem; }
.welcome-pillars { max-width: 260px; margin: 0 auto 1rem; }
.welcome-pillars img { width: 100%; height: auto; display: block; }
.welcome-intro { font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0 0 0.9rem; line-height: 1.35; }
.welcome-bullets { list-style: none; margin: 0 0 1.1rem; padding: 0; text-align: left; display: inline-block; }
.welcome-bullets li { position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; font-size: 0.8rem; line-height: 1.35; color: #333; }
.welcome-bullets li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: #e0a72e; }
.welcome-divider { border: none; border-top: 1px solid var(--border); max-width: 200px; margin: 0 auto 0.9rem; }

.login-body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); font-family: "Segoe UI", system-ui, Arial, sans-serif; padding: 1.5rem;
}
.login-card {
  max-width: 340px; width: 100%; text-align: center;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(74, 49, 32, 0.2); padding: 2rem 1.75rem;
}
.login-logo { width: 64px; height: 64px; margin: 0 auto 0.75rem; display: block; }
.login-card h1 { margin: 0 0 0.6rem; }
.login-form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; text-align: left; }
.login-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--text); }
.login-form input { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; }
.login-form .btn { margin-top: 0.3rem; }
.login-error { color: var(--danger); font-size: 0.85rem; margin: 0.9rem 0 0; }
.login-success { color: var(--positive); font-size: 0.9rem; margin: 0 0 1rem; }

/* ---------------------------------------------------------------------- */
/* Foerdergeber: Icon/Fallback-Buchstabe, geteilt zwischen der Sidebar auf */
/* der Kalkulationsseite und der Logo-Zeile im Stammdaten-Popup           */
/* ---------------------------------------------------------------------- */

.funder-tile-icon {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.funder-tile-icon img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.funder-tile-fallback { font-size: 2.2rem; font-weight: 700; color: var(--accent); }

.funder-tile-toggle {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 2;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.funder-tile-toggle input { width: 1rem; height: 1rem; margin: 0; cursor: pointer; }

.funder-logo-row { display: flex; align-items: center; gap: 1.25rem; }

/* Stammdaten-Fenster: Logo-Bereich bewusst klein/unauffaellig (im Gegensatz
   zu den Namens-/Adressfeldern nebensaechlich), trotzdem klar vom
   Speichern/Loeschen-Aktionsbereich darunter abgegrenzt. */
.funder-logo-section {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.funder-logo-label { font-size: 0.78rem; margin: 0 0 0.5rem; }
.funder-logo-section .funder-tile-icon { width: 40px; height: 40px; border-radius: 8px; cursor: pointer; }
.funder-logo-section .funder-tile-icon img { padding: 4px; }
.funder-logo-section .funder-tile-fallback { font-size: 1.05rem; }
.funder-actions-row {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}

/* Zugehoerige Dokumente: gleiche Struktur in Foerdergeber- (innerhalb der
   Stammdaten-Karte, .documents-section) und Projekt-Stammdaten (eigene
   Karte, .documents-card) - siehe funder_detail.html/project_detail.html. */
.documents-section {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.documents-card .muted { margin-top: -0.4rem; margin-bottom: 0.75rem; }
.documents-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.documents-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}
.documents-list-item a { overflow-wrap: anywhere; }
.documents-list-item-main { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; min-width: 0; }
.documents-antragsrelevant-toggle {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.8rem; color: var(--muted); white-space: nowrap; cursor: pointer;
}
.documents-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }

/* Dokumentenuebersicht (/documents): projektuebergreifende Tabelle aller
   Foerdergeber-/Projekt-/Positions-Dokumente, siehe documents_overview.html. */
.dropzone {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  border: 2px dashed var(--border); border-radius: 8px; padding: 0.75rem 1rem;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.dragover { border-color: var(--accent); background: rgba(184, 134, 59, 0.08); }
.dropzone-hint { font-size: 0.8rem; }

.doc-overview-table th.sortable { cursor: pointer; user-select: none; }
.doc-overview-table th.sortable:hover { color: var(--text); }
.doc-overview-table .sort-arrow { font-size: 0.7em; margin-left: 0.2em; }
.doc-target-link {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-align: left;
}
.doc-jump-form { display: contents; }
.doc-type-badge {
  display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600;
  padding: 0.15rem 0.55rem; border-radius: 20px;
}
.doc-type-foerdergeber { background: #faece7; color: #712b13; }
.doc-type-projekt { background: #e1f5ee; color: #085041; }
.doc-type-position { background: #eeedfe; color: #3c3489; }
/* Arten auf der Exportuebersicht (siehe routers/exports_overview.py). Bewusst
   in derselben gedaempften Machart wie oben, damit die Tabelle nicht bunt
   wird - die Marke soll die Zeile sortierbar machen, nicht auffallen. */
.doc-type-formular { background: #f6e8d3; color: #7b4d0c; }
.doc-type-kalkulation { background: #e6efdd; color: #3d5a2c; }
.doc-type-bewerbungsmappe { background: #f3e6ef; color: #6b2f5c; }
.doc-type-langbeschreibung { background: #e4eef3; color: #24525f; }
/* Dateilisten (Exportuebersicht). Bewusst OHNE die calc-Klasse der
   Kalkulationstabelle: die arbeitet mit table-layout:fixed und fest
   verdrahteten Spaltenbreiten (24em fuer die erste, 5,5em fuer die naechsten),
   was bei Kostenpositionen passt, bei Dateinamen von sechzig Zeichen aber
   dazu fuehrt, dass der Inhalt in die Nachbarspalten laeuft.
   Hier stattdessen: alle Spalten schrumpfen auf ihren Inhalt (width:1% bei
   automatischem Layout ist der uebliche Weg dafuer), und der Dateiname
   bekommt den ganzen Rest und darf notfalls umbrechen. */
.tabelle-scroll { overflow-x: auto; }
.datei-tabelle { table-layout: auto; width: 100%; min-width: 34rem; }
.datei-tabelle th, .datei-tabelle td { vertical-align: middle; }
.datei-tabelle .spalte-eng { width: 1%; white-space: nowrap; }
.datei-tabelle .spalte-name { overflow-wrap: anywhere; }
.datei-tabelle tbody tr:hover > td { background: #f4e9d0; }
.datei-tabelle thead th { border-bottom: 2px solid var(--border-strong); }

.auswahl-spalte { width: 2.4rem; text-align: center; }
.auswahl-spalte input[type="checkbox"] { width: 1.05rem; height: 1.05rem; cursor: pointer; vertical-align: middle; }
tr.zeile-gewaehlt > td { background: var(--surface-selected, #efe3cd); }

.auswahl-leiste {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 0.55rem 0.8rem; margin-bottom: 0.6rem;
  box-shadow: 0 2px 10px rgba(74, 49, 32, 0.16);
  font-size: 0.9rem; font-weight: 600;
}
.auswahl-leiste[hidden] { display: none; }
.auswahl-leiste span { margin-right: auto; }

.doc-actions { white-space: nowrap; text-align: right; }
.doc-actions .btn-icon { margin-left: 0.25rem; text-decoration: none; }

/* ------------------------------------------------------- Projektinfo-Hero */
.project-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.project-hero .header-logo-shadow-host { margin-bottom: 0; flex-shrink: 0; }
.project-hero-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8f6528;
  font-weight: 700;
  margin: 0 0 0.2rem;
}
.project-hero-text h1 {
  font-family: Bahnschrift, "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0 0 0.2rem;
}

.link-btn {
  font-size: 0.82rem;
  color: #8f6528;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 101, 40, 0.35);
}
.link-btn:hover { border-bottom-color: #8f6528; }
.link-btn.danger { color: var(--danger); border-bottom-color: rgba(197, 48, 48, 0.35); }
.link-btn.danger:hover { border-bottom-color: var(--danger); }
.link-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.project-card .field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.1rem; }
.project-card .field:last-of-type { margin-bottom: 0; }
.project-card .field.title-field input {
  font-family: Bahnschrift, "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}
.project-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.project-actions .spacer { flex: 1; }
.btn-primary { background: #b8863b; border-color: #b8863b; }
.btn-primary:hover { background: #8f6528; }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg); opacity: 1; }

.projektinfo-columns { display: flex; align-items: flex-start; gap: 1.75rem; }
.projektinfo-columns .project-card { flex: 2 1 0; min-width: 0; }
.projektinfo-columns .stammdaten-section { flex: 1 1 0; min-width: 0; margin: 0 0 1.5rem; }

.stammdaten-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stammdaten-head h2 { font-size: 0.92rem; font-weight: 700; margin: 0; color: var(--muted); }
.stammdaten-head .hint { font-size: 0.78rem; color: var(--muted); }
.stammdaten-section p.lead { font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0 0; }
.stammdaten-section .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.1rem; }
.stammdaten-section .field { display: flex; flex-direction: column; gap: 0.35rem; }

.tab-panel { margin-top: 0.5rem; }
/* Beschriftung + Entfernen-Button eines frei per Rechtsklick angelegten Feldes
   (siehe "Verantwortliche Personen" in project_detail.html) - eigene Zeile
   statt wie sonst nur der <span>, da hier zusaetzlich ein Loeschen-Button
   neben den Namen muss. */
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.person-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.1rem; }
.person-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.person-card .field-label-row span { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.person-bild-wrap { position: relative; }
/* Festes Bilderfenster (220x337px) statt variabler Breite/Hoehe - ein Bild mit
   abweichendem Seitenverhaeltnis wird per object-fit:contain unverzerrt
   hineinskaliert statt wie zuvor mit "cover" beschnitten, der Hintergrund der
   Karte fuellt den dabei entstehenden Rand. */
.person-bild { display: block; width: 220px; height: 337px; object-fit: contain; background: var(--bg); border-radius: 6px; }
.person-bild-delete { position: absolute; top: 0.3rem; right: 0.3rem; background: var(--card-bg); }
/* Feste Hoehe statt wie beschreibungField/kurzbeschreibungField automatisch
   mitwachsend (siehe autosizeField in project_detail.html) - laut Vorgabe
   soll der Text hier stattdessen intern scrollen. */
.person-vorstellung-field {
  width: 100%; height: 7rem; resize: vertical; box-sizing: border-box;
  font: inherit; font-size: 0.85rem; padding: 0.4rem 0.5rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text);
}
.person-funktion-field {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.5rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text);
}

/* Logo Antragsteller (siehe antragstellerLogoTrigger in project_detail.html) -
   kleinere Variante des Projekt-Logo-Medaillons (.project-hero-medallion),
   gleiches Rechtsklick-Muster (initLogoContextMenu). */
.antragsteller-logo-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.1rem; }
.antragsteller-logo-medallion {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #b8863b;
  box-shadow: 0 0 0 3px rgba(184, 134, 59, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.antragsteller-logo-medallion:hover {
  box-shadow: 0 0 0 3px rgba(184, 134, 59, 0.28);
  transform: translateY(-1px);
}
.antragsteller-logo-medallion img { width: 100%; height: 100%; object-fit: contain; padding: 6px; pointer-events: none; }
.antragsteller-logo-fallback { font-size: 1.3rem; opacity: 0.6; pointer-events: none; }
.antragsteller-logo-hint { font-size: 0.78rem; line-height: 1.35; }

.project-card .field span,
.project-card .field > label,
.stammdaten-section .field span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.project-title-row { display: flex; align-items: flex-end; gap: 0.75rem; }
.project-title-row .title-field { flex: 1 1 0; min-width: 0; }
.project-title-row .btn { flex-shrink: 0; margin-bottom: 1.1rem; }
#kurzbeschreibungField { resize: none; overflow: hidden; box-sizing: border-box; }
.langbeschreibung-preview {
  display: block; width: 100%; height: 22rem;
  border: 1px solid var(--border); border-radius: 6px; margin-top: 0.3rem;
}
.project-card .field input,
.project-card .field textarea,
.stammdaten-section .field input,
.stammdaten-section .field textarea,
.kurzbeschreibung-window textarea {
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.3rem 0.05rem 0.5rem;
  border-radius: 0;
  background: transparent;
}
.project-card .field input:focus,
.project-card .field textarea:focus,
.stammdaten-section .field input:focus,
.stammdaten-section .field textarea:focus,
.kurzbeschreibung-window textarea:focus {
  outline: none;
  border-bottom-color: #b8863b;
}
.kurzbeschreibung-window {
  position: fixed; top: 6rem; right: 3rem;
  z-index: 95; width: min(420px, calc(100vw - 2rem));
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); padding: 0.85rem 1rem;
}
.kurzbeschreibung-window-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem; cursor: move; user-select: none; margin-bottom: 0.4rem;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.kurzbeschreibung-window-head.dragging { cursor: grabbing; }
.kurzbeschreibung-window-close {
  cursor: pointer; background: none; border: none; color: var(--muted);
  font-size: 1.15rem; line-height: 1; padding: 0 0.15rem;
}
.kurzbeschreibung-window-close:hover { color: var(--text); }
.kurzbeschreibung-window textarea { width: 100%; }
.stammdaten-section .field textarea { resize: vertical; min-height: 2.2rem; }
.field-with-copy { display: flex; align-items: flex-end; gap: 0.4rem; }
.field-with-copy input { flex: 1; min-width: 0; }
.field-copy-btn { flex-shrink: 0; margin-bottom: 0.2rem; }

@media (max-width: 640px) {
  .project-hero { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 860px) {
  .projektinfo-columns { flex-direction: column; }
  .projektinfo-columns .stammdaten-section { margin: 0 0 1.5rem; }
}
.funder-logo-row .funder-tile-icon { flex-shrink: 0; }

/* Auswahl-Leiste: Positionen/Unterpositionen zum Kopieren einer Summe in die
   Zwischenablage anwaehlen und optional als Fördergeber-Kategorie zu
   dokumentieren (siehe positions.html). Checkboxen sind nur sichtbar, wenn
   gerade der Splitscreen eines Online-Fördergebers offen ist (auswahl-mode-
   Klasse an <body>, serverseitig gesetzt) - die schwebende Leiste selbst
   bleibt davon unabhaengig sichtbar, solange eine Auswahl besteht. */
.select-checkbox {
  display: none; flex-shrink: 0;
}
/* Hoehere Spezifitaet als ".table input" (Zeile ~170, setzt width:100% auf
   jedes Eingabefeld in einer .table-Tabelle) noetig, sonst gewinnt die
   allgemeine Regel und die Checkbox blaeht sich auf volle Zellenbreite auf -
   und verdraengt dabei die Bezeichnung fast vollstaendig. */
.bezeichnung-cell .select-checkbox {
  width: 0.9em; height: 0.9em; min-width: 0.9em; margin: 0; padding: 0;
}
.auswahl-mode .select-checkbox { display: inline-block; }
.position-row.is-selected { background: #f2e6c9; }

.auswahl-bar {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 90; width: min(480px, calc(100vw - 2rem));
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); padding: 0.85rem 1rem;
}
.auswahl-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; cursor: move; user-select: none; }
.auswahl-bar-head.dragging { cursor: grabbing; }
.auswahl-bar-head .num { font-weight: 600; }
.auswahl-bar-close {
  cursor: pointer; text-decoration: none; color: var(--muted); font-size: 1.15rem;
  line-height: 1; padding: 0 0.15rem;
}
.auswahl-bar-close:hover { color: var(--text); }
.auswahl-bar-warning {
  margin-top: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 6px;
  background: #fff6e0; color: #8a5a00; font-size: 0.8rem;
}
.auswahl-list { max-height: 30vh; overflow-y: auto; margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.2rem; }
.auswahl-list-item {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;
  padding: 0.15rem 0; border-bottom: 1px solid var(--border);
}
.auswahl-list-item span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auswahl-bar-funder { margin-bottom: 0.4rem; font-size: 0.85rem; }
.auswahl-bar-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

.auswahl-bar-bezeichnung { margin-bottom: 0.6rem; }
.auswahl-bar-bezeichnung input[type="text"] { width: 100%; box-sizing: border-box; }
.auswahl-bar-bezeichnung .muted { display: block; margin-top: 0.2rem; font-size: 0.78rem; }

/* "Neue Unterposition"-Leerzeile: Farbe kommt von der jeweiligen
   .up-depth-N-Klasse (Tiefen-Farbcodierung), nur der Platzhaltertext-Stil
   wird von der bestehenden "Neue Position"-Zeile (.new-row) uebernommen. */
.up-new-row input::placeholder { color: var(--muted); font-style: italic; }

.designer-pane-external {
  font-size: 0.8rem; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.designer-pane-external:hover { color: var(--accent); text-decoration: underline; }