/* Native Browser-Controls im Darkmode korrekt darstellen */
:root { color-scheme: dark; }
input, select, textarea { color-scheme: dark; }


:root{
  --bg: #121416;
  --bg2: #16191c;
  --panel: #16191c;
  --panel2: #14171a;
  --text: #d7dadd;
  --muted: #9aa3ab;
  --line: #2a2f35;
  --hover: #1c2126;
  --focus: #232a31;

  /* Büro-Orange */
  --orange: #D48525;

  /* Semantik-Farben (Status) */
  --danger: #e57373;   /* Löschen / Fehler */
  --ok: #4caf50;       /* Bestätigung / erledigt */
  --warn: #6b4b1b;     /* Warn-Rahmen (.notice.warn) */

  /* Dunkler Text auf farbigen Tint-Flächen (AVA-Kostenträger) – bewusst theme-unabhängig */
  --text-on-tint: #222;

  /* Basis-"Tinte" als RGB-Triplet für Grauabstufungen:
     rgba(var(--ink-rgb), 0.35) usw. – Dark: weiß-basiert, Light: schwarz-basiert */
  --ink-rgb: 255,255,255;

  /* Schrift-Stacks */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Dropdown-Chevron (Select + Suggest-Inputs), theme-abhängig */
  --chevron: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
}

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

  body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  }

  header {
    background: var(--panel2);
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
  }

header { flex: 0 0 auto; }

  header .brand {
    font-weight: 700;
    letter-spacing: 0.02em;
  }

header a{
  color: var(--text);
  text-decoration: none;
  padding: 6px 8px;
  border: 0;
}

header a:hover{
  color: var(--orange);
}

header a.active{ color: var(--orange); }


 main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 14px 14px 18px;
}

  .row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .right { margin-left: auto; }

  .muted { color: var(--muted); }

  /* Inputs / Buttons */
  input[type="text"],
  input[type="date"],
  textarea {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 0;
    outline: none;
  }

input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator{
  cursor: pointer;
  opacity: .75;
}

/* Einheitliche Typografie für ALLE Formfelder */
.input,
input.input,
textarea.input,
select.input,
input[type="text"].input,
input[type="date"].input {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: normal;
}

input[type="date"] {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.keep-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
}


  input[type="text"]:focus,
  input[type="date"]:focus,
  textarea:focus {
    border-color: var(--orange);
  }

  button {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line);
    padding: 8px 10px;
    border-radius: 0;
    cursor: pointer;
  }

  button:hover {
    border-color: var(--orange);
    color: var(--orange);
  }

  button:disabled {
    opacity: .45;
    cursor: not-allowed;
  }

  /* Primär-Button (oranger Haupt-Button) – zentrale Klasse statt Inline-Styles */
  .btn-primary,
  button.btn-primary {
    background: var(--orange);
    border: 1px solid var(--orange);
    color: #000;
    font-weight: 700;
  }
  .btn-primary:hover,
  button.btn-primary:hover {
    background: var(--orange);
    color: #000;
    opacity: .9;
  }

  /* Löschen-/Papierkorb-Link – zentrale Klasse statt Inline-Styles + onmouseover */
  .link-danger {
    color: var(--danger);
    text-decoration: none;
    cursor: pointer;
  }
  .link-danger:hover {
    text-decoration: underline;
  }

  /* Kontextmenü-Einträge (Papierkorb-Bäume etc.) – zentrale Klasse statt JS-Inline-Styles */
  button.ctx-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 14px;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
  }
  button.ctx-item:hover { background: var(--hover); color: inherit; border: none; }
  button.ctx-item.danger { color: var(--danger); }
  button.ctx-item.accent { color: var(--orange); }

  /* Layout split */
/* Layout split + draggable Splitter */
.split{
  height: 100%;
  min-height: 0;
  display: grid;

  /* 3 Zeilen: oben | splitter | unten */
  grid-template-rows: var(--pm-split-top, 1fr) var(--pm-splitter-h, 12px) 1fr;

  gap: 0; /* gap wird durch den Splitter ersetzt */
}

.pm-splitter{
  position: relative;
  cursor: row-resize;
  touch-action: none;           /* wichtig für Mobile-Drag */
  background: transparent;
}

.pm-splitter::before{
  content:"";
  position:absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--line);
  transform: translateY(-50%);
}

/* etwas "griffiger" beim Hover */
.pm-splitter:hover::before{
  background: var(--orange);
}

/* während Drag */
.split.is-resizing .pm-splitter::before{
  background: var(--orange);
}

  .pane {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    min-height: 0;
  }

.filters select.input{
  max-width: 420px;
  flex: 1 1 320px;
  width: 100%;
}

  .pane-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--panel2);
    min-height: 44px;
  }

  .pane-body {
    overflow: auto;
    min-height: 0;
  }

#detailWrap{
  height: 100%;
  min-height: 0;
  overflow: auto;          /* ✅ default: alle Tabs scrollbar */
}

/* ✅ nur Fotos: nicht scrollen */
#detailWrap.no-scroll{
  overflow: hidden;
}

/* Pane soll den verfügbaren Platz in <main> vollständig nutzen */
.pp-fill{
  height: 100%;
  min-height: 0;   /* wichtig, damit overflow:auto in Kindern wirkt */
}
.pp-fill .pane-body{
  min-height: 0;
}


  /* Table */
  .table { width: 100%; border-collapse: collapse; }
  .table th, .table td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }

.table th {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}


  tr.clickrow { cursor: pointer; }
  tr.clickrow:hover { background: var(--hover); }
  tr.clickrow.is-active { background: var(--focus); outline: 1px solid var(--orange); outline-offset: -1px; }

  /* Sprung-Pfeil zwischen AVA-Modulen (KP/VG -> LV/Rechnung und zurueck).
     Default: graue Linienzeichnung. Hover: orange deckend. */
  .pm-arrow-jump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    color: transparent;
    -webkit-text-stroke: 1px var(--muted);
            text-stroke: 1px var(--muted);
    transition: color 0.12s, -webkit-text-stroke-color 0.12s;
  }
  .pm-arrow-jump:hover,
  .pm-arrow-jump:focus-visible {
    color: var(--orange);
    -webkit-text-stroke: 1px var(--orange);
            text-stroke: 1px var(--orange);
    outline: none;
  }
  .pm-arrow-jump.is-back { transform: scaleX(-1); }

  /* Form grid responsive */
  .form-frame { padding: 12px; }

  .form-grid {
    display: grid;
    grid-template-columns: 1fr; /* mobile default */
    gap: 10px 12px;
  }

  .field label {
    display:block;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 6px;
  }

  .field textarea { resize: vertical; }

  .field.span2 { grid-column: span 1; } /* wird in Breakpoints überschrieben */
  .field.checkbox label {
    display:flex;
    align-items:center;
    gap: 8px;
    margin-top: 18px;
  }

#pmPopupHost{
  display: none;
  position: fixed;
  right: 56px;
  top: 54px;
  z-index: 999999;
  width: 270px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
#pmPopupHost.open{ display: block; }


  .notice {
    border: 1px solid var(--line);
    background: var(--panel2);
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 0;
  }
  .notice.warn { border-color: var(--warn); }
  .notice.ok { border-color: var(--ok); }
  .notice.ok strong { color: var(--orange); }



/* File-Input (Durchsuchen) im gleichen Look wie andere Felder */
input[type="file"].input{
  border-radius: 0 !important;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  height: 36px;
  line-height: 36px;
  padding: 0;
}

/* Button-Teil im File-Input */
input[type="file"].input::file-selector-button{
  height: 36px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  margin: 0 10px 0 0;
  border-radius: 0;
  cursor: pointer;
}
input[type="file"].input::file-selector-button:hover{
  color: var(--orange);
}


  /* Form: 2 Spalten ab 600px */
  @media (min-width: 600px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .field.span2 { grid-column: span 2; }
  }

  /* Form: 3 Spalten ab 1100px */
  @media (min-width: 1100px) {
    .form-grid { grid-template-columns: 1fr 1fr 1fr; }
    .field.span2 { grid-column: span 3; }
  }

  /* Form: 4 Spalten ab 1500px */
  @media (min-width: 1500px) {
    .form-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .field.span2 { grid-column: span 4; }
  }

  /* Mobile table cards: Felder untereinander */
  .table-cards { display: none; padding: 6px; }
  .cardrow {
    border-bottom: 1px solid var(--line);
    padding: 10px 8px;
    cursor: pointer;
  }
  .cardrow:hover { background: var(--hover); }
  .cardrow.is-active { background: var(--focus); outline: 1px solid var(--orange); outline-offset: -1px; }
  .cardrow .title { font-weight: 700; }
  .cardrow .line { color: var(--muted); margin-top: 3px; }

/* gleiche Markierung wie Tabellenzeile – jetzt auch für Cards */
.cardrow.is-selected{
  background: rgba(255,255,255,.06);
  outline: 1px solid var(--orange);
  outline-offset: -1px;
}

/* Cards: gleiche Markierung wie Tabelle (JS setzt is-active) */
.cardrow.is-active{
  background: var(--focus);
  outline: 1px solid var(--orange);
  outline-offset: -1px;
}

@media (max-width: 720px) {
  /* Standard: Tables werden zu Cards */
  .table:not(.keep-table) { display: none; }
  .table-cards { display: block; }
  input[type="text"]{ min-width: 0; }
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand-sep{ display:inline-flex; align-items:center; height:22px; }
.sep-i{ line-height: 1; }
.brand-icon{
  width: 22px;
  height: 22px;
  filter: none !important;
}

.sep-i{
  display:inline-block;
  font-size: 18px;     /* das ist der sichtbare Hebel */
  line-height: 22px;
  height: 22px;
  color: var(--orange);
  font-weight: 600;
  vertical-align: middle;
}

.sep-i{ vertical-align: middle; }

/* Weißes Icon in Orange “umfärben” (funktioniert gut bei weiß/transparent) */
.brand-icon {
  filter: brightness(0) saturate(100%) invert(55%) sepia(86%) saturate(1840%) hue-rotate(352deg) brightness(100%) contrast(104%);
}

.icon-btn{
  width: 36px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text);
}

.icon-btn:hover{
  color: var(--orange);
}

.icon-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.icon-btn.danger:hover{
  color: var(--orange);
}

.icon-btn svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}



/* Immer: Dropdown-Navigation (Hamburger) */
header { position: relative; }

.nav { display: none; }                 /* nie als Leiste anzeigen */
.nav-toggle { display: inline-flex; }   /* immer zeigen */

.top-actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Offenes Menü: Header-Ebene über Seiten-Popover (kp-popover/dash-popover z-2000)
   und alle Sticky-Tabellenköpfe anheben – sonst verschwindet das Dropdown dahinter.
   Modals/Toasts (z-index 9999+) bleiben bewusst darüber. */
header.topbar:has(.nav.open){
  z-index: 2500;
}

/* Dropdown */
/* Dropdown (scrollbar, wenn zu lang) */
.nav.open{
  display: grid;
  position: absolute;
  right: 14px;
  top: 54px;
  background: var(--panel2);
  padding: 8px;
  gap: 6px;
  z-index: 50;
  min-width: 180px;

  /* NEU */
  max-height: calc(100dvh - 54px - 12px); /* viewport minus Abstand nach oben/unten */
  overflow: auto;
  overscroll-behavior: contain;
}

.nav.open a{
  display: block;
  padding: 8px 10px;
  border: 0;
  color: var(--text);
}
.nav.open a:hover{ color: var(--orange); }


/* Custom checkbox (anthrazit, orange when checked) */
input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  background: var(--panel);      /* anthrazit */
  display: inline-grid;
  place-content: center;
  margin: 0;
}

input[type="checkbox"]::before{
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .08s ease-in-out;
  background: var(--line);
}

input[type="checkbox"]:checked::before{
  transform: scale(1);
}

input[type="checkbox"]:focus{
  outline: 1px solid var(--orange);
  outline-offset: 2px;
}

.tabs{
  display:flex;
  gap:18px;
  align-items:center;
}

.tab{
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 4px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
}

/* Zahlen / Geld / Tage rechtsbündig */
td.right,
th.right,
.num,
.field.right {
  text-align: right;
  white-space: nowrap;
}

.tab:hover{
  color: var(--orange);
}

.tab.is-active{
  color: var(--orange);
  font-weight: 500;
}


.filters{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  width: 100%;
}

.filters input[type="text"]{
  max-width: 420px;
  flex: 1 1 320px;
}

.filters label{
  margin: 0;
  white-space: nowrap;
}

/* Selects im Darkmode sauber stylen */
select.input{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.2;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Pfeil rechts: zentral über das Chevron-Token (siehe "Dropdown-Hinweis"-Block weiter unten) */

select.input:focus{
  outline: none;
  border-color: var(--orange);
}

/* Die Dropdown-Liste selbst ist je nach Browser eingeschränkt stylbar,
   aber das hilft oft trotzdem */
select.input option{
  background: var(--panel);
  color: var(--text);
}




/* =========================
   FIXE TOPBAR
   ========================= */
.topbar {
  position: sticky;   /* wichtig: NICHT fixed */
  top: 0;
  z-index: 1000;

  background: var(--bg);          /* Anthrazit */
  border-bottom: 1px solid var(--line);
}

.table th{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.table td{
  vertical-align: top;
}
.table .col-small{ width: 56px; }
.table .col-medium{ width: 160px; }
.table textarea.input{ resize: vertical; min-height: 32px; }

.input, select.input, textarea.input {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 0;
}

input:focus-visible{
  outline: none !important;
}

/* Noten-Spalten: ausgewählten Wert im geschlossenen Select sichtbar machen */
td.col-small select.input {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important; /* Edge/Chrome */
  text-align: center;
  text-align-last: center;
  font-variant-numeric: tabular-nums;
  background: var(--panel);
}

.table td.col-small select.input{
  padding-left: 6px;
  padding-right: 18px; /* Pfeil bleibt, aber weniger Platzverlust */
  min-width: 44px;
}

/* Einheitliche Feldhöhe für Inputs & Selects */
.input,
.input[type="text"],
select.input,
textarea.input {
  height: 36px;
  line-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

/* Kompakte Selects (z. B. Projekt-Status) */
select.input--compact{
  width: auto;
  min-width: 60px;
  max-width: 120px;
  padding-left: 6px;
  padding-right: 18px; /* Platz für Pfeil */
  text-align: left;
  text-align-last: left;
  font-size: 12px;
}

/* Höhenabgleich Select ↔ Input */
select.input--compact{
  height: 32px;              /* exakt wie input */
  line-height: 18px;         /* verhindert Extra-Höhe */
  padding-top: 0;
  padding-bottom: 0;
}

/* Sticky Header für alle Tabellen in Scroll-Containern */
.table-wrap, #tableWrap, .table-scroll {
  overflow: auto;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg2); /* Kopfzeile leicht abgesetzt */
}

/* Projekte-Grid: Spaltenbreiten steuern */
/* =========================
   Projekte: Layout (Desktop)
   ========================= */
#projectsGrid .table{
  table-layout: fixed;
  width: 100%;
}

#projectsGrid .table th,
#projectsGrid .table td{
  min-width: 0;                 /* wichtig gegen Überlappung */
}



#projectsGrid .table .col-small{
  width: 56px;                  /* Noten + Trash fix */
}

/* flexible Spalten: Projekt + Beurteilung teilen sich Rest */
#projectsGrid .table th:nth-child(1),
#projectsGrid .table td:nth-child(1){
  width: 22%;
}

#projectsGrid .table th:nth-child(10),
#projectsGrid .table td:nth-child(10){
  width: 34%;
}

/* Inputs füllen die Zelle sauber aus */
#projectsGrid .table select.input,
#projectsGrid .table input.input,
#projectsGrid .table textarea.input{
  width: 100%;
  box-sizing: border-box;
}

input[data-money="1"]{
  text-align: right;
}

/* ===== Projekte > Beteiligte: Spaltenbreiten per colgroup ===== */
/* ===== pm-adressen: Tabelle soll bis 900px sinnvoll mitschrumpfen ===== */
#projectsGrid.pm-adressen .projects-table{ table-layout: fixed; width: 100%; }

#projectsGrid.pm-adressen .projects-table col.col-small { width: 56px; }   /* # / Toggle / Trash */
#projectsGrid.pm-adressen .projects-table col.col-gewerk { width: 12%; }  /* schrumpfbar */
#projectsGrid.pm-adressen .projects-table col.col-project { width: 34%; } /* Firma (größter Anteil) */
#projectsGrid.pm-adressen .projects-table col.col-prot { width: 56px; }   /* falls vorhanden */
#projectsGrid.pm-adressen .projects-table col.col-date { width: 12%; }    /* Auftrag/Abnahme/Gewährl. */
#projectsGrid.pm-adressen .projects-table col.col-vob  { width: 18%; }    /* VOB/BGB */
#projectsGrid.pm-adressen .projects-table col.col-trash { width: 56px; }

/* Mindestbreiten der Inhalte, damit Felder nicht "unbenutzbar" werden */
#projectsGrid.pm-adressen td:nth-child(3) .input{ min-width: 110px; } /* Gewerk */
#projectsGrid.pm-adressen td:nth-child(4) .input{ min-width: 220px; } /* Firma */
#projectsGrid.pm-adressen td:nth-child(6) .input{ min-width: 80px; } /* Auftrag (date) */
#projectsGrid.pm-adressen td:nth-child(7) .input{ min-width: 80px; } /* VOB/BGB */
#projectsGrid.pm-adressen td:nth-child(8) .input{ min-width: 80px; } /* Abnahme (date) */
#projectsGrid.pm-adressen td:nth-child(9) .input{ min-width: 80px; } /* Gewährl. (date) */

/* ===== pm-adressen: Inputs schrumpfen wirklich mit der Spalte ===== */
#projectsGrid.pm-adressen .projects-table td{
  min-width: 0;          /* wichtig */
  overflow: hidden;      /* verhindert abgeschnittene Rahmen im viewport */
}

#projectsGrid.pm-adressen .projects-table td .input,
#projectsGrid.pm-adressen .projects-table td select.input,
#projectsGrid.pm-adressen .projects-table td input.input,
#projectsGrid.pm-adressen .projects-table td textarea.input{
  width: 100%;
  min-width: 0 !important;     /* killt min-width Overrides */
  box-sizing: border-box;
}

#projectsGrid.pm-adressen .projects-table td .input{
  padding-left: 8px;
  padding-right: 8px;
}

/* ===== pm-adressen: Add-Row genauso breit wie addresses_projekte_grid ===== */
#projectsGrid.pm-adressen tr.add-row td:first-child{
  padding-left: 10px;
  padding-right: 10px;
}

/* Date: Platz fürs Icon + Icon an den rechten Rand */
input[type="date"].date-input{
  padding-right: 2px !important;
}

input[type="date"].date-input::-webkit-calendar-picker-indicator{
  margin: 0 !important;
  padding: 0 10px 0 0 !important;  /* Klickfläche rechts */
  opacity: .75;
  cursor: pointer;
  transform: none !important;
}

#projectsGrid.pm-vorkommnis td.vork-cell textarea.input{
  line-height: 1.0;
  padding: 4px 6px;
}


/* Select gleiche Höhe wie Input */
select.input,
select.input.input--compact{
  height: var(--input-h, 36px);
  line-height: var(--input-h, 36px);
  padding-top: 0;
  padding-bottom: 0;
}


#projectsGrid.pm-adressen tr.add-row select.input{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#projectsGrid.pm-adressen tr.add-row td{
  border-bottom: 0;
}
#projectsGrid.pm-adressen tr.add-row select.input{
  height: 40px;
  padding: 10px 12px;
}

input.money { text-align: right; }

/* =========================
   Projekte: Card Mode (Mobile)
   ========================= */
#projectsGrid .projects-cards{ display: none; padding: 6px; }

/* Card-Switch: unter 900px Cards anzeigen (gilt für addresses_projekte_grid + projekte_adressen) */
#projectsGrid .projects-table-wrap{ display: block; }

/* ===== pm-maengel: Card-Switch erzwingen ===== */
@media (max-width: 900px){
  #projectsGrid.pm-maengel .projects-table-wrap{ display: none !important; }
  #projectsGrid.pm-maengel .projects-cards{ display: block !important; }
}
@media (min-width: 901px){
  #projectsGrid.pm-maengel .projects-table-wrap{ display: block !important; }
  #projectsGrid.pm-maengel .projects-cards{ display: none !important; }
}



/* Projekte: Card-Layout (schmale Screens) */
@media (max-width: 900px) {

  /* Kopfzeile weg */
  #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) table thead { display: none; }

  /* jede Tabellenzeile wird eine "Card" als 2-Spalten-Grid */
  #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr; /* immer 2 nebeneinander */
    gap: 10px 12px;
    position: relative;
    padding: 12px 52px 12px 12px; /* rechts Platz für Trash */
    border-bottom: 1px solid var(--border);
  }

  /* Standard-td */
  #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) table tbody td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  /* Projekt + Gewerk + Beurteilung über volle Breite */
 #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.project-cell,
 #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.gewerk-cell,
  #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.beurteilung-cell {
    grid-column: 1 / -1;
  }

  /* Projekt-Select etwas schmaler, weil Trash rechts sitzt */
  #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.project-cell .input {
    width: 100%;
  }

  /* Gewerk: volle Breite (keine feste Breite im Card-Mode) */
  #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.gewerk-cell .input {
    width: 100%;
  }

  /* Ratings: Label links, Feld rechts; zwei pro Zeile durch Grid */
  #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.rating-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
 #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.rating-cell::before {
    content: attr(data-label) ":";
    color: var(--muted);
    white-space: nowrap;
  }
  #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.rating-cell select.input {
    width: 90px;          /* fixe Feldbreite */
    flex: 0 0 auto;
    text-align: center;
  }

  /* Beurteilung größer */
 #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.beurteilung-cell textarea.input {
    height: 80px;
    line-height: 1.2;
    resize: vertical; /* optional */
  }

#projectsGrid.pm-aenderungen tr.clickrow.is-active{
  background: var(--focus);
  outline: 1px solid var(--orange);
  outline-offset: -1px;
}

  /* Trash oben rechts */
  #projectsGrid:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel):not(.pm-pdfc) td.trash-cell {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
    padding: 0;
  }
}

/* Helper: gezielt Desktop/Mobile ein- und ausblenden */
@media (max-width: 900px){
  .hide-on-mobile{ display: none !important; }
  .show-on-mobile{ display: block !important; }
}
@media (min-width: 901px){
  .hide-on-desktop{ display: none !important; }
  .show-on-desktop{ display: block !important; }
}

/* ===== Änderungen: Cards mit umrandeten Feldern ===== */
#projectsGrid.pm-aenderungen .projects-cards .cardrow{
  border-bottom: 1px solid var(--line);
  padding: 12px;
}

#projectsGrid.pm-aenderungen .projects-cards .field{
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 8px 10px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* rechte Spalten */
}

/* Textfelder (Nr./Änderung/Status) links lassen */
#projectsGrid.pm-aenderungen .projects-cards .field.left{
  justify-content: flex-start;
}

/* Wenn du bei Änderung kein rechtsbündig willst */
#projectsGrid.pm-aenderungen .projects-cards .change .field{
  justify-content: flex-start;
}

/* Card-Switch: unter 900px Cards anzeigen (gilt für addresses_projekte_grid + projekte_adressen etc.) */
#projectsGrid .projects-table-wrap{ display: block; }

@media (max-width: 900px){
  #projectsGrid .projects-table-wrap{ display: none; }
  #projectsGrid .projects-cards{ display: block; }
}

@media (min-width: 901px){
  #projectsGrid .projects-table-wrap{ display: block; }
  #projectsGrid .projects-cards{ display: none; }
}


/* ===== Projekte > Beteiligte: Date-Placeholder ausblenden (nur wenn leer) ===== */
/* ===== Date-Placeholder ausblenden (nur wenn leer) ===== */
#projectsGrid.pm-adressen   input[type="date"].pm-date-empty,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty,
#detailWrap.pm-maengel      input[type="date"].pm-date-empty{
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#projectsGrid.pm-adressen   input[type="date"].pm-date-empty::-webkit-datetime-edit,
#projectsGrid.pm-adressen   input[type="date"].pm-date-empty::-webkit-datetime-edit-text,
#projectsGrid.pm-adressen   input[type="date"].pm-date-empty::-webkit-datetime-edit-month-field,
#projectsGrid.pm-adressen   input[type="date"].pm-date-empty::-webkit-datetime-edit-day-field,
#projectsGrid.pm-adressen   input[type="date"].pm-date-empty::-webkit-datetime-edit-year-field,

#projectsGrid.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit-text,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit-month-field,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit-day-field,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit-year-field,

#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty::-webkit-datetime-edit,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty::-webkit-datetime-edit-text,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty::-webkit-datetime-edit-month-field,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty::-webkit-datetime-edit-day-field,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty::-webkit-datetime-edit-year-field,

#detailWrap.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit,
#detailWrap.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit-text,
#detailWrap.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit-month-field,
#detailWrap.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit-day-field,
#detailWrap.pm-maengel    input[type="date"].pm-date-empty::-webkit-datetime-edit-year-field{
  color: transparent;
  -webkit-text-fill-color: transparent;
}

#projectsGrid.pm-adressen   input[type="date"].pm-date-empty:focus,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty:focus,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty:focus,
#detailWrap.pm-maengel      input[type="date"].pm-date-empty:focus{
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

#projectsGrid.pm-adressen   input[type="date"].pm-date-empty:focus::-webkit-datetime-edit,
#projectsGrid.pm-adressen   input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-text,
#projectsGrid.pm-adressen   input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-month-field,
#projectsGrid.pm-adressen   input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-day-field,
#projectsGrid.pm-adressen   input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-year-field,

#projectsGrid.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-text,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-month-field,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-day-field,
#projectsGrid.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-year-field,

#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty:focus::-webkit-datetime-edit,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-text,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-month-field,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-day-field,
#projectsGrid.pm-vorkommnis input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-year-field,

#detailWrap.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit,
#detailWrap.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-text,
#detailWrap.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-month-field,
#detailWrap.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-day-field,
#detailWrap.pm-maengel    input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-year-field{
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}

/* ===== Projekte > Beteiligte: Linien-Logik ===== */
#projectsGrid.pm-adressen .row-ratings.hidden { display:none !important; }
#projectsGrid.pm-adressen .row-main td { border-bottom: 1px solid var(--line); }
#projectsGrid.pm-adressen .row-main.open td { border-bottom: 0 !important; }
#projectsGrid.pm-adressen .row-ratings td { border-top: 0 !important; border-bottom: 1px solid var(--line); }

/* Desktop: Detailzeile = 7 Noten + rechts Beurteilung */
#projectsGrid.pm-adressen .row2-grid{
  display: grid;
  grid-template-columns: repeat(7, 64px) 1fr;
  gap: 0.6rem 0.8rem;
  padding: 0.35rem 0 0.65rem;
  align-items: end;
}

#projectsGrid.pm-adressen .row2-grid .lbl{
  font-size: 0.9em;
  opacity: 0.85;
  margin-bottom: 0.25rem;
  white-space: nowrap;
}
#projectsGrid.pm-adressen .row2-grid .beurteilung textarea{
  width:100%;
  resize: vertical;
}

/* Toggle Button */
#projectsGrid.pm-adressen .rating-toggle{
  background:none; border:0; cursor:pointer;
  padding:0.15rem 0.25rem;
  display:inline-flex; align-items:center;
  font: inherit;
}

/* Default: geschlossen = nach unten */
#projectsGrid.pm-adressen .rating-toggle .chev{
  font-size: 1.0em;
  line-height: 1;
  display: inline-block;
}


/* --- Projekte: stabile Tabelle, kein Überlappen --- */
#projectsGrid .projects-table {
  width: 100%;
  table-layout: fixed;
}

#projectsGrid .projects-table th,
#projectsGrid .projects-table td {
  overflow: hidden;
  vertical-align: middle;
}

/* Inputs in Tabellenzellen dürfen schrumpfen */
#projectsGrid .projects-table .input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Spaltenbreiten (Desktop) */
#projectsGrid:not(.pm-adressen) .projects-table col.col-gewerk { width: 180px; }
#projectsGrid:not(.pm-adressen) .projects-table-wrap { display: block; }
#projectsGrid .projects-table col.col-rate   { width: 64px; }   /* Q..R */
#projectsGrid .projects-table col.col-trash  { width: 56px; }
#projectsGrid .projects-table col.col-project{ width: 28%; }    /* ca. 30% */
#projectsGrid .projects-table col.col-beurt  { width: auto; }   /* Rest -> Beurteilung */



/* =========================
   Projekte: Cards Layout
   ========================= */
#projectsGrid .projects-cards .cardrow{
  border-bottom: 1px solid var(--line);
  padding: 12px;
  background: transparent;
}

/* ===== Mängel (pm-maengel): Cards-Typo wie "Adressen" (einheitlich dünn/grau) ===== */
#projectsGrid.pm-maengel .projects-cards .cardrow,
#projectsGrid.pm-maengel .projects-cards .cardrow *{
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
}

/* alles grundsätzlich "muted" */
#projectsGrid.pm-maengel .projects-cards .cardrow{
  color: var(--muted);
}

/* keine fette "title" bei Mängeln */
#projectsGrid.pm-maengel .projects-cards .cardrow .title{
  font-weight: 400;
  color: var(--muted);
}

/* Typ/Gewerk/Datumzeile bleibt muted */
#projectsGrid.pm-maengel .projects-cards .cardrow .muted{
  color: var(--muted);
  opacity: 1;
}

body[data-page="dashboard"] main {
  overflow: auto;
}


/* Active-Highlight für Cards – muss nach dem transparent-Block kommen */
#projectsGrid .projects-cards .cardrow.is-active{
  background: var(--focus);
}

/* Mängel: Sekundär-Highlight (wenn ein Bauteil mehrere Mängel hat) */
#projectsGrid .projects-table tr.clickrow.is-secondary{
  outline: 1px solid rgba(255, 140, 0, 0.55);
  outline-offset: -2px;
}

#projectsGrid .projects-cards .cardrow.is-secondary{
  outline: 1px solid rgba(255, 140, 0, 0.55);
  outline-offset: -2px;
}

/* Änderungen: im aktiven Datensatz Feldflächen transparent, damit Card-Grau sichtbar wird */
#projectsGrid.pm-aenderungen .projects-cards .cardrow.is-active .field{
  background: transparent;
}

#projectsGrid.pm-aenderungen .projects-cards .field{
  background: var(--panel);
}


#projectsGrid .projects-cards .card-head{
  display: flex;
  gap: 10px;
  align-items: flex-end; /* Trash sitzt optisch auf gleicher Höhe wie Select */
}

#projectsGrid .projects-cards .project-field{
  flex: 1 1 auto; /* Projekt wird schmaler, wenn Trash da ist */
  min-width: 0;
}

#projectsGrid .projects-cards .card-trash{
  flex: 0 0 auto;
  align-self: flex-end;
}

#projectsGrid .projects-cards .gewerk-field .input{
  width: 100%;
  min-width: 0;
}

/* Ratings: 2 pro Zeile */
#projectsGrid .projects-cards .ratings-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-top: 8px;
}

#projectsGrid .projects-cards .ratepair{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#projectsGrid .projects-cards .ratepair .label{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

#projectsGrid .projects-cards .ratepair select.input{
  width: 90px;
  flex: 0 0 auto;
  text-align: center;
}

/* Beurteilung: höher */
#projectsGrid .projects-cards .beurteilung-field textarea.input{
  height: 80px;
  line-height: 1.2;
  padding: 8px 10px;
  resize: vertical;
}

.ext-wrap{
  height: calc(100vh - var(--header-h, 56px) - var(--main-pad, 28px));
}

.ext-frame{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
}


/* optional: ab sehr schmal noch einspaltig */
@media (max-width: 520px){
  #projectsGrid .ratings-grid{
    grid-template-columns: 1fr;
  }
  #projectsGrid .fieldrow{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Projekte > Beteiligte (pm-adressen): Cards unter 900px
   Struktur:
   Z1: Reihenfolge | Gewerk | Protokoll | Trash
   Z2: Firma
   Z3: Auftrag | VOB/BGB | Abnahme | Gewährleistung
   Z4: Benotungen (horizontal scroll)
   Z5: Beurteilung
   ========================= */
@media (max-width: 900px){

  #projectsGrid.pm-adressen .pm-adressen-card{
    border-bottom: 1px solid var(--line);
    padding: 12px;
  }

  #projectsGrid.pm-adressen .pm-card-row{ margin-top: 12px; }
  #projectsGrid.pm-adressen .pm-card-row:first-child{ margin-top: 0; }

  #projectsGrid.pm-adressen .pm-lbl{
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
    white-space: nowrap;
  }

 /* ===== pm-adressen Cards: Zeile 1 sauber ausrichten ===== */
/* ===== pm-adressen Cards: Zeile 1 sauber ausrichten ===== */
/* wichtig: einmal mit UND einmal ohne .projects-cards, damit es immer greift */
#projectsGrid.pm-adressen .projects-cards #projectsGrid.pm-vorkommnis .pm-card-row1{
  display: grid;
  grid-template-columns: 1fr 1fr 44px;   /* Nr | Erfasst | Delete */
  gap: 0 12px !important;
  column-gap: 12px !important;
  row-gap: 0;
  align-items: end;
}

#projectsGrid.pm-adressen .pm-card-row1{
  display: grid;
  grid-template-columns: 76px 1fr 86px 44px;  /* (unverändert für pm-adressen) */
  gap: 0 12px !important;
  column-gap: 12px !important;
  row-gap: 0;
  align-items: center;
}

/* alle Zellen in Row1 als Mini-Grid: Label oben, Feld darunter */
#projectsGrid.pm-adressen .projects-cards .pm-card-row1 .pm-cell,
#projectsGrid.pm-adressen .pm-card-row1 .pm-cell{
  display: grid;
  grid-template-rows: 18px 36px;
  align-items: center;
  min-width: 0;
}

/* Labels in Row1 exakt auf gleicher Grundlinie */
#projectsGrid.pm-adressen .projects-cards .pm-card-row1 .pm-lbl,
#projectsGrid.pm-adressen .pm-card-row1 .pm-lbl{
  margin: 0 0 6px 0;
  line-height: 18px;
}

/* Inputs dürfen nicht „über die Spalte hinaus“ drücken */
#projectsGrid.pm-adressen .projects-cards .pm-card-row1 input.input,
#projectsGrid.pm-adressen .projects-cards .pm-card-row1 select.input,
#projectsGrid.pm-adressen .pm-card-row1 input.input,
#projectsGrid.pm-adressen .pm-card-row1 select.input{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Prot: Checkbox mittig im Feldbereich */
#projectsGrid.pm-adressen .projects-cards .pm-card-row1 .pm-prot,
#projectsGrid.pm-adressen .pm-card-row1 .pm-prot{
  justify-items: center;
}
#projectsGrid.pm-adressen .projects-cards .pm-card-row1 .pm-prot input[type="checkbox"],
#projectsGrid.pm-adressen .pm-card-row1 .pm-prot input[type="checkbox"]{
  align-self: center;
}

/* Trash: ohne Label-Zeile, mittig zur Feldzeile */
#projectsGrid.pm-adressen .projects-cards .pm-card-row1 .pm-trash,
#projectsGrid.pm-adressen .pm-card-row1 .pm-trash{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 54px;
}


  /* Zeile 3 */
 #projectsGrid.pm-adressen .pm-card-row3{
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px 12px;
    align-items: end;
  }

  /* Zeile 4: Benotungen horizontal */
 #projectsGrid.pm-adressen .pm-card-row4{
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 10px 12px;
  align-items: end;
}

/* ===== pm-adressen: Beurteilung in Cards sauber untereinander ===== */
#projectsGrid.pm-adressen .pm-card-row5{
  display: block;                 /* kein Grid / kein Flex */
}

#projectsGrid.pm-adressen .pm-card-row5 .pm-lbl{
  display: block;
  font-size: 12px;                /* wie andere Labels */
  margin-bottom: 6px;
}

#projectsGrid.pm-adressen .pm-card-row5 textarea.input{
  width: 100%;
  height: 60px;                   /* gewünschte Höhe */
  min-height: 60px;
  line-height: 1.3;
  resize: vertical;               /* optional, aber sinnvoll */
  box-sizing: border-box;
}


}

/* ===== pm-adressen: schmale Bewertungs-Selects (Tabelle + Cards) ===== */

/* Desktop: aufgeklappte Detailzeile (row2-grid) */
#projectsGrid.pm-adressen .row2-grid .rate select.input{
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding-left: 4px;
  padding-right: 18px; /* Dropdown-Icon */
  text-align: center;
  text-align-last: center;
}

/* Mobile Cards: alle Bewertungsfelder */
#projectsGrid.pm-adressen .pm-rate select.input{
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding-left: 4px;
  padding-right: 18px;
  text-align: center;
  text-align-last: center;
}

#projectsGrid.pm-adressen .pm-rate .pm-lbl{
  font-size: 11px;
  margin-bottom: 4px;
  white-space: nowrap;
}


/* Projekte: Header-Zeile (Projekte/Gewerk/Q/...) sticky */
#projectsGrid thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: var(--bg2) !important;
  box-shadow: 0 1px 0 var(--border);
}

/* Wichtig: sticky wirkt nur sauber, wenn dieser Bereich selbst scrollt */
#projectsGrid{
  overflow: auto !important;
  max-height: 100% !important;
  position: relative;
}

@media (max-width: 720px) {
  #gewerkeGrid .table { table-layout: fixed; width: 100%; }
  #gewerkeGrid td:first-child { width: auto; }       /* Dropdown-Spalte */
  #gewerkeGrid td:last-child  { width: 52px; }       /* Müll: 36px Button + 2x8px Zellen-Padding */
  #gewerkeGrid select.input { min-width: 0; }        /* darf schrumpfen */
  #gewerkeGrid td { padding-left: 8px; padding-right: 8px; }
}


/* Fokus-Highlight überall (auch input[list] + textarea) */
.input:focus,
.input:focus-visible,
.table .input:focus,
.table .input:focus-visible,
input.input[list]:focus,
input.input[list]:focus-visible,
textarea.input:focus,
textarea.input:focus-visible{
  outline: none !important;
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}

/* Beurteilungs-Textarea: mehr Text sichtbar */
/* Nur Desktop-Tabelle: kompaktere Beurteilung */
#projectsGrid .projects-table textarea.input{
  line-height: 0.8;
  padding-top: 2px;
  padding-bottom: 2px;
  min-height: 38px;
}

.ratings-wrap {
  padding: 0.5rem 0;
}

.ratings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem 1rem;
}

/* Date-Platzhalter ausblenden, wenn leer (Icon bleibt) */
input[type="date"][value=""]::-webkit-datetime-edit,
input[type="date"][value=""]::-webkit-datetime-edit-text,
input[type="date"][value=""]::-webkit-datetime-edit-month-field,
input[type="date"][value=""]::-webkit-datetime-edit-day-field,
input[type="date"][value=""]::-webkit-datetime-edit-year-field {
  color: transparent;
}

input[type="date"][value=""]:focus::-webkit-datetime-edit,
input[type="date"][value=""]:focus::-webkit-datetime-edit-text,
input[type="date"][value=""]:focus::-webkit-datetime-edit-month-field,
input[type="date"][value=""]:focus::-webkit-datetime-edit-day-field,
input[type="date"][value=""]:focus::-webkit-datetime-edit-year-field {
  color: inherit;
}

/* ===== Projekte > Beteiligte: Toggle (nur dieses Grid) ===== */
#projectsGrid.pm-adressen .rating-toggle{
  background:none; border:0; cursor:pointer;
  padding:0.15rem 0.25rem;
  display:inline-flex; align-items:center;
  font: inherit;
}

#projectsGrid.pm-adressen .rating-toggle .chev::before{
  content: "▾"; /* geschlossen: nach unten */
  font-size: 1.4em;
  display:inline-block;
  font-size: 1em;
  line-height: 2;
}

#projectsGrid.pm-adressen .rating-toggle.open .chev::before{
  content: "▴"; /* offen: nach oben */
}


/* Linien: zwischen Datensätzen JA */
.row-main td { border-bottom: 1px solid var(--line-color, rgba(255,255,255,0.08)); }

/* innerhalb Datensatz NEIN (nur wenn offen) */
.row-main.open td { border-bottom: 0 !important; }
.row-ratings td { border-top: 0 !important; }

/* Datensatz-Endlinie sitzt auf der Detailzeile */
.row-ratings td { border-bottom: 1px solid var(--line-color, rgba(255,255,255,0.08)); }


/* Pfeil-Größe erzwingen */
#projectsGrid.pm-adressen .rating-toggle{
  font-size: 22px !important;   /* wirkt auf ::before mit */
  line-height: 1 !important;
  padding: 4px 8px !important;
}

#projectsGrid.pm-adressen .rating-toggle .chev{
  font-size: 22px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

#projectsGrid.pm-adressen .rating-toggle .chev::before{
  content: "▾";
}

#projectsGrid.pm-adressen .rating-toggle.open .chev::before{
  content: "▴";
}

/* =========================
   Dropdown-Hinweis für aufklappbare Felder
   ========================= */

/* 1) SELECT: eigenes Pfeil-Icon einblenden (Chevron als Token --chevron, theme-fähig) */
select.input,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Platz für Icon */
  padding-right: 2.0rem;
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 14px 14px;
  background-image: var(--chevron);
}

/* 2) Datalist / Autocomplete: input[list] bekommt dasselbe Icon.
   Das pm-suggest-Widget verschiebt list -> data-list, daher beide Selektoren. */
input[list].input,
input[list],
input[data-list].input,
input[data-list] {
  padding-right: 2.0rem;
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 14px 14px;
  background-image: var(--chevron);
}

/* 3) Date-Inputs: Icon ist schon da -> nur Platz rechts sicherstellen, aber kein extra Chevron */
input[type="date"].input,
input[type="date"] {
  padding-right: 2.0rem;
  background-image: none !important; /* verhindert Doppel-Icons */
}

/* Sticky Summenzeile (nur Tabellen mit keep-table) */
/* Sticky Summenzeile (Footer) – ohne “Lücke” unten */
.keep-table tfoot td {
  position: sticky;
  bottom: -1px;                 /* ✅ überdeckt die 1px-Leak-Linie */
  z-index: 8;
  background: var(--panel2);    /* oder var(--panel) – je nachdem, was besser passt */
  border-bottom: 0;             /* ✅ verhindert doppelte Kante */
  border-top: 1px solid var(--line);
  background-clip: padding-box; /* ✅ verhindert “Durchscheinen” */
}

/* etwas kräftiger, optional */
.keep-table tfoot tr.sumrow td {
  font-weight: 600;
}

@media (max-width: 900px) {
  /* Honorare: Projektname-Spalte ausblenden */
  body[data-page="honorare"] .keep-table thead th:nth-child(2),
  body[data-page="honorare"] .keep-table tbody td:nth-child(2),
  body[data-page="honorare"] .keep-table tfoot td:nth-child(2) {
    display: none;
  }

  /* Honorare: PrjNr-Spalte sticky links */
  body[data-page="honorare"] .keep-table thead th:nth-child(1),
  body[data-page="honorare"] .keep-table tbody td:nth-child(1),
  body[data-page="honorare"] .keep-table tfoot td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 12;
    background: var(--panel2); /* oder var(--panel) – passend zu deiner Tabelle */
    background-clip: padding-box;
  }

  /* Header/Fuß brauchen etwas höheres z-index */
  body[data-page="honorare"] .keep-table thead th:nth-child(1) { z-index: 15; }
  body[data-page="honorare"] .keep-table tfoot td:nth-child(1) { z-index: 14; }

  /* Optional: kleine Trennlinie rechts an der sticky Spalte */
  body[data-page="honorare"] .keep-table thead th:nth-child(1),
  body[data-page="honorare"] .keep-table tbody td:nth-child(1),
  body[data-page="honorare"] .keep-table tfoot td:nth-child(1) {
    box-shadow: 1px 0 0 var(--line);
  }
}

/* ===== Einheitliche aktive Zeile – auch für Änderungen ===== */
#projectsGrid.pm-aenderungen tr.clickrow.is-active{
  background: var(--focus);
}

/* ===== Änderungen: unter 900px KEINE Cards, Tabelle bleibt sichtbar ===== */
@media (max-width: 900px){
  #projectsGrid.pm-aenderungen .projects-table-wrap{ display: block !important; }
  #projectsGrid.pm-aenderungen .projects-cards{ display: none !important; }
}

/* Änderungen: Spalten ausblenden (Kosten, Termine, Honorar freigeg.) */
@media (max-width: 900px){
  /* Kopfzeile */
  #projectsGrid.pm-aenderungen .projects-table thead th:nth-child(3),
  #projectsGrid.pm-aenderungen .projects-table thead th:nth-child(4),
  #projectsGrid.pm-aenderungen .projects-table thead th:nth-child(5), /* Honorar */
  #projectsGrid.pm-aenderungen .projects-table thead th:nth-child(6),

  /* Body */
  #projectsGrid.pm-aenderungen .projects-table tbody td:nth-child(3),
  #projectsGrid.pm-aenderungen .projects-table tbody td:nth-child(4),
  #projectsGrid.pm-aenderungen .projects-table tbody td:nth-child(5), /* Honorar */
  #projectsGrid.pm-aenderungen .projects-table tbody td:nth-child(6){
    display: none;
  }
}


/* Änderungen: auch die COLS (colgroup) ausblenden, sonst bleibt rechts "Leerbreite" */
@media (max-width: 900px){
  #projectsGrid.pm-aenderungen .projects-table colgroup col:nth-child(3),
  #projectsGrid.pm-aenderungen .projects-table colgroup col:nth-child(4),
  #projectsGrid.pm-aenderungen .projects-table colgroup col:nth-child(5), /* Honorar */
  #projectsGrid.pm-aenderungen .projects-table colgroup col:nth-child(6){
    display: none !important;
    width: 0 !important;
  }
}


  /* sinnvolle Breiten für die verbleibenden Spalten */
  #projectsGrid.pm-aenderungen .projects-table colgroup col:nth-child(1){ width: 56px !important; }  /* Nr. */
  #projectsGrid.pm-aenderungen .projects-table colgroup col:nth-child(5){ width: 130px !important; } /* Honorar */
  #projectsGrid.pm-aenderungen .projects-table colgroup col:nth-child(7){ width: 130px !important; } /* Status */
  /* Änderung bleibt auto (nimmt den Rest) */
}

/* ===== Änderungen-Tabelle: Änderung einzeilig abschneiden ===== */
#projectsGrid.pm-aenderungen .projects-table td.col-aenderung,
#projectsGrid.pm-aenderungen .projects-table th.col-aenderung{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Number-Input (Temperatur) – Darkmode Spinbuttons ===== */

/* Firefox */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* WebKit (Chrome, Edge, Safari) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Eigene Spinbuttons simulieren (optional, aber schön) */
input[type="number"].input {
  position: relative;
  padding-right: 34px; /* Platz für Pfeile */
}

/* Pfeile als Hintergrund (Darkmode passend) */
input[type="number"].input {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(225deg, transparent 50%, var(--muted) 50%),
    linear-gradient(315deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 11px,  /* ▲ */
    calc(100% - 11px) 11px,
    calc(100% - 16px) 22px,  /* ▼ */
    calc(100% - 11px) 22px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Kompakte Number-Inputs: keine Spinner-Pfeile */
input[type="number"].input.input--compact {
  background-image: none !important;
  padding-right: 6px !important;
}

/* Date-Inputs kompakt: Icon ganz rechts, Text links */
input[type="date"].input--compact {
  padding-right: 2px !important;
  padding-left: 4px !important;
  font-size: 11px !important;
}
input[type="date"].input--compact::-webkit-calendar-picker-indicator {
  margin-left: 0;
  padding: 0;
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

/* Hover / Focus */
input[type="number"].input:hover {
  border-color: var(--orange);
}
input[type="number"].input:focus {
  border-color: var(--orange);
}

/* =========================
   Protokoll > Vorkommnis (pm-vorkommnis)
   ========================= */

/* Desktop: Spalten wirklich schrumpfbar (v.a. Vorkommnis/Verantwortlich) */
#projectsGrid.pm-vorkommnis .pm-vork-table td,
#projectsGrid.pm-vorkommnis .pm-vork-table th{
  min-width: 0;
}

/* ===== Vorkommnisse: Handle-Spalte fixieren ===== */
#projectsGrid.pm-vorkommnis .pm-vork-table col.col-handle{
  width: 22px;
}

#projectsGrid.pm-vorkommnis .pm-vork-table td.pm-dnd-cell{
  width: 22px;
  padding-left: 6px;
  padding-right: 6px;
}


/* ===== pm-vorkommnis: echte Cards (wie pm-adressen), Tabelle auf Mobile komplett ausblenden ===== */
#projectsGrid.pm-vorkommnis .projects-table-wrap{ display:block; }
#projectsGrid.pm-vorkommnis .pm-vork-cards{ display:none; }

#projectsGrid.pm-vorkommnis .pm-vork-card{
  border-bottom: 1px solid var(--line);
  padding: 12px;
}
#projectsGrid.pm-vorkommnis .pm-lbl{
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px 0;
  line-height: 18px;
  white-space: nowrap;
}
#projectsGrid.pm-vorkommnis .pm-cell{
  display: grid;
  grid-template-rows: 18px 36px;
  align-items: center;
  min-width: 0;
}
#projectsGrid.pm-vorkommnis .pm-cell.pm-cell--textarea{
  grid-template-rows: 18px auto;
}
#projectsGrid.pm-vorkommnis .pm-card-row{ margin-top: 12px; }
#projectsGrid.pm-vorkommnis .pm-card-row:first-child{ margin-top: 0; }

/* Row1: Nr | Erfasst | Trash */
#projectsGrid.pm-vorkommnis .pm-card-row1{
  display: grid;
  grid-template-columns: 0.6fr 1fr 1.2fr 44px;
  gap: 0 12px;
  align-items: center;
}
#projectsGrid.pm-vorkommnis .pm-card-row1 .pm-trash{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  height: 54px;
}
#projectsGrid.pm-vorkommnis .pm-card-row1 input.input,
#projectsGrid.pm-vorkommnis .pm-card-row1 select.input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
#projectsGrid.pm-vorkommnis .pm-row-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Mobile: nur Cards anzeigen */
@media (max-width: 900px){
  #projectsGrid.pm-vorkommnis .projects-table-wrap{ display:none !important; }
  #projectsGrid.pm-vorkommnis .pm-vork-cards{ display:block !important; }
}

/* Überschrift-Style Regeln */
#projectsGrid.pm-vorkommnis .is-bold input.input,
#projectsGrid.pm-vorkommnis .is-bold select.input,
#projectsGrid.pm-vorkommnis .is-bold textarea.input{ font-weight: 700; }

#projectsGrid.pm-vorkommnis .is-bold .nr-input,
#projectsGrid.pm-vorkommnis .is-bold .vork-input{ font-size: 18px; }

#projectsGrid.pm-vorkommnis .is-num-hidden .nr-input,
#projectsGrid.pm-vorkommnis .is-num-hidden .ueberschrift-input{
  opacity: .6;
}
#projectsGrid.pm-vorkommnis .pm-vork-table .input,
#projectsGrid.pm-vorkommnis .pm-vork-table textarea.input,
#projectsGrid.pm-vorkommnis .pm-vork-table select.input{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* colgroup (Desktop) – Werte nur als Empfehlung; table-layout:fixed übernimmt */
#projectsGrid.pm-vorkommnis .pm-vork-table col.col-nr       { width: 90px; }
#projectsGrid.pm-vorkommnis .pm-vork-table col.col-ueb      { width: 140px; }
#projectsGrid.pm-vorkommnis .pm-vork-table col.col-erfasst  { width: 160px; }
#projectsGrid.pm-vorkommnis .pm-vork-table col.col-verant   { width: 9%; }   /* darf kleiner werden */
#projectsGrid.pm-vorkommnis .pm-vork-table col.col-frist    { width: 160px; }
#projectsGrid.pm-vorkommnis .pm-vork-table col.col-erledigt { width: 160px; }
#projectsGrid.pm-vorkommnis .pm-vork-table col.col-trash    { width: 56px; }

/* Mobile <900px: jeder Datensatz mehrzeilig nach deinem Schema */
@media (max-width: 900px){

  #projectsGrid.pm-vorkommnis table thead{ display:none; }

  #projectsGrid.pm-vorkommnis table,
  #projectsGrid.pm-vorkommnis tbody{
    display:block;
    width:100%;
  }

  /* Datenzeilen als Card */
  #projectsGrid.pm-vorkommnis table tbody tr:not(.add-row){
    position: relative;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "nr ueb"
      "erfasst erfasst"
      "vork vork"
      "verant verant"
      "frist erledigt";
    gap: 12px;
    padding: 14px 12px 12px;
    border-bottom: 1px solid var(--line);
  }

  /* Delete: oben rechts, unabhängig vom Grid */
  #projectsGrid.pm-vorkommnis td.trash-cell{
    position:absolute;
    top: 10px;
    right: 10px;
    padding:0 !important;
    border:0 !important;
  }

  /* Field-Boxen */
  #projectsGrid.pm-vorkommnis table tbody tr:not(.add-row) > td{
    padding:0;
    border:0;
    min-width:0;
  }

/* ===== pm-vorkommnis: Card-Layout unter 900px sauber ausrichten ===== */
@media (max-width: 900px){

  /* nur pm-vorkommnis: jede Zeile als Card-Grid mit Trash als 3. Spalte */
  #projectsGrid.pm-vorkommnis table tbody tr[data-row-id]{
    display: grid !important;
    grid-template-columns: 1fr 1fr 44px;   /* 2 Felder + Trash */
    gap: 10px 12px;
    padding: 12px;
    position: relative;
    border-bottom: 1px solid var(--line);
  }

  /* td wie bei Cards */
  #projectsGrid.pm-vorkommnis table tbody tr[data-row-id] > td{
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  /* Row 1: Nr | Erfasst | Trash */
  #projectsGrid.pm-vorkommnis td.nr-cell{       grid-column: 1; grid-row: 1; }
  #projectsGrid.pm-vorkommnis td.erfasst-cell{  grid-column: 2; grid-row: 1; }

  #projectsGrid.pm-vorkommnis td.trash-cell{
    grid-column: 3;
    grid-row: 1;
    position: static !important;   /* nimmt das generische absolute raus */
    justify-self: end;
    align-self: end;
  }

  /* Row 2: Überschrift volle Breite */
  #projectsGrid.pm-vorkommnis td.ueb-cell{
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  /* Row 3: Verantwortlich volle Breite */
  #projectsGrid.pm-vorkommnis td.verant-cell{
    grid-column: 1 / span 2;
    grid-row: 3;
  }

  /* Row 4: Frist | Erledigt */
  #projectsGrid.pm-vorkommnis td.frist-cell{    grid-column: 1; grid-row: 4; }
  #projectsGrid.pm-vorkommnis td.erledigt-cell{ grid-column: 2; grid-row: 4; }

  /* Row 5: Vorkommnis volle Breite */
  #projectsGrid.pm-vorkommnis td.vork-cell{
    grid-column: 1 / span 2;
    grid-row: 5;
  }

  /* Add-Row: Button über volle Breite */
  #projectsGrid.pm-vorkommnis table tbody tr.add-row{
    display: block !important;
    padding: 12px;
    border-bottom: 0;
  }
  #projectsGrid.pm-vorkommnis table tbody tr.add-row td{
    display: block;
    padding: 0;
    border: 0;
  }
  #projectsGrid.pm-vorkommnis table tbody tr.add-row .btn{
    width: 100%;
  }
}


  /* Jede Field-Box bekommt Label aus data-label */
  #projectsGrid.pm-vorkommnis table tbody tr:not(.add-row) > td[data-label]:not(.trash-cell)::before{
    content: attr(data-label);
    display:block;
    font-size: 12px;
    opacity: .75;
    margin: 0 0 6px 2px;
  }

  /* Grid Areas */
  #projectsGrid.pm-vorkommnis td.nr-cell      { grid-area:nr; }
  #projectsGrid.pm-vorkommnis td.ueb-cell     { grid-area:ueb; }
  #projectsGrid.pm-vorkommnis td.erfasst-cell { grid-area:erfasst; }
  #projectsGrid.pm-vorkommnis td.vork-cell    { grid-area:vork; }
  #projectsGrid.pm-vorkommnis td.verant-cell  { grid-area:verant; }
  #projectsGrid.pm-vorkommnis td.frist-cell   { grid-area:frist; }
  #projectsGrid.pm-vorkommnis td.erledigt-cell{ grid-area:erledigt; }

  /* Inputs/Select/Textarea: volle Breite, flexibel */
  #projectsGrid.pm-vorkommnis table tbody tr:not(.add-row) .input,
  #projectsGrid.pm-vorkommnis table tbody tr:not(.add-row) textarea.input,
  #projectsGrid.pm-vorkommnis table tbody tr:not(.add-row) select.input{
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  /* Vorkommnis: flexible Höhe */
  #projectsGrid.pm-vorkommnis td.vork-cell textarea.input{
    min-height: 80px;
    height:auto;
    overflow:hidden;
    resize:none;
  }

  /* Add-Row bleibt normal */
  #projectsGrid.pm-vorkommnis table tbody tr.add-row{
    display:block;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
}

/* ===== Protokoll > Vorkommnis: Darstellung nach Überschrift ===== */

/* "fett": kompletter Datensatz fett */
#projectsGrid.pm-vorkommnis tr.pm-row-bold .input,
#projectsGrid.pm-vorkommnis tr.pm-row-bold textarea.input,
#projectsGrid.pm-vorkommnis tr.pm-row-bold select.input{
  font-weight: 700 !important;
}

/* "fett": Nr + Vorkommnis etwas größer */
#projectsGrid.pm-vorkommnis tr.pm-row-bold td.nr-cell .input{
  font-size: 16px !important;
}
#projectsGrid.pm-vorkommnis tr.pm-row-bold td.vork-cell textarea.input{
  font-size: 16px !important;
}

/* "Nummer unsichtbar": Nr + Überschrift mit 60% Transparenz (Text) */
#projectsGrid.pm-vorkommnis tr.pm-row-fade td.nr-cell .input,
#projectsGrid.pm-vorkommnis tr.pm-row-fade td.ueb-cell select.input{
  color: rgba(215,218,221,.6) !important;              /* basiert auf deinem --text */
  -webkit-text-fill-color: rgba(215,218,221,.6) !important; /* Chrome/Edge */
}

/* ===== FIX: pm-vorkommnis Card-Layout (überstimmt die generische #projectsGrid:not(...)-Regel) ===== */
@media (max-width: 900px){

  /* Zeile als 3-Spalten-Grid: Nr | Überschrift | Delete (ohne rechten Leerraum) */
  #projectsGrid.pm-vorkommnis:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel) table tbody tr[data-row-id]{
    display: grid !important;
    grid-template-columns: 1fr 1fr 44px !important;
    gap: 10px 12px !important;
    padding: 12px !important;            /* killt das generische 52px rechts */
    position: relative !important;
    border-bottom: 1px solid var(--line) !important;
  }

  /* td neutralisieren */
  #projectsGrid.pm-vorkommnis:not(.pm-adressen):not(.pm-aenderungen):not(.pm-maengel) table tbody tr[data-row-id] > td{
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0 !important;
  }

  /* Row 1: Nr | Überschrift | Delete */
  #projectsGrid.pm-vorkommnis td.nr-cell{       grid-column: 1 !important; grid-row: 1 !important; }
  #projectsGrid.pm-vorkommnis td.ueb-cell{      grid-column: 2 !important; grid-row: 1 !important; }

  #projectsGrid.pm-vorkommnis td.trash-cell{
    grid-column: 3 !important; grid-row: 1 !important;
    position: static !important;   /* entfernt das absolute top/right aus der generischen Regel */
    top: auto !important; right: auto !important;
    justify-self: end !important;
    align-self: end !important;
    text-align: right !important;
  }

  /* Row 2: Erfasst volle Breite */
  #projectsGrid.pm-vorkommnis td.erfasst-cell{  grid-column: 1 / span 2 !important; grid-row: 2 !important; }

  /* Row 3: Vorkommnis volle Breite */
  #projectsGrid.pm-vorkommnis td.vork-cell{     grid-column: 1 / span 2 !important; grid-row: 3 !important; }

  /* Row 4: Verantwortlich volle Breite */
  #projectsGrid.pm-vorkommnis td.verant-cell{   grid-column: 1 / span 2 !important; grid-row: 4 !important; }

  /* Row 5: Frist | Erledigt */
  #projectsGrid.pm-vorkommnis td.frist-cell{    grid-column: 1 !important; grid-row: 5 !important; }
  #projectsGrid.pm-vorkommnis td.erledigt-cell{ grid-column: 2 !important; grid-row: 5 !important; }

  /* Add-Row wieder "normal" und Button über volle Breite */
  #projectsGrid.pm-vorkommnis table tbody tr.add-row{
    display: block !important;
    padding: 12px !important;
  }
  #projectsGrid.pm-vorkommnis table tbody tr.add-row td{
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #projectsGrid.pm-vorkommnis table tbody tr.add-row .btn{ width: 100% !important; }
}

/* ===== PROTOKOLL_VORKOMMNIS (gefiltert): Datum-Markierung ===== */
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.nr-cell,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.ueb-cell,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.erfasst-cell,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.vork-cell,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.verant-cell,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.frist-cell{
  color: var(--orange) !important;
}

/* Inputs/Textareas in diesen Zellen ebenfalls orange */
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.nr-cell .input,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.ueb-cell .input,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.erfasst-cell .input,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.vork-cell .input,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.verant-cell .input,
#projectsGrid.pm-vork-filtered.pm-prot-erfasst table tbody tr[data-row-id] td.frist-cell .input{
  color: var(--orange) !important;
}

/* Nur "Erledigt" orange, wenn Erledigt_Dat == Protokoll-Datum */
#projectsGrid.pm-vork-filtered.pm-prot-erledigt table tbody tr[data-row-id] td.erledigt-cell,
#projectsGrid.pm-vork-filtered.pm-prot-erledigt table tbody tr[data-row-id] td.erledigt-cell .input{
  color: var(--orange) !important;
}

/* ===== protokoll_vorkommnis (GEFILTERT): orange bei Datumsgleichheit ===== */
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.nr-cell,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.ueb-cell,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.erfasst-cell,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.vork-cell,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.verant-cell,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.frist-cell,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.nr-cell .input,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.ueb-cell .input,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.erfasst-cell .input,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.vork-cell .input,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.verant-cell .input,
#projectsGrid.pm-vork-filtered tr.pm-prot-erfasst td.frist-cell .input{
  color: var(--orange) !important;
}

#projectsGrid.pm-vork-filtered tr.pm-prot-erledigt td.erledigt-cell,
#projectsGrid.pm-vork-filtered tr.pm-prot-erledigt td.erledigt-cell .input{
  color: var(--orange) !important;
}

/* Cards (nur gefiltert) */
#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erfasst .input{
  color: var(--orange) !important;
}
/* aber: nur bestimmte Felder orange lassen -> wir geben den Feldern Klassen (siehe JS unten) */
#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erfasst .pm-orange-scope .input{
  color: var(--orange) !important;
}
#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erledigt .pm-erledigt-scope .input{
  color: var(--orange) !important;
}

/* ===== protokoll_vorkommnis (GEFILTERT): orange auch in Cards ===== */
#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erfasst [data-sync-field="Nr"],
#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erfasst [data-sync-field="Ueberschrift"],
#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erfasst [data-sync-field="Erfasst"],
#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erfasst [data-sync-field="Vorkommnis"],
#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erfasst [data-sync-field="Verantwortlich_ID"],
#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erfasst [data-sync-field="Frist"]{
  color: var(--orange) !important;
}

#projectsGrid.pm-vork-filtered .pm-vork-card.pm-prot-erledigt [data-sync-field="Erledigt_Dat"]{
  color: var(--orange) !important;
}


/* =========================
   Vorkommnis D&D: Card Row1 hat 1 Spalte mehr (Handle)
   ========================= */
#projectsGrid.pm-vorkommnis.pm-vork-dd .pm-card-row1{
  grid-template-columns: 22px 0.6fr 1fr 1.2fr 44px; /* Handle | Nr | Erfasst | Darstellung | Trash */
  align-items: center;
}

/* Handle in Row1 sauber positionieren */
#projectsGrid.pm-vorkommnis.pm-vork-dd .pm-card-row1 > .pm-dnd-handle{
  justify-self: center;
  align-self: center;
  margin-top: 18px;     /* optisch auf Input-Zeile, nicht auf Label */
  opacity: .7;
}


/* ===== Vorkommnis D&D: Card-Row1 – Trash immer im Raster halten ===== */
#projectsGrid.pm-vorkommnis.pm-vork-dd .pm-card-row1{
  grid-template-columns: 22px 0.9fr 1fr 1fr 44px; /* Handle | Nr | Erfasst | Darstellung | Trash */
}

#projectsGrid.pm-vorkommnis.pm-vork-dd .pm-card-row1 .pm-trash{
  justify-self: end;
  width: 44px;         /* exakt die letzte Grid-Spalte */
  min-width: 44px;
  overflow: hidden;    /* falls irgendwas in pm-trash zu breit ist */
}
#projectsGrid.pm-vorkommnis.pm-vork-dd .pm-card-row1 .pm-trash .icon-btn{
  margin-left: auto;   /* Button an den rechten Rand */
}

/* ===== Vorkommnis D&D: Handle in Tabellenzeile exakt mittig ===== */
#projectsGrid.pm-vorkommnis.pm-vork-dd .pm-vork-table td.pm-dnd-cell{
  vertical-align: middle;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#projectsGrid.pm-vorkommnis.pm-vork-dd .pm-vork-table td.pm-dnd-cell .pm-dnd-handle{
  display: block;          /* weg von inline-baseline */
  margin: 0 auto;          /* horizontal mittig */
  transform: translateY(1px); /* tiny optischer Ausgleich -> ggf. 0..2px */
}

.nav-sep{
  height: 1px;
  background: var(--line);
  margin: 6px 0;
}

.brand-short{
  display: none;
}

/* unter 720px: Kurzform */
@media (max-width: 720px){
  .brand-full{ display: none; }
  .brand-short{ display: inline; }
}

/* ...dein bestehendes CSS... */

.pm-action-wrap{
  position: relative;
}
.pm-action-wrap .input{
  padding-right: 44px; /* Platz für Kreis-Button rechts */
}

.pm-action-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
}
.pm-action-btn:hover{
  border-color: var(--orange);
  color: var(--orange);
}

/* ===== Map-Modal (anthrazit) ===== */
#pmMapModal{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}
#pmMapModal.open{ display:block; }

#pmMapModal .backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}

#pmMapModal .panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(920px, calc(100vw - 28px));
  height: min(640px, calc(100vh - 28px));
  background: var(--panel2);
  border: 1px solid var(--line);
  display: grid;
  grid-template-rows: 44px 1fr;
  overflow: hidden;
}

#pmMapModal .head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
}
#pmMapModal .title{
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
#pmMapModal .close{
  width: 36px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
#pmMapModal .close:hover{ color: var(--orange); }

#pmMap{
  width: 100%;
  height: 100%;
  background: var(--panel);
}

/* =========================
   Input[list] wie Select stylen + Custom Dropdown
   ========================= */

/* Input mit datalist: gleiche Optik + Pfeil wie select */
input.input[list]{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

/* Overlay-Dropdown (Custom Suggest) */
.pm-suggest{
  position: absolute;
  z-index: 9999;
  min-width: 220px;
  max-width: 720px;
  max-height: 320px;
  overflow: auto;

  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.pm-suggest.is-hidden{ display:none; }

.pm-suggest-item{
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-suggest-item:hover,
.pm-suggest-item.is-active{
  background: var(--hover);
  color: var(--orange);
}

.pm-suggest-empty{
  padding: 8px 10px;
  color: var(--muted);
}

/* ===== GLOBAL: Date-Placeholder ausblenden, wenn leer (pm-date-empty) ===== */
input[type="date"].pm-date-empty{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

input[type="date"].pm-date-empty::-webkit-datetime-edit,
input[type="date"].pm-date-empty::-webkit-datetime-edit-text,
input[type="date"].pm-date-empty::-webkit-datetime-edit-month-field,
input[type="date"].pm-date-empty::-webkit-datetime-edit-day-field,
input[type="date"].pm-date-empty::-webkit-datetime-edit-year-field{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* beim Fokus wieder lesbar */
input[type="date"].pm-date-empty:focus{
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}
input[type="date"].pm-date-empty:focus::-webkit-datetime-edit,
input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-text,
input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-month-field,
input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-day-field,
input[type="date"].pm-date-empty:focus::-webkit-datetime-edit-year-field{
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* ===== Personalplanung: Scroll nur hier (ohne Seiteneffekte) ===== */
body[data-page="personalplanung"] .pp-fill{
  height: 100%;
  min-height: 0;
}

body[data-page="personalplanung"] .pp-fill .pane-body{
  min-height: 0;
  overflow: auto;      /* vertikal scrollt hier */
}
/* ===== Personalplanung: Überschriften-Zeilen (Projekt leer) ===== */
body[data-page="personalplanung"] tr.pp-heading td{
  color: var(--accent);
}

/* Textfarbe explizit für Inputs & Selects */
body[data-page="personalplanung"] tr.pp-heading .input,
body[data-page="personalplanung"] tr.pp-heading select{
  color: var(--accent);
  border-color: transparent;
  background-color: transparent;
}

/* Placeholder ebenfalls orange */
body[data-page="personalplanung"] tr.pp-heading .input::placeholder{
  color: var(--accent);
  opacity: 1;
}

/* Fokus ruhig halten */
body[data-page="personalplanung"] tr.pp-heading .input:focus,
body[data-page="personalplanung"] tr.pp-heading select:focus{
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* optional: etwas mehr Überschriften-Charakter */
body[data-page="personalplanung"] tr.pp-heading{
  font-weight: 500;
}

/* =========================
   Personalplanung: Mobile-Layout < 900px (3 Zeilen pro Datensatz)
   ========================= */
@media (max-width: 900px){

  /* nur Personalplanung – Tabelle bleibt sichtbar */
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung .pm-pp-table thead{
    display: none;
  }

  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung .pm-pp-table tbody tr{
    display: grid;
    grid-template-columns: 0.9fr 1.6fr 1.0fr 44px;
    grid-template-areas:
      "proj addr lp del"
      "aufg aufg prio prio"
      "pl   pl   tl   tl";
    gap: 10px 12px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
  }

  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung .pm-pp-table tbody td{
    display: grid;
    grid-template-rows: 18px 36px; /* Label + Feld */
    align-items: center;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  /* Labels aus data-label */
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung .pm-pp-table tbody td::before{
    content: attr(data-label);
    font-size: 12px;
    color: var(--muted);
    line-height: 18px;
    margin: 0 0 6px 0;
    white-space: nowrap;
  }

  /* Grid-Areas */
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.project-cell{ grid-area: proj; }
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.pp-addr     { grid-area: addr; }
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.pp-lp       { grid-area: lp; }
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.pp-aufgabe  { grid-area: aufg; }
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.pp-prio     { grid-area: prio; }
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.pp-pl       { grid-area: pl; }
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.pp-tl       { grid-area: tl; }

  /* Delete: als Feld im Grid, ohne eigene Spalte außen */
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.trash-cell{
    grid-area: del;
    display: flex;
    align-items: end;
    justify-content: flex-end;
    height: 54px;          /* passt zu Label+Feld-Höhe der anderen */
    padding: 0;
  }
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.trash-cell::before{
    content: "";           /* kein Label */
    display: none;
  }

  /* Inputs/Selects müssen schrumpfen dürfen */
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung .pm-pp-table .input,
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung .pm-pp-table select.input{
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Projekt bewusst schmal -> zeigt nur PrjNr per Ellipsis (da Label vorn steht) */
  body[data-page="personalplanung"] #projectsGrid.pm-personalplanung td.project-cell select.input{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}



/* ===== Personalplanung: Statusfeld ausblenden ===== */
body[data-page="personalplanung"] .pane-head #statusSelect,
body[data-page="personalplanung"] .pane-head label[for="statusSelect"],
body[data-page="personalplanung"] .pane-head .filters + select{
  display: none !important;
}

body[data-page="personalplanung"] .pane-head{
  gap: 0;
}

/* ===== Personalplanung: Teilen-Icon ausblenden ===== */
body[data-page="personalplanung"] .top-actions .share,
body[data-page="personalplanung"] .top-actions [data-action="share"],
body[data-page="personalplanung"] .top-actions .icon-share{
  display: none !important;
}



/* ===== Personalplanung: Teilen-Icon sicher ausblenden ===== */
body[data-page="personalplanung"] .top-actions > *:not(.nav-toggle){
  display: none !important;
}

/* =========================================================
   Personalplanung: Mobile – Überschriften ohne Labels
   (Projekt_ID leer)
   ========================================================= */
@media (max-width: 900px){

  /* Labels (data-label) ausblenden */
  body[data-page="personalplanung"]
  #projectsGrid.pm-personalplanung
  tr.pp-heading td::before{
    display: none !important;
    content: none !important;
  }

  /* Zeilenstruktur auf "nur Feld" reduzieren */
  body[data-page="personalplanung"]
  #projectsGrid.pm-personalplanung
  tr.pp-heading td{
    grid-template-rows: 36px !important; /* keine Label-Zeile */
  }

  /* Delete-Zelle ebenfalls ohne Label-Abstand */
  body[data-page="personalplanung"]
  #projectsGrid.pm-personalplanung
  tr.pp-heading td.trash-cell{
    grid-template-rows: 36px !important;
    align-items: center;
  }
}

/* === PM Spellcheck Overlay === */
.pm-spell-wrap{
  position: relative;
}

/* Mirror liegt unter dem textarea, zeigt Text + Unterstreichungen */
.pm-spell-mirror{
  position:absolute;
  inset:0;
  pointer-events:none;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow:hidden;
  color: inherit;
}

/* textarea darüber, aber Text unsichtbar -> Mirror “trägt” die Anzeige */
.pm-spell-wrap.is-active textarea{
  background: transparent;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important; /* Chrome/Edge */
  caret-color: var(--text); /* damit caret die aktuelle (orange/weiß) Farbe nutzen kann */
}

/* die wavy Unterstreichung */
.pm-spell-err{
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: rgba(212,133,37,.8); /* euer Orange, 80% */
  text-underline-offset: 2px;
}

/* optional: beim Fokus kleiner Hinweis (kannst du auch weglassen) */
.pm-spell-wrap.is-active::after{
  content: "Rechtschreibung aktiv";
  position:absolute;
  right: 8px;
  bottom: 6px;
  font-size: 11px;
  color: rgba(212,133,37,.7);
  pointer-events:none;
}

/* =========================================================
   Login Modal (Darkmode / Base-Variablen)
   ========================================================= */

/* Overlay + Blur */
.pm-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 24px;

  /* dunkler Schleier + Blur (passt zu Darkmode) */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pm-modal-overlay.is-open{
  display: flex;
}

/* Scroll im Hintergrund blocken */
body.pm-modal-open{
  overflow: hidden;
}

/* Modal Container (wie Pane) */
.pm-modal{
  width: min(520px, 100%);
  overflow: hidden;

  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.60);
}

/* Header (wie pane-head) */
.pm-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 16px;

  background: var(--panel2);
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.pm-modal-title{
  font-weight: 700;
}

/* Close Button */
.pm-modal-close{
  appearance: none;
  border: 0;
  background: transparent;

  color: var(--muted);
  cursor: pointer;

  font-size: 20px;
  line-height: 1;

  padding: 6px 8px;
  border-radius: 0;
}
.pm-modal-close:hover{
  color: var(--orange);
}
.pm-modal-close:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Body */
.pm-modal-body{
  padding: 16px;
}

/* Fehlerbox (neutral, base-konform) */
.pm-login-error{
  display: none;

  margin-bottom: 12px;
  padding: 10px 12px;

  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--text);
}
.pm-login-error.is-visible{
  display: block;
}

/* Form Layout */
.pm-login-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.pm-login-field label{
  display: block;
  margin-bottom: 6px;

  font-size: 12px;
  color: var(--muted);
}

/* Inputs: Name/Passwort gleich groß */
.pm-login-field input{
  width: 100%;
  box-sizing: border-box;

  height: 36px;
  line-height: 36px;
  padding: 0 10px;

  background: var(--panel);
  color: var(--text);

  border: 1px solid var(--line);
  border-radius: 0;

  outline: none;
}
.pm-login-field input:focus{
  border-color: var(--orange);
}
.pm-login-field input:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Actions */
.pm-login-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;

  margin-top: 6px;
}

/* Buttons im Modal (damit kein Browser-Default) */
.pm-login-actions button{
  appearance: none;
  border-radius: 0;

  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);

  height: 34px;
  padding: 0 12px;

  cursor: pointer;
}
.pm-login-actions button:hover{
  border-color: var(--orange);
  color: var(--orange);
}
.pm-login-actions button:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.nav-user{
  padding: 10px 12px;          /* ggf. an deine Nav-Link-Paddings anpassen */
  color: var(--text);
}

/* Profilbild neben dem Login-Namen (Kaskade: Skizze → Teamfoto → AD-Foto).
   Ohne Bild wird das Element gar nicht erst gerendert. */
.nav-user-ident{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;                     /* damit lange Namen kürzen dürfen */
}
.nav-user-avatar{
  flex: 0 0 auto;
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: none;                    /* erst zeigen, wenn ein Bild geladen ist */
}
.nav-user-avatar.is-on{ display: block; }
/* Bildinhalt */
.nav-user-avatar::before{
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: var(--nav-av) no-repeat center / cover;
}
/* Skizze: als Maske einfärben — folgt damit der Textfarbe und passt in
   Dark- wie Light-Mode, ohne eigenen Hintergrund. */
.nav-user-avatar.is-sketch::before{
  background: currentColor;
  -webkit-mask: var(--nav-av) no-repeat center / contain;
          mask: var(--nav-av) no-repeat center / contain;
}
/* Einfassung wie bei Renzo (gleicher Durchmesser: inset 2 %). */
.nav-user-avatar::after{
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .9;
}

/* User + Logout(X) in einer Zeile */
.nav-user-row{
  padding: 10px 12px;               /* wie Nav-Link-Padding */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  color: var(--text);
}

.nav-user-name{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* X-Button wie Delete-Optik */
.nav-user-logout{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  text-decoration: none;
}

.nav-user-logout svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.nav-user-logout:hover{
  border-color: var(--orange);
  color: var(--orange);
}

.nav-user-logout:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.filter-input-wrap{
  position: relative;
  max-width: 420px;
  flex: 1 1 320px;
}

.filter-input-wrap input{
  padding-right: 28px; /* Platz für X */
}

.filter-clear{
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;

  display: flex;
  align-items: center;      /* echte vertikale Zentrierung */
  justify-content: center;

  width: 28px;              /* größerer Klickbereich */
  border: 0;
  background: transparent;

  font-size: 20px;          /* größer */
  font-weight: 400;
  line-height: 1;

  color: var(--muted);
  cursor: pointer;
}

.filter-clear:hover{
  color: var(--orange);
}

.filter-input-wrap input{
  padding-right: 34px;
}

/* =========================
   D&D Handle (einheitlich)
   ========================= */
.pm-dnd-cell{
  width: 26px;
  padding: 10px 6px !important;
  text-align: center;
  vertical-align: top;        /* wichtig: oben statt Mitte */
}

.pm-dnd-handle{
  width: 18px;
  height: 18px;
  display: inline-block;
  cursor: grab;
  opacity: .65;

  /* für DEIN SVG (Quadrat-Punkte): gefüllt statt nur Rahmen */
  fill: currentColor;
  stroke: none;
}

.pm-dnd-handle:hover{
  color: var(--orange);
  opacity: 1;
}

.pm-dnd-dragging{ opacity: .35; }
.pm-dnd-ghost{ outline: 1px dashed var(--orange); outline-offset: -2px; }

/* ===== Vorkommnis D&D: Handle oben an der Eingabezeile ===== */
#projectsGrid.pm-vorkommnis.pm-vork-dd .pm-vork-table td.pm-dnd-cell{
  vertical-align: top;
  padding-top: 12px !important;     /* feinjustiert: auf Höhe der Inputs */
  padding-bottom: 10px !important;
}

#projectsGrid.pm-vorkommnis.pm-vork-dd .pm-vork-table td.pm-dnd-cell .pm-dnd-handle{
  display: block;
  margin: 0 auto;
  transform: translateY(2px);       /* Mini-Ausgleich, damit es “auf Linie” wirkt */
}

/* =========================
   Drop-Zone Hover (VCF / Upload / Scan)
   ========================= */

/* Der klickbare Rahmen */
.dropzone,
label.dropzone{
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}

/* Hover = gleiches Verhalten wie Button */
.dropzone:hover,
label.dropzone:hover{
  border-color: var(--orange);
}

/* Text innerhalb wird orange */
.dropzone:hover,
.dropzone:hover *{
  color: var(--orange);
}

/* SVG Icons färben sich mit */
.dropzone:hover svg{
  stroke: currentColor;
  fill: none;
}

/* Drag & Drop aktiv */
.dropzone.dragover{
  border-color: var(--orange);
  background: rgba(212,133,37,0.08);
  color: var(--orange);
}

/* ── Light Mode ── */
body.light-mode {
  --bg: #f5f5f5;
  --bg2: #fafafa;
  --panel: #ffffff;
  --panel2: #f8f8f8;
  --text: #1a1a1a;
  --muted: #666666;
  --line: #e0e0e0;
  --hover: #f0f0f0;
  --focus: #e8e8e8;
  --orange: #D48525;

  /* Basis-"Tinte" (Grauabstufungen): schwarz-basiert */
  --ink-rgb: 0,0,0;

  /* Semantik-Farben (Status) – Light-Varianten */
  --danger: #c0392b;
  --ok: #2e7d32;
  --warn: #d9a648;

  /* Dropdown-Chevron: dunkle Variante für hellen Hintergrund */
  --chevron: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='rgba(0,0,0,0.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");

  color-scheme: light;
}
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
  color-scheme: light;
}
body.light-mode .brand-icon {
  filter: brightness(0) !important;
}


/* ══════════ DMS-eigene Ergänzungen ══════════ */
.ampel { display:inline-block; width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.ampel.rot { background:#e57373; }
.ampel.gelb { background:#d9a648; }
.ampel.gruen { background:#4caf50; }

.dok-karten { display:grid; grid-template-columns:repeat(auto-fill, minmax(430px, 1fr)); gap:14px; padding:14px; }
.dok-karte { border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; }
.dok-karte .kopf { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); }
.dok-karte .kopf .titel { font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dok-karte .inhalt { display:flex; gap:10px; padding:10px; }
.dok-karte .thumb { width:110px; flex:0 0 auto; border:1px solid var(--line); background:var(--panel2); }
.dok-karte .thumb img { width:100%; display:block; }
.dok-karte .felder { flex:1; min-width:0; }

.chips { display:flex; flex-wrap:wrap; gap:6px; padding:6px 10px 10px; }
.chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); padding:2px 8px; font-size:12px; background:var(--panel2); }
.chip.bestaetigt { border-color:var(--ok); }
.chip.vorschlag { border-color:var(--warn); border-style:dashed; }
.chip.frei { border-color:var(--muted); border-style:dotted; }
.chip button, .chip a { background:none; border:0; cursor:pointer; color:var(--muted); padding:0; font-size:12px; line-height:1; }
.chip button:hover, .chip a:hover { color:var(--orange); }

.viewer-split { display:grid; grid-template-columns: 1fr 420px; gap:0; height:100%; min-height:0; }
.viewer-split .pdf { min-width:0; }
.viewer-split .pdf embed { width:100%; height:100%; border:0; }
.viewer-split .meta { border-left:1px solid var(--line); overflow-y:auto; }
@media (max-width: 900px){ .viewer-split { grid-template-columns:1fr; } .viewer-split .pdf { height:50vh; } }

.treffer-liste { padding:14px; display:flex; flex-direction:column; gap:10px; }
.treffer { border:1px solid var(--line); background:var(--panel); padding:10px; display:flex; gap:10px; }
.treffer .snippet { color:var(--muted); font-size:12px; }

.baum { padding:6px 14px; }
.baum .knoten { display:flex; align-items:center; gap:8px; padding:3px 0; border-bottom:1px dotted var(--line); }
.baum .knoten.inaktiv { opacity:.45; }

/* Links im Inhaltsbereich ans Design anpassen (kein Browser-Blau) */
main a { color: var(--text); text-decoration: none; }
main a:hover { color: var(--orange); }
main .muted a, main a.muted { color: var(--muted); }
main .muted a:hover, main a.muted:hover { color: var(--orange); }

/* Responsive-Fixes: Felder duerfen ihr Raster nie sprengen */
.form-grid .field { min-width: 0; }
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.dok-karten { grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr)); }
.dok-karte { min-width: 0; }
.dok-karte .inhalt { min-width: 0; }
@media (max-width: 560px) {
  .dok-karte .thumb { width: 72px; }
  .listen-kopf { flex-wrap: wrap; }
  .listen-kopf #dokFilter { order: 3; max-width: none; flex-basis: 100%; }
}
.listen-kopf { flex-wrap: wrap; }
.dok-karte .kopf .titel { min-width: 0; }
.dok-karte .kopf .titel a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kopfzeile (Titel + Schlagwort-Filter) bleibt beim Scrollen stehen */
.listen-kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--line);
}

/* Karten-Formular: eigenes, einheitliches Raster (loest sich vom PM .form-grid,
   dessen Breakpoints und iOS-Sonderhoehen die Felder verspringen liessen) */
.karten-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; min-width: 0; }
.karten-form .kfeld { min-width: 0; }
.karten-form .kfeld.voll { grid-column: 1 / -1; }
.karten-form label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.karten-form input:not([type="checkbox"]):not([type="radio"]),
.karten-form select {
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  height: 34px; padding: 4px 8px; font-size: 13px; line-height: 1.4;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 0; outline: none; font-family: inherit;
}
.karten-form input[type="date"] { -webkit-appearance: none; appearance: none; }
.karten-form input:focus, .karten-form select:focus { border-color: var(--orange); }
.karten-form .teilen-zeile {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 12px; border: 1px dashed var(--line); padding: 6px 8px;
}
.karten-form .teilen-zeile select { width: auto; height: 28px; font-size: 12px; padding: 2px 6px; }
.karten-form .teilen-zeile label { display: inline-flex; gap: 4px; align-items: center;
  cursor: pointer; font-size: 12px; font-weight: 400; color: var(--text); margin: 0; }

/* iOS/Safari: native Blau-Toene und Sonderformen der Formularfelder abschalten */
.karten-form select {
  -webkit-appearance: none; appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}
.karten-form input, .karten-form select { color: var(--text) !important; }
.karten-form input[type="date"] { text-align: left; }
.karten-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="checkbox"] { accent-color: var(--orange); }

/* Struktursuche-Zeile: eigenes Raster, mehrzeilig auf schmalen Bildschirmen */
.struktur-zeile {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 10px;
  align-items: end;
  padding: 10px 0 2px;
  border-top: 1px dashed var(--line);
  margin-top: 8px;
}
.struktur-zeile[hidden] { display: none !important; }  /* hidden schlaegt das Grid */
.struktur-zeile .breit { grid-column: span 2; min-width: 0; }
.struktur-zeile > div { min-width: 0; }
.struktur-zeile label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--muted); margin-bottom: 3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.struktur-zeile input, .struktur-zeile select, .struktur-zeile button {
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  height: 34px; padding: 4px 8px; font-size: 13px; line-height: 1.4;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text) !important; border-radius: 0; outline: none; font-family: inherit;
}
.struktur-zeile select {
  -webkit-appearance: none; appearance: none;
  background-image: var(--chevron); background-repeat: no-repeat;
  background-position: right 8px center; padding-right: 28px;
}
.struktur-zeile input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
.struktur-zeile button { cursor: pointer; }
.struktur-zeile button:hover { border-color: var(--orange); }
@media (max-width: 560px) {
  .struktur-zeile .breit { grid-column: 1 / -1; }
}