/* ==========================================================
   PROJEKTSEITE ÔÇô schlanke, finale Seite-Styles
   Diese Datei MUSS als letzte CSS-Datei geladen werden.
   ========================================================== */

/* ---------- Hero: Titel LINKS, Breadcrumb RECHTS ---------- */
.project-page .project-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding-inline: var(--edge);
  margin:.28rem 0 .2rem;
}
.project-page .project-title{
  margin:.2rem 0;
  font-weight:800;
  color:#0b2f55;
  text-align:left;
}
.project-page .breadcrumb-nav-top{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0;
  color:#4a6a8c;
  font-size:.95rem;
}
@media (max-width:880px){
  .project-page .project-hero{ flex-direction:column; align-items:flex-start; }
}


/* ---------- Main: volle Breite, nur Seitenrand ---------- */
.project-page .project-main{
  width:100vw; max-width:none;
  padding-inline: var(--edge);
  margin:0;
}

/* ---------- Chat: Blocklayout (JS erstellt .chat-block) ---------- */
/* Au+ƒencontainer neutral halten */
.project-page .chat-container{ background:transparent; padding:0; box-shadow:none; }
.project-page .chat-inner{ padding:0; }

/* Der eigentliche Chat-Block */
.project-page .chat-block{
  width: var(--chat-block-w);
  height: var(--chat-viewport-h);         /* wird per JS gesetzt */
  margin: .10rem auto 2rem;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid #86d8f0; border-radius:14px;
  background: linear-gradient(180deg,#F6FAFF 0%, #F2F7FD 100%);
  box-shadow: 0 10px 36px rgba(3,32,66,.06);
}

/* Kinder im Block immer volle Blockbreite */
.project-page .chat-block > .chat-topbar,
.project-page .chat-block > .filebubble-row,
.project-page .chat-block > .chat-messages,
.project-page .chat-block > .chat-input-bar{
  width:100%; margin:0;
}

/* Topbar: Divider ++ber die komplette Breite */
.project-page .chat-topbar{
  background: transparent; color:#0a2c44;
  border:0; border-bottom:1px solid #D6E4F3;
  padding:.7rem 16px;
}
.project-page .chat-topbar-title strong{ color:#0b2941; font-weight:700; }

/* Datei-Pills */
.project-page .filebubble-row{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.35rem 16px .2rem; }
.project-page #fileBubbleRow > *{
  background:#eaf3ff; color:#0c2842; border:1px solid #cfe0f1;
  border-radius:10px; padding:.32rem .5rem; font-size:.88rem;
}

/* Verlauf: f++llt die ganze Blockbreite */
.project-page .chat-messages{
  flex:1 1 auto; overflow:auto;
  background: transparent; padding: 8px 12px 14px;
}

/* Bubbles wirklich 100% Breite */
.project-page .chat-messages .message,
.project-page .chat-messages .message .msg-body,
.project-page .chat-messages .message .bubble{
  display:block; width:100%; max-width:none; box-sizing:border-box;
}
.project-page .chat-messages .message{ margin:.5rem 0; border-radius:12px; padding:.9rem 1rem; }
.project-page .chat-messages .message.user     { background:#E6F3FF;    color:#0a2c44; }
.project-page .chat-messages .message.assistant{ background:#FFFFFFF2;  color:#0a2538; }
.project-page .chat-messages .message.assistant pre,
.project-page .chat-messages .message.assistant code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background:#f6f8fb; color:#0a2538; border:1px solid #dbe6f3; border-radius:8px; padding:.45rem .55rem;
}

.project-page .chat-messages .message .msg-header{
  display:flex;
  align-items:center;
  gap:.55rem;
  width:100%;
  justify-content:flex-start;
}

.project-page .chat-messages .message .msg-header .copy-btn{
  margin-left:auto;
  margin-right:-0.02rem;
  margin-top:0.02rem;
  width:1.55rem;
  height:1.55rem;
  border: none;
  border-radius: 999px;
  background: rgba(16, 58, 114, 0.08);
  color: #0f366e;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.project-page .chat-messages .message .msg-header .copy-btn:hover{
  background: rgba(16, 58, 114, 0.16);
  color:#08284e;
}

.project-page .chat-messages .message .msg-header .copy-btn .material-icons{
  font-size: 1rem;
  line-height: 1;
}

/* Helle, gut sichtbare Scrollbar */
.project-page .chat-messages{ scrollbar-width: thin; scrollbar-color:#BFD2E6 #F3F7FC; }
.project-page .chat-messages::-webkit-scrollbar{ width:10px; height:10px; }
.project-page .chat-messages::-webkit-scrollbar-thumb{ background:#BFD2E6; border-radius:8px; border:2px solid #F3F7FC; }
.project-page .chat-messages::-webkit-scrollbar-track{ background:#F3F7FC; border-radius:8px; }

/* Eingabebereich: wie ChatGPT ÔÇô schmaler, zentriert, Buttons im Feld */
.project-page .chat-input-bar{ background:transparent; padding:10px 0 14px; }
.project-page .chat-input-wrap{
  position:relative;
  margin:0 auto;
  background:#fff; border:1px solid #C8DBEE; border-radius:12px;
  padding:12px 12px;
  box-shadow: 0 4px 20px rgba(10,40,70,.06);
}
.project-page #chatInput{
  width:100%; min-height:44px; max-height: calc(var(--chat-viewport-h) * .4);
  padding: 12px 116px 12px 48px;          /* Platz f++r Upload/Mic/Senden */
  background:transparent; border:0; outline:0;
  color:#0f172a; line-height:1.45; resize:none; overflow:auto;
}
.project-page .upload-inside{
  position:absolute; left:8px; bottom:8px;
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:8px; border:1px solid #C8DBEE; background:#0F2A3A0F; color:#1d4767;
}
.project-page .input-actions-right{
  position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:.45rem;
}
.project-page .input-actions-right .btn-icon{
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:8px; border:1px solid #C8DBEE; background:#0F2A3A0F; color:#1d4767;
}
.project-page .input-actions-right .btn-primary{
  height:32px; padding:0 .85rem; border-radius:10px; font-weight:700;
  background:#009EE1; border:1px solid #0a9edc; color:#fff; opacity:1;
}


/* ===== Projektseite ÔÇô Layout Fix v2 (zentrierter Chat, Details links, kein Overflow) ===== */

.project-page{
  --edge: 2rem;                                   /* gleiche Edge wie Header-Icons */
  --chat-block-w: clamp(860px, 76vw, 1280px);     /* Ôëê 70ÔÇô80% Bildschirmbreite */
}

/* 1) Main nie als 100vw (verursacht Horizontal-Scroll/Shift), sondern 100% */
.project-page .project-main{
  width: 100% !important;
  max-width: none;
  padding-inline: clamp(12px, 2.2vw, 28px);
  margin: 0 auto;
  display: block;                                  /* Basismodus: einspaltig */
}

/* 2) Details-Box: im eingeklappten Zustand komplett aus dem Flow */
.project-page .projekt-info-box.is-collapsed{
  display: none !important;                        /* statt nur max-height:0/opactity:0 */
}

/* 3) Wenn Details ge+Âffnet sind ÔåÆ 2 Spalten (links Details, rechts Chat)  */
/* Variante A: rein per CSS (moderne Browser unterst++tzen :has) */
.project-page .project-main:has(.projekt-info-box:not(.is-collapsed)){
  display: grid;
  grid-template-columns: min(360px, 26vw) 1fr;
  column-gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
/* Variante B (Fallback): wenn JS die Klasse .details-open setzt */
body.details-open .project-main{
  display: grid;
  grid-template-columns: min(360px, 26vw) 1fr;
  column-gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

/* Details-Karte links, Chat rechts ÔÇô ohne zus+ñtzliche Abst+ñnde oben */
.project-page .projekt-info-box{ margin: 0; }
.project-page .details-toggle{ margin: .25rem 0 .6rem; } /* bleibt unter der H1 */

/* 4) Chatbox zentriert, 70ÔÇô80% breit; keine vw-Berechnungen mehr */
.project-page .chat-container{
  width: var(--chat-block-w) !important;
  max-width: 1280px !important;
  margin: 0 auto 2rem !important;
  overflow: hidden;
}

/* 5) Chat-Innenleben: Verlauf volle Breite, Eingabe separat schmal m+Âglich */
.project-page .chat-inner{ display:flex; flex-direction:column; height: var(--chat-viewport-h); }
.project-page .chat-messages{ width: 100% !important; }

/* (Optional) Divider ++ber volle Breite der Chatbox */
.project-page .chat-topbar{
  border-bottom: 1px solid #D6E4F3 !important;
}

/* 6) Sicherheitsnetz: s+ñmtliche 100vw-Setzungen auf dieser Seite neutralisieren */
.project-page .project-main.project-wide{ width: 100% !important; } /* ++berstimmt style.css */


/* 1. Breadcrumb-Navigation rechtsb++ndig neben dem Projekttitel */
.project-hero {
  display: flex !important;               /* Titel und Breadcrumb in einer Zeile */
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
  padding: 0 var(--edge);
  margin: .4rem 0 .25rem 0;
}
.project-hero .project-title {
  /* +£berschreibt zentrierte Ausrichtung aus alten Styles */
  text-align: left !important;
  color: #0B2F55;
  font-weight: 800;
  margin: .2rem 0 !important;
}
.project-hero .breadcrumb-nav-top {
  margin: 0 !important;                  /* entfernt evtl. zentrierende Margins */
  font-size: .95rem;
  color: #4a6a8c;
}

/* 2. Chatbox zentriert und mit 70ÔÇô80% Seitenbreite (bleibt stabil bei Detailanzeige) */
.project-page .chat-container {
  width: 75% !important;                 /* nutzt ca. 75% der Seite */
  max-width: 1200px;
  margin: 0 auto;                        /* zentriert die Chatbox im Viewport */
  background: transparent !important;    /* entfernt evtl. vorhandenen Hintergrund/Rahmen */
  border: none !important;
  box-shadow: none !important;
  position: relative;                    /* Bezugspunkt f++r absolut positionierte Detailbox */
}
.project-page .chat-inner {
  padding: 0 !important;                /* kein Innenabstand, damit Inhalt bis an Rand reicht */
}

/* 3. Projekt-Details-Box ausgeblendet und neben Chatbox positioniert */
.projekt-info-box.is-collapsed {
  display: none !important;             /* vollst+ñndig ausgeblendet, keine Leerfl+ñche */
}


/* CPV-Codes einspaltig (jede Chip in eigener Zeile) */
.projekt-cpv-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.projekt-cpv-row #projektCPV {
  display: block;
}
.projekt-cpv-row .cpv-chip {
  display: block;
  width: 100%;
  margin-right: 0;
}
.projekt-cpv-row #btnEditCPV {
  margin-top: .5em;
}


/* ===== Projektseite ÔÇô Hard Fix (Breadcrumb oben, Chat zentriert, kein Abschneiden) ===== */

/* A) Main nie breiter als die Inhaltsbox; keinerlei horizontales +£berlaufen */
body.project-page{ overflow-x: hidden; }  /* Sicherheit gegen Rest++berl+ñufe */
.project-page .project-main{
  width: 100% !important;            /* ++berschreibt 100vw aus VA-Design */
  max-width: 1600px;
  margin: 0 auto;
  padding-inline: clamp(12px, 2vw, 28px);
  position: relative;
}

/* B) Projekt-Hero: Titel links/zentriert, Breadcrumb rechts ÔÇô direkt unterm Header */
.project-page .project-hero{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 0 clamp(12px, 2vw, 28px) !important;
  margin: .35rem 0 .2rem !important;
}
.project-page .project-title{ margin:.2rem 0 !important; font-weight:800; color:#0B2F55; }
.project-page .breadcrumb-nav-top{ margin:0 !important; font-size:.95rem; color:#4a6a8c; }

/* C) Chatbox: zentriert, ca. 70ÔÇô80% der Seite ÔÇô ohne vw, daher kein Abschneiden */
.project-page .chat-container{
  width: clamp(680px, 76%, 1280px) !important;  /* % bezieht sich auf Main-Inhalt, nicht auf Viewport */
  margin: 0 auto 2rem !important;
  background: transparent !important;
  border: 1px solid #86d8f0;
  border-radius: 14px;
  box-shadow: 0 10px 36px rgba(3,32,66,.06);
  padding: 0;
}


/* D) Headerzeile + Nachrichtenbereich sollen bis an die Chatbox-R+ñnder gehen */
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages{
  width: 100% !important;
  margin: 0 !important;
}

/* Topbar mit durchlaufendem Divider */
.project-page .chat-topbar{
  background: #F4F9FF;
  color:#0B2941;
  border:0; border-bottom:1px solid #D6E4F3;
  border-radius: 14px 14px 0 0;
  padding: .7rem 16px;
}

/* Datei-Pills optional kompakt */
.project-page .filebubble-row{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.35rem 12px .25rem; }
.project-page #fileBubbleRow > *{
  background:#eaf3ff; color:#0c2842; border:1px solid #cfe0f1;
  border-radius:10px; padding:.32rem .5rem; font-size:.9rem;
}

/* E) Nachrichten-Bubbles wirklich ++ber die volle Breite der Chatbox */
.project-page .chat-messages{
  flex:1 1 auto; overflow:auto;
  background: #fff0;                 /* transparenter Verlaufshintergrund */
  padding: 10px 12px 14px;
  scrollbar-width: thin; scrollbar-color:#BFD2E6 #F3F7FC;
}
.project-page .chat-messages::-webkit-scrollbar{ width:10px; height:10px; }
.project-page .chat-messages::-webkit-scrollbar-thumb{ background:#BFD2E6; border-radius:8px; border:2px solid #F3F7FC; }
.project-page .chat-messages::-webkit-scrollbar-track{ background:#F3F7FC; border-radius:8px; }

.project-page .chat-messages .message,
.project-page .chat-messages .message .msg-body,
.project-page .chat-messages .message .bubble{
  width: 100% !important;
  max-width: none !important;          /* hebelt evtl. 80%-Max aus style.css aus */
  box-sizing: border-box;
}
.project-page .chat-messages .message{ margin:.5rem 0; border-radius:12px; padding:.9rem 1rem; }
.project-page .chat-messages .message.user{ background:#E6F3FF; color:#0a2c44; }
.project-page .chat-messages .message.assistant{ background:#FFFFFFF2; color:#0a2538; }

.project-page .upload-inside{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #DBE6F3; border-radius:10px; background:transparent; color:#476887;
}
.project-page .input-actions-right{
  display:flex; align-items:center; gap:.5rem;
}
.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary{
  height:36px; display:inline-flex; align-items:center; justify-content:center;
}

/* G) Kill-Switch gegen vw-basierte Innenbreiten aus VA-Design */
body.project-page{ --chat-inner-w: min(1200px, 100%) !important; }
.project-page .chat-inner > *{ width: 100% !important; }


/* ===== Projektseite: Chat 80% breit, Topbar & Chat-Inhalt randb++ndig, Breadcrumb oben ===== */

/* A) Main ohne 100vw (verhindert horizontales Ruckeln), Inhalt mittig */
body.project-page { overflow-x: hidden; }
.project-page .project-main {
  width: 100% !important;
  max-width: 1600px;
  margin: 0 auto;
  padding-inline: clamp(12px, 2vw, 28px);
}

/* B) Breadcrumb und H1 kompakt oben auf eine Linie */
.project-page .project-hero{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1rem !important;
  padding:0 clamp(12px, 2vw, 28px) !important;
  margin:.35rem 0 .2rem !important;
}
.project-page .project-title{
  margin:.2rem 0 !important; font-weight:800; color:#0B2F55;
}
.project-page .breadcrumb-nav-top{
  margin:0 !important; font-size:.95rem; color:#4a6a8c;
}

/* C) Chat-Box: Ôëê80% Seitenbreite (Desktop), mittig; mobil automatisch 100% */
.project-page{
  --chat-block-w: clamp(860px, 80vw, 1280px);
}
.project-page .chat-container{
  width: var(--chat-block-w) !important;
  max-width: 1280px !important;
  margin: 0 auto 2rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: hidden;
}

/* D) Topbar & Nachrichten gehen bis an die Chat-Box-R+ñnder */
.project-page .chat-inner{ display:flex; flex-direction:column; height: var(--chat-viewport-h); }
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages{
  width: 100% !important;
  margin: 0 !important;
}

/* E) Topbar-Layout: Titel/Info links, Aktionen rechts */
.project-page .chat-topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:#F4F9FF; color:#0B2941;
  border:0; border-bottom:1px solid #D6E4F3; /* durchlaufender Divider */
  padding:.7rem 16px;
}
.project-page .chat-topbar-title{ display:flex; align-items:center; gap:.5rem; }
.project-page .chat-topbar-actions{ display:flex; align-items:center; gap:.5rem; margin-left:auto; }

/* F) Nachrichtenbereich randb++ndig (volle Chat-Box-Breite) */
.project-page .chat-messages{
  flex:1 1 auto; overflow:auto;
  padding: 10px 12px 14px;
}



/* ===== Eingabezeile: 1-Zeile im Leerlauf, komplett umrahmt, Inhalte b++ndig ===== */
.project-page .chat-input-wrap{
  display: flex !important;
  align-items: center !important;         /* Placeholder & Buttons auf einer H+Âhe */
  gap: .5rem !important;
  background: #fff !important;
  border: 1px solid #C8DBEE !important;   /* VOLLER Rahmen inkl. oben */
  border-radius: 12px !important;         /* keine offenen Ecken */
  padding: 6px 8px !important;
}

.project-page .upload-inside{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border: 1px solid #DBE6F3; border-radius:10px; background:transparent; color:#476887;
}

.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary{
  height:36px !important;                 /* gleiche optische Linie */
  display:inline-flex; align-items:center; justify-content:center;
}

.project-page #chatInput{
  flex:1 1 auto;
  border:0; outline:0; background:transparent;
  padding:0 !important; margin:0 !important;
  resize:none; line-height:1.35;
  min-height:0 !important;                /* H+Âhe steuert JS (36px leer, w+ñchst beim Tippen) */
}

/* ===== Projekttitel mittig, Breadcrumb rechts ===== */
.project-page .project-hero{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr !important; /* [frei] [Titel] [Breadcrumb] */
  align-items:end !important; gap:.6rem !important;
  padding-inline: var(--edge) !important;
  margin: .18rem 0 .10rem !important;
}
.project-page .project-title{
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
  margin:.2rem 0 !important; font-weight:800; color:#0B2F55;
}
.project-page .breadcrumb-nav-top{
  grid-column: 3 !important;
  justify-self: end !important;
  margin:0 !important; font-size:.95rem; color:#4a6a8c;
}


/* ===== CHAT: A4-Style ÔÇô zentrierte Spalte wie Word/ChatGPT ===== */
.project-page{
  /* ÔÇ×TextbreiteÔÇ£ einer A4-Seite in Word ~ 160 mm (A4 210 mm ÔÇô 2+ù25 mm Rand) */
  --a4-text-w: 160mm;
  /* sichere, responsive Zielbreite: nicht gr+Â+ƒer als A4, auf kleineren Screens schrumpfen */
  --page-w: min(calc(100vw - 32px), var(--a4-text-w));
  --page-radius: 14px;
  --page-border: 1px solid #D6E4F3;
  --page-bg: #fff;
  --msg-font: .95rem;        /* etwas kleiner, damitÔÇÖs leichter wirkt */
}

/* Container darf vollbreit sein ÔÇô die eigentliche Box ist .chat-block */
.project-page .chat-container{
  width: 100% !important;
  margin: 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Eine Box in Spaltenbreite, die alles umfasst (Topbar, Verlauf, Eingabe) */
.project-page .chat-block{
  width: var(--page-w) !important;
  margin: .25rem auto 2rem !important;
  height: var(--chat-viewport-h);            /* wird von JS gesetzt */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--page-bg);
  border: var(--page-border);
  border-radius: var(--page-radius);
  box-shadow: 0 10px 36px rgba(3,32,66,.06);
}

/* Alle Teile f++llen exakt die Boxbreite */
.project-page .chat-block > .chat-topbar,
.project-page .chat-block > .filebubble-row,
.project-page .chat-block > .chat-messages,
.project-page .chat-block > .chat-input-bar{
  width: 100% !important; margin: 0 !important;
}

/* Topbar: Titel links, Aktionen rechts ÔÇô b++ndig in der A4-Spalte */
.project-page .chat-topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:#F4F9FF; color:#0B2941;
  border-bottom: var(--page-border);
  padding: .7rem 16px;
}

.project-page .chat-messages .message,
.project-page .chat-messages .message .bubble{
  width:100% !important; max-width:none !important; box-sizing:border-box;
}
.project-page .chat-messages .message{ margin:.55rem 0; border-radius:12px; padding:.9rem 1rem; }
.project-page .chat-messages .message.user{ background:#E6F3FF; color:#0A2C44; }
.project-page .chat-messages .message.assistant{ background:#FFFFFFF2; color:#0A2538; }

/* Datei-Pills direkt oberhalb der Eingabe, b++ndig */
.project-page .filebubble-row{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.35rem 12px .25rem; }

/* Eingabezeile: EIN Rahmen, Buttons & Placeholder in EINER Linie (1 Zeile leer) */
.project-page .chat-input-bar{
  background:#F7FBFF; border-top: var(--page-border);
  padding: .55rem 12px .7rem;
}
.project-page .chat-input-wrap{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid #C8DBEE; border-radius:12px;
  padding: 6px 8px;
}
.project-page .upload-inside{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #DBE6F3; border-radius:10px; background:transparent; color:#476887;
}
.project-page #chatInput{
  flex:1 1 auto; border:0; outline:0; background:transparent;
  padding:0 !important; margin:0 !important; resize:none;
  /* 1 Zeile im Leerlauf, w+ñchst per JS (siehe chat-ux.js Block unten) */
  line-height: 1.35; min-height: 0 !important; font-size: var(--msg-font);
}
.project-page .input-actions-right{ display:flex; align-items:center; gap:.45rem; }
.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary{
  height:36px !important; display:inline-flex; align-items:center; justify-content:center;
}

/* Hero-Zeile (+£berschrift links, Breadcrumb/Buttons rechts) bleibt b++ndig */
.project-page .project-hero{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  padding: 0 16px !important; margin: .28rem 0 .2rem !important;
}


/* Statt 160mm: ~72ch (lesefreundliche Spaltenbreite) */
.project-page{ --page-w: clamp(640px, 72ch, 920px); }


/* =========================
   LEFT DETAILS RAIL + HERO FIX + STABILER CHAT
   (f++ge diesen Block ganz ans Ende der projekt.css ein)
   ========================= */

/* Basis-Variablen (Abst+ñnde wie Burger, A4-Innenbreite bleibt) */
body.project-page{
  --edge: clamp(12px, 2vw, 28px);
  --header-h: 64px;                     /* wird durch JS genau gesetzt */
  --left-rail-w: clamp(240px, 22vw, 320px);
  --a4-text-w: 160mm;                   /* A4-Innenbreite (Textspalte) */
  --page-w: min(calc(100vw - 32px), var(--a4-text-w));
}

/* ---------- HERO: Titel links, Breadcrumb RECHTS (hart ++bersteuern) ---------- */
body.project-page .project-hero{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: .75rem !important;
  padding: 0 var(--edge) !important;
  margin: .4rem 0 .25rem !important;
}
body.project-page .project-title{
  text-align:left !important;
  margin:.2rem 0 !important;
  font-weight:800; color:#0B2F55;
}
body.project-page .breadcrumb-nav-top{
  margin-left:auto !important;          /* zwingt sie nach rechts */
  justify-self:auto !important;
  text-align:right !important;
  font-size:.95rem; color:#4a6a8c;
}

/* ---------- CHAT: Block ++ber volle Main-Breite, Inhalte A4-zentriert ---------- */
body.project-page .chat-block{
  width:100% !important;                /* Chat-Block deckt Main voll ab */
  margin: .25rem auto 1.25rem !important;
  border-radius:14px; overflow:clip;
}
body.project-page .chat-block > .chat-topbar,
body.project-page .chat-block > .filebubble-row,
body.project-page .chat-block > .chat-messages,
body.project-page .chat-block > .chat-input-bar{
  max-width: var(--page-w) !important;  /* Innen immer A4-Spaltenbreite */
  margin-inline: auto !important;
}

/* ---------- DETAILS: fixe Leiste im Burger-Gap (++berlappt, verschiebt NICHT) ---------- */
body.project-page .details-toggle{
  position: fixed;
  top: calc(var(--header-h) + 10px);
  left: var(--edge);
  z-index: 61;
  font-size: .9rem;                     /* klein, f++llt den linken Zwischenraum */
  line-height: 1; color:#1f4361;
  background: #fff;
  border: 1px solid #DBE6F3; border-radius: 10px;
  padding: .4rem .6rem;
  box-shadow: 0 4px 16px rgba(10,40,70,.06);
  cursor: pointer;
}

body.project-page .projekt-info-box{
  position: fixed;                      /* unabh+ñngig vom Flow ÔåÆ Chat bleibt */
  top: calc(var(--header-h) + 10px);
  left: var(--edge);
  width: var(--left-rail-w);
  max-height: calc(100vh - var(--header-h) - 20px);
  overflow: auto;
  z-index: 60;
  background: #ffffff;
  border: 1px solid #DBE6F3; border-radius: 12px;
  box-shadow: 0 10px 28px rgba(10,40,70,.12);
  padding: .8rem .9rem;
  font-size: .9rem;                     /* bewusst kleiner als Chat */
  transform: translateX(calc(-100% - 14px));
  opacity: 0; pointer-events: none;
  transition: transform .28s ease, opacity .18s ease;
}

/* Offen-Zustand: via body.details-open */
body.details-open .projekt-info-box{
  transform: translateX(0);
  opacity: 1; pointer-events: auto;
}

/* Schlie+ƒen-Button in der Box (rechts oben) */
body.project-page .projekt-info-box .panel-close{
  position: sticky; top: -0.4rem;
  display: inline-flex; justify-content:center; align-items:center;
  float: right;
  width: 28px; height: 28px;
  margin: -4px -4px 4px 8px;
  border: 1px solid #DBE6F3; border-radius: 8px;
  background: #f7fbff;
  cursor: pointer;
}

/* Wenn die Box ausgeblendet ist (alte Klasse), zus+ñtzlich hard-hide */
body.project-page .projekt-info-box.is-collapsed{
  transform: translateX(calc(-100% - 14px)) !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* Inhaltspolish f++r die Details (Chips etc.) */
body.project-page .projekt-info-box .projekt-cpv-row{
  display:flex; flex-direction:column; gap:.35rem;
}

/* ---------- SCROLL-POLISH f++r Chat (bleibt unver+ñndert in Position) ---------- */
body.project-page .chat-messages{
  scrollbar-width: thin; scrollbar-color:#BFD2E6 #F3F7FC;
}
body.project-page .chat-messages::-webkit-scrollbar{ width:10px; height:10px; }
body.project-page .chat-messages::-webkit-scrollbar-thumb{ background:#BFD2E6; border-radius:8px; border:2px solid #F3F7FC; }
body.project-page .chat-messages::-webkit-scrollbar-track{ background:#F3F7FC; border-radius:8px; }


/* ========== Breadcrumb in den Header ========== */
.project-page header .breadcrumb-in-header{
  position:absolute;
  right: 11.5rem;            /* Platz f++r Account-Button */
  top:   1.05rem;
  display:flex; align-items:center; gap:.35rem;
  font-size:.88rem; color:#4a6a8c; white-space:nowrap;
}
.project-page header .breadcrumb-in-header a{ color:#4a6a8c; text-decoration:none; }
.project-page header .breadcrumb-in-header a:hover{ color:#176fa6; text-decoration:underline; }
@media (max-width: 920px){
  .project-page header .breadcrumb-in-header{ right: 10.5rem; font-size:.84rem; }
}
@media (max-width: 640px){
  .project-page header .breadcrumb-in-header{ display:none; } /* auf sehr schmalen Screens ausblenden */
}

/* Alte Breadcrumb-Leiste im Hero ausblenden (falls im Markup noch vorhanden) */
.project-page .project-hero .breadcrumb-nav-top{ display:none !important; }

/* ========== Hero kompakter & Titel links ========== */
.project-page .project-hero{
  display:grid; grid-template-columns: 1fr;
  align-items:end; gap:.4rem;
  padding-inline: var(--edge);
  margin: .18rem 0 .10rem;               /* sehr dichter Abstand */
}
.project-page .project-title{
  grid-column:1; justify-self:start;
  margin:.2rem 0; font-weight:800; color:#0b2f55;
}

/* ========== Zwei-Spalten-Layout: links Details, rechts Chat ========== */
.project-page .project-main{
  width:100% !important; max-width:none;
  padding-inline: clamp(12px, 2.2vw, 28px); margin:0 auto;
}
.project-page .project-main:has(#projektInfoBox){
  display:grid;
  grid-template-columns: minmax(220px, 300px) 1fr; /* schmale linke Spalte */
  column-gap: clamp(16px, 2vw, 24px);
  align-items:start;
}

/* Detailkarte links b++ndig */
#projektInfoBox{ margin:0; }

/* CPV-Codes untereinander, nicht als breite Zeile */
#projektCPV{
  display:grid; grid-auto-rows:min-content; gap:.25rem; justify-items:start;
}
#projektCPV .cpv-chip{
  display:block; padding:.22rem .5rem;
  background:#eaf3ff; color:#0c2842; border:1px solid #cfe0f1; border-radius:8px;
}

/* ========== Chatblock: zentriert, fixe Breite & H+Âhe ========== */
.project-page{
  --chat-block-w: clamp(860px, 76vw, 1280px);
}
.project-page .chat-container{ background:transparent; padding:0; box-shadow:none; }
.project-page .chat-inner{ padding:0; }

/* zusammenh+ñngender Rahmen/Surface (wird in JS als .chat-block gewrappt) */
.project-page .chat-block{
  width: 100%;
  height: 100%;   /* H+Âhe wird via JS gesetzt */
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid #86d8f0; border-radius:14px;
  background: linear-gradient(180deg,#F6FAFF 0%, #F2F7FD 100%);
  box-shadow: 0 10px 36px rgba(3,32,66,.06);
}

/* Kinder immer volle Breite */
.project-page .chat-block > .chat-topbar,
.project-page .chat-block > .filebubble-row,
.project-page .chat-block > .chat-messages,
.project-page .chat-block > .chat-input-bar{ width:100%; margin:0; }

/* Topbar, Verlauf, Eingabe ÔÇô bestehende Stile bleiben */


/* ======================================================================
   Projektseite ÔÇô Chat rechts (Ôëê60%), Titel+Details links, Chat sticky/fullheight
   Paste am ENDE von css/projekt.css
   ====================================================================== */

.project-page {
  --edge: 2rem;
  --gap: clamp(10px, 1.6vw, 20px);         /* Seitenabstand/Spaltenabstand */
  --stick-bottom: clamp(10px, 1.6vw, 20px); /* schmaler Rand unten */
  /* --header-h wird per JS gesetzt; Fallback 72px */
  --header-h: 72px;
  --stick-top: calc(var(--header-h) + var(--gap));  /* Abstand unter Header */
}

/* Gesamtlayout: 2 Spalten ÔÇô links Meta, rechts Chat (~60% Viewport) */
.project-page .project-main {
  width: 100%;
  max-width: none;
  padding-inline: var(--edge);
  margin: 0 auto;
}

.project-page .project-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) min(60vw, 980px);
  align-items: start;
  gap: var(--gap);
}

/* Breadcrumb-Hero bleibt flach oben dr++ber */
.project-page .project-hero {
  margin: .35rem 0 .2rem;
  padding-inline: var(--edge);
}

/* Linke Spalte: Titel + Details f++llen den linken Bereich */
.project-page .project-left {
  display: block;
}
.project-page .project-left .project-title {
  text-align: left !important;
  margin: .2rem 0 .5rem 0;
}

/* Rechte Spalte: Chat ist sticky und hat durchgehende H+Âhe */
.project-page .project-chat {
  position: relative;
}

/* Container & Block: volle Spaltenbreite, sticky */
.project-page .project-chat .chat-container,
.project-page .project-chat .chat-block {
  position: sticky;
  top: var(--stick-top);
  height: calc(100dvh - var(--stick-top) - var(--stick-bottom));
  margin: 0;                /* kein zus+ñtzlicher Au+ƒenabstand */
  max-width: none !important;
  width: 100% !important;   /* f++llt rechte Spalte */
  overflow: hidden;
}

/* Innenleben: Spaltenbreite = 100% und vertikal flexen */
.project-page .project-chat .chat-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
}

/* Einheitliche Breite f++r Topbar/Verlauf/Input (100%) */
.project-page .project-chat .chat-inner > .chat-topbar,
.project-page .project-chat .chat-inner > .chat-messages,
.project-page .project-chat .chat-inner > .chat-input-bar {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Verlauf nimmt den Platz dazwischen ein, h++bsche Scrollbar bleibt */
.project-page .project-chat .chat-messages {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  overflow: auto !important;
}


/* Eingabefeld kompakt; Buttons innen, Rahmen komplett */
.project-page .project-chat .chat-input-wrap {
  position: relative !important;
  background: #F2F7FD !important;
  border: 1px solid #D6E4F3 !important;
  border-top: 1px solid #D6E4F3 !important;
  border-radius: 0 0 14px 14px !important;
  padding: .45rem .6rem !important;
  width: 100%;
}
.project-page .project-chat #chatInput {
  width: 100% !important;
  min-height: 44px !important;
  max-height: 40vh !important;
  resize: none !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  padding: 12px 108px 12px 46px !important; /* Platz f++r Upload + Buttons */
}

/* Sicher ++berstimmen, was in va-design.css fr++here 80%-Breite setzt */
.project-page .project-chat .chat-inner > .chat-topbar,
.project-page .project-chat .chat-inner > .chat-messages,
.project-page .project-chat .chat-inner > .chat-input-bar {
  width: 100% !important;
}

/* Datei-Bubbles direkt ++ber der Eingabe, aber innerhalb des Chat-Blocks */
.project-page .project-chat .filebubble-row {
  margin: .35rem 0 .45rem 0 !important;
}

/* Mobile: untereinander, Chat dann volle Breite */
@media (max-width: 1100px) {
  .project-page .project-layout {
    grid-template-columns: 1fr;
  }
  .project-page .project-chat .chat-container,
  .project-page .project-chat .chat-block {
    top: calc(var(--header-h) + 8px);
    height: calc(100dvh - (var(--header-h) + 8px) - var(--stick-bottom));
  }
}


/* ==========================================================
   PROJEKTSEITE ÔÇô kompaktes, stabiles 2-Spalten-Layout
   (Chat Ôëê 60% Breite, sticky & fullheight; Details links b++ndig)
   Diese Datei SOLL als letzte CSS-Datei geladen werden.
   ========================================================== */

.project-page{
  --edge: clamp(12px, 2vw, 28px);
  --header-h: 72px;                 /* wird von JS pr+ñzisiert */
  --stick-bottom: clamp(10px, 1.6vw, 20px); /* schmaler Abstand vor Footer */
}

/* ------- Main: 2 Spalten ÔÇô links Meta, rechts Chat (Ôëê60% Seite) ------- */
.project-page .project-main{
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-inline: var(--edge);
}

.project-page .project-layout{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) min(60vw, 980px);
  align-items: start;
  gap: clamp(14px, 2vw, 24px);
}

@media (max-width: 1100px){
  .project-page .project-layout{ grid-template-columns: 1fr; }
}

/* ------- Linke Spalte: Titel + Details b++ndig ------ */
.project-page .project-left .project-title{
  margin: .2rem 0 .55rem 0;
  font-weight: 800;
  color: #0B2F55;
  text-align: left;
}
.details-toggle{
  margin: 0 0 .6rem;
}

/* Detailskarte */
.projekt-info-box{
  background: #fff;
  border: 1px solid #DBE6F3;
  border-radius: 12px;
  padding: .8rem .9rem;
  box-shadow: 0 8px 26px rgba(10,40,70,.08);
}
.projekt-info-box.is-collapsed{ display:none !important; }

/* ------- Rechte Spalte: Chat ÔÇô sticky, volle H+Âhe ------ */
.project-page .project-chat{ position: relative; }

.project-page .project-chat .chat-container{
  position: sticky;
  top: calc(var(--header-h) + clamp(10px, 1.6vw, 20px));
  height: calc(100dvh - (var(--header-h) + clamp(10px, 1.6vw, 20px)) - var(--stick-bottom));
  width: 100%;
  margin: 0;
  border: 1px solid #86d8f0;
  border-radius: 14px;
  background: linear-gradient(180deg,#F6FAFF 0%, #F2F7FD 100%);
  box-shadow: 0 10px 36px rgba(3,32,66,.06);
  overflow: hidden;                 /* nur der Verlauf scrollt */
}

/* Innenleben: alle Elemente gleiche Breite */
.project-page .chat-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.project-page .chat-topbar,
.project-page .chat-messages,
.project-page .chat-input-bar{ width: 100%; margin: 0; }

/* Topbar oben, Divider */
.project-page .chat-topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:#F4F9FF; color:#0B2941;
  border-bottom: 1px solid #D6E4F3;
  padding: .7rem 16px;
}

/* Verlauf f++llt restliche H+Âhe */
.project-page .chat-messages{
  flex: 1 1 auto;
  min-height: 160px;
  overflow: auto;
  padding: 10px 12px 14px;
  background:#F7FBFF;
  scrollbar-width: thin; scrollbar-color:#BFD2E6 #F3F7FC;
}
.project-page .chat-messages::-webkit-scrollbar{ width:10px; height:10px; }
.project-page .chat-messages::-webkit-scrollbar-thumb{ background:#BFD2E6; border-radius:8px; border:2px solid #F3F7FC; }
.project-page .chat-messages::-webkit-scrollbar-track{ background:#F3F7FC; border-radius:8px; }

/* Bubbles vollbreit innerhalb des Verlaufs */
.project-page .chat-messages .message,
.project-page .chat-messages .message .msg-body,
.project-page .chat-messages .message .bubble{
  display:block; width:100%; max-width:none; box-sizing:border-box;
}
.project-page .chat-messages .message{ margin:.5rem 0; border-radius:12px; padding:.9rem 1rem; }
.project-page .chat-messages .message.user{ background:#E6F3FF; color:#0a2c44; }
.project-page .chat-messages .message.assistant{ background:#FFFFFFF2; color:#0a2538; }

/* Eingabe unten; gleiche Breite wie Topbar/Verlauf */
.project-page .chat-input-bar{
  background:#F7FBFF;
  border-top: 1px solid #D6E4F3;
  padding: .55rem 12px .7rem;
}
.project-page .chat-input-wrap{
  display:flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid #C8DBEE; border-radius:12px;
  padding: 6px 8px;
}
.project-page .upload-inside{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #DBE6F3; border-radius:10px; background:transparent; color:#476887;
}
.project-page #chatInput{
  flex:1 1 auto; border:0; outline:0; background:transparent;
  padding:0 !important; margin:0 !important; resize:none; line-height:1.35;
  min-height:0 !important;   /* Autogrow ++bernimmt die H+Âhe */
}
.project-page .input-actions-right{ display:flex; align-items:center; gap:.45rem; }
.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary{
  height:36px; display:inline-flex; align-items:center; justify-content:center;
}

/* Feinheiten */
#projektCPV .cpv-chip{
  display:inline-block; padding:.22rem .5rem; margin:.15rem .25rem .15rem 0;
  background:#eaf3ff; color:#0c2842; border:1px solid #cfe0f1; border-radius:8px;
}


/* === Abst+ñnde/Variablen: identischer Rand wie Burger (2rem) === */
.project-page{
  --edge: 2rem;
  --top-gap: clamp(6px, 0.8vw, 12px);      /* schmaler Abstand unter Header */
  --bottom-gap: clamp(6px, 0.8vw, 12px);   /* schmaler Abstand vor Footer */
  --header-h: 72px;                        /* wird per JS gesetzt */
  --left-w: clamp(360px, 28vw, 520px);     /* fixe linke Spalte -> Chat r++ckt mehr zur Mitte */
}

/* Main-Container mittig */
.project-page .project-main{
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-inline: var(--edge);
}

/* 2 Spalten: links Titel+Details (fix), rechts Chat (~60% wie ChatGPT) */
.project-page .project-layout{
  display: grid;
  grid-template-columns: var(--left-w) min(60vw, 980px);
  align-items: start;
  gap: clamp(12px, 1.6vw, 20px);
}

@media (max-width: 1100px){
  .project-page .project-layout{ grid-template-columns: 1fr; }
}

/* Titel linksb++ndig ÔÇô b++ndig mit Burger */
.project-page .project-left .project-title{
  margin: .2rem 0 .6rem 0;
  text-align: left;
}

/* Details-Card immer sichtbar (kein Toggle mehr) */
.projekt-info-box{
  display: block !important;
  background: #fff;
  border: 1px solid #DBE6F3;
  border-radius: 12px;
  padding: .8rem .9rem;
  box-shadow: 0 8px 26px rgba(10,40,70,.08);
}
.details-toggle{ display:none !important; } /* Button vollst+ñndig ausblenden */

/* Chat: sticky, volle H+Âhe, oben/unten schmale R+ñnder, gleich breite Elemente */
.project-page .project-chat .chat-container{
  position: sticky;
  top: calc(var(--header-h) + var(--top-gap));
  height: calc(100dvh - (var(--header-h) + var(--top-gap)) - var(--bottom-gap));
  width: 100%;
  margin: 0;
  border: 1px solid #86d8f0;
  border-radius: 14px;
  background: linear-gradient(180deg,#F6FAFF 0%, #F2F7FD 100%);
  box-shadow: 0 10px 36px rgba(3,32,66,.06);
  overflow: hidden;
}
.project-page .chat-inner{
  height: 100%; display:flex; flex-direction:column; padding:0;
}
.project-page .chat-topbar,
.project-page .chat-messages,
.project-page .chat-input-bar{ width:100%; margin:0; }

/* Sidebar-Basics (falls auf dieser Seite noch nicht vorhanden) */
#sidebarMenu{
  position: fixed; inset: 0 auto 0 0; width: 280px;
  background:#fff; border-right:1px solid #e6eef7;
  transform: translateX(-100%); transition: transform .25s ease;
  z-index: 1000; overflow:auto; padding: 1rem;
}
#sidebarMenu.open{ transform: translateX(0); }
#sidebarOverlay{
  position: fixed; inset: 0; background: rgba(2,20,40,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 900;
}
#sidebarOverlay.active{ opacity: 1; pointer-events: auto; }

/* === PATCH: Projektseite ÔÇô Titel/Details links, Chat zentriert & vollhoch === */
.project-page{
  --edge: 2rem;           /* gleicher linker Rand wie Burger */
  --top-gap: 4px;         /* sehr kleiner Abstand unter dem Header */
  --bottom-gap: 4px;      /* sehr kleiner Abstand vor dem Footer */
  --header-h: 72px;       /* wird zus+ñtzlich via JS pr+ñzisiert */
}

/* Layout: [linke Details] [zentrierter Chat] [rechter Freiraum] */
.project-page .project-main{ padding-inline: var(--edge); }
.project-page .project-layout{
  display: grid;
  grid-template-columns: 1fr min(60vw, 980px) 1fr;
  gap: clamp(10px, 1.5vw, 18px);
  align-items: start;
}
.project-page .project-left{ grid-column: 1; }
.project-page .project-chat{ grid-column: 2; position: relative; }

/* Titel links b++ndig unter dem Burger */
.project-page .project-left .project-title{
  margin: .2rem 0 .6rem 0 !important;
  text-align: left !important;
}

/* Details-Card immer sichtbar */
#projektInfoBox{ display: block !important; }



/* Innenleben f++llt die Breite, Verlauf bekommt den restlichen Platz */
.project-page .project-chat .chat-inner{
  display: flex; flex-direction: column; height: 100%;
  padding: 0 !important;
}
.project-page .project-chat .chat-inner > .chat-topbar,
.project-page .project-chat .chat-inner > .chat-messages,
.project-page .project-chat .chat-inner > .chat-input-bar{
  width: 100% !important; margin: 0 !important;
}
.project-page .project-chat .chat-messages{ flex: 1 1 auto; min-height: 160px; overflow: auto; }


/* === PATCH: Titel & Details links, b++ndig mit Burger; Card sichtbar === */
/* b++ndiger Seitenrand wie Header-Burger */
.project-page { --edge: 2rem; }

/* Main links/rechts mit gleichem Rand ausrichten */
.project-page .project-main { padding-inline: var(--edge) !important; }

/* Linke Spalte: Titel linksb++ndig, gleiche Einr++ckung wie Burger */
.project-page .project-left .project-title {
  margin: .2rem 0 .6rem 0 !important;
  text-align: left !important;
}

/* Detail-Card: immer sichtbar, normal im Flow (unter dem Titel) */
#projektInfoBox {
  display: block !important;
  position: static !important;
  margin: 0 0 1rem 0 !important;
}

/* 2-Spalten-Layout: links Titel+Details, rechts Chat Ôëê 60% */
.project-page .project-layout {
  display: grid !important;
  align-items: start;
  gap: clamp(12px, 1.6vw, 20px);
}

/* Chatcontainer in der rechten Spalte darf die volle Spaltenbreite nutzen */
.project-page .project-chat .chat-container,
.project-page .project-chat .chat-block {
  width: 100% !important;
  max-width: none !important;
}


/* === FIX: Titel & Details links + Details-Card sichtbar + 2-Spalten-Layout === */
.project-main { padding-inline: var(--edge) !important; }

.project-layout{
  display: grid !important;
  align-items: start !important;
  gap: clamp(12px, 1.6vw, 20px) !important;
}

.project-left .project-title{
  text-align: left !important;
  margin: .2rem 0 .6rem 0 !important;
}

/* Card sicher sichtbar und im normalen Flow unter dem Titel */
#projektInfoBox{
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0 0 1rem 0 !important;
}


/* ===== PATCH (Projektseite) ===========================================
   - Details linksb++ndig unter dem Burger
   - Chat-Fenster zentriert, auf gro+ƒen Screens ~50% Seitenbreite
   - Chat-Inhalt (Topbar, Verlauf, Input) ++ber komplette Chatbox-Breite
   - Eingabezeile ++berall rund (wie die Chatbox)
   - Clear-Button gleiches Design, nur kleiner & rechts
   - Chat-H+Âhe: innerhalb des Main-Bereichs "nahezu voll" (via --chat-viewport-h)
   ==================================================================== */

/* A) Layout links/mitte: linke Spalte (Details) b++ndig, Chat mittig */
.project-page {
  --edge: 2rem;                   /* identisch zum Burger-Offset */
  --chat-block-w: min(50vw, 980px); /* Ziel: ~50% auf gro+ƒen Screens */
}
.project-page .project-main { padding-inline: var(--edge); }

/* Zwei Spalten: links Details, rechts (breite) Spalte; Chat darin zentriert */
.project-page .project-layout{
  display: grid;
  grid-template-columns: minmax(320px, 360px) 1fr;
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
}
@media (max-width: 1100px){
  .project-page .project-layout{ grid-template-columns: 1fr; }
}

/* Titel/Details wirklich b++ndig zum linken Seitenrand (Burger) */
.project-page .project-left .project-title{
  margin: .2rem 0 .6rem 0 !important;
  text-align: left !important;
}
#projektInfoBox{ margin-left: 0 !important; }

/* B) Chat-Fenster: mittig in der rechten Spalte, H+Âhe aus --chat-viewport-h */
.project-page .project-chat .chat-container{
  width: var(--chat-block-w);
  margin-inline: auto;                   /* zentrieren */
  height: var(--chat-viewport-h, 72vh);  /* kommt aus JS (chat-ux) */
  min-height: var(--chat-viewport-h, 72vh);
  overflow: hidden;
}
@media (max-width: 1100px){
  .project-page .project-chat .chat-container{ width: 100%; }
}

/* C) Innenleben f++llt die komplette Chatbox-Breite */
.project-page .chat-inner{
  display: flex; flex-direction: column; height: 100%;
  padding: 0 !important;
}
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
}

/* Verlauf nimmt den Platz zwischen Topbar und Input ein */
.project-page .chat-messages{
  flex: 1 1 auto; min-height: 160px; overflow: auto;
}

/* D) Eingabezeile: ++berall rund (wie die Chatbox, keine eckige Oberkante) */
.project-page .chat-input-wrap{
  border-radius: 14px !important;
  border-top: 1px solid #D6E4F3 !important; /* statt "keine Oberkante" */
}

/* E) Clear-Button: gleiches Styling, nur kleiner & rechtsb++ndig */
#chatClearBtn.btn-icon{
  width: 30px; height: 30px; padding: 0;        /* kleiner */
}
#chatClearBtn .material-icons{ font-size: 20px; }

/* F) Sicherheitsnetz: keine 100vw-Breite f++r den Main auf dieser Seite */
.project-page .project-main{ width: 100% !important; max-width: 1600px; margin: 0 auto; }


/* ===== FINAL PATCH: projekt.html ===================================== */
/* Ziel:
   - Titelleiste & Detailkarte b++ndig mit dem Burger (linke Kante = 2rem)
   - Main nicht zentriert: 100% Breite statt globalem 1000px-Centering
   - Chat-Box mittig; Innenbereich (Topbar, Verlauf, Input) volle Chat-Breite
   - Chat-H+Âhe: bis knapp unter Header, knapp ++ber Footer
   - Breadcrumb im Header vertikal zentriert
   ===================================================================== */

/* Gleiche Kante wie Burger-Icon */
.project-page { --edge: 2rem; }

/* (A) Main auf volle Seitenbreite + linke/rechte Innenkante exakt = 2rem */
.project-page .project-main{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;                         /* kein globales 2.4em margin */
  padding-left: var(--edge) !important;
  padding-right: var(--edge) !important;
}

/* (B) Zwei Spalten: links Details, rechts Chat ÔÇô links wirklich b++ndig */
.project-page .project-layout{
  display: grid;
  gap: clamp(12px, 2vw, 24px);
}
.project-page .project-left,
.project-page #projektInfoBox,
.project-page .project-title{ margin-left: 0 !important; }

/* (C) Chat-Box konfigurieren: mittig, 50% Breite auf gro+ƒen Screens */
.project-page{
  --chat-block-w: min(50vw, 980px);
}
.project-page .project-chat .chat-container{
  width: var(--chat-block-w) !important;
  margin: 0 auto !important;                    /* zentriert */
}


/* (D) Innenbereich IMMER volle Rahmenbreite (eliminiert alte Fallback-Regel) */
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* (E) Chat-Input rundum b++ndig wie der Rahmen */
.project-page .chat-input-wrap{
  border-radius: 14px !important;
}

/* (F) Clear-Button nur kleiner ÔÇô Optik unver+ñndert */
#chatClearBtn.btn-icon{ width: 30px; height: 30px; padding: 0; }
#chatClearBtn .material-icons{ font-size: 20px; }

/* (G) Breadcrumb im Header vertikal mittig (statt fest oben) */
.project-page header .breadcrumb-in-header{
  position: absolute;
  right: 11.5rem;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex; align-items: center; gap: .35rem;
  white-space: nowrap;
}


/* ===== Projektseite ÔÇô Feintuning v3 ===================================
   Titel links, Chatbox mittig (seitenzentriert), Innenbreite 100%,
   Input unten b++ndig, weniger Luft unten
   ==================================================================== */

/* A) Titel wie die Detail-Card linksb++ndig (Burger-Flucht = 2rem) */
.project-page { --edge: 2rem; --chat-radius: 14px; --chat-w: min(50vw, 980px); }
.project-page .project-main { padding-inline: var(--edge) !important; }

.project-page .project-left .project-title{
  text-align: left !important;
  margin: .2rem 0 .6rem 0 !important;
}


/* linke Spalte bleibt links und bekommt feste Maxbreite */
.project-page .project-left{
  grid-column: 1;
  width: min(360px, 28vw);
  justify-self: start;
}

/* Chat in die mittlere (auto) Spalte und auf eigene Zielbreite */
.project-page .project-chat{
  grid-column: 2;
  display: grid; /* damit wir die Box in der Spalte selbst zentrieren k+Ânnen */
}
.project-page .project-chat .chat-container{
  width: var(--chat-w) !important;
  max-width: 100%;
  justify-self: center;   /* zentriert in der mittleren Spalte */
  margin: 4px 0 6px 0 !important; /* minimale Luft oben/unten */
}

/* C) Chat-Inner vollfl+ñchig + Innenbereiche 100% der Chatbox-Breite */
.project-page .chat-inner{
  display: flex; flex-direction: column; height: var(--chat-viewport-h, 72vh) !important;
  padding: 0 !important; border-radius: var(--chat-radius); overflow: hidden;
  border: 1px solid #86d8f0;
  background: linear-gradient(180deg,#F6FAFF 0%, #F2F7FD 100%);
  box-shadow: 0 10px 36px rgba(3,32,66,.06);
}
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
}

/* Verlauf f++llt den Platz zwischen Topbar und Input */
.project-page .chat-messages{ flex: 1 1 auto; overflow: auto; }

/* D) Eingabezeile unten b++ndig & ++berall rund */
.project-page .chat-input-bar{ margin-top: auto; padding: 10px 12px 12px; background: transparent; }
.project-page .chat-input-wrap{
  width: 100% !important;
  border-radius: var(--chat-radius) !important; /* oben UND unten rund */
  border: 1px solid #C8DBEE; background:#fff; padding: 10px 12px;
  display: flex; align-items: flex-end; gap: .5rem;
  box-shadow: 0 4px 20px rgba(10,40,70,.06);
}
.project-page #chatInput{
  flex: 1 1 auto;
  min-height: 38px; max-height: 40vh;
  padding: 8px 0 !important; margin: 0; border: 0; outline: 0; resize: none; background: transparent;
}

/* E) Clear-Button nur etwas kleiner, Stil identisch */
#chatClearBtn.btn-icon{ width: 30px; height: 30px; padding: 0; }
#chatClearBtn .material-icons{ font-size: 20px; }

/* F) Responsive Fallback: unter ~1100px einfach stapeln und Chat 100% */
@media (max-width: 1100px){
  .project-page .project-layout{ grid-template-columns: 1fr !important; }
  .project-page .project-left{ grid-column: 1; width: auto; }
  .project-page .project-chat{ grid-column: 1; }
  .project-page .project-chat .chat-container{ width: 100% !important; }
}


/* ===========================
   PROJEKTSEITE ÔÇô FINALE OVERRIDES
   (Chat zentriert, volle Innenbreite, keine Doppellinien,
    Titel links b++ndig, Header-Elemente vertikal zentriert)
   =========================== */
.project-page{
  /* schmale Abst+ñnde ++ber/unter dem Chat */
  --header-h: 72px;                 /* wird bereits per JS pr+ñzisiert */
  --top-gap: 8px;
  --bottom-gap: 8px;
}

/* ---------- HEADER / BREADCRUMB ---------- */
/* Account-Button & Burger wirklich vertikal mittig im Header halten */
.project-page header #loginTopBtn,
.project-page header #burgerMenu{
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Account-Button-Inhalt mittig (override inline display:block) */
.project-page header #loginTopBtn{
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
}

/* Breadcrumb etwas weiter weg vom Account-Button + vertikal mittig */
.project-page header .breadcrumb-in-header{
  right: 15.5rem !important;         /* etwas mehr Abstand als zuvor */
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ---------- LINKSSPALTE: Titel exakt wie Details b++ndig ---------- */
.project-page .project-left{ padding-left: 0 !important; }
.project-page .project-left .project-title{
  margin-left: 0 !important;
  text-align: left !important;
}


/* Chat in die mittlere Spalte setzen und dort zentrieren */
.project-page .project-chat{ grid-column: 2 / 3 !important; }

/* ---------- CHATBOX: au+ƒen 50% Breite (auf gro+ƒen Screens), innen 100% ---------- */
.project-page .project-chat .chat-container{
  position: sticky;
  top: calc(var(--header-h) + var(--top-gap));
  height: calc(100dvh - (var(--header-h) + var(--top-gap)) - var(--bottom-gap));
  /* 50% der Seitenbreite (auf gro+ƒen Screens), max. 980px */
  width: min(50vw, 980px) !important;
  margin: 0 auto !important;      /* zentriert die Box */
  overflow: hidden;
  /* nur eine (t++rkise) Au+ƒen-Umrandung */
  border: 1px solid #86d8f0 !important;
  border-radius: 14px !important;
}

/* Innenleben f++llt die komplette Chatbox-Breite ÔÇô ++berall gleich */
.project-page .project-chat .chat-inner{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
}
.project-page .project-chat .chat-inner > .chat-topbar,
.project-page .project-chat .chat-inner > .chat-messages,
.project-page .project-chat .chat-inner > .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* nur der Verlauf scrollt und nimmt den Restplatz ein */
.project-page .project-chat .chat-messages{
  flex: 1 1 auto !important;
  min-height: 160px !important;
  overflow: auto !important;
}

/* ---------- KEINE zweite Linie: innere Borders ausschalten ---------- */
.project-page .chat-topbar{ border: 0 !important; }
.project-page .chat-input-bar{ border: 0 !important; }
.project-page .chat-input-wrap{
  border: 0 !important;              /* kein zweiter Rahmen unten */
  border-radius: 0 0 14px 14px !important;   /* gleiche Rundung wie au+ƒen */
}

/* ---------- Clear-Button etwas kleiner, aber sonst unver+ñndert ---------- */
#chatClearBtn.btn-icon{
  width: 34px !important;
  height: 34px !important;
}

/* ---------- Mobil: Chat vollbreit unter den Details ---------- */
@media (max-width: 1100px){
  .project-page .project-layout{
    grid-template-columns: 1fr !important;
  }
  .project-page .project-chat{ grid-column: 1 / -1 !important; }
  .project-page .project-chat .chat-container{
    width: 100% !important;
  }
}


/* === Projektseite ÔÇô Chat: EIN +ñu+ƒerer Rahmen, Innenbereich 100% Breite/H+Âhe === */

/* 1) Chatbox zentriert, ein einziger (t++rkiser) Au+ƒenrahmen */
.project-page .chat-container{
  width: min(50vw, 980px) !important;   /* 50% auf gro+ƒen Screens */
  max-width: 980px !important;
  margin: 0 auto !important;            /* zentriert */
  padding: 0 !important;
  border: 1px solid #86d8f0 !important; /* EIN Rahmen */
  border-radius: 14px !important;
  overflow: hidden !important;
}


/* Kill-Switch gegen den alten Fallback (var(--chat-block-w)) */
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
}

/* Verlauf nimmt den Restplatz ein ÔÇô Input sitzt wirklich unten */
.project-page .chat-messages{ flex: 1 1 auto !important; overflow: auto !important; }

/* 3) Zweiten (inneren) Rahmen deaktivieren ÔÇô ++berstimmt VA-Design */
.project-page .chat-inner .chat-topbar{
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background-clip: padding-box !important;
}
.project-page .chat-inner .chat-messages{
  border: 0 !important;                 /* keine Seitenlinien */
}
.project-page .chat-inner .chat-input-bar{
  border: 0 !important; padding: 0 !important; background: transparent !important;
}
.project-page .chat-inner .chat-input-wrap{
  width: 100% !important;               /* nicht 60% ÔÇô wirklich volle Boxbreite */
  margin: 0 !important;
  border: 0 !important;                 /* keine Unterkante als ÔÇ×zweiter RahmenÔÇ£ */
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 12px 16px !important;        /* angenehme Innenluft ohne Au+ƒenrahmen */
}

/* 4) Textarea & Datei-Reihe randb++ndig */
.project-page #chatInput{ width: 100% !important; padding: 10px 0 !important; }
.project-page .filebubble-row{ width: 100% !important; margin: 0 !important; padding: 8px 12px !important; }



/* === Final Chatbox Overrides (29.08.2025) ===
   - nur ein d++nner t++rkisfarbener Au+ƒenrahmen
   - Chatbox horizontal zentriert (~50 % der Seite, max. 980ÔÇ»px)
   - Innenbereich (Topbar, Verlauf, Eingabe) nutzt die komplette Breite/H+Âhe
   - keine zus+ñtzlichen Innen-Rahmen oder paddings
*/
.project-page .chat-container {
  width: min(50vw, 980px) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 1px solid #86d8f0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #F6FAFF 0%, #F2F7FD 100%) !important;
  box-shadow: 0 10px 36px rgba(3,32,66,.06) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.project-page .chat-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar {
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: none !important;
}
.project-page .chat-messages {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.project-page .chat-topbar,
.project-page .chat-input-bar {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.project-page .chat-input-wrap {
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 12px 16px !important;
}
.project-page #chatInput {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.project-page .filebubble-row {
  width: 100% !important;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* === Header- und Titel-Ausrichtung ===
   - Burger-Icon und Account-Button vertikal zentriert
   - Breadcrumb etwas weiter links und vertikal zentriert
   - Projekttitel vollst+ñndig linksb++ndig und nicht mehr zentriert durch andere Regeln
*/
.project-page header #burgerMenu,
.project-page header #loginTopBtn {
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.project-page header #loginTopBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.project-page header .breadcrumb-in-header {
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 13rem !important;
}
.project-page .project-left .project-title {
  margin-left: 0 !important;
  text-align: left !important;
  grid-column: auto !important;
  justify-self: flex-start !important;
}


/* 4. Innenbereich der Chatbox: volle Breite f++r Header und Bubbles, Inputfeld zentriert schmaler */
.project-page .chat-topbar, 
.project-page .chat-messages, 
.project-page .chat-input-bar {
  width: 100% !important;
  margin: .35rem 0 !important;          /* kein horizontaler Rand: Elemente f++llen Container */
}
.project-page .chat-topbar {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  position: sticky; top: 0; z-index: 2;
  background: #F4F9FF;
  color: #0B2941;
  border: 1px solid #DBE6F3; 
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: .7rem 1rem;
}



.project-page #chatInput {
  flex: 1 1 auto;                     /* Textfeld dehnt sich innerhalb der Wrap auf freie Breite */
  min-height: auto !important;        /* nur eine Textzeile bei leerem Feld */
  max-height: 45vh;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: #0B2941;
  padding: 0 !important;
  margin: 0;
}


/* ==========================================================
   PROJEKT ÔÇô Chatlayout (zentriert, 55% Breite, 1 Au+ƒenrahmen)
   Diese Datei wird nach va-design.css geladen und darf gezielt
   fr++here Regeln ++berstimmen (sparsam mit !important).
   ========================================================== */

/* ÔÇöÔÇöÔÇö Chatbox zentriert; Breite wie ChatGPT (~55% der Seite) ÔÇöÔÇöÔÇö */
.project-page .project-chat .chat-container{
  margin: clamp(4px, 0.8vh, 10px) auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Chatinnenleben f++llt die ++ber JS gesetzte H+Âhe (98% vom Main) */
.project-page .project-chat .chat-container > .chat-inner{
  height: 100% !important;
  padding: 0;
  display: flex;
  align-items: stretch;
}

/* Ein +ñu+ƒerer, schlanker Rahmen ÔÇô nur auf dem Chatblock */
.project-page .project-chat .chat-inner .chat-block{
  width: 100%;
  height: 100%;
  margin: 0;                               /* nur schmale Au+ƒenluft kommt vom Container-Margin */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #86d8f0;               /* ÔÇ×d++nne t++rkise UmrandungÔÇ£ */
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: 0 8px 28px rgba(3,32,66,.06);
}

/* Die drei Hauptteile belegen immer die volle Chatbox-Breite */
.project-page .project-chat .chat-inner .chat-block > .chat-topbar,
.project-page .project-chat .chat-inner .chat-block > .chat-messages,
.project-page .project-chat .chat-inner .chat-block > .chat-input-bar,
.project-page .project-chat .chat-inner .chat-block > .filebubble-row{
  width: 100% !important;
  margin: 0 !important;
}

/* ÔÇöÔÇöÔÇö Topbar: links Titel+Info, rechts Clear; nur Divider unten ÔÇöÔÇöÔÇö */
.project-page .project-chat .chat-inner .chat-block > .chat-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  background: transparent;
  color: #0b2941;
  padding: .8rem 14px;
  border: 0;
  border-bottom: 1px solid #d6e4f3;        /* nur unten ÔÇô kein Au+ƒenrahmen */
}
.project-page .chat-topbar .chat-topbar-title{ display:flex; align-items:center; gap:.55rem; }

/* ÔÇöÔÇöÔÇö Dateibubbles direkt unter der Topbar ÔÇöÔÇöÔÇö */
.project-page .project-chat #fileBubbleRow{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .35rem 12px .25rem;
}



/* Bubbles wirklich 100% breit (keine k++nstliche Max-Breite) */
.project-page .project-chat .chat-messages .message,
.project-page .project-chat .chat-messages .message .msg-body,
.project-page .project-chat .chat-messages .message .bubble{
  display: block;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.project-page .project-chat .chat-messages .message{ margin:.5rem 0; border-radius:12px; padding:.9rem 1rem; }
.project-page .project-chat .chat-messages .message.user{ background:#E6F3FF; color:#0a2c44; }
.project-page .project-chat .chat-messages .message.assistant{ background:#FFFFFFF2; color:#0a2538; }
.project-page .project-chat .chat-messages .message.assistant pre,
.project-page .project-chat .chat-messages .message.assistant code{
  background:#f6f8fb; color:#0a2538; border:1px solid #dbe6f3; border-radius:8px; padding:.45rem .55rem;
}


.project-page .project-chat .chat-input-bar > .chat-input-wrap{
  position: relative;
  display: flex;
  align-items: flex-end;                    /* Buttons unten b++ndig */
  gap: .5rem;
  width: 100%;
  margin: 0;
  background: transparent;                  /* kein Innenrahmen */
  border: 0;                                /* kein Doppelrahmen */
  padding: .2rem .4rem;
}

/* Upload links unten (modernisiertes Icon), Buttons rechts unten */
.project-page .project-chat .upload-inside{
  position: absolute; left: 10px; bottom: 10px;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid #cfe0f1;
  color: #476887; background: #0f2a3a0a;
  display: inline-flex; align-items: center; justify-content: center;
}
.project-page .project-chat .upload-inside:hover{ background:#e8f3ff; color:#0a2c44; }

.project-page .project-chat .input-actions-right{
  position: absolute; right: 10px; bottom: 10px;
  display: flex; align-items: center; gap: .45rem;
}
.project-page .project-chat .input-actions-right .btn-icon{
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid #cfe0f1; background: #0f2a3a0a; color:#476887;
}

/* Textarea f++llt die Breite, w+ñchst via JS nach oben; Platz f++r Icons */
.project-page .project-chat #chatInput{
  flex: 1 1 auto;
  width: 100%;
  min-height: 38px;                         /* 1 Zeile leer */
  max-height: 50vh;                         /* JS limitiert zus+ñtzlich relativ zur Chat-H+Âhe */
  resize: none;
  border: 0; outline: 0;
  background: transparent;
  color: #0b2941;
  line-height: 1.45;
  padding: 12px 116px 12px 50px !important; /* rechts Platz f++r Senden/Mic, links f++r Upload */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #bfd2e6 #f3f7fc;
}
.project-page .project-chat #chatInput::-webkit-scrollbar{ width:10px; height:10px; }
.project-page .project-chat #chatInput::-webkit-scrollbar-thumb{ background:#bfd2e6; border-radius:8px; border:2px solid #f3f7fc; }
.project-page .project-chat #chatInput::-webkit-scrollbar-track{ background:#f3f7fc; border-radius:8px; }
/* Einzeiliger Placeholder direkt neben dem Upload-Icon */
.project-page .project-chat #chatInput::placeholder{
  white-space: nowrap; text-overflow: ellipsis; opacity: .75;
}

/* Sicherheit: auf der Projektseite nie schmalere Innenbreiten verwenden */
.project-page .project-chat .chat-inner > *{ width: 100% !important; }



/* ===== B++ndigkeit: Details-Card & CPV-Card ===== */
.project-left .projekt-info-box{
  margin: 0 0 1rem 0;           /* b++ndig links/rechts */
  padding: 1rem;
  background: #fff;
  border: 1px solid #e6eef8;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(8, 31, 66, 0.06);
}

.project-left .projekt-info-box .box-title{
  margin: 0 0 .6rem 0;
  color: #0a3855;
}

/* CPV kompakt */
.cpv-list-compact { background:#fff; border:1px dashed #d7e3f5; border-radius:10px; padding:.6rem .7rem; min-height:42px; }
.cpv-compact-ul { list-style:none; padding:0; margin:0; display:grid; gap:.25rem; }
.cpv-compact-item { font-size:.92em; color:#1b3957; line-height:1.25; overflow-wrap:anywhere; }
.cpv-empty-row { margin-top:.6rem; }
.cpv-empty-link { color:#0a66c2; text-decoration:none; font-weight:600; }
.cpv-empty-link:hover { text-decoration:underline; }

/* Modal robust */
.modal { position: fixed; inset: 0; display: none; align-items:center; justify-content:center; background: rgba(0,0,0,.35); z-index: 2000; }
.modal.show { display: flex; }
.modal .modal-content { background:#fff; border-radius:12px; width:min(960px, 92vw); max-height:90vh; overflow:auto; box-shadow:0 16px 60px rgba(0,0,0,.25); }
.modal .modal-header, .modal .modal-footer { padding:.8rem 1rem; border-bottom:1px solid #e6eef8; }
.modal .modal-footer { border-top:1px solid #e6eef8; border-bottom:none; }
.modal .modal-body { padding:1rem; }
.cpv-modal-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-top:.8rem; }
#cpvSearch { width:100%; padding:.6rem .7rem; border:1px solid #cfe0ff; border-radius:10px; }

/* Burger wie Dashboard (3 Linien) + Sidebar-Fallback */
.burger{
  position:absolute; left:var(--edge,2rem); top:1.05rem;
  width:38px; height:30px; background:transparent; border:none; cursor:pointer;
  display:inline-flex; flex-direction:column; justify-content:space-between; padding:6px 4px;
}
.burger span{display:block; height:3px; background:#0a3855; border-radius:2px; width:100%;}
.sidebar{ position:fixed; left:-280px; top:0; width:280px; height:100vh; background:#0a3855; color:#fff; padding:1rem; transition:left .25s ease; z-index:1400; }
.sidebar.open{ left:0; }
#sidebarOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.3); display:none; z-index:1300; }
#sidebarOverlay.show{ display:block; }
.sidebar-section-title{ font-weight:700; margin:.25rem 0 1rem 0; }
.sidebar-nav{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.sidebar-nav a{ color:#fff; text-decoration:none; }

/* Footer Kleinkram */
.footer-logo{ height:36px; margin-right:1.4em; }
.footer-links a{ color:#0a3855; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }



/* ==========================================================
   PROJEKT ÔÇô Chatlayout Feinschliff (Abst+ñnde, Popover, Eingabe)
   Diese Datei ++bersteuert +ñltere Regeln gezielt nur im Projektkontext.
   ========================================================== */

/* ÔÇöÔÇöÔÇö Chatbox zentriert, praktisch bis zum Footer ÔÇöÔÇöÔÇö */
.project-page .project-chat .chat-container{
  /* oben minimal mehr Luft, unten ganz knapp vor den Footer */
  margin-block-start: clamp(8px, 1vh, 14px);
  margin-block-end: clamp(2px, 0.35vh, 8px);
  margin-inline: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.project-page .project-chat .chat-container > .chat-inner{
  height: 100% !important;
  padding: 0;
  display: flex;
  align-items: stretch;
}

/* Einziger Au+ƒenrahmen der Chatbox */
.project-page .project-chat .chat-inner .chat-block{
  width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  background: #f8fbff;
  border: 1px solid #86d8f0; border-radius: 14px;
  box-shadow: 0 8px 28px rgba(3,32,66,.06);
}

/* ÔÇöÔÇöÔÇö Alle Hauptteile volle Breite ÔÇöÔÇöÔÇö */
.project-page .project-chat .chat-inner .chat-block > .chat-topbar,
.project-page .project-chat .chat-inner .chat-block > .chat-messages,
.project-page .project-chat .chat-inner .chat-block > .chat-input-bar{ width:100% !important; margin:0 !important; }

/* ÔÇöÔÇöÔÇö Topbar: gleiche Seitenabst+ñnde wie unten bei den Buttons ÔÇöÔÇöÔÇö */
.project-page .project-chat .chat-inner .chat-block > .chat-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding: .8rem 16px;                  /* = Bezugsabstand f++r Clear/Upload/Senden */
  background: transparent; color:#0b2941;
  border: 0; border-bottom: 1px solid #d6e4f3;
}
.project-page .chat-topbar .chat-topbar-title{ display:flex; align-items:center; gap:.55rem; position:relative; }

/* Info-Icon & Popover (Hover, Focus, Klick) */
.project-page .chat-topbar .info-btn{
  width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; background:#e9f5ff; color:#176fa6; border:1px solid #b3d8fa;
}
.project-page .info-popover[hidden]{ display:none !important; }
.project-page .info-popover{
  position:absolute; z-index:3000; inset:auto auto auto 0; top: calc(100% + 8px);
  display:none; max-width:360px; width:min(560px,92vw);
  padding:.9em 1em; border-radius:10px; background:#fff; color:#0b2941;
  box-shadow:0 12px 32px rgba(14,49,89,.18), 0 1px 0 rgba(14,49,89,.05);
  border:1px solid #dbe6f3;
}
.project-page .chat-topbar .info-btn:hover + .info-popover,
.project-page .chat-topbar .info-btn:focus + .info-popover,
.project-page .chat-topbar .chat-topbar-title:focus-within .info-popover{
  display:block !important;
}

/* Dateibubbles (falls vorhanden) */
.project-page .project-chat #fileBubbleRow{
  display:flex; flex-wrap:wrap; gap:.45rem; padding:.35rem 16px .25rem;
}

/* ÔÇöÔÇöÔÇö Verlauf: volle Fl+ñche, schlanke Scrollbar, kein Rand ÔÇöÔÇöÔÇö */
.project-page .project-chat .chat-inner .chat-block > .chat-messages{
  flex:1 1 auto; overflow:auto;
  padding: 12px 16px 16px; background:transparent; border:0;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin; scrollbar-color:#bfd2e6 #f3f7fc;
}
.project-page .project-chat .chat-messages::-webkit-scrollbar{ width:10px; height:10px; }
.project-page .project-chat .chat-messages::-webkit-scrollbar-thumb{ background:#bfd2e6; border-radius:8px; border:2px solid #f3f7fc; }
.project-page .project-chat .chat-messages::-webkit-scrollbar-track{ background:#f3f7fc; border-radius:8px; }

/* Bubbles ++ber gesamte Breite */
.project-page .project-chat .chat-messages .message,
.project-page .project-chat .chat-messages .message .msg-body,
.project-page .project-chat .chat-messages .message .bubble{
  display:block; width:100% !important; max-width:none !important; box-sizing:border-box;
}
.project-page .project-chat .chat-messages .message{ margin:.5rem 0; border-radius:12px; padding:.9rem 1rem; }
.project-page .project-chat .chat-messages .message.user{ background:#E6F3FF; color:#0a2c44; }
.project-page .project-chat .chat-messages .message.assistant{ background:#FFFFFFF2; color:#0a2538; }

/* ÔÇöÔÇöÔÇö Eingabe: Einzeile in Icon-Zeile, w+ñchst ab Zeile 2 nach oben ÔÇöÔÇöÔÇö */
.project-page .project-chat .chat-inner .chat-block > .chat-input-bar{
  background:transparent; border:0; padding: 10px 0 12px;
  position:sticky; bottom:.2rem; z-index:2;
}
.project-page .project-chat .chat-input-bar > .chat-input-wrap{
  position:relative; display:flex; align-items:flex-end; gap:.5rem;
  width:100%; margin:0; padding: .2rem 0; background:transparent; border:0;
}

/* Upload links unten, Buttons rechts unten ÔÇô Abst+ñnde = 16px */
.project-page .project-chat .upload-inside{
  position:absolute; left:16px; bottom:10px;
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #cfe0f1; color:#476887; background:#0f2a3a0a;
}
.project-page .project-chat .upload-inside:hover{ background:#e8f3ff; color:#0a2c44; }
.project-page .project-chat .input-actions-right{
  position:absolute; right:16px; bottom:10px;
  display:flex; align-items:center; gap:.45rem;
}
.project-page .project-chat .input-actions-right .btn-icon{
  width:36px; height:36px; border-radius:10px;
  border:1px solid #cfe0f1; background:#0f2a3a0a; color:#476887;
}

/* Textarea: Einzeile sitzt in derselben Zeile wie die Icons;
   ab 2. Zeile w+ñchst sie nach oben, Buttons bleiben ÔÇ×untenÔÇ£. */
.project-page .project-chat #chatInput{
  flex:1 1 auto; width:100%;
  min-height: 38px;         /* Einzeilige Ausgangsh+Âhe */
  max-height: 50vh;         /* Wachstum begrenzen (JS erg+ñnzt dynamisch) */
  resize:none; border:0; outline:0; background:transparent; color:#0b2941;
  line-height:1.45;
  /* Platz f++r Upload (links) und Senden+Mic (rechts) ÔÇô identische Seitenabst+ñnde */
  padding: 10px 112px 10px 60px !important; /* 16px Rand + 34px Icon + ~10px Luft = 60px */
  overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:#bfd2e6 #f3f7fc;
}
.project-page .project-chat #chatInput::-webkit-scrollbar{ width:10px; height:10px; }
.project-page .project-chat #chatInput::-webkit-scrollbar-thumb{ background:#bfd2e6; border-radius:8px; border:2px solid #f3f7fc; }
.project-page .project-chat #chatInput::-webkit-scrollbar-track{ background:#f3f7fc; border-radius:8px; }
.project-page .project-chat #chatInput::placeholder{
  white-space:nowrap; text-overflow:ellipsis; opacity:.75;
}

/* Sicherheit: keine schmaleren Innenbreiten auf der Projektseite */
.project-page .project-chat .chat-inner > *{ width:100% !important; }


/* ===== B++ndigkeit: Details-Card & CPV-Card ===== */
.project-left .projekt-info-box{
  margin: 0 0 1rem 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e6eef8;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(8, 31, 66, 0.06);
}
.project-left .projekt-info-box .box-title{ margin:0 0 .6rem 0; color:#0a3855; }

/* CPV kompakt */
.cpv-list-compact { background:#fff; border:1px dashed #d7e3f5; border-radius:10px; padding:.6rem .7rem; min-height:42px; }
.cpv-compact-ul { list-style:none; padding:0; margin:0; display:grid; gap:.25rem; }
.cpv-compact-item { font-size:.92em; color:#1b3957; line-height:1.25; overflow-wrap:anywhere; }
.cpv-empty-link { color:#0a66c2; text-decoration:none; font-weight:600; }
.cpv-empty-link:hover { text-decoration:underline; }

/* Sidebar Overlay / Menu (einheitlich) */
#sidebarOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:80; }
#sidebarOverlay.active{ opacity:1; pointer-events:auto; }
#sidebarMenu{ z-index:90; } /* Sidebar sichtbar ++ber Overlay */

/* CPV-Modal sichtbar, egal ob .show oder .active genutzt wird */
#cpvModal{ display:none; position:fixed; inset:0; z-index:100; }
#cpvModal.show, #cpvModal.active{ display:block; }


/* ===== Projektseite ÔÇô Chat-H+Âhe 96% + je 2% Abstand, konsistente Innenabst+ñnde,
         Eingabezeile 1-zeilig (mit Umschalten auf zweizeilig+) ===== */

.project-page {
  /* Horizontaler Innenabstand f++r Topbar, Verlauf und Input-Wrap */
  --chat-pad-x: 12px;
}

/* 2% Abstand oben/unten zwischen Chatbox und Header/Footer (Werte kommen aus JS) */
.project-page .chat-container {
  margin-block: var(--chat-gap-v, 12px) !important;
}

/* Chat-Innenh+Âhe (kommt ebenfalls aus JS) */
.project-page .chat-inner {
  height: 100% !important;
}

/* Einheitliche Innenr+ñnder links/rechts */
.project-page .chat-topbar       { padding-inline: var(--chat-pad-x) !important; }
.project-page .chat-messages     { padding-inline: var(--chat-pad-x) !important; }
.project-page .filebubble-row    { padding-inline: var(--chat-pad-x) !important; }

/* Bubbles bekommen links/rechts den gleichen Rand (f++llen die Chatbreite) */
.project-page .chat-messages .message {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}



/* Textarea: 1 Zeile im Leerlauf, w+ñchst in der H+Âhe; kein eigener Au+ƒenabstand */
.project-page #chatInput {
  flex: 1 1 auto;
  min-height: 36px;
  max-height: 45vh;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0B2941;
  padding: 0 !important;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
}

/* Upload- und Senden-Buttons links/rechts (gleicher Au+ƒenabstand wie Topbar durch pad-x) */
.project-page .upload-inside {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #DBE6F3; border-radius: 10px;
  background: transparent; color: #476887;
}
.project-page .input-actions-right {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5rem;
}
.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary {
  height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Ab 2 Zeilen Text: Textfeld wandert nach oben in eine eigene Reihe, Buttons bleiben unten */
.project-page .chat-input-wrap.is-multiline {
  flex-wrap: wrap;              /* erlaubt Zeilenumbruch */
  align-items: center;
}
.project-page .chat-input-wrap.is-multiline #chatInput {
  order: -1;                    /* Textfeld nach oben */
  flex-basis: 100%;             /* volle Breite in der oberen Zeile */
  min-height: calc(1.4em * 2);  /* optische Mindesth+Âhe f++r "mehr als eine Zeile" */
}
.project-page .chat-input-wrap.is-multiline .upload-inside,
.project-page .chat-input-wrap.is-multiline .input-actions-right {
  order: 2;                     /* Buttons bleiben in der unteren Zeile */
}


/* === PATCH: CPV-Card b++ndig zur Details-Card === */
.project-left { padding: 0; }
.project-left .projekt-info-box { margin-inline: 0 !important; width: 100%; }
#projektCPVBox { margin-top: .75rem; }


/* ===== CPV-Card b++ndig mit der Details-Card (linke Spalte) ===== */
.project-page .project-main:has(.projekt-info-box:not(.is-collapsed)) #projektCPVBox{
  grid-column: 1;            /* linke Spalte, direkt unter den Details */
}
#projektCPVBox{
  margin-top: .75rem;        /* kleiner Abstand unter Details */
}
.cpv-compact-ul{
  list-style: none; padding: 0; margin: 0;
}
.cpv-compact-item{
  display:block; font-size:.92rem; line-height:1.25; padding:.15rem 0;
  white-space: normal; word-break: break-word;
}


/* ===== FINAL OVERRIDES ÔÇô projekt.html (2px-Regel, 1 Au+ƒenrahmen, volle Innenbreite) ===== */

/* Chat-Container: sticky zwischen Header/Footer mit genau 2px Luft */
.project-page .project-chat .chat-container,
.project-page .chat-container{
  position: sticky !important;
  top: var(--chat-top-offset, 74px) !important;                 /* 2px unter Header */
  height: var(--chat-viewport-h, 76vh) !important;              /* 2px ++ber Footer enden */
  margin: 0 auto !important;
  /* EIN +ñu+ƒerer Rahmen */
  border: 1px solid #86d8f0 !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg,#F6FAFF 0%, #F2F7FD 100%) !important;
  box-shadow: 0 10px 36px rgba(3,32,66,.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Innenleben f++llt die Box zu 100% ÔÇô keine zus+ñtzlichen Innenrahmen */
.project-page .chat-inner{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Topbar / Datei-Zeile / Verlauf / Input: volle Breite, identisches Seiten-Padding */
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  border: 0 !important;              /* killt ÔÇ×zweite UmrandungÔÇ£ */
  box-shadow: none !important;
  background: transparent !important;
}

/* Verlauf nimmt den kompletten Mittelraum ein */
.project-page .chat-messages{
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding-top: 12px !important;
  padding-bottom: 16px !important;
}

/* Bubbles: links/rechts gleicher Rand, volle Breite innerhalb der Chatbox */
.project-page .chat-messages .message,
.project-page .chat-messages .message .msg-body,
.project-page .chat-messages .message .bubble{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Datei-Pills gleiche Seitenabst+ñnde */
.project-page .filebubble-row{ padding-top: .35rem !important; padding-bottom: .25rem !important; }

/* Eingabe: Wrap f++llt die Breite, KEIN eigener Rahmen (sonst Doppelrahmen) */
.project-page .chat-input-wrap{
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;               /* verhindert zweite Linie unten */
  border-radius: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;      /* Placeholder in EINER Linie mit den Icons */
  gap: .5rem !important;
}

/* Upload-Button links unten; Actions rechts unten ÔÇô in der Wrap verankert */
.project-page .upload-inside{
  position: absolute !important;
  left: 16px; bottom: 10px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #cfe0f1; border-radius: 10px;
  background: #0f2a3a0a; color: #476887;
}
.project-page .input-actions-right{
  position: absolute !important;
  right: 16px; bottom: 10px;
  display: inline-flex; align-items: center; gap: .45rem;
}
.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary{
  height: 36px !important;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Textarea: 1 Zeile im Leerlauf in derselben Zeile wie die Icons; w+ñchst nach oben */
.project-page #chatInput{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 36px !important;               /* Einzeilig leer */
  max-height: 50vh !important;
  border: 0 !important; outline: 0 !important;
  background: transparent !important;
  resize: none !important;
  line-height: 1.45 !important;
  color: #0B2941;
  /* Platz f++r Upload links (60px) und Senden rechts (Ôëê112px), plus 16px Seitenabstand */
  padding: 10px 112px 10px 60px !important;
  overflow-y: auto !important;
}

/* Mehrzeilig-Modus (falls dein JS .is-multiline setzt) ÔÇô Textfeld nach oben, Buttons unten */
.project-page .chat-input-wrap.is-multiline{
  flex-wrap: wrap !important;
  align-items: center !important;
}
.project-page .chat-input-wrap.is-multiline #chatInput{
  order: -1 !important;
  flex-basis: 100% !important;
  min-height: calc(1.4em * 2) !important;
}
.project-page .chat-input-wrap.is-multiline .upload-inside,
.project-page .chat-input-wrap.is-multiline .input-actions-right{
  order: 2 !important;
}


/* --- CPV-Card b++ndig mit Details-Card --- */
.project-page .projekt-info-card { margin-left: 0; margin-right: 0; }

/* CPV kompakt */
.cpv-compact-ul { list-style: none; padding: 0; margin: 0; }
.cpv-compact-item { font-size: .95rem; line-height: 1.25rem; padding: 2px 0; word-break: break-word; }

/* CPV-Modal Layout */
.cpv-modal .cpv-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cpv-modal .cpv-col { min-height: 280px; border: 1px solid #e8eef6; border-radius: 10px; overflow: auto; }
.cpv-modal .cpv-col-title { font-weight: 600; padding: 6px 10px; border-bottom: 1px solid #e8eef6; background: #f8fbff; }
.cpv-modal .cpv-list { padding: 8px; }
.cpv-card { display:grid; grid-template-columns: 88px 1fr auto; gap:8px; align-items:center; padding:6px 8px; border-radius:10px; border:1px solid #e9eef6; margin-bottom:6px; cursor:pointer; }
.cpv-card .code { font-weight:600; color:#184e8b; }
.cpv-card .title { font-size: .95rem; display:flex; gap:.5rem; align-items:flex-start; }
.cpv-card .move { font-size: 1.05rem; opacity: .7; }
.cpv-empty { color:#6b7f99; padding:8px; }

/* Sidebar Overlay Klasse: active (nicht show) */
#sidebarOverlay.active { opacity: 1; pointer-events: auto; }


/* === FINAL: Chat-Innenfl+ñche f++llt die komplette Chatbox (mit kleinem Seiten-Padding) === */

.project-page .chat-inner{
  display:flex;
  flex-direction:column;
  height: var(--chat-viewport-h, 76vh);
}

.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar,
.project-page .chat-input-wrap{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 16px !important;   /* kleiner Rand je Seite */
  padding-right: 16px !important;
  box-sizing: border-box !important;   /* Border+Padding z+ñhlen in 100% rein */
  min-width: 100% !important;            /* verhindert Overflow durch lange Inhalte */
}

.project-page .chat-messages{
  flex: 1 1 auto !important;
  min-height: 0 !important;            /* n+Âtig, damit Flex-Child wirklich schrumpfen darf */
  overflow: auto !important;
}

.project-page .chat-input-wrap{
  /* ausdr++cklich volle Breite f++r die Eingabezeile */
  background: transparent;             /* optik bleibt dir ++berlassen */
  border: 0;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.project-page #chatInput{
  width: 100% !important;
  padding-left: 0 !important;          /* Text b++ndig mit dem 16px Seiten-Padding */
  padding-right: 0 !important;
  box-sizing: border-box !important;
}


/* === Cards: gleiche Breite + b++ndig === */
.project-left .projekt-info-box {
  width: 100%;
  box-sizing: border-box;
  margin-inline: 0;
}
#projektCPVBox { margin-top: .85rem; }

/* === CPV: Chips/Buttons statt Textzeilen === */
.cpv-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  max-height: var(--cpv-list-max, 60vh); /* wird per JS dynamisch gesetzt */
  overflow-y: auto;
  padding: .2rem 0 .1rem 0;
}
.cpv-chip-list.is-scrollable { padding-right: .25rem; } /* kleiner Platz f++r Scrollbar */

.cpv-chip {
  appearance: none;
  border: 1px solid #d9e6f5;
  background: #f7fbff;
  color: #0d3a5a;
  font-weight: 600;
  font-size: .95rem;
  padding: .38rem .6rem;
  border-radius: 999px;
  cursor: default;
  white-space: nowrap;  /* kein unn+Âtiger Umbruch im Chip */
}
.cpv-chip:hover {
  background: #eef6ff;
  border-color: #cfe3fb;
}

/* Platzhalter-Link direkt unter H3 ÔÇô aber nur anzeigen, wenn keine Codes */
.cpv-empty-row { margin: .2rem 0 .6rem 0; }
.cpv-empty-row[hidden] { display: none !important; }
.cpv-empty-link { color: #0a66c2; text-decoration: none; font-weight: 600; }
.cpv-empty-link:hover { text-decoration: underline; }

/* Footer-Aktion beider Cards: Button unten rechts identisch */
.projekt-info-footer {
  margin-top: .8rem;
  display: flex;
  justify-content: flex-end;  /* unten rechts */
}
#editProjectBtn,
#btnEditCPVCard {
  border: 1px solid #cfe0f5;
  background: #f2f7ff;
  color: #104a88;
  padding: .55rem 1.1rem;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
#editProjectBtn:hover,
#btnEditCPVCard:hover {
  background: #e8f1ff;
  border-color: #b9d0f5;
}

/* Sidebar-Overlay wie Dashboard */
#sidebarOverlay.sidebar-overlay { transition: opacity .18s ease; }
#sidebarOverlay.sidebar-overlay.active { opacity: 1; pointer-events: auto; }


/* projekt.css ÔÇö ANS ENDE ANH+äNGEN */

/* 4.1: Reihenfolge/Position: beide Cards im linken Stack; KEINE Fixed-Overlays */
.project-left { display: flex; flex-direction: column; gap: 1rem; }
#projektInfoBox, #projektCPVBox { position: static !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }

/* 4.2: CPV-Card b++ndig & scrollbar, wenn hoch */
#projektCPVBox {
  max-height: calc(100dvh - 270px); /* vor dem Footer enden (Faustwert) */
  overflow: auto;
}

/* 4.3: CPV-Chips (nur Code sichtbar), Tooltip per title-Attribut */
.cpv-chip {
  display: inline-block;
  margin: .25rem .35rem .25rem 0;
  padding: .36rem .55rem;
  font-size: .95em;
  border-radius: 999px;
  border: 1px solid #06b6d4;         /* T++rkis ÔÇô Corporate */
  background: #f0fdff;
  color: #0b5a66;
  white-space: nowrap;
}
.cpv-chip:hover { background: #e6fbff; }

/* 4.4: Platzhalterzeile direkt unter dem Titel, etwas dezenter */
#cpvEmptyRow {
  margin: .15rem 0 .4rem 0;
  font-size: .95em;
  color: #456;
}
#cpvEmptyRow a#cpvSelectLink { color: #0077b6; text-decoration: underline; cursor: pointer; }

/* 4.5: Modal breiter + keine horizontale Scrollerei */
#cpvModal .modal-content {
  width: min(1040px, 96vw);
  max-width: 1040px;
}
#cpvModal .modal-body {
  overflow-x: hidden;
}
#cpvModal .cpv-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
}
#cpvModal .cpv-list {
  min-width: 0;                  /* verhindert Flex-Overflow */
  max-height: min(58vh, 560px);  /* vertikales Scrollen statt horizontal */
  overflow: auto;
}

/* 4.6: Plus/Minus-Icons in T++rkis */
#cpvModal .cpv-card .move { color: #06b6d4; font-weight: 700; }
#cpvModal .cpv-card:hover .move { filter: brightness(1.05); }

/* 4.7: Buttons im Modal (Look anglehnt an bestehendes Design) */
#cpvAutoSelect.btn-secondary,
#cpvApplyAll.btn-tertiary,
#cpvCancel.btn-link,
#cpvApply.btn-primary {
  border-radius: 12px;
  padding: .55rem .9rem;
  font-weight: 700;
}
#cpvAutoSelect.btn-secondary { background:#f1fbfe; border:1px solid #bfefff; color:#0a6d80; }
#cpvAutoSelect.btn-secondary:hover { background:#e6f9ff; }
#cpvApplyAll.btn-tertiary { background:#fff; border:1px dashed #86d8f0; color:#0a6d80; }
#cpvApplyAll.btn-tertiary:hover { background:#f8feff; }
#cpvCancel.btn-link { background:transparent; border:none; color:#175189; }
#cpvCancel.btn-link:hover { text-decoration: underline; }
#cpvApply.btn-primary { background:#0077b6; color:#fff; border:1px solid #0077b6; }
#cpvApply.btn-primary:hover { background:#009ee1; }

/* 4.8: Burger wie am Dashboard (dort 3 Balken) */
.header .burger-menu { width:40px; height:40px; background:#fff; border-radius:50%; box-shadow:0 2px 10px #0077b622; display:flex; align-items:center; justify-content:center; }
.header .burger-menu span { display:block; width:22px; height:3px; background:#0077b6; margin:3.5px 0; border-radius:3px; }


/* === Chat innen wirklich vollfl+ñchig (Breite + H+Âhe) === */
body.project-page .chat-inner{
  display:flex !important;
  flex-direction:column !important;
  height: var(--chat-viewport-h, 76vh) !important;
}

body.project-page .chat-inner > .chat-topbar,
body.project-page .chat-inner > .filebubble-row,
body.project-page .chat-inner > .chat-messages,
body.project-page .chat-inner > .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Verlauf f++llt den kompletten Mittelraum ÔÇô keine alte Maxh+Âhe */
body.project-page .chat-messages{
  flex: 1 1 auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: auto !important;
  width: 100%
}

/* Bubbles & Input wirklich volle Breite */
body.project-page .chat-messages .message,
body.project-page .chat-messages .message .msg-body,
body.project-page .chat-messages .message .bubble{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
body.project-page .chat-input-bar,
body.project-page .chat-input-wrap,
body.project-page #chatInput{
  width: 100% !important;
  max-width: none !important;
}




/* === CHAT: Full-width inside the container === */
.project-page .chat-block > .chat-topbar,
.project-page .chat-block > .filebubble-row,
.project-page .chat-block > .chat-messages,
.project-page .chat-block > .chat-input-bar,
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Eingabezeile wirklich volle Breite */
.project-page .chat-input-wrap{
  width: 100% !important;
}

/* Wenn du wirklich randb++ndig willst (keine Innen-Margins aus Basis-Styles): */
.chat-topbar, .filebubble-row{ margin-left: 0 !important; margin-right: 0 !important; }



/* Thinking card + shimmer (Projektchat) */
.message.assistant.thinking .msg-body {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; color: #0B2941;
}
.message.assistant.thinking .spark {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(90deg, #bcd8ff, #86bfff, #bcd8ff);
  background-size: 200% 100%;
  animation: spark-move 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(134,191,255,.18);
}
@keyframes spark-move { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }



/* Thinking-Optik (nur UI) */
.message.assistant.thinking .msg-body {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; color: #0B2941;
}
.message.assistant.thinking .spark {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(90deg, #bcd8ff, #86bfff, #bcd8ff);
  background-size: 200% 100%;
  animation: spark-move 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(134,191,255,.18);
}
@keyframes spark-move {
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}

/* "Denkprozess"-Skeleton (rein visuell) */
.message.assistant.thinking .thoughts-skeleton {
  display: inline-flex; gap: .4rem; margin-left: .25rem;
}
.message.assistant.thinking .thoughts-skeleton i {
  display: inline-block; width: 38px; height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, #e7f1ff 0%, #d8e9ff 50%, #e7f1ff 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  opacity: .9;
}
@keyframes shimmer { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }


/* CPV-Modal breiter & h+Âher: Body scrollt, Header/Footer fix sichtbar */
#cpvModal .modal-dialog { width: min(1200px, 98vw); max-width: 1200px; }
#cpvModal .modal-content {
  width: 100%;
  max-height: 92vh;                 /* fast volle H+Âhe */
  display: flex; flex-direction: column;
  box-sizing: border-box;
}
#cpvModal .modal-header { flex: 0 0 auto; }
#cpvModal .modal-footer { flex: 0 0 auto; }
#cpvModal .modal-body {
  flex: 1 1 auto;
  overflow: auto;                   /* nur Body scrollt */
  max-height: calc(92vh - 140px);   /* grob: Header+Footer Ôëê 140px */
  overflow-x: hidden;               /* keine horizontale Leiste */
}
#cpvModal .cpv-columns { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
#cpvModal .cpv-list   { min-width: 0; }

/* Plus/Minus-Icons sicher in T++rkis (++berschreibt Fremd-Styles) */
#cpvModal .cpv-card .move { color: #06b6d4 !important; font-weight: 700; }
#cpvModal .cpv-card:hover .move { filter: brightness(1.05); }


/* ===================================================================
   PROJEKTCHAT ÔÇô Volle H+Âhe zwischen Header/Footer + neue Inputbar-Logik
   Paste ANS ENDE von css/projekt.css
   =================================================================== */



/* Topbar klein, Messages bekommen den Rest */
.project-page .chat-topbar{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .7rem 16px;                  /* schmaler Seitenabstand */
  border-bottom: 1px solid #D6E4F3;
  background: #F4F9FF;
  color: #0B2941;
}
.project-page .chat-messages{
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding: 12px 14px 16px !important;   /* schmaler Seitenabstand */
}

/* B) Neue Inputbar-Mechanik
   - Buttons (Upload/Mic/Senden) haben gleiche H+Âhe und sind au+ƒenb++ndig
   - Leerer Zustand: Textfeld eine Zeile zwischen den Buttons
   - Mit Text: Textfeld springt in eine eigene Zeile dar++ber und w+ñchst NUR nach oben
*/
.project-page .chat-input-bar{
  background: transparent !important;
  border: 0 !important;
  padding: 10px 0 12px !important;
  position: sticky !important;
  bottom: .2rem !important;
  z-index: 2 !important;
}
.project-page .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;     /* Buttons unten b++ndig */
  gap: .5rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: .2rem 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Upload links au+ƒen ÔÇô fester Button */
.project-page .upload-inside{
  position: absolute !important;
  left: 16px; bottom: 10px;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid #CFE0F1;
  background: #0f2a3a0a;
  color: #476887;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Mic + Senden rechts au+ƒen ÔÇô feste Buttons */
.project-page .input-actions-right{
  position: absolute !important;
  right: 16px; bottom: 10px;
  display: flex; align-items: center; gap: .45rem;
}
.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary{
  height: 36px;                         /* gleiche Kn+Âpfchenh+Âhe */
  display: inline-flex; align-items: center; justify-content: center;
}
.project-page .input-actions-right .btn-icon{
  width: 36px; border-radius: 10px;
  border: 1px solid #CFE0F1; background: #0f2a3a0a; color: #476887;
}

/* Textfeld:
   - LEER: eine Zeile, Platzhalter beginnt rechts neben dem Upload-Button
           und endet vor Mic/Senden
   - w+ñchst nach oben (max. 50% der Chat-H+Âhe, via JS gesetzt)
*/
.project-page #chatInput{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 36px !important;          /* H+Âhe wie Buttons */
  max-height: 50vh !important;          /* Oberlimit ÔÇô JS limitiert zus+ñtzlich relativ */
  resize: none !important;
  border: 0 !important; outline: 0 !important;
  background: transparent !important; color: #0B2941 !important;
  line-height: 1.45 !important;
  /* Platz f++r die Buttons: 16px Au+ƒenrand + 36px Icon + ~8-10px Luft */
  padding: 8px 112px 8px 60px !important;   /* rechts Mic+Senden, links Upload */
  overflow-y: auto !important;
}

/* Multiline-Zustand (wird von JS ++ber .is-multiline gesetzt):
   - Textfeld ÔÇ×springtÔÇ£ nach oben in eine eigene Zeile
   - Buttons bleiben unten b++ndig */
.project-page .chat-input-wrap.is-multiline{
  flex-wrap: wrap !important;
  align-items: center !important;
}
.project-page .chat-input-wrap.is-multiline #chatInput{
  order: -1 !important;
  flex-basis: 100% !important;
  /* oben in eigener Zeile ÔåÆ normale Innenabst+ñnde, keine Button-Reservierung n+Âtig */
  padding: 10px 12px !important;
  min-height: calc(1.5em * 2) !important; /* wirkt sichtbar ÔÇ×mehrzeiligÔÇ£ */
}
/* Buttons-Reihenfolge bleibt unten */
.project-page .chat-input-wrap.is-multiline .upload-inside,
.project-page .chat-input-wrap.is-multiline .input-actions-right{
  order: 2 !important;
}


/* ============================================================
   PROJEKTCHAT ÔÇô EDGE-TO-EDGE Fix + Inputbar-Logik (FINAL)
   Bitte ANS ENDE von css/projekt.css kopieren.
   ============================================================ */

.project-page {
  /* schmale, einheitliche Innenkante f++r alle drei Bereiche */
  --chat-side-pad: 12px;
  --chat-btn-h: 36px;         /* einheitliche Button-/Lehrzeilenh+Âhe */
}

/* 1) Chat-Container + -Block: volle Spaltenbreite, keine Klammern */
.project-page .project-chat .chat-container,
.project-page .project-chat .chat-container > .chat-inner,
.project-page .project-chat .chat-container > .chat-inner > .chat-block{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 2) Alle drei Chat-Innenbereiche randlos, einheitliches Seiten-Padding */
.project-page .chat-inner > .chat-topbar,
.project-page .chat-inner > .filebubble-row,
.project-page .chat-inner > .chat-messages,
.project-page .chat-inner > .chat-input-bar{
  width: 100% !important;
  margin: 0 !important;
  padding-left:  var(--chat-side-pad) !important;
  padding-right: var(--chat-side-pad) !important;
  border: 0 !important;               /* keine Doppelrahmen */
  box-shadow: none !important;
  background: transparent !important; /* Fl+ñche soll aus dem Container kommen */
}

/* 3) Verlauf f++llt den Mittelraum, Bubbles ohne max-width */
.project-page .chat-messages{
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding-top: 12px !important;
  padding-bottom: 16px !important;
}
.project-page .chat-messages .message,
.project-page .chat-messages .message .msg-body,
.project-page .chat-messages .message .bubble{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* 4) Topbar kompakt */
.project-page .chat-topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:#F4F9FF !important;
  color:#0B2941 !important;
  border-bottom: 1px solid #D6E4F3 !important;
  padding: .7rem var(--chat-side-pad) !important;
}

/* 5) Inputleiste: Buttons gleich hoch, au+ƒenb++ndig; Feld initially 1 Zeile */
.project-page .chat-input-bar{ padding: 0 !important; }
.project-page .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: center !important;      /* Platzhalter in einer Linie */
  gap: .5rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Links: Upload-Button b++ndig au+ƒen; Rechts: Mic + Senden b++ndig au+ƒen */
.project-page .upload-inside{
  position: absolute !important;
  left: 12px; bottom: 10px;
  width: var(--chat-btn-h); height: var(--chat-btn-h);
  border-radius: 10px;
  border: 1px solid #CFE0F1; background: #0f2a3a0a; color: #476887;
  display: inline-flex; align-items: center; justify-content: center;
}
.project-page .input-actions-right{
  position: absolute !important;
  right: 12px; bottom: 10px;
  display: inline-flex; align-items: center; gap: .45rem;
}
.project-page .input-actions-right .btn-icon,
.project-page .input-actions-right .btn-primary{
  height: var(--chat-btn-h) !important;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Textfeld:
   - leer: eine Zeile (genau H+Âhe wie Buttons)
   - Platzhalter beginnt rechts neben Upload-Button
   - endet vor Mic/Senden (fixer Puffer)
*/
.project-page #chatInput{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: var(--chat-btn-h) !important;
  max-height: 50vh !important;               /* Obergrenze; JS limitiert zus+ñtzlich relativ */
  resize: none !important;
  border: 0 !important; outline: 0 !important;
  background: transparent !important; color: #0B2941 !important;
  line-height: 1.45 !important;
  /* 12px Innenkante + 36px Upload + ~12px Luft = ~60px links
     rechts: ~112px Reserve (Mic + Senden + Luft) */
  padding: 8px 112px 8px 60px !important;
  overflow-y: auto !important;
}

/* Mehrzeilig-Modus (wird von JS gesetzt): Textfeld springt nach oben,
   Buttons bleiben unten; Feld w+ñchst NUR nach oben. */
.project-page .chat-input-wrap.is-multiline{
  flex-wrap: wrap !important;
  align-items: center !important;
}
.project-page .chat-input-wrap.is-multiline #chatInput{
  order: -1 !important;
  flex-basis: 100% !important;
  padding: 10px 12px !important;              /* oben eigene Zeile -> normale Innenabst+ñnde */
  min-height: calc(1.5em * 2) !important;     /* sichtbar ÔÇ×mehr als eine ZeileÔÇ£ */
}
.project-page .chat-input-wrap.is-multiline .upload-inside,
.project-page .chat-input-wrap.is-multiline .input-actions-right{
  order: 2 !important;
}



/* === CPV-Modal: 80% Breite, (nahezu) volle H+Âhe, kein horizontales Scrollen === */
body.modal-open { overflow: hidden; } /* Seite selbst nicht scrollen, nur Modal-Body */

#cpvModal .modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 80% der Viewport-Breite */
  width: 80vw !important;
  max-width: 80vw !important;
  /* volle H+Âhe minus ganz kleiner Puffer */
  height: 98dvh !important;
  max-height: 98dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  overflow: visible;
  box-sizing: border-box;
  z-index: 2000; /* ++ber allem */
}

#cpvModal .modal-content {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* keine horizontale Leiste am Content */
  box-sizing: border-box;
  border-radius: 14px;
}

#cpvModal .modal-header { flex: 0 0 auto; }
#cpvModal .modal-footer { flex: 0 0 auto; }

#cpvModal .modal-body {
  flex: 1 1 auto;              /* f++llt die restliche H+Âhe */
  overflow: auto;              /* HIER vertikal scrollen, falls n+Âtig */
  max-height: none !important; /* keine zus+ñtzliche Deckelung */
  padding: 16px;
  overflow-x: hidden;          /* keine horizontale Scrollbar */
}

#cpvModal .cpv-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;                /* wichtig gegen Overflow */
}

#cpvModal .cpv-col,
#cpvModal .cpv-list { min-width: 0; }   /* kein ÔÇ×Aufbl+ñhenÔÇ£ der Spalten */

/* Plus/Minus-Icons SICHER in T++rkis (falls Global-Styles lila setzen) */
#cpvModal .cpv-card .move { color: #06b6d4 !important; font-weight: 700; }
#cpvModal .cpv-card:hover .move { filter: brightness(1.06); }



/* ===== CPV-MODAL: GR+ûSSE + SCROLL (FINAL) ===== */
#cpvModal .modal-dialog.cpv-modal{
  width: 80vw;
  max-width: 1600px;
  height: 98dvh;
  max-height: 98dvh;
  margin: 1vh auto;
}
#cpvModal .modal-dialog.cpv-modal .modal-content{
  width: 100%;
  height: 100%;
  max-width: none !important;   /* ++berschreibt generische Regeln */
  max-height: none !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;             /* kein horizontales Seiten-Scrolling */
}
#cpvModal .modal-dialog.cpv-modal .modal-body{
  flex: 1 1 auto;
  overflow: auto;               /* Inhalte im Body scrollen */
}
#cpvModal .cpv-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-height: 54vh;
}
#cpvModal .cpv-list{
  height: 100%;
  min-height: 46vh;
  overflow: auto;
}

/* T++rkis f++r + /  */
:root { --va-accent: #06b6d4; }     /* Fallback falls nicht gesetzt */
#cpvModal .cpv-card .move { color: var(--va-accent); }


.lb-progress-card { padding:12px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.lb-progress-row { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; }
.lb-check.ok { opacity:.9; }
.lb-check.warn { opacity:.8; }


/* ===== FINAL: Projektchat ÔÇô volle Spaltenbreite + saubere Innenbreite ===== */

.project-page .project-left  { grid-column:1 !important; }
.project-page .project-chat  { grid-column:2 !important; }
.project-page .project-right { grid-column:3 !important; }

/* Rechte Box (Workboard) komfortabel "sticky" */
.project-right .va-workboard { position: sticky; top: 84px; width: 100%; }

/* Sicherheit/Reset */
.project-left, .project-right { float:none; position:relative; z-index:0; }

/* (falls noch nicht vorhanden) */
.is-hidden { display:none !important; }



/* ===== Input-Bar: Buttons gleich hoch, b++ndig an den R+ñndern ===== */
.project-page .chat-input-wrap{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding-block:8px !important;
}

.project-page .chat-input-wrap .btn-icon{
  height:36px !important;
  width:36px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:10px !important;
}

/* Platzhalter sitzt zwischen den Buttons ÔÇô reserviere links u. rechts Platz */
.project-page #chatInput{
  flex:1 1 auto !important;
  width:100% !important;
  min-height:36px !important;           /* gleiche H+Âhe wie Buttons wenn leer */
  max-height:50vh !important;
  border:0 !important; outline:0 !important;
  resize:none !important;
  background:transparent !important;
  padding:8px 112px 8px 60px !important; /* rechts: Mic+Send, links: Upload */
  overflow-y:auto !important;
}

/* Mehrzeilig: Text springt nach oben, Buttons bleiben unten b++ndig */
.project-page .chat-input-wrap.is-multiline{
  flex-wrap:wrap !important;
}
.project-page .chat-input-wrap.is-multiline #chatInput{
  order:-1 !important;
  flex-basis:100% !important;
  padding:10px 12px !important;         /* oben in eigener Zeile  normaler Innenabstand */
  min-height:calc(1.5em * 2) !important;
}


.lb-progress-card { padding:12px; background:#fff; border:1px solid #DBE6F3; border-radius:12px; }
.lb-progress-row { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; }
.lb-check.ok { opacity:.95; }
.lb-check.warn { opacity:.9; }
.muted-text { color:#5a6f84; }



/* === Sidebar Footer-Bereich (unten verankert) === */
#sidebarMenu, .sidebar-menu-left{ position: fixed; } /* ++blich bei dir */
#sidebarMenu { display: flex; flex-direction: column; }
#sidebarMenu .sidebar-footer{
  margin-top: auto;                  /* an das Ende der Sidebar schieben */
  padding: 12px 10px 14px;
  border-top: 1px solid #e6eef7;
  background: transparent;
}
#sidebarMenu .sidebar-footer-links{
  display: grid; gap: 6px;
}
#sidebarMenu .sidebar-footer-links a{
  color: #0a3855; text-decoration: none; font-weight: 600;
}
#sidebarMenu .sidebar-footer-links a:hover{ text-decoration: underline; }
#sidebarMenu .sidebar-footer-logo{
  margin-top: 10px; opacity: .9;
}
#sidebarMenu .sidebar-footer-logo img,
#sidebarMenu .sidebar-footer-logo svg{
  max-width: 140px; height: auto; display: block;
}


/* Upload-Plus deutlich gr+Â+ƒer/fetter (funktioniert f++r Text, Material Icons oder SVG) */
body.project-page .upload-inside{
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
body.project-page .upload-inside .material-icons,
body.project-page .upload-inside svg{
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
}


/* Einheitliche Seiten-/Vertikalabst+ñnde f++r Chat-Topbar und untere Buttonzeile */
body.project-page{
  --chat-pad-x: 16px;   /* links/rechts: soll der +£berschrift in der Topbar entsprechen */
  --chat-pad-y: 10px;   /* oben/unten: entspricht dem vertikalen Padding in der Topbar */
}

/* Topbar nutzt dieselben Innenabst+ñnde -> Referenz f++r +£berschrift links */
body.project-page .chat-topbar{
  padding: var(--chat-pad-y) var(--chat-pad-x) !important;
}



/* Topbar-Actions vereinheitlichen & Reihenfolge: [LB | Clear] (Clear au+ƒen) */
body.project-page .chat-topbar .chat-topbar-actions{
  display: inline-flex; align-items: center; gap: .45rem;
}
#startLBBtn, #chatClearBtn{
  height: 36px !important;
  padding: 0 .9rem !important;
  border-radius: 10px !important;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Reihenfolge: LB innen, Clear au+ƒen */
#startLBBtn{ order: 1; }
#chatClearBtn{ order: 2; }


/* LB-Button: deaktiviert deutlicher blass, Cursor blockiert */
#startLBBtn:disabled,
#startLBBtn[aria-disabled="true"]{
  opacity: .35 !important;
  cursor: not-allowed !important;
  filter: saturate(.7);
}

/* ÔÇ×DraftÔÇ£-Modus optisch etwas leichter als ÔÇ×ReadyÔÇ£ */
#startLBBtn[data-mode="draft"]:not(:disabled){
  background: #f1fbfe !important;
  border: 1px dashed #86d8f0 !important;
  color: #0a6d80 !important;
}
#startLBBtn[data-mode="full"]:not(:disabled){
  background: #009EE1 !important;
  border: 1px solid #0a9edc !important;
  color: #fff !important;
}


/* =========================
   CPV-Modal: linksb++ndig, 94vw breit, fast volle H+Âhe
   ========================= */
body.modal-open { overflow: hidden; } /* Seite selbst stoppt Scroll */

#cpvModal { z-index: 2000; } /* ++ber Overlay/Sidebar */
#cpvModal .modal-dialog.cpv-modal.leftwide{
  position: fixed;
  top: 12px;
  left: 3vw;                    /* linksb++ndiger Start */
  width: 94vw;                  /* sehr breit */
  max-width: 1800px;
  height: calc(100dvh - 24px);  /* quasi volle H+Âhe minus kleinen Rand */
  max-height: calc(100dvh - 24px);
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;   /* NICHT zentrieren */
}

#cpvModal .modal-dialog.cpv-modal.leftwide .modal-content{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header | Body (scrollt) | Footer */
  overflow: hidden;                   /* keine horizontale Seite-Scrollbar */
  border-radius: 14px;
  box-sizing: border-box;
}

#cpvModal .modal-dialog.cpv-modal.leftwide .modal-body{
  overflow: auto;         /* nur der Body scrollt */
  padding: 16px;
  min-height: 0;          /* wichtig f++r Grid-Overflow */
  overflow-x: hidden;     /* keine horizontale Leiste */
}

#cpvModal .cpv-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-width: 0;
}

#cpvModal .cpv-col,
#cpvModal .cpv-list{
  min-width: 0;           /* Spalten bl+ñhen nicht auf */
}

/* Buttons im Footer: typografisch konsistent */
#cpvAutoSelect.btn-secondary,
#cpvApplyAll.btn-tertiary,
#cpvCancel.btn-link,
#cpvApply.btn-primary {
  border-radius: 12px;
  padding: .55rem .9rem;
  font-weight: 700;
}

/* Plus/Minus Icons SICHER in T++rkis */
:root { --va-accent: #06b6d4; }
#cpvModal .cpv-card .move { color: var(--va-accent) !important; font-weight: 700; }
#cpvModal .cpv-card:hover .move { filter: brightness(1.06); }


/* ===== Footerless Layout: Chat bis zum Seitenende ===== */
html, body { height: 100%; }
body.project-page { min-height: 100dvh; }

.project-page {
  --top-gap: 10px;
  --bottom-gap: 10px;
  /* --header-h wird per JS gesetzt (Fallback 72px) */
  --header-h: 72px;
}

/* Sidebar-Footer Styles (Logo + Links am unteren Rand der Sidebar) */
.sidebar-footer{
  margin-top: auto;
  padding: 12px 10px;
  border-top: 1px solid #e6eef8;
}
.sidebar-footer-links{ display: grid; gap: .35rem; margin-bottom: .6rem; }
.sidebar-footer-link{ color:#0a3855; text-decoration:none; font-weight:600; }
.sidebar-footer-link:hover{ text-decoration:underline; }
.sidebar-footer-logo img, .sidebar-footer-logo svg{
  max-width: 150px; height:auto; display:block; opacity:.95;
}


/* ===== CPV-Modal ÔÇô Vollbild-Layout, linksb++ndig, Footer sichtbar (FINAL) ===== */
body.modal-open { overflow: hidden; }

#cpvModal .modal-dialog.cpv-modal.leftwide {
  position: fixed !important;
  top: 10px !important;
  left: 2vw !important;
  width: 96vw !important;           /* ~80ÔÇô96 %, je nach Wunsch */
  max-width: 1800px !important;
  height: calc(100dvh - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;       /* NICHT zentrieren */
  z-index: 2000 !important;
}

#cpvModal .modal-dialog.cpv-modal.leftwide .modal-content {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* Header | Body scrollt | Footer */
  overflow: hidden !important;                  /* keine horizontale Seite-Scrollbar */
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

#cpvModal .modal-dialog.cpv-modal.leftwide .modal-header { padding: 14px 16px; }
#cpvModal .modal-dialog.cpv-modal.leftwide .modal-footer {
  display: flex !important;
  gap: .6rem !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 12px 16px !important;
  border-top: 1px solid #e6eef9 !important;
  background: #fff !important;
}

#cpvModal .modal-dialog.cpv-modal.leftwide .modal-body {
  overflow: auto !important;         /* nur der Body scrollt */
  padding: 16px !important;
  min-height: 0 !important;          /* wichtig f++r Grid-Overflow */
  overflow-x: hidden !important;     /* keine horizontale Leiste */
}

#cpvModal .cpv-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; }
#cpvModal .cpv-col, #cpvModal .cpv-list { min-width: 0; }

/* Buttons im Footer konsistent */
#cpvAutoSelect.btn-secondary,
#cpvApplyAll.btn-tertiary,
#cpvCancel.btn-link,
#cpvApply.btn-primary,
#cpvClearAll.btn-tertiary {
  border-radius: 12px !important;
  padding: .55rem .9rem !important;
  font-weight: 700 !important;
}

/* Plus/Minus-Icons sicher in T++rkis (++berschreibt evtl. lila globale Styles) */
:root { --va-accent: #06b6d4; }
#cpvModal .cpv-card .move { color: var(--va-accent) !important; font-weight: 700; }
#cpvModal .cpv-card:hover .move { filter: brightness(1.06); }


/* ====== Projekt bearbeiten ÔÇô Modal Tweaks (schmalere Felder, mehr H+Âhe) ====== */

/* 1) Modal etwas h+Âher machen und horizontales +£berlaufen verhindern */
#newProjectModal .modal-content{
  width: min(900px, 96vw);   /* etwas breiter als vorher, aber viewport-sicher */
  max-height: 92vh;          /* mehr H+Âhe, damit der Button i.d.R. sichtbar bleibt */
  display: grid;
  grid-template-rows: auto 1fr; /* Header + Body; Footer ist im Form unten */
  overflow: hidden;          /* kein horizontaler Scrollbalken am Container */
}

/* 2) Scroll nur im Body, kein X-Scroll */
#newProjectModal .modal-body{
  overflow: auto;
  overflow-x: hidden;
  padding: 1rem 1.25rem;
  word-break: normal;
  overflow-wrap: anywhere;   /* lange W+Ârter/Links umbrechen */
}

/* 3) Formular bewusst schmaler zentrieren, damit nichts ++bersteht */
#newProjectModal #projectForm{
  max-width: 620px;          /* << hier stellst du die Feldbreite ein */
  margin: 0 auto;
  display: grid;
  gap: .75rem;
}

/* 4) Eingabefelder immer 100% vom (schmalen) Formular, inkl. Box-Sizing */
#newProjectModal input[type="text"],
#newProjectModal input[type="number"],
#newProjectModal input[type="date"],
#newProjectModal select,
#newProjectModal textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 5) Info-Popover/Texte im Modal nicht zu breit werden lassen */
#newProjectModal .info-popover{
  max-width: min(620px, 90vw);
  overflow: auto;
}

/* 6) Speichern-Button ohne Scroll sichtbar halten (sanftes "sticky") */
#newProjectModal #projectFormSubmit{
  position: sticky;
  bottom: .25rem;            /* klebt am unteren Rand des Body-Scrollbereichs */
  z-index: 1;
  /* kleine optische Trennung vom Inhalt beim Scrollen */
  box-shadow: 0 -10px 18px rgba(255,255,255,0.95);
}

/* 7) Mobile ÔÇô Formular nutzt die volle Breite */
@media (max-width: 640px){
  #newProjectModal #projectForm{ max-width: 100%; }
  #newProjectModal .modal-content{ width: 96vw; max-height: 94vh; }
}


/* ===== Projekt bearbeiten ÔÇô Modal-Layout exakt b++ndig & h+Âher ===== */

/* Mehr nutzbare H+Âhe + sauberes Scroll-Verhalten nur im Body */
#newProjectModal .modal-content{
  width: min(920px, 96vw);
  max-height: 95vh;
  display: grid;
  grid-template-rows: auto 1fr; /* Header + Body */
  overflow: hidden;             /* kein X-Scroll am Container */
}

/* Body ohne Au+ƒen-Padding, damit der gerahmte Bereich b++ndig passt */
#newProjectModal .modal-body{
  padding: 0;
  overflow: auto;
  overflow-x: hidden;
}

/* Formular bildet den t++rkis gerahmten Block und f++llt die Breite */
#newProjectModal #projectForm{
  /* Rahmen/Innenabstand */
  border: 2px solid var(--va-teal, #1ecad3);
  border-radius: 12px;
  padding: 18px 22px;

  /* volle Breite, kein Zentrieren */
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;

  /* 2-Spalten-Grid: Label | Feld */
  display: grid;
  grid-template-columns: 240px 1fr; /* Links Label, rechts Eingabe */
  column-gap: 14px;
  row-gap: 12px;
  align-items: center;
}

/* Labels links in Spalte 1 (inkl. Labels mit Info-Button) */
#newProjectModal #projectForm > label,
#newProjectModal #projectForm > .form-label-with-info{
  grid-column: 1;
  margin: 0;
}

/* Eingaben rechts in Spalte 2 ÔÇô immer volle Breite */
#newProjectModal #projectForm input[type="text"],
#newProjectModal #projectForm input[type="number"],
#newProjectModal #projectForm input[type="date"],
#newProjectModal #projectForm select,
#newProjectModal #projectForm textarea{
  grid-column: 2;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Checkbox-Zeilen (mit Info-Button) ++ber beide Spalten */
#newProjectModal #projectForm .checkbox-row{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Speichern-Button ++ber beide Spalten ÔÇô unten sticky sichtbar */
#newProjectModal #projectFormSubmit{
  grid-column: 1 / -1;
  position: sticky;
  bottom: 0;
  align-self: end;
  margin-top: .5rem;
  box-shadow: 0 -10px 18px rgba(255,255,255,0.95);
}

/* Popover im Modal auf sinnvolle Breite begrenzen */
#newProjectModal .info-popover{
  max-width: min(860px, 94vw);
  overflow: auto;
}

/* Mobile: etwas schmalere Label-Spalte */
@media (max-width: 640px){
  #newProjectModal #projectForm{
    grid-template-columns: 160px 1fr;
    padding: 14px 14px;
  }
}


/* === Edit-Modal auf projekt.html wie Dashboard darstellen === */
#newProjectModal .modal-content{
  /* wie Dashboard, aber minimal h+Âher */
  width: min(96vw, 860px);
  max-height: 92vh;              /* etwas h+Âher als Standard */
}

#newProjectModal .modal-body{
  padding: 1.2rem;
  overflow: auto;                 /* falls Popover/kleine Bildschirme */
}

#newProjectModal #projectForm{
  width: 100%;
  max-width: none;                /* NICHT zentrieren */
  margin: 0;                      /* linksb++ndig starten */
  display: block;
}

#newProjectModal #projectForm > *{ max-width: 100%; }
#newProjectModal #projectForm input,
#newProjectModal #projectForm select,
#newProjectModal #projectForm textarea{ width: 100%; }

#newProjectModal .checkbox-row{
  display: flex; align-items: center; gap: .6rem;
}
#newProjectModal .checkbox-inline{
  display: inline-flex; align-items: center; gap: .5rem;
}

/* falls irgendwo noch ein Rahmen/Stil den Formbereich "einengt" -> neutralisieren */
#newProjectModal #projectForm{
  border: 0 !important; box-shadow: none !important; background: transparent !important;
}


/* ===== Edit-Modal schmaler + Rahmen rechts sichtbar ===== */

/* Modal selbst etwas schmaler als zuvor */
#newProjectModal .modal-content{
  width: min(820px, 90vw);   /* <ÔÇö hier ggf. 780ÔÇô860px probieren */
  max-height: 94vh;
}

/* etwas Innenabstand, damit der Rahmen nicht am Rand klebt */
#newProjectModal .modal-body{
  padding: 14px 16px;
  overflow: auto;
  overflow-x: hidden;
}

/* Der gerahmte Bereich (Form) ist bewusst schmaler als das Modal
   und bleibt LINKS b++ndig (kein Zentrieren). */
#newProjectModal #projectForm{
  width: 680px;              /* <ÔÇö hier die Breite des t++rkisen Blocks einstellen */
  max-width: calc(100% - 16px);
  margin: 0;                 /* linksb++ndig */
  box-sizing: border-box;
}

/* Felder f++llen die Form-Breite */
#newProjectModal #projectForm input,
#newProjectModal #projectForm select,
#newProjectModal #projectForm textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Button sichtbar halten */
#newProjectModal #projectFormSubmit{
  position: sticky;
  bottom: 0;
  box-shadow: 0 -10px 18px rgba(255,255,255,0.95);
}

/* Mobile etwas flexibler */
@media (max-width: 640px){
  #newProjectModal .modal-content{ width: 94vw; }
  #newProjectModal #projectForm{ width: 100%; }
}


/* === Projekt bearbeiten: Form-Block linksb++ndig, schmaler als Modal === */

/* Modal selbst darf gern etwas schmaler sein (optional) */
#newProjectModal .modal-content{
  max-width: 820px !important;   /* bei Bedarf 780ÔÇô860px anpassen */
  width: 92vw !important;
  max-height: 94vh !important;
}

/* Body mit definiertem Innenabstand, kein X-Scroll */
#newProjectModal .modal-body{
  padding: 12px 14px 16px 14px !important;  /* rechts leichte Luft */
  overflow-x: hidden !important;
}

/* >>> DER WICHTIGE TEIL:
   Das Formular (t++rkiser Rahmen) ist linksb++ndig,
   aber NICHT volle Breite, damit rechts der Rand sichtbar bleibt. */
#newProjectModal #projectForm{
  /* Breite: feste Obergrenze + dynamische Reserve zum rechten Rand */
  width: min(680px, calc(100% - 26px)) !important;
  max-width: calc(100% - 26px) !important;

  /* linksb++ndig (keine Zentrierung), Border in der Breite mitrechnen */
  margin: 0 !important;
  box-sizing: border-box !important;

  /* Rahmen & Innenabstand */
  border: 2px solid var(--va-teal, #1ecad3) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;

  /* falls vorher Grid/Block gemischt war: neutral & stabil */
  display: block !important;
}

/* Input-/Select-Felder f++llen die (schmalere) Formularbreite */
#newProjectModal #projectForm input,
#newProjectModal #projectForm select,
#newProjectModal #projectForm textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Optional: Button unten ÔÇ£klebtÔÇØ sichtbar */
#newProjectModal #projectFormSubmit{
  position: sticky !important;
  bottom: 0 !important;
  box-shadow: 0 -10px 18px rgba(255,255,255,0.95);
}

/* Mobile ÔÇô volle Breite, aber mit kleiner rechter Reserve */
@media (max-width: 640px){
  #newProjectModal #projectForm{
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    padding: 14px !important;
  }
}


/* ===== Projekt bearbeiten ÔÇô Final-Layout ===== */

/* (1) +äu+ƒeren t++rkisfarbenen Rahmen entfernen (nur der innere am Formular bleibt) */
#newProjectModal .modal-content,
#newProjectModal .modal-body {
  border: none !important;
}
#newProjectModal .modal-body > hr { display: none !important; }

/* (2) Header kompakter, damit die Felder h+Âher starten */
#newProjectModal .modal-header{
  padding: 10px 16px !important;   /* vorher gr+Â+ƒer */
  margin: 0 !important;
  border: 0 !important;
}
#newProjectModal #projectModalTitle{
  margin: 0 !important;
  line-height: 1.25;
}

/* (3) Modal bis fast zum Seitenende (oben/unten nur kleiner Rand) */
#newProjectModal .modal-content{
  width: min(840px, 92vw) !important;
  height: calc(100vh - 24px) !important;  /* f++llt die H+Âhe */
  max-height: none !important;
  margin: 12px auto !important;           /* kleiner Abstand zu Top/Bottom */
  display: grid !important;
  grid-template-rows: auto 1fr !important;/* Header + Body */
  overflow: hidden !important;            /* kein X-Scroll */
}
#newProjectModal .modal-body{
  overflow: hidden !important;            /* kein Scrollen im Body */
  padding: 8px 14px 14px !important;      /* kompakter Innenabstand */
}

/* (4) Text- & Feldgr+Â+ƒen straffen, sodass alles ohne Scroll passt */
#newProjectModal{ --va-fs: .95rem; --va-pad: 10px; }
#newProjectModal #projectForm{
  /* EINZIGER sichtbarer t++rkiser Rahmen */
  border: 2px solid var(--va-teal, #1ecad3) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  /* schmaler als das Modal, linksb++ndig, rechts Luft f++r Rand */
  width: min(700px, calc(100% - 30px)) !important;
  max-width: calc(100% - 30px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;

  /* kompaktere vertikale Abst+ñnde im Formular */
  display: grid;
  row-gap: 10px;
}

#newProjectModal #projectForm label,
#newProjectModal .form-label-with-info{
  font-size: var(--va-fs);
  margin: 0;
}

#newProjectModal #projectForm input[type="text"],
#newProjectModal #projectForm input[type="number"],
#newProjectModal #projectForm input[type="date"],
#newProjectModal #projectForm select,
#newProjectModal #projectForm textarea{
  font-size: var(--va-fs) !important;
  padding: var(--va-pad) 12px !important;
  height: 40px !important;        /* kompaktere Felder */
  line-height: 1.25 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#newProjectModal .checkbox-row{
  display: flex; align-items: center; gap: .55rem;
  margin: 2px 0 0 0;
}
#newProjectModal .checkbox-inline input{ transform: translateY(1px); }
#newProjectModal .info-btn{ transform: scale(.92); }

/* (5) ÔÇ×Projekt speichernÔÇ£ fest am unteren Rand des sichtbaren Bereichs */
#newProjectModal #projectFormSubmit{
  position: sticky;       /* bleibt unten sichtbar */
  bottom: 0;
  align-self: end;
  margin-top: 6px;
  box-shadow: 0 -10px 18px rgba(255,255,255,0.95);
}

/* Extra: auf sehr kleinen Screens noch kompakter werden */
@media (max-width: 640px){
  #newProjectModal .modal-content{ width: 94vw !important; }
  #newProjectModal #projectForm{
    width: calc(100% - 18px) !important;
    padding: 12px !important;
  }
  #newProjectModal{ --va-fs: .92rem; --va-pad: 9px; }
}


/* Close-X exakt oben rechts im Header des Edit-Modals */
#newProjectModal .modal-header{ position: relative; }
#newProjectModal .modal-header .modal-close,
#newProjectModal .modal-header .close-btn{
  position: absolute;
  right: .75rem;
  top: .55rem;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: #1f2a37;
  border-radius: 999px;
}
#newProjectModal .modal-header .modal-close:hover,
#newProjectModal .modal-header .close-btn:hover{
  background: #f1f5f9;
  color: #0f172a;
}


/* ===== CPV: Treffer-Streifen unter dem Suchfeld ===== */
#cpvModal .cpv-search-results{
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  max-height: 220px;          /* scrollt bei vielen Treffern */
  overflow: auto;
}

#cpvModal .cpv-hit{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-radius: 8px;
}
#cpvModal .cpv-hit:hover{ background: rgba(6,182,212,0.06); }

#cpvModal .cpv-hit .code{
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  opacity: .85;
}
#cpvModal .cpv-hit .title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Plus/Minus in T++rkis */
:root { --va-accent: #06b6d4; }
#cpvModal .cpv-add,
#cpvModal .cpv-remove,
#cpvModal .move{
  color: var(--va-accent) !important;
  font-weight: 700;
}


#cpvModal .cpv-add, #cpvModal .cpv-remove{
  border: 1px solid currentColor;
  width: 28px; height: 28px; line-height: 26px;
  border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
}
#cpvModal .cpv-add:hover, #cpvModal .cpv-remove:hover{
  filter: brightness(1.06);
}

/* Kleines ÔÇ×leerÔÇ£-Label */
#cpvModal .cpv-empty{
  color: rgba(0,0,0,.55);
  font-size: .95rem;
}


/* ==== CPV-Modal: Grundlayout wie Edit-Modal, kompakter Header ==== */
#cpvModal .modal-content{
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;   /* Header | Body | Footer */
  overflow: hidden !important;
  border-radius: 14px !important;
}

#cpvModal .modal-header{
  padding: 10px 16px !important;                  /* kompakter wie Edit-Modal */
  border: 0 !important;
  position: relative;
}
#cpvModal .modal-header h3{ margin: 0 !important; }

/* Close-"X" oben rechts */
#cpvModal .modal-header .modal-close{
  position: absolute; right: 10px; top: 6px;
  width: 32px; height: 32px; border-radius: 999px;
  border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 32px;
  color: #64748b;
}
#cpvModal .modal-header .modal-close:hover{ background: rgba(0,0,0,.05); }

/* Body f++llt bis unten; nur innere Bereiche scrollen */
#cpvModal .modal-body{
  padding: 12px 16px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 0 1fr !important;   /* Suche | Treffer | Spalten (default ohne Suche) */
  row-gap: 10px !important;
  min-height: 0 !important;
}

/* Wenn Suche aktiv ist, gib den Treffern ÔÇ×richtigÔÇ£ Platz (++ber den Vorschl+ñgen) */
#cpvModal.cpv-has-search .modal-body{
  grid-template-rows: auto minmax(140px, 0.6fr) 1fr !important;
}

/* Suchfeld-Reihe (dein vorhandenes Input) */
#cpvModal .cpv-search{ width: 100%; }

/* Treffer-Streifen ÔÇô jetzt gro+ƒfl+ñchig ++ber den Vorschl+ñgen */
#cpvModal .cpv-search-results{
  border: 1px solid #e6eef9; border-radius: 10px;
  background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.05);
  overflow: auto; min-height: 44px;
  padding: 8px 10px;
}
#cpvModal .cpv-search-results[hidden]{ display: none !important; }

#cpvModal .cpv-hit{
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 8px; align-items: center;
  padding: 6px 4px; border-radius: 8px;
}
#cpvModal .cpv-hit:hover{ background: rgba(6,182,212,.06); }
#cpvModal .cpv-hit .code{ font-variant-numeric: tabular-nums; font-weight: 600; opacity: .9; }
#cpvModal .cpv-empty{ color: rgba(0,0,0,.55); }

/* Spalten mit Vorschl+ñgen/Auswahl ÔÇô f++llen den Restbereich */
#cpvModal .cpv-columns{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; }
#cpvModal #cpvSuggestions, #cpvModal #cpvSelected{
  min-height: 0; overflow: auto; /* Scrollt nur, wenn zu viel Inhalt da ist */
}

/* Footer direkt am Inhalt, kein gro+ƒer Abstand */
#cpvModal .modal-footer{
  display:flex !important; gap:.6rem !important;
  align-items:center !important; justify-content:flex-end !important;
  padding: 12px 16px !important;
  border-top: 1px solid #e6eef9 !important;
  background:#fff !important;
}

/* Farben: T++rkis f++r Plus/Minus (auch falls irgendwo ein lilafarbenes SVG war) */
:root { --va-accent: #06b6d4; }
#cpvModal .cpv-card .move,
#cpvModal .cpv-add, #cpvModal .cpv-remove{
  color: var(--va-accent) !important;
}
#cpvModal .cpv-card .move::before{ content: none !important; } /* evtl. lila Pseudo-Icon killen */
#cpvModal .cpv-card svg, 
#cpvModal .cpv-card [class*="icon"]{
  fill: currentColor !important; stroke: currentColor !important;
}

/* Optik der kleinen +/ Buttons im Treffer-Streifen */
#cpvModal .cpv-add, #cpvModal .cpv-remove{
  border: 1px solid currentColor; width: 28px; height: 28px; line-height: 26px;
  border-radius: 999px; display:inline-flex; align-items:center; justify-content:center;
  background: transparent;
}
#cpvModal .cpv-add:hover, #cpvModal .cpv-remove:hover{ filter: brightness(1.06); }


#cpvModal .modal-body{
  padding: 12px 16px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 0 1fr !important;      /* Suche | Treffer(0) | Spalten */
  row-gap: 10px !important;
  min-height: 0 !important;
}
#cpvModal.cpv-has-search .modal-body{
  grid-template-rows: auto minmax(140px, 0.6fr) 1fr !important; /* Suche aktiv -> Treffer gro+ƒ */
}
#cpvModal .cpv-search-results{ overflow:auto; min-height:44px; }


:root { --va-accent: #06b6d4; }
#cpvModal .cpv-card .move,
#cpvModal .cpv-add, #cpvModal .cpv-remove{ color: var(--va-accent) !important; }
#cpvModal .cpv-card svg,
#cpvModal .cpv-card [class*="icon"]{ fill: currentColor !important; stroke: currentColor !important; }


/* Header ankern, X absolut platzieren */
#newProjectModal .modal-header { position: relative; }
#newProjectModal .modal-header .modal-close {
  position: absolute;
  right: .8rem;
  top: .6rem;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: #1f2a37; border-radius: 999px;
}
#newProjectModal .modal-header .modal-close:hover { background: #f1f5f9; color:#0f172a; }

/* Auf gro+ƒen Screens mehr vertikaler Abstand zwischen den Zeilen */
@media (min-width: 1100px){
  #newProjectModal #projectForm { row-gap: 16px; }
  #newProjectModal #projectForm label { margin-top: 2px; }
}

/* (optional) minimal gr+Â+ƒere Touch-Ziele */
#newProjectModal #projectForm input,
#newProjectModal #projectForm select {
  min-height: 42px;
}


/* Close-X sauber platzieren */
#newProjectModal .modal-header { position: relative; }
#newProjectModal .modal-header .modal-close {
  position: absolute;
  top: 10px;
  /* wir setzen 'left' per JS exakt an die Formularkante; 'right' ist nur Fallback */
  right: 1rem;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: #1f2a37; border-radius: 999px;
  z-index: 5;
}
#newProjectModal .modal-header .modal-close:hover { background: #f1f5f9; color: #0f172a; }

/* Popover ++ber dem Modal anzeigen (keine Clipping-Probleme) */
#newProjectModal .modal-body { overflow: visible !important; }
#newProjectModal .info-popover{
  z-index: 9999;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
}

/* Auf gro+ƒen Bildschirmen etwas mehr Abstand zwischen den Feldern */
@media (min-width: 1200px){
  #newProjectModal #projectForm{ row-gap: 18px; }
}


/* === CPV-Modal ÔÇô Design-Finetuning (nur Optik) =================== */

/* 1) +£berschrift in Blau wie im Edit-Modal + Z+ñhler als "Chip" */
#cpvModal .modal-header h3{
  color: #0b2f55;          /* Blau wie im Edit-Modal-Look */
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
#cpvModal .cpv-sel-count{
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid #cfe0f1;
  background: #f1f7ff;
  color: #0b2f55;
  font-weight: 700;
  font-size: .9em;
  line-height: 1;
}

/* 2) Footer-Buttons: innerhalb des t++rkisen Rahmens, b++ndig unten */
#cpvModal .modal-footer{
  padding: 10px 14px !important;
  border-top: 2px solid var(--va-teal, #86d8f0) !important;
  background: #fff !important;
}
#cpvModal .modal-footer .footer-group-left,
#cpvModal .modal-footer .footer-group-right{
  display:flex; gap:.5rem; align-items:center;
}

/* 3) Modal schmaler und am Chat-Rahmen ausgerichtet (zentriert auf Chat-Breite) */
#cpvModal .modal-dialog.cpv-modal.leftwide{
  /* statt 96vw/links jetzt auf Chat-Breite mittig */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(var(--chat-block-w, 84vw), 1100px) !important;
  max-width: min(var(--chat-block-w, 84vw), 1100px) !important;
}

/* 4) Close-"X": sauber im Kreis zentrieren und b++ndig rechts */
#cpvModal .modal-content{
  position: relative !important;
}
#cpvModal .modal-header{
  position: static !important;
  padding-right: 4.25rem !important;
}
#cpvModal .modal-header .modal-close{
  position: absolute !important;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #1f2a37;
  background: transparent;
  cursor: pointer;
  z-index: 4;
}
#cpvModal .modal-header .modal-close:hover{
  background: #f1f5f9;
}

/* Chat: Code-/JSON-Bl+Âcke sollen vollst+ñndig sichtbar und scrollbar sein */
.message .msg-body pre {
  max-width: 100%;
  overflow: auto;
  padding: .75rem .9rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, .06); /* sanftes Slate-Overlay */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .92em;
  line-height: 1.35;
}

.message .msg-body code {
  white-space: pre-wrap;
  word-break: break-word; /* lange Keys/Strings umbrechen */
}


/* ===== CPV-Modal: Breite & Overflow so, dass nichts abgeschnitten wird ===== */

/* Dialog etwas breiter (orientiert an deiner Chat-Spalte), aber viewport-sicher */
#cpvModal .modal-dialog.cpv-modal.leftwide{
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* Breite dynamisch: mindestens 1000px, bevorzugt ~92vw, maximal 1280px */
  width: clamp(1000px, 92vw, 1280px) !important;
  max-width: clamp(1000px, 92vw, 1280px) !important;
}

/* Nichts mehr abschneiden: Header/Content d++rfen ++berlaufen (z.B. das X) */
#cpvModal .modal-content,
#cpvModal .modal-header{
  overflow: visible !important;
  box-sizing: border-box;
}

/* Body darf scrollen, wenn H+Âhe/Weite nicht reicht */
#cpvModal .modal-body{
  overflow: auto !important;
  min-width: 0;     /* verhindert, dass Flex/Grid-Kinder breiter werden als der Body */
}

/* Typische Flex/Grid-Container im Body sicher machen (breitenneutrales Verhalten) */
#cpvModal .modal-body > *{
  min-width: 0;
}

/* === CPV-Modal: 80%-Breite & mittig auf allen Screens === */
#cpvModal .modal-dialog.cpv-modal,
#cpvModal .modal-dialog.cpv-modal.leftwide{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 80vw !important;
  max-width: 80vw !important;
  height: calc(100dvh - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* START projekt.css ÔÇö Confirm Modal Styles (Corporate) */
.va-modal{
  position: fixed; inset: 0; z-index: 3000;
  display: none; align-items: center; justify-content: center;
}
.va-modal.show, .va-modal[aria-hidden="false"]{ display: flex; }
.va-modal .va-modal__overlay{
  position: absolute; inset: 0;
  background: rgba(7,25,48,.45); /* dunkles, leicht bl+ñuliches Overlay */
}
.va-modal .va-modal__content{
  position: relative; z-index: 1;
  width: min(92vw, 520px);
  background: #fff;
  border: 1px solid #DBE6F3;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(7,25,48,.25);
  overflow: hidden;
  display: flex; flex-direction: column;
}
#confirmModal{
  z-index: 13000 !important; /* ensure confirm modal overlays the DocEditor */
}
.va-modal__header{
  display: flex; align-items: center; justify-content: space-between;
  background: #F4F9FF;
  border-bottom: 1px solid #E6F0FA;
  padding: .9rem 1rem;
}
.va-modal__title{ margin:0; font-size:1.1rem; font-weight:700; color:#0B2941; }
.va-modal__close{
  width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer;
  color:#1f2a37; border-radius: 999px; font-size: 1.4rem; line-height: 1;
}
.va-modal__close:hover{ background:#EEF6FF; }
.va-modal__body{ padding: 1rem; color:#0B2941; }
.va-modal__footer{
  display: flex; align-items: center; gap: .5rem;
  border-top: 1px solid #E6F0FA; padding: .8rem 1rem;
}
.va-modal__footer .spacer{ flex: 1 1 auto; }
/* END projekt.css ÔÇö Confirm Modal Styles (Corporate) */


.va-modal .va-modal__overlay{
  position: absolute; inset: 0;
  background: rgba(7, 25, 48, .45);
}


/* --- RECHTS-PANEL (Workboard) ------------------------------------------------- */
.project-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(620px, 980px) 340px;
  gap: 20px;
}

.project-right {
  grid-column: 3;
  position: sticky;
  top: 94px; /* unter Header/Topbar einklinken */
  align-self: start;
}

.va-rightbox .box-title { margin-top: 0; }

.va-progress { display: grid; gap: .4rem; }
.va-progress__bar {
  background: #eef1f7;
  border-radius: 9px;
  height: 10px; overflow: hidden;
}
.va-progress__bar > span {
  display: block; height: 100%;
  background: linear-gradient(to right, #2e7af0, #1b59c5);
  width: 0%;
  transition: width .35s ease;
}
.va-progress__stats {
  display: flex; justify-content: space-between; align-items: baseline;
}
.va-docgrid {
  display: grid; gap: .5rem;
}
.va-docgrid > .btn-primary,
.va-docgrid > .secondary {
  width: 100%;
}

/* Listendarstellung aus deiner LB-Prozesslogik */
.lb-progress-row { display:flex; align-items:center; gap:.5rem; padding:.2rem 0; }
.lb-check.ok  { color:#177a3b; }
.lb-check.warn{ color:#a66a00; }


/* ================ EDITOR MODAL ================== */
.va-modal--xl .va-modal__dialog{
  width: min(1200px, 96vw);
  max-height: 88vh;
  display:flex; flex-direction:column;
}
.va-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #e6ecf5; padding:10px 14px;
}
.va-modal__title{ margin:0; display:flex; flex-direction:column; }
.va-modal__close{
  font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 8px;
}
.va-editor__toolbar{
  display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid #e6ecf5;
  background:#f9fbfe; position:sticky; top:0; z-index:3;
}
.va-editor__toolbar button{ padding:6px 10px; border:1px solid #d6e1f0; background:#fff; border-radius:8px; }
.va-editor__toolbar .btn-primary{ background:#2e7af0; color:#fff; border-color:#2e7af0; }
.va-editor__toolbar .secondary{ background:#fff; }
.va-editor__toolbar .flex-spacer{ flex:1; }

.va-editor__body{
  display:grid; grid-template-columns: 1fr 280px; gap:14px;
  padding:12px; overflow:auto;
}
.va-editor__content{
  background:#fff; border:1px solid #e6ecf5; border-radius:12px;
  padding:18px 20px; min-height: 420px;
}
.va-editor__comments{
  background:#fbfdff; border:1px solid #e6ecf5; border-radius:12px; padding:10px;
}
.va-editor__comments .comments-head{ font-weight:700; color:#1a4f86; margin-bottom:8px; }

@media (max-width: 1024px){
  .va-editor__body{ grid-template-columns: 1fr; }
}

/* Tiptap content defaults */
.va-editor__content .ProseMirror{
  outline: none;
}
.va-editor__content h1, .va-editor__content h2, .va-editor__content h3{
  color:#1a4f86; margin: 0.75em 0 0.4em;
}
.va-editor__content p{ line-height: 1.5; margin: 0.4em 0; }
.va-editor__content ul, .va-editor__content ol{ padding-left: 1.1em; }
.va-editor__content table{
  width:100%; border-collapse: collapse; margin: 8px 0;
}
.va-editor__content table td, .va-editor__content table th{
  border:1px solid #dfe6f3; padding:6px 8px;
}
.va-editor__content mark[data-comment="1"]{
  background: #fff3b0;
  border-radius: 2px;
}

/* Simple dropdown */
.va-split{ display:flex; gap:6px; align-items:center; }
.va-menu{ position:relative; }
.va-menu > .va-menu__list{
  position:absolute; right:0; top:calc(100% + 4px);
  background:#fff; border:1px solid #d6e1f0; border-radius:8px; padding:6px; z-index:4;
  display:flex; flex-direction:column; gap:4px;
}
.va-menu > .va-menu__list > button{ text-align:left; white-space:nowrap; }



/* projekt.css */
.va-docgrid .ghost{
  border: 1px dashed #dbe6f3;
  background: transparent;
  color: #2a4f86;
}
.va-docgrid .ghost:hover{
  border-style: solid;
  background: #f8fbff;
}


/* Workboard rechts sauber im Grid halten */
.col-right .va-workboard { width: 100%; }

/* +£berschrift im Workboard mittig */
.va-workboard .card-title.center { text-align: center; }

/* Alle Workboard-Buttons mittig ausrichten */
.va-workboard .va-list .btn,
.va-workboard .va-list .btn > span {
  justify-content: center;
  text-align: center;
}

/* ZIP-Button optisch deaktivierbar */
.btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}

/* optional: komplett ausblenden, wenn ÔÇ×hiddenÔÇ£ gesetzt wird */
.is-hidden { display: none !important; }


/* Workboard in rechter Spalte vollbreit + mittige Labels */
.project-right .va-workboard { width: 100%; }
.va-workboard .card-title { text-align: center; }                   /* "Vergabeunterlagen erstellen" */
.va-workboard .va-list .btn,
.va-workboard .va-list .btn > span { justify-content: center; text-align: center; }

/* ZIP-Button deaktiviert/unsichtbar */
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; cursor: not-allowed; }
.is-hidden { display: none !important; }

/* optional: sticky rechts */
@media (min-width: 1100px) {
  .project-right .va-workboard { position: sticky; top: 84px; }
}


/* === FINAL OVERRIDE: 3-column project layout =============================== */

/* place direct children explicitly into columns 1|2|3 */


/* make sure the right column behaves like a normal grid item */
body.project-page .project-layout > .project-right{
  width: 100% !important;
  max-width: 360px !important;
  float: none !important;
  position: relative !important;
  z-index: 1;
}

/* and the left column never floats either */
body.project-page .project-layout > .project-left{
  float: none !important;
  position: relative !important;
  z-index: 0;
}

/* keep the workboard nicely sticky */
.project-right .va-workboard{ position: sticky; top: 84px; }

/* Responsive: collapse to 2 columns on narrower screens */
@media (max-width: 1200px){
  body.project-page .project-layout{
    grid-template-columns: minmax(300px, 360px) 1fr !important;
  }
  body.project-page .project-layout > .project-right{
    grid-column: 1 / -1 !important;      /* full width below chat */
    max-width: none !important;
  }
}



/* ==== FIX 1: Alte absolute Positionierung neutralisieren ===== */
body.project-page .projekt-info-box{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 14px 0 !important;
  z-index: 0 !important;
}

/* ==== FIX 2: Erzwinge das 3-Spalten-Grid (links | chat | rechts) ==== */



/* === Drei Spalten: links (Details) ÔÇô Mitte (Chat) ÔÇô rechts (Workboard) === */


/* lange Labels in den Projektdetails d++rfen umbrechen */
#projektInfoView b{
  white-space: normal;
  overflow-wrap: anywhere;
}



/* ========== 3-Spalten-Layout: links (Ôëñ20%), Mitte (~55ÔÇô60%), rechts (Rest) ========== */
:root{
  /* Au+ƒenrand links/rechts ÔÇô klein halten wie gew++nscht */
  --page-gutter: clamp(8px, 1.6vw, 16px);

  /* Spaltenbreiten (du kannst --col-chat sp+ñter auf 55% drehen) */
  --col-left-max: 20%;
  --col-chat: 58%;
  --col-right: calc(100% - var(--col-left-max) - var(--col-chat));
}

/* harte Overrides f++r alte 2-Spalten-Regeln */
body.project-page .project-layout,
.project-page .project-layout{
  padding-inline: var(--page-gutter) !important;
}

@media (min-width: 1280px){
  /* 3 Spalten erzwingen */
  body.project-page .project-layout,
  .project-page .project-layout{
    display: grid !important;
    grid-template-columns:
      minmax(240px, var(--col-left-max))
      minmax(640px, var(--col-chat))
      minmax(300px, var(--col-right)) !important;
    gap: clamp(12px, 2vw, 22px) !important;
    align-items: start !important;
  }

  /* Spalten-Zuordnung erzwingen */
  body.project-page .project-left  { grid-column: 1 !important; }
  body.project-page .project-chat  { grid-column: 2 !important; }
  body.project-page .project-right { grid-column: 3 !important; }

  /* Rechte Spalte rechtsb++ndig + ÔÇ×klebtÔÇ£ am Viewport; kein +£berschneiden */
  body.project-page .project-right{
    position: sticky !important;
    top: calc(var(--header-h, 72px) + 16px) !important;
    align-self: start !important;
    z-index: auto !important;
  }

  /* Sicherheits-Reset gegen alte absolute/left/top-Regeln */
  body.project-page .project-right,
  body.project-page .project-right .projekt-info-box,
  body.project-page .project-left  .projekt-info-box{
    position: static !important;
    left: auto !important;
    top:  auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Linke Karten: etwas schmaler wirken lassen, sauber umbrechen */
body.project-page .project-left .projekt-info-box{ width: 100%; }
#projektInfoView > div{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: start;
}
#projektInfoView b{
  white-space: normal;         /* darf umbrechen */
  overflow-wrap: anywhere;     /* lange Begriffe brechen */
}

/* Chat: kleine Au+ƒenabst+ñnde oben/unten, aber kein +£berlappen */
.project-chat{ margin-inline: 0 !important; }

/* (Optional) ganz breite Screens: etwas mehr Platz rechts lassen */
@media (min-width: 1600px){
  :root{ --col-chat: 56%; } /* hier k+Ânntest du z.B. auf 55% runtergehen */
}




/* ========== KANONISCHES 3-SPALTEN-LAYOUT ================================== */
:root{
  /* Au+ƒenabstand der Seite (links & rechts) ÔÇô bewusst klein */
  --page-gutter: clamp(8px, 1.6vw, 16px);

  /* Spaltenbreiten: linke max. 20 %, Chat 55 %, rechts der Rest */
  --col-left-max: 20%;
  --col-chat: 55%;
  --col-right: calc(100% - var(--col-left-max) - var(--col-chat));
}

/* Basis-Padding auf dem Wrapper */
body.project-page .project-layout,
.project-page .project-layout{
  padding-inline: var(--page-gutter) !important;
}

/* >= 1280px: 3 Spalten erzwingen */
@media (min-width: 1280px){
  body.project-page main.project-main > .project-layout{
    display: grid !important;
    grid-template-columns:
      minmax(240px, var(--col-left-max))   /* links  <= 20% */
      minmax(640px, var(--col-chat))      /* chat   ~55%   */
      minmax(300px, var(--col-right))     /* rechts Rest   */ !important;
    gap: clamp(12px, 2vw, 22px) !important;
    align-items: start !important;
  }

  /* Spalten-Zuordnung */
  body.project-page .project-left  { grid-column: 1 !important; }
  body.project-page .project-chat  { grid-column: 2 !important; }
  body.project-page .project-right { grid-column: 3 !important; }

  /* Rechte Spalte: rechtsb++ndig, oben sticky */
  body.project-page .project-right{
    position: sticky !important;
    top: calc(var(--header-h, 72px) + 16px) !important;
    align-self: start !important;
    z-index: auto !important;
  }

  /* Safety-Reset: keine absolute/left/top/width-Reste mehr */
  body.project-page .project-right,
  body.project-page .project-right .projekt-info-box,
  body.project-page .project-left  .projekt-info-box{
    position: static !important;
    left: auto !important;
    top:  auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Linke Karten schmal + labels d++rfen umbrechen */
body.project-page .project-left .projekt-info-box{ width: 100%; }
#projektInfoView > div{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: start;
}
#projektInfoView b{
  white-space: normal;
  overflow-wrap: anywhere;  /* ÔÇ×Art der LeistungsbeschreibungÔÇ£ bricht sauber um */
}

/* Chat: keine Au+ƒen-Margins die verschieben k+Ânnten */
.project-chat{ margin-inline: 0 !important; }

/* Optional: sehr breite Screens ÔÇô Chat minimal breiter (Feintuning) */
@media (min-width: 1600px){
  :root{ --col-chat: 58%; } /* oder 56%, 57% ÔÇô wie es dir gef+ñllt */
}


/* ==== FINAL HARD OVERRIDE: 3-Spalten-Layout + Breiten ===================== */
/* Grid: [flexible Rand links] [Chat (auto)] [flexibler Rand rechts] */
body.project-page .project-layout{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: clamp(12px, 2vw, 22px) !important;
  align-items: start !important;
  width: 100% !important;
}

/* ---- Linke Spalte: schmal (<= 20vw) und b++ndig links -------------------- */
body.project-page .project-left{
  grid-column: 1 !important;
  width: clamp(260px, 20vw, 340px) !important;
  max-width: clamp(260px, 20vw, 340px) !important;
  justify-self: start !important;
  align-self: start !important;
  z-index: 0 !important;
}
body.project-page .project-left .projekt-info-box{ width:100% !important; }
body.project-page .project-left .box-title{ font-size: .95rem !important; }
body.project-page .project-left .projekt-info-fields{ font-size: .95rem !important; }
body.project-page .project-left .projekt-info-fields b{
  white-space: normal !important;
  word-break: break-word !important;
}


/* ---- Rechte Spalte: rechtsb++ndig, fester Au+ƒenrand, kein Overlay -------- */
body.project-page .project-right{
  grid-column: 3 !important;
  width: clamp(280px, 22vw, 360px) !important;
  max-width: clamp(280px, 22vw, 360px) !important;
  justify-self: end !important;          /* an den rechten Rand */
  align-self: start !important;
  margin-right: clamp(8px, 1.5vw, 18px) !important; /* gleicher Au+ƒenabstand wie links */
  position: relative !important;
  z-index: 0 !important;
}
/* falls irgendwo fixed/absolute reingeschlichen ist -> neutralisieren */
body.project-page .project-right .va-rightbox{ position: static !important; }

/* ---- Konsistenter Au+ƒenabstand links/rechts f++r die Seite --------------- */
body.project-page main.project-main{
  padding-inline: clamp(8px, 1.5vw, 18px) !important;
}


/* === SUPER-FINAL OVERRIDE ÔÇö drei Spalten, Chat 55%, Rails je max. 20% === */
/* -> GANZ ANS DATEIENDE setzen */

body.project-page .project-main{
  padding-inline: clamp(8px, 1.6vw, 18px) !important; /* schmaler Au+ƒenabstand links/rechts */
}

/* 3 Spalten: [links 20% max] [Chat 55%] [rechts 20% max] */
body.project-page .project-layout{
  display: grid !important;
  grid-template-columns:
    clamp(260px, 20vw, 320px)
    minmax(640px, 55vw)
    clamp(300px, 20vw, 360px) !important;
  column-gap: clamp(12px, 2vw, 22px) !important;
  align-items: start !important;
}

body.project-page .project-left  { grid-column: 1 !important; }
body.project-page .project-chat  { grid-column: 2 !important; }
body.project-page .project-right {
  grid-column: 3 !important;
  justify-self: end !important;     /* rechtsb++ndig im Grid */
  width: 100% !important;
  align-self: start !important;
  position: sticky !important;
  top: calc(var(--header-h, 72px) + 10px) !important; /* gleiche Start-H+Âhe wie Chat */
}

/* Rechte Boxen sollen NICHT floaten/fixen */
body.project-page .project-right .va-rightbox,
body.project-page .project-right .projekt-info-box{
  position: static !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
}


/* Linke Spalte insgesamt etwas kompakter + Labels d++rfen umbrechen */
body.project-page .project-left .projekt-info-box{
  font-size: .95rem !important;
}
body.project-page #projektInfoView > div{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: .35rem !important;
}
body.project-page #projektInfoView b{
  white-space: normal !important;   /* z.B. ÔÇ×Art der LeistungsbeschreibungÔÇ£ darf umbrechen */
}

/* Optional: CPV-Chips/Buttons etwas dichter an den Rand */
body.project-page .project-left .projekt-info-box,
body.project-page .project-right .projekt-info-box{
  padding-left: 14px !important;
  padding-right: 14px !important;
}


/* ===== FINAL OVERRIDES: 3-Spalten-Layout (hart) ============================ */
body.project-page .project-layout{
  display:grid !important;
  grid-template-columns: minmax(240px,20vw) 55vw 340px !important;
  gap: clamp(12px,2vw,24px) !important;
  align-items:start !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body.project-page .project-left  { grid-column:1 !important; }
body.project-page .project-chat  { grid-column:2 !important; }
body.project-page .project-right { grid-column:3 !important; position:sticky !important; top:calc(var(--header-h,72px) + 16px) !important; align-self:start !important; }

/* Linke Spalte: etwas kompakter, sauber umbrechen */
body.project-page .project-left { max-width: 20vw !important; }
body.project-page .project-left .projekt-info-box { font-size: .95rem !important; }
body.project-page .project-left .projekt-info-fields b{
  white-space: normal !important;
  word-break: break-word !important; /* lange Labels umbrechen */
}

/* Falls alte Styles Karten absolut/fixed positionieren ÔÇô abschalten */
body.project-page .project-right .projekt-info-box,
body.project-page .project-right .va-rightbox,
body.project-page .project-left  .projekt-info-box{
  position: static !important;
  left:auto !important; right:auto !important; top:auto !important;
  transform:none !important; width:auto !important; max-width:none !important;
}

/* Chat in der mittleren Spalte immer volle Spaltenbreite nutzen */
body.project-page .project-chat,
body.project-page .project-chat .chat-container,
body.project-page .project-chat .chat-inner,
body.project-page .project-chat .chat-block{
  max-width:none !important;
  width:100% !important;
}



/* ===== FINAL OVERRIDES ===================================================== */
/* 3 Spalten: links (schmal, Ôëñ17vw) | Chat (55vw, zentriert) | rechts (360px) */
body.project-page .project-layout{
  display:grid !important;
  grid-template-columns: minmax(220px,17vw) 55vw 360px !important;
  column-gap: 22px !important;
  align-items: start !important;
  justify-content: center !important;   /* zentriert das Gesamtgrid */
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Spaltenzuordnung */
body.project-page .project-left  { grid-column:1 !important; max-width:17vw !important; }
body.project-page .project-chat  { grid-column:2 !important; }
body.project-page .project-right { grid-column:3 !important; position:sticky !important;
  top:calc(var(--header-h,72px) + 16px) !important; align-self:start !important; margin-right:8px !important; }

/* Linke Karten leicht kompakter + Label-Umbruch */
body.project-page .project-left .projekt-info-box{ font-size:.95rem !important; }
body.project-page .project-left .projekt-info-fields b{
  white-space:normal !important; word-break:break-word !important;
}

/* Alle evtl. ÔÇ×floatingÔÇ£ Boxen neutralisieren (alt CSS aushebeln) */
body.project-page .project-right .projekt-info-box,
body.project-page .project-right .va-rightbox,
body.project-page .project-left  .projekt-info-box{
  position: static !important; left:auto !important; right:auto !important; top:auto !important;
  transform:none !important; width:auto !important; max-width:none !important;
}

/* Chat auf volle Spaltenbreite ausdehnen */
body.project-page .project-chat,
body.project-page .project-chat .chat-container,
body.project-page .project-chat .chat-inner,
body.project-page .project-chat .chat-block{
  max-width:none !important; width:100% !important;
}



/* ===== FINAL OVERRIDES: 3 Spalten, viewport-sicher ========================= */
body.project-page .project-layout{
  display: grid !important;

  /* Variablen */
  --gap: 22px;
  --col-left: clamp(220px, 17vw, 340px);     /* links max. ~17% */
  --col-right: clamp(300px, 360px, 360px);   /* rechts fix 300ÔÇô360px */
  --chat-ideal: 55vw;                        /* Ziel: 55% Viewport */
  /* Chat darf nie gr+Â+ƒer werden, als in 100vw noch Platz ist: */
  --chat-max: min(
    var(--chat-ideal),
    calc(100vw - var(--col-left) - var(--col-right) - (var(--gap) * 2) - 16px)
  );

  grid-template-columns: var(--col-left) minmax(640px, var(--chat-max)) var(--col-right) !important;
  column-gap: var(--gap) !important;
  align-items: start !important;
  justify-content: center !important;   /* Grid insgesamt zentrieren */
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;        /* kein horizontales Scrollen */
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Spaltenzuordnung */
body.project-page .project-left  { grid-column: 1 !important; max-width: 17vw !important; }
body.project-page .project-chat  { grid-column: 2 !important; }
body.project-page .project-right { grid-column: 3 !important; position: sticky !important;
  top: calc(var(--header-h,72px) + 16px) !important; align-self: start !important; }

/* Linke Karten kompakter & umbrechen statt ÔÇ×unter ChatÔÇ£ ragen */
body.project-page .project-left .projekt-info-box{ font-size: .95rem !important; }
body.project-page .project-left .projekt-info-fields b{
  white-space: normal !important; word-break: break-word !important;
}

/* Alte ÔÇ×floatingÔÇ£-Positionierungen neutralisieren */
body.project-page .project-right .projekt-info-box,
body.project-page .project-right .va-rightbox,
body.project-page .project-left  .projekt-info-box{
  position: static !important; left:auto !important; right:auto !important; top:auto !important;
  transform:none !important; width:auto !important; max-width:none !important;
}

/* Chat f++llt seine Spalte vollst+ñndig */
body.project-page .project-chat,
body.project-page .project-chat .chat-container,
body.project-page .project-chat .chat-inner,
body.project-page .project-chat .chat-block{
  width: 100% !important;
  max-width: none !important;
}


/* ============ FINAL OVERRIDES (Projektseite) ============ */

/* A) Chat-Container darf NICHT 100vw breit sein ÔÇô nur Spaltenbreite! */
body.project-page .project-main .project-chat .chat-container,
body.project-page .project-main .chat-container{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* B) Kanonisches 3-Spalten-Grid ab 1280px */
:root{
  /* Au+ƒenabstand links/rechts m+Âglichst klein halten */
  --page-gutter: clamp(10px, 1.6vw, 18px);

  /* Zielbreiten: links max. 20%, Chat 55%, rechts Rest */
  --col-left: 20%;
  --col-chat: 55%;
  --col-right: calc(100% - var(--col-left) - var(--col-chat));
  --col-gap: clamp(12px, 2vw, 24px);
}

body.project-page .project-layout{
  box-sizing: border-box !important;
  padding-inline: var(--page-gutter) !important;
}

@media (min-width: 1280px){
  body.project-page .project-layout{
    display: grid !important;
    grid-template-columns:
      minmax(260px, var(--col-left))
      minmax(640px, var(--col-chat))
      minmax(320px, var(--col-right)) !important;
    gap: var(--col-gap) !important;
    align-items: start !important;
  }

  /* Spalten fest zuweisen */
  body.project-page .project-left  { grid-column: 1 !important; }
  body.project-page .project-chat  { grid-column: 2 !important; }
  body.project-page .project-right { grid-column: 3 !important; }

  /* Rechte Spalte rechts anpinnen (ohne absolute-Altlasten) */
  body.project-page .project-right{
    position: sticky !important;
    top: calc(var(--header-h, 72px) + 16px) !important;
    align-self: start !important;
    z-index: auto !important;
  }

  /* Sicherheits-Reset gegen +ñltere absolute/left/top-Regeln */
  body.project-page .project-right,
  body.project-page .project-right .projekt-info-box,
  body.project-page .project-left  .projekt-info-box{
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* C) Chat-Innenleben soll die Spaltenbreite nutzen */
body.project-page .chat-inner > .chat-topbar,
body.project-page .chat-inner > .filebubble-row,
body.project-page .chat-inner > .chat-messages,
body.project-page .chat-inner > .chat-input-bar,
body.project-page .chat-input-wrap{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* D) Linke Karten etwas schmaler/bruchfreundlich */
body.project-page #projektInfoView > div{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: start;
}
body.project-page #projektInfoView b{
  white-space: normal;
  overflow-wrap: anywhere;
}


/* ===== LAYOUT-FIX OVERRIDE (hart, ans Ende der Datei) ==================== */

/* Wunschbreiten */
:root{
  --gap: clamp(12px, 2vw, 24px);
  --col-left: clamp(260px, 20vw, 320px);   /* links: bis 20% */
  --col-chat: clamp(640px, 55vw, 980px);   /* Mitte/Chat: 55% */
  --col-right: clamp(300px, 22vw, 360px);  /* rechts: 300ÔÇô360px */
}

/* kein horizontales Scrollen mehr */
body.project-page{ overflow-x: hidden !important; }

/* zentrales 3-Spalten-Grid, mit schmalem Au+ƒenrand */
body.project-page .project-layout,
.project-page .project-layout{
  display: grid !important;
  grid-template-columns: var(--col-left) var(--col-chat) var(--col-right) !important;
  gap: var(--gap) !important;
  align-items: start !important;

  /* schmaler Au+ƒenrand: 1vw links/rechts */
  width: 98vw !important;
  margin: 0 auto !important;
  max-width: none !important;
}

/* Spalten explizit zuordnen */
body.project-page .project-left  { grid-column: 1 !important; min-width: 0 !important; }
body.project-page .project-chat  { grid-column: 2 !important; min-width: 0 !important; }
body.project-page .project-right { grid-column: 3 !important; min-width: 0 !important; }

/* Rechte Spalte: wirklich rechts, volle Spaltenbreite, sticky unter dem Header */
.project-right{ width:100% !important; position: sticky !important;
  top: calc(var(--header-h, 0px) + 16px) !important; align-self: start !important; }
.project-right .projekt-info-box{ width:100% !important; }



/* Linke Karten etwas kompakter und Zeilenumbr++che erlauben */
.project-left .projekt-info-box{ font-size: 0.95rem !important; }
.project-left .projekt-info-fields b{
  white-space: normal !important; word-break: break-word !important;
}

/* Sicherheitsnetz: alte 2-Spalten-Regeln wirkungslos machen */
.project-page .project-layout{ grid-template-columns: var(--col-left) var(--col-chat) var(--col-right) !important; }


/* START add: robust modal visibility */
.va-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.va-modal.is-open,
.va-modal[aria-hidden="false"] { display: block !important; }

.va-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.va-modal__dialog,
.va-modal__content {
  position: relative;
  margin: 10vh auto;
  width: min(560px, 92vw);
  background: var(--va-surface, #1a1a1a);
  color: var(--va-on-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  overflow: hidden;
}

.va-modal__header,
.va-modal__body,
.va-modal__footer { padding: 16px 18px; }

.va-modal__header { display: flex; align-items: center; justify-content: space-between; }
.va-modal__title  { font-size: 1.05rem; margin: 0; }
.va-modal__close  { border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; }

.va-modal__footer { display: flex; gap: .5rem; justify-content: flex-end; }
.va-modal__footer .btn { min-width: 110px; }
/* END add */


/* ===== Vollbild-Processing (Zahnr+ñder) ===== */
.va-processing[hidden] { display:none !important; }
.va-processing { position:fixed; inset:0; z-index: 10000; }
.va-processing__backdrop {
  position:absolute; inset:0;
  background: rgba(8, 19, 38, 0.55);
  backdrop-filter: blur(2px);
}
.va-processing__panel {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; text-align:center; color:#fff; padding:2rem;
}
.va-processing__title { margin:0 0 .5rem 0; font-size: clamp(1.2rem, 2.6vw, 1.8rem); font-weight: 800; }

.va-gears { position:relative; width:160px; height:120px; margin:.5rem auto 0; }
.gear {
  position:absolute; width:72px; height:72px; border-radius:50%;
  border:6px solid #92c5ff33; box-shadow: inset 0 0 0 6px #92c5ff55;
  animation: spin 2.8s linear infinite;
}
.gear:before, .gear:after {
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:6px dashed #cde2ff88;
}
.gear-1 { left:12px; top:20px; animation-duration: 2.8s; }
.gear-2 { left:64px; top:48px; animation-duration: 3.6s; animation-direction: reverse; }
.gear-3 { left:100px; top:6px; width:56px; height:56px; animation-duration: 2.2s; }
@keyframes spin { to { transform: rotate(360deg); } }

.va-processing__steps { width: min(560px, 90vw); text-align:left; margin-top:.25rem; }
.va-processing__steps .step {
  display:flex; align-items:center; gap:.6rem; color:#d9e9ff; padding:.25rem 0;
}
.va-processing__steps .dot {
  width:12px; height:12px; border-radius:50%;
  background:#89c2ff55; box-shadow: 0 0 0 2px #2c7af2aa inset;
  transition: all .25s ease;
}
.va-processing__steps .step.is-active .dot { background:#2c7af2; box-shadow: 0 0 0 2px #9fd0ff inset; }
.va-processing__steps .step.is-done .dot { background:#25a244; box-shadow: 0 0 0 2px #b8efc3 inset; }
.va-processing__steps .step.is-active span,
.va-processing__steps .step.is-done span { color:#ffffff; }

.va-processing__hint { opacity:.8; font-size:.95rem; margin-top:.2rem; }



/* Umschalter im Header */
.va-edit-toggle { display:inline-flex; align-items:center; gap:.4rem; margin-right:.35rem; }
.va-edit-toggle input { appearance:auto; transform: translateY(1px); }

/* Dokument-Note unter dem Content */
.va-editor__note{
  margin-top: 12px;
  padding: 12px;
  border:1px solid #e0e8f6; border-radius: 10px;
  background: #f9fbff;
}
.va-note-input{ display:flex; gap:.5rem; align-items:flex-start; }
.va-note-input textarea{
  flex:1 1 auto; min-height:72px; resize:vertical;
  border:1px solid #d6e1f0; border-radius:10px; padding:.6rem .7rem;
}
.va-note-input .btn-primary{ align-self:flex-end; }


.is-busy { opacity:.6; pointer-events:none; position:relative; }
.is-busy::after {
  content:''; position:absolute; right:8px; top:50%;
  width:12px; height:12px; margin-top:-6px; border-radius:50%;
  border:2px solid currentColor; border-left-color:transparent;
  animation: va-spin .8s linear infinite;
}
@keyframes va-spin { to { transform: rotate(360deg); } }




/* Vollhoher Editor im Modal */
#docEditorModal .va-modal__dialog,
#docEditorModal .va-modal__content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-height: calc(100vh - var(--header-h, 72px) - 24px);
  height: min(92vh, calc(100vh - var(--header-h, 72px) - 24px));
}

.va-editor {
  display: grid;
  grid-template-columns: 1fr;            /* Standard: volle Breite */
  gap: 12px;
  min-height: 0;
}

.va-editor.has-comments {                /* wenn Kommentar-Panel sichtbar */
  grid-template-columns: 1fr minmax(280px, 28%);
}

.va-editor__content {
  min-height: 0;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e3eaf5;
  box-shadow: 0 1px 0 #f2f6fc inset;
}

.ProseMirror {
  min-height: calc(70vh);
  padding: 20px 26px;
  outline: none;
}

/* Lesemodus typografisch angenehmer */
.ProseMirror h1,h2,h3 { color:#163f7a; margin: 0.8em 0 0.3em; line-height:1.2; }
.ProseMirror p { margin: 0.5em 0 0.7em; }

/* Toolbar kompakt & sticky am Modal-Header */
.va-editor__toolbar {
  display:flex;
  gap:6px;
  align-items:center;
}
.va-editor__toolbar.is-hidden { display:none; }

/* Export-Dropdown */
.va-menu { position:relative; }
.va-menu__list {
  position:absolute; top:100%; right:0; z-index:5;
  background:#fff; border:1px solid #dbe6f3; border-radius:10px;
  padding:6px; margin-top:6px; min-width: 200px;
  box-shadow:0 10px 24px rgba(16,38,73,0.12);
}
.va-menu__list[hidden] { display:none; }
.va-menu__list button { width:100%; text-align:left; padding:8px 10px; border-radius:8px; }
.va-menu__list button:hover { background:#f4f8ff; }

/* Inline-Kommentar-Bubble */
.va-cmt-bubble {
  position: fixed;
  padding: 6px 10px;
  background:#163f7a; color:#fff; border-radius:999px;
  font-size: 12px; line-height: 1;
  box-shadow: 0 10px 24px rgba(16,38,73,.22);
  cursor: pointer; user-select: none;
}
.va-cmt-bubble.hidden { display:none; }



/* Vollhoher Editor im Modal */
#docEditorModal .va-modal__dialog,
#docEditorModal .va-modal__content{
  display:grid;
  grid-template-rows:auto 1fr auto;
  max-height:calc(100vh - var(--header-h,72px) - 24px);
  height:min(92vh, calc(100vh - var(--header-h,72px) - 24px));
}

.va-editor{ display:grid; grid-template-columns:1fr; gap:12px; min-height:0; }
.va-editor.has-comments{ grid-template-columns:1fr minmax(280px,28%); }
.va-editor__content{ min-height:0; overflow:auto; background:#fff; border:1px solid #e3eaf5; border-radius:12px; box-shadow:0 1px 0 #f2f6fc inset; }
.ProseMirror{ min-height:70vh; padding:20px 26px; outline:none; }
.ProseMirror h1,h2,h3{ color:#163f7a; margin:.8em 0 .3em; line-height:1.2; }
.ProseMirror p{ margin:.5em 0 .7em; }

/* Toolbar h++bsch + kompakt */
.va-editor__toolbar{ display:flex; gap:6px; align-items:center; }
.va-editor__toolbar.is-hidden{ display:none; }
.va-editor__toolbar button{ border:1px solid #dbe6f3; background:#fff; padding:6px 10px; border-radius:10px; font-size:14px; }
.va-editor__toolbar button:hover{ background:#f4f8ff; }

/* Export-Men++ */
.va-menu{ position:relative; }
.va-menu__list{ position:absolute; top:100%; right:0; z-index:12; background:#fff; border:1px solid #dbe6f3; border-radius:10px; padding:6px; margin-top:6px; min-width:200px; box-shadow:0 10px 24px rgba(16,38,73,.12); }
.va-menu__list[hidden]{ display:none; }
.va-menu__list button{ width:100%; text-align:left; padding:8px 10px; border-radius:8px; }
.va-menu__list button:hover{ background:#f4f8ff; }

/* Inline-Kommentar-Bubble */
.va-cmt-bubble{
  position:fixed; z-index:15; padding:6px 10px; background:#163f7a; color:#fff;
  border-radius:999px; font-size:12px; line-height:1; box-shadow:0 10px 24px rgba(16,38,73,.22); cursor:pointer; user-select:none;
}
.va-cmt-bubble.hidden{ display:none; }



/* === FINAL OVERRIDES: Editor-H+Âhe + lesbare Typografie =================== */

/* Dialog/Body wirklich voll nutzen */
.va-modal--xl .va-modal__dialog { max-height: 96vh; display: flex; flex-direction: column; }
.va-modal__body { flex: 1 1 auto; overflow: hidden; }

/* Editorbereich selbst: scollbar und nahezu vollhoch */
.va-editor__body {
  height: calc(96vh - 120px);   /* Platz f++r Header/Toolbar */
  overflow: auto;
}

/* Grundtypografie im Editor (Tiptap + reines HTML gleicherma+ƒen) */
#docEditor.va-editor__content,
#docEditor.va-editor__content .ProseMirror,
#docEditor.va-editor__content .tiptap,
#docEditor.rendered-md {
  font-size: 16px;
  line-height: 1.65;
}

/* +£berschriften */
#docEditor h1 { font-size: 1.6rem; margin: 1.2rem 0 .6rem; color: #1a4f86; }
#docEditor h2 { font-size: 1.35rem; margin: 1rem 0 .5rem;  color: #1a4f86; }
#docEditor h3 { font-size: 1.15rem; margin: .8rem 0 .4rem; color: #1a4f86; }

/* Abs+ñtze + Listen */
#docEditor p      { margin: .6rem 0; }
#docEditor ul,
#docEditor ol     { margin: .6rem 0 .8rem 1.25rem; padding-left: 1.0rem; }
#docEditor li     { margin: .25rem 0; }

/* Tabellen */
#docEditor table  { width: 100%; border-collapse: collapse; margin: 1rem 0; }
#docEditor th,
#docEditor td     { border: 1px solid #dfe6f3; padding: 8px; }

/* Zitate/Code optional sch+Âner */
#docEditor blockquote { margin: .8rem 0; padding: .4rem .8rem; border-left: 4px solid #dfe6f3; background:#f9fbfe; }
#docEditor code, #docEditor pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }


/* ===== DROP-IN: Doc-Editor gut lesbar + volle H+Âhe + Chat bleibt klickbar ===== */
:root{ --va-chatbar-h: 110px; } /* ggf. an deine Chat-H+Âhe anpassen */

#docEditorModal .va-modal__overlay{
  background: rgba(0,0,0,.35);
  pointer-events: none;           /* Chat darunter bleibt klickbar */
}

#docEditorModal .va-modal__dialog{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 12px;
  bottom: var(--va-chatbar-h);    /* verdeckt die Chatleiste nicht */
  width: min(1120px, 96vw);
  max-height: calc(100vh - 12px - var(--va-chatbar-h));
  border-radius: 12px;
}

#docEditorModal .va-modal__content{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff !important;
  color: #0b2941 !important;      /* Fix gegen ÔÇ×wei+ƒ auf wei+ƒÔÇ£ */
}

#docEditorModal .va-editor{
  display: grid;
  grid-template-columns: 1fr 0;   /* Start ohne Kommentarspalte */
  gap: 0;
  height: 100%;
}
#docEditorModal .va-editor.has-comments{
  grid-template-columns: 1fr 320px;
  gap: 24px;
}
#docEditorModal .va-editor__header{ flex: 0 0 auto; }
#docEditorModal .va-editor__body{
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px 20px;
  background: #fff;
}
#docEditorModal .va-editor__toolbar.is-hidden{ display:none !important; }
#docEditorModal .va-editor__aside[hidden]{ display:none !important; }

#docEditor{
  font-size: 15px;
  line-height: 1.6;
  color: #0b2941;
}

/* Tiptap/ProseMirror Lesbarkeit */
#docEditor .ProseMirror{
  outline: none;
  background: #fff;
  color: #0b2941;
}
#docEditor .ProseMirror p{ margin: 0 0 .9rem; }
#docEditor .ProseMirror h1{ font-size: 1.6rem; margin: 0 0 .8rem; }
#docEditor .ProseMirror h2{ font-size: 1.25rem; margin: 1.1rem 0 .5rem; }
#docEditor .ProseMirror h3{ font-size: 1.05rem; margin: .9rem 0 .4rem; }

#docEditor .ProseMirror ul,
#docEditor .ProseMirror ol{ padding-left: 1.5rem; margin: 0 0 .8rem; }
#docEditor .ProseMirror li{ margin: .2rem 0; }
#docEditor .ProseMirror blockquote{
  border-left: 3px solid #e5e7eb;
  margin: .8rem 0; padding: .2rem .8rem;
}

/* Sicherheit: falls irgendwo global f++r Modals wei+ƒer Text gesetzt wurde */
#docEditorModal .va-modal__content,
#docEditorModal .va-editor,
#docEditorModal .ProseMirror{ color: #0b2941 !important; }




/* Lesemodus: gut lesbare Typo + Abst+ñnde */
#docEditor.va-reader,
#docEditor .rendered-md {
  background: #ffffff;
  color: #0B2941;             /* dunkles Blau der UI */
  font-size: 16px;
  line-height: 1.6;
  padding: 24px 28px;
}
#docEditor.va-reader h1 { font-size: 28px; line-height: 1.25; margin: 0 0 16px; font-weight: 800; }
#docEditor.va-reader h2 { font-size: 22px; line-height: 1.35; margin: 24px 0 8px;  font-weight: 700; }
#docEditor.va-reader h3 { font-size: 18px; line-height: 1.4;  margin: 18px 0 6px;  font-weight: 700; }
#docEditor.va-reader p  { margin: 10px 0 12px; }
#docEditor.va-reader ul, 
#docEditor.va-reader ol { margin: 8px 0 16px 22px; }
#docEditor.va-reader li { margin: 4px 0; }
#docEditor.va-reader strong { font-weight: 700; }
#docEditor.va-reader table { border-collapse: collapse; width: 100%; margin: 16px 0; }
#docEditor.va-reader th, 
#docEditor.va-reader td { border: 1px solid #d7dee7; padding: 8px 10px; text-align: left; }
#docEditor.va-reader blockquote { border-left: 4px solid #d7dee7; padding: 8px 12px; margin: 12px 0; background:#f7fafc; }

/* Kommentar-Bubble (Hover) */
#vaCmtBubble {
  position: absolute;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 999px;
  background: #0b6cff;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(20,37,63,.35);
  cursor: pointer;
  user-select: none;
  display: none;
}
#vaCmtBubble.show { display: inline-block; }

/* Toolbar & Bearbeiten-Schalter im Lesemodus ausblenden */
.va-edit-toggle,
.va-editor__toolbar { display: none !important; }



/* === DROP-IN: Reader-Layout & volle H+Âhe === */
#docEditorModal .va-modal__dialog {
  width: min(1100px, 96vw);
  max-width: 1100px;
}
#docEditorModal .va-modal__content {
  display: flex;
  flex-direction: column;
  height: 100dvh;          /* volle H+Âhe */
  max-height: 100dvh;
}
#docEditorModal .va-modal__body {
  display: flex;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;           /* wichtig f++r Flex-Scroll */
  padding: 0 18px 18px;
}
#docEditorModal .va-editor {
  display: grid;
  grid-template-columns: 1fr 0;  /* Panel zu - volle Breite */
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
#docEditorModal .va-editor__content {
  overflow: auto;
  padding: 16px 8px 32px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e6e9ef;
}

/* Lesemodus: angenehm lesbares Markdown */
.va-reader.rendered-md {
  color: #222;
  font-size: 16px;
  line-height: 1.6;
}
.va-reader.rendered-md h1,
.va-reader.rendered-md h2,
.va-reader.rendered-md h3,
.va-reader.rendered-md h4 {
  color: #111;
  margin: 1.2em 0 0.5em;
  line-height: 1.25;
}
.va-reader.rendered-md h1 { font-size: 1.8rem; }
.va-reader.rendered-md h2 { font-size: 1.4rem; }
.va-reader.rendered-md h3 { font-size: 1.2rem; }
.va-reader.rendered-md p  { margin: 0.6em 0; }
.va-reader.rendered-md ul,
.va-reader.rendered-md ol { margin: 0.6em 0 0.6em 1.4em; }
.va-reader.rendered-md li { margin: 0.25em 0; }
.va-reader.rendered-md table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
}
.va-reader.rendered-md th,
.va-reader.rendered-md td {
  border: 1px solid #e6e9ef;
  padding: 6px 8px;
}

/* ÔÇ×KommentierenÔÇ£-Bubble (Hover) */
#vaCmtBubble {
  position: absolute;
  z-index: 1000;
  background: #111;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  display: none;
  cursor: pointer;
  user-select: none;
}
#vaCmtBubble.show { display: block; }

/* Edit-Controls dauerhaft weg */
.va-edit-toggle,
.va-editor__toolbar { display: none !important; }



/* === DROP-IN v3: Reader-Layout & Typo =================================== */

/* Dialog: Header + Body + Footer; volle H+Âhe */
#docEditorModal .va-modal__dialog{
  width: min(1200px, 96vw);
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Body -> Editor-Grid */
#docEditorModal .va-modal__body{
  padding: 0 18px 10px;
  min-height: 0;
}
#docEditorModal .va-editor{
  display: grid;
  grid-template-columns: 1fr 0; /* Start: ohne Kommentarspalte */
  gap: 16px;
  height: 100%;
}
#docEditorModal .va-editor.has-comments{
  grid-template-columns: 1fr 320px; /* Kommentarspalte sichtbar */
}

/* Content-Panel (Scroll-Beh+ñlter, relativer Bezug f++r Bubble) */
#docEditorModal .va-editor__content{
  overflow: auto;
  position: relative;          /* wichtig f++r die Bubble */
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 8px 0 24px;
}

/* Lesespalte exakt wie Chat-Breite */
#docEditor{
  width: min(var(--chat-block-w, 860px), 100%);
  margin: 0 auto;
  padding: 18px 22px 42px;
}

/* Kommentare rechts */
#docEditorModal .va-editor__aside{
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 12px;
}

/* Footer ÔÇô KI-Anmerkung im Chat-Stil */
#docEditorModal .va-editor__footer{
  border-top: 1px solid #e6e9ef;
  background: #f7fafc;
  padding: 12px 18px 16px;
}
.va-note-input{
  display: flex; gap: 8px; align-items: flex-end;
}
.va-note-input textarea{
  flex: 1; min-height: 40px; max-height: 40vh; resize: vertical;
  background: #fff; border: 1px solid #d7dee7; border-radius: 14px;
  padding: 12px 14px; color: #0b2941;
}

/* Gut lesbares Markdown */
.va-reader.rendered-md{ color:#0B2941; font-size:16px; line-height:1.6; }
.va-reader.rendered-md h1{ font-size:28px; margin:0 0 16px; font-weight:800; }
.va-reader.rendered-md h2{ font-size:22px; margin:24px 0 8px; font-weight:700; }
.va-reader.rendered-md h3{ font-size:18px; margin:18px 0 6px; font-weight:700; }
.va-reader.rendered-md p { margin:10px 0 12px; }
.va-reader.rendered-md ul,
.va-reader.rendered-md ol{ margin:8px 0 16px 22px; }
.va-reader.rendered-md li{ margin:4px 0; }
.va-reader.rendered-md table{ width:100%; border-collapse:collapse; margin:16px 0; }
.va-reader.rendered-md th,
.va-reader.rendered-md td{ border:1px solid #d7dee7; padding:8px 10px; text-align:left; }
.va-reader.rendered-md blockquote{ border-left:4px solid #d7dee7; padding:8px 12px; margin:12px 0; background:#f7fafc; }

/* Kommentar-Bubble ÔÇô jetzt relativ zur Scrollfl+ñche */
#vaCmtBubble{
  position: absolute;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 999px;
  background: #0b6cff;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(20,37,63,.35);
  cursor: pointer; user-select: none;
  display: none;
}
#vaCmtBubble.show{ display:inline-block; }

/* Toolbar & Edit-Schalter im reinen Lesemodus ausblenden (falls woanders aktiv) */
.va-edit-toggle, .va-editor__toolbar{ display:none !important; }

/* Sicherheit: Farben */
#docEditorModal .va-modal__content, #docEditorModal .va-editor, #docEditorModal .ProseMirror{ color:#0b2941 !important; }



/* ===== Editor-Modal ÔÇô Header, H+Âhe, Footer (v4) ===================== */

/* Header wie bei anderen Modals, Aktionen rechts nebeneinander */
#docEditorModal .va-modal__header{
  display:flex; align-items:center; gap:12px;
  padding:10px 16px;
}
#docEditorModal .va-modal__title{ margin:0; }
#docEditorModal .va-header-actions{
  margin-left:auto; display:flex; align-items:center; gap:10px;
}

/* Vollh+Âhe ÔÇô ohne Seiten-Header-Abzug */
#docEditorModal .va-modal__dialog{
  display:grid; grid-template-rows:auto 1fr auto;
  max-height:100dvh; height:100dvh;
}

/* Scrollbereich & Lesespalte (Breite wie Chat) */
#docEditorModal .va-editor__content{
  position:relative; overflow:auto; background:#fff;
  border:1px solid #e6e9ef; border-radius:12px; padding:8px 0 24px;
}
#docEditor{ width:min(var(--chat-block-w, 860px), 100%); margin:0 auto; padding:18px 22px 42px; }

/* Export-Dropdown */
#docEditorModal .va-menu{ position:relative; }
#docEditorModal .va-menu__list{
  position:absolute; right:0; top:calc(100% + 6px); z-index:10;
  background:#fff; border:1px solid #dbe6f3; border-radius:10px;
  padding:6px; min-width:200px; box-shadow:0 10px 24px rgba(16,38,73,.12);
}
#docEditorModal .va-menu__list[hidden]{ display:none; }
#docEditorModal .va-menu__list button{ width:100%; text-align:left; padding:8px 10px; border-radius:8px; }
#docEditorModal .va-menu__list button:hover{ background:#f4f8ff; }

/* Footer-Eingabe im Chat-Look, sticky/++berlagernd */
#docEditorModal .va-editor__footer{
  position:sticky; bottom:0; z-index:5;
  border-top:1px solid #e6e9ef;
  background:rgba(247,250,252,.92);
  backdrop-filter:saturate(120%) blur(6px);
  padding:12px 18px 16px;
  box-shadow:0 -8px 20px rgba(9,30,66,.08);
}
#docEditorModal .va-note-input{ display:flex; gap:8px; align-items:flex-end; }
#docEditorModal .va-note-input textarea{
  flex:1; min-height:44px; max-height:40vh; resize:vertical;
  background:#fff; border:1px solid #d7dee7; border-radius:14px;
  padding:12px 14px; color:#0b2941;
}

/* Lesetypografie (klarere Hierarchie) */
#docEditor.rendered-md{ color:#0B2941; font-size:16px; line-height:1.6; }
#docEditor.rendered-md h1{ font-size:28px; margin:0 0 16px; font-weight:800; color:#093a77; }
#docEditor.rendered-md h2{ font-size:22px; margin:24px 0 8px; font-weight:700; color:#0e3f7f; }
#docEditor.rendered-md h3{ font-size:18px; margin:18px 0 6px; font-weight:700; color:#0e3f7f; }
#docEditor.rendered-md p { margin:10px 0 12px; }
#docEditor.rendered-md ul, #docEditor.rendered-md ol{ margin:8px 0 16px 22px; }
#docEditor.rendered-md li{ margin:4px 0; }
#docEditor.rendered-md strong{ font-weight:700; }
#docEditor.rendered-md table{ width:100%; border-collapse:collapse; margin:16px 0; }
#docEditor.rendered-md th, #docEditor.rendered-md td{ border:1px solid #d7dee7; padding:8px 10px; text-align:left; }

/* Kommentar-Bubble bleibt im Scroll-Container (siehe JS) */
#vaCmtBubble{ position:absolute; z-index:6; padding:6px 10px; border-radius:999px;
  background:#0b6cff; color:#fff; font-size:13px; box-shadow:0 4px 12px rgba(20,37,63,.35);
  cursor:pointer; user-select:none; display:none; }
#vaCmtBubble.show{ display:inline-block; }



/* === DOC-MODAL LAYOUT ÔÇô DROP-IN (BEGIN) === */
#docEditorModal { padding: 0; }
#docEditorModal .va-modal__dialog {
  margin: 0;                /* kein Abstand oben/unten */
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr; /* Header + Body */
}
#docEditorModal .va-modal__body {
  min-height: 0;            /* wichtig f++r korrektes Scrollen in 1fr */
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px; /* Content + Comments */
  column-gap: 28px;
}

/* Lesebereich: gleiche Breite wie die Chat-Bubbles */
#docEditorModal .va-reader {
  max-width: 760px;         /* wie Chat-Bubbles im Projekt-Chat */
  margin: 0 auto;
  padding: 24px 28px calc(var(--editor-input-h, 96px) + 24px); /* Platz f++r die Eingabe */
  overflow: auto;           /* Text scrollt unter die Eingabe */
}

/* Kommentare rechts ÔÇô start hidden (kannst du per JS togglen) */
#docEditorModal .va-editor__aside[hidden] { display: none !important; }

/* ÔÇ×EingabezeileÔÇ£ wie Chat am Boden (sticky) */
#docEditorModal .va-editor__footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -10px 28px rgba(0,0,0,.06);
  border-top: 1px solid #e6eef8;
  padding: 12px 20px;
  z-index: 5;
}
#docEditorModal .va-chat-input {
  min-height: var(--editor-input-h, 96px);
  display: flex; align-items: flex-end; gap: 10px;
  border: 1px solid #d7e3f3; border-radius: 14px; padding: 12px 14px;
}
/* === DOC-MODAL LAYOUT ÔÇô DROP-IN (END) === */


/* === DOC-MODAL ÔÇô 60% Breite, b++ndig + Chat-Input unten (v5) =============== */
#docEditorModal{
  --doc-w: clamp(640px, 60vw, 1100px);
}

#docEditorModal .va-modal__dialog{
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header | Body | Footer */
  width: var(--doc-w);
}

#docEditorModal .va-modal__header{
  width: var(--doc-w);
  margin: 0 auto;
  padding: 10px 12px;
}

#docEditorModal .va-modal__body{
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

#docEditorModal .va-editor{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;    /* Kommentarspalte ausgeblendet */
}

#docEditorModal .va-editor__content{
  overflow: auto;
  padding: 0;
  background: transparent;
  border: 0;
}

#docEditor{
  width: var(--doc-w);
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 24px 28px;
}

/* Footer b++ndig unter dem Dokument, gleiche Breite */
#docEditorModal .va-editor__footer{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 12px 0 18px;
}

#docFooterInner{
  width: var(--doc-w);
  margin: 0 auto;
}

/* Chat-Input Optik wie Hauptchat (ohne Upload) */
.doc-chat-input{
  display: flex; gap: 10px; align-items: flex-end;
  background: #fff;
  border: 1px solid #d7dee7;
  border-radius: 14px;
  padding: 12px;
}
.doc-chat-input textarea{
  flex: 1;
  min-height: 44px; max-height: 40vh; resize: vertical;
  border: 0; outline: none; color: #0b2941;
}
.doc-chat-input .actions{ display: flex; gap: 8px; align-items: center; }

/* Export-Men++ weiter funktionsf+ñhig */
#docEditorModal .va-menu{ position: relative; }
#docEditorModal .va-menu__list{
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 10;
  background: #fff; border: 1px solid #dbe6f3; border-radius: 10px;
  padding: 6px; min-width: 200px; box-shadow: 0 10px 24px rgba(16,38,73,.12);
}
#docEditorModal .va-menu__list[hidden]{ display: none; }

/* Kommentar-Bubble im Content verankert (bleibt) */
#vaCmtBubble{
  position: absolute; z-index: 6; padding: 6px 10px;
  border-radius: 999px; background: #0b6cff; color: #fff; font-size: 13px;
  box-shadow: 0 4px 12px rgba(20,37,63,.35); display: none; cursor: pointer;
}
#vaCmtBubble.show{ display:inline-block; }



/* ===== Einheitliche Dokumentbreite (Kopf, Inhalt, Chat) ===== */
:root{
  --doc-width: clamp(560px, 60vw, 980px); /* -> ~60% der Seite */
}

.va-modal--xl .va-modal__dialog{
  width: var(--doc-width);
  max-width: var(--doc-width);
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* Kopf exakt so breit wie Dokument */
#docEditorModal .va-modal__header{
  padding: .9rem 1.1rem;
  background: #eaf2fb;
  display:flex; align-items:center; justify-content:space-between;
}

/* Dokument-Reader: zentriert, ohne schwarzen Rand */
#docEditorModal .va-modal__body{
  padding: 0;
  background: #0b1825;           /* Overlay-Grundfarbe */
}
#docEditorModal .va-editor{
  width: var(--doc-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;     /* Kommentarsidebar blenden wir standardm+ñ+ƒig aus */
}
#docEditor{
  background: #fff;
  color: #1b2a3a;
  padding: 28px 26px;
  line-height: 1.55;
  border-radius: 0;               /* b++ndig */
}

/* Chat-Bar nahtlos andocken ÔÇô kein Zwischenraum, gleiche Breite */
#docEditorModal .va-editor__footer{
  background:#fff;
  padding: 10px 16px 14px;
  border-top: 1px solid #e3e8f3;
  width: var(--doc-width);
  margin: 0 auto;
}

/* Chat-Eingabe wie im Hauptchat, aber ohne Upload-Button */
.chat-input-bar--doc{
  background: transparent;
  padding: 0;
}
.chat-input-bar--doc .chat-input-wrap{
  display:flex; align-items:flex-end; gap:.6rem;
  border: 1px solid #cbd6ea;
  border-radius: 14px;
  padding: 8px 10px;
  background:#f8fbff;
}
.chat-input-bar--doc textarea{
  resize: none; border:0; outline:0; background:transparent;
  width:100%; min-height:36px; max-height:180px; overflow:auto;
  font: 500 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.chat-input-bar--doc .input-actions-right{ display:flex; gap:.4rem; align-items:center; }
.chat-input-bar--doc .btn-icon{ background:#eef4ff; border:1px solid #d5e3ff; }
.chat-input-bar--doc .btn-primary{ padding: .55rem .9rem; }



/* 60% Seitenbreite, min 640px, max 1100px */
#docEditorModal {
  --doc-w: clamp(640px, 60vw, 1100px);
}
#docEditorModal .va-modal__dialog {
  width: var(--doc-w);          /* 60% der Seite nutzen */
  margin: 0 auto;               /* horizontal zentrieren */
  height: 100dvh;               /* volle H+Âhe ausnutzen */
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header | Body | Footer getrennt */
}
#docEditorModal .va-modal__header {
  width: var(--doc-w);
  margin: 0 auto;
  /* ... (Padding wie gew++nscht) ... */
}
#docEditorModal .va-modal__body {
  padding: 0;
  min-height: 0;
  overflow: hidden;
}



#docEditor {
  width: var(--doc-w);
  margin: 0 auto;
  background: #fff;                          /* wei+ƒer Hintergrund */
  border: 1px solid #e6e9ef;                 /* hellgraue Umrandung */
  border-radius: 12px;
  padding: 24px 28px;
}


#docEditorModal .va-editor__footer {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 12px 0 18px; /* ggf. etwas Abstand zum Seitenende */
}
#docFooterInner {
  width: var(--doc-w);
  margin: 0 auto;
}



.doc-chat-input {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  background: #fff;
  border: 1px solid #d7dee7;
  border-radius: 14px;
  padding: 12px;
}
.doc-chat-input textarea {
  flex: 1;
  min-height: 44px;
  max-height: 40vh;
  resize: vertical;
  border: 0;
  outline: none;
  color: #0b2941;
  /* (Schriftart und weiteres wie gew++nscht) */
}
.doc-chat-input .actions {
  display: flex;
  gap: 8px;
  align-items: center;
}



/* Logo oben rechts im Dokument */
#docEditor .doc-logo {
  float: right;
  margin: 4px 0 12px 16px;
  line-height: 0;
}
#docEditor .doc-logo img {
  max-height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
}
@media (min-width: 1200px) {
  #docEditor .doc-logo img { max-height: 72px; }
}


/* Editor-Modal an Chat-Design angleichen */
#docEditorModal .va-modal__overlay {
  background: transparent !important;         /* Kein abgedunkelter Overlay-Hintergrund */
  backdrop-filter: none !important;
}
#docEditorModal .va-modal__dialog {
  width: var(--chat-block-w) !important;      /* Gleiche Breite wie Chat-Container */
  max-width: 1280px !important;
  margin: 0 auto !important;                  /* Zentriert */
  height: auto !important;
  max-height: 95vh !important;               /* F++llt h+Âchstens 95% der H+Âhe */
  border: 1px solid #86d8f0 !important;       /* Rahmen wie Chat-Container */
  border-radius: 14px !important;
  background: linear-gradient(180deg,#F6FAFF 0%, #F2F7FD 100%) !important;
  box-shadow: 0 10px 36px rgba(3,32,66,.06) !important;
  display: flex !important;                  /* +£berschreibt ggf. Grid: flexibles Container-Layout */
  flex-direction: column !important;
}
#docEditorModal .va-modal__header {
  background: transparent !important;         /* Gleicher Stil wie Chat-TopBar */
  border-bottom: 1px solid #D6E4F3 !important;
  padding: 1rem 16px !important;             /* Etwas h+Âher f++r mehr Inhalt */
}
#docEditorTitle { 
  color: #0b2941 !important;
  font-weight: 700 !important;
}
#docEditor {
  background: #FFFFFF !important;            /* Wei+ƒer Hintergrund (wie KI-Nachricht) */
  color: #0a2538 !important;
  border: none !important;                   /* Kein eigener Rahmen (nutzt Container-Rahmen) */
  /* border-radius: 0 bleibt, da der Container bereits abgerundete Ecken hat */
}
/* Debug-Info-Bereich styling */
#docDebug {
  background: #f6f8fb;
  color: #0a2538;
  border: 1px solid #dbe6f3;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-top: 1rem;
  font-size: 0.9em;
  overflow-x: auto;
}
#docDebug pre {
  white-space: pre-wrap;
  word-break: break-word;
}


/* === DOC-EDITOR im Chat-Look (harte Overrides) === */
:root{
  --doc-width: min(60vw, 1200px);
}

/* Container wie Chat-Block */
#docEditorModal .va-modal__overlay{
  background: transparent !important;
  backdrop-filter: none !important;
}
#docEditorModal .va-modal__dialog{
  width: var(--doc-width) !important;
  max-width: var(--doc-width) !important;
  margin: 0 auto !important;
  background: linear-gradient(180deg,#F6FAFF 0%, #F2F7FD 100%) !important;
  border: 1px solid #86D8F0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 36px rgba(3,32,66,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Topbar wie ChatTopBar ÔÇô nur etwas h+Âher */
#docEditorModal .va-modal__header{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 64px !important;          /* h+Âher als ChatTopBar */
  padding: 10px 14px !important;
  border-bottom: 1px solid #D6E4F3 !important;
  background: transparent !important;
}
#docEditorTitle{
  font-weight: 700 !important;
  color: #0b2941 !important;
}

/* Dokument-Fl+ñche identisch zum Chat-Inhalt (helle Bubble) */
#docEditor{
  background: #fff !important;
  color: #0a2538 !important;
  padding: 18px 18px 6px !important;
  overflow: auto !important;
  max-height: calc(95vh - 64px - 72px) !important; /* Topbar + Inputbar */
  border: none !important;
}

/* Inputbar unten ÔÇô exakt wie Chat-Eingabe */
#docChatBar{
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 8px !important;
  align-items: end !important;
  padding: 10px 12px !important;
  border-top: 1px solid #D6E4F3 !important;
  background: #F7FAFF !important;
}
#docChatInput{
  width: 100% !important;
  min-height: 38px !important;
  max-height: 160px !important;
  resize: none !important;
  padding: 10px 12px !important;
  border: 1px solid #CFE0F1 !important;
  background: #fff !important;
  border-radius: 10px !important;
  line-height: 1.3 !important;
  overflow: auto !important;
}
#docSendBtn, #docMicBtn{
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
  border: 1px solid #CFE0F1 !important;
  background: #fff !important;
  cursor: pointer !important;
}
#docSendBtn:hover, #docMicBtn:hover{ background:#f1f7ff !important; }

/* Kein Datei-Upload im Editor */
#docUploadBtn, #docUpload{ display:none !important; }

/* Logo oben rechts im Dokument */
#docEditor .va-doc-logo{
  float: right;
  margin: 0 0 8px 12px;
  max-width: 160px;
}
#docEditor .va-doc-logo img{
  max-width: 100%;
  height: auto;
  display: block;
}


/* Bedarf ÔÇô Fortschrittsliste einklappbar */
.lb-toggle{ width:28px; height:28px; margin:.35rem auto 0; border:1px solid #d6e1f0; }
.lb-toggle .material-icons{ font-size:20px; transition: transform .15s ease; }
.lb-toggle[aria-expanded="true"] .material-icons{ transform: rotate(180deg); }
#lbDetails[hidden]{ display:none !important; }


/* Workboard: LSB + Dokument-Icon in einer Zeile */
.va-docgrid{ display:grid; gap:.5rem; grid-template-columns: 1fr; }
.va-docgrid.has-lsb{ grid-template-columns: 1fr auto; align-items:center; }

#btnGenLSB{ grid-column: 1 / -1; }               /* default: volle Breite */
.va-docgrid.has-lsb #btnGenLSB{ grid-column: 1; } /* mit Icon: links */

#btnEditLSB{ grid-column: 2; }                   /* Icon-Button rechts */
.va-docgrid > button:not(#btnGenLSB):not(#btnEditLSB){ grid-column: 1 / -1; }

/* schmales Doku-Icon (visuell an deine Buttons angepasst) */
#btnEditLSB.btn-icon{
  width:38px; height:38px; border-radius:10px;
  border:1px solid #d6e1f0; background:#f7fbff; color:#1a4f86;
}
#btnEditLSB.btn-icon:hover{ background:#eaf3ff; }



/* ===== LB-Editor: Modal auf Dokument-/Chat-Breite, nur Innen-Scroll ===== */
:root{
  /* wird per JS gesetzt; Fallback = Chatbreite */
  --lb-sheet-w: min(var(--chat-block-w, 76vw), 1280px);
}

/* Modal als Vollh+Âhe-Sheet, mittig; keine Au+ƒen-Scrollbars */
.lb-modal.modal { display:flex; align-items:center; justify-content:center; }
.lb-modal.modal.show { display:flex; }
body.modal-open { overflow: hidden; } /* Seite selbst nicht scrollen */

.lb-modal .modal-dialog{
  position: fixed;
  top: 10px; bottom: 10px;               /* f++llt (nahezu) die ganze Seite */
  left: 50%; transform: translateX(-50%);
  width: min(var(--lb-sheet-w), calc(100vw - 32px));
  max-width: var(--lb-sheet-w);
  margin: 0; padding: 0;
}

.lb-modal .modal-content{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;     /* Header | Body (scrollt innen) | Footer/Chat */
  border-radius: 12px;
  overflow: hidden;                      /* kein zus+ñtzlicher Scroll au+ƒen */
}

/* Kopf/Bereich/Foot immer exakt auf ÔÇ×SeitenbreiteÔÇ£ */
.lb-modal .modal-header,
.lb-modal .modal-body,
.lb-modal .modal-footer{
  width: 100%;
  max-width: var(--lb-sheet-w);
  margin-inline: auto;                   /* b++ndig an derselben Kante */
  padding-inline: 0;
}

/* Kopfzeile: Buttons wirklich b++ndig links/rechts an die Kante */
.lb-modal .modal-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
  padding: .7rem 0;
}

/* Au+ƒen-Scroll weg, nur das Dokument bekommt den Scroll */
.lb-modal .modal-body{ overflow: hidden; padding: 0; }

/* Das eigentliche Dokument (dein Editor/Viewer) muss diese Klasse tragen */
.lb-modal .lb-doc{
  height: 100%;
  overflow: auto;                        /* -> EIN Scrollbalken nur hier */
  padding: 0; margin: 0;
}

/* Unten: Chat-Input-Bar/Leiste exakt dieselbe Breite und b++ndig anschlie+ƒen */
.lb-modal .lb-chatbar{
  padding: 10px 0 12px;
  border-top: 1px solid #e6eef7;
  background: #fff;
}

/* Inhalte in der Chatbar (Wrap & Textfeld) volle ÔÇ×SeitenbreiteÔÇ£ */
.lb-modal .lb-chatbar > .chat-input-wrap{
  width: 100%;
  max-width: var(--lb-sheet-w);
  margin: 0 auto;
}

/* Sicherheitsnetz gegen doppelte Rahmen/Innenabst+ñnde aus +ñlteren Styles */
.lb-modal .lb-chatbar,
.lb-modal .chat-input-wrap,
.lb-modal .chat-input-bar{ box-shadow:none !important; border-radius:0 !important; }

/* Optional: wenn dein Dokument eine definierte innere Seitenbreite hat (A4), zentrieren */
.lb-modal .lb-doc > .document,
.lb-modal .lb-doc > .editor,
.lb-modal .lb-doc > .pdf,
.lb-modal .lb-doc > .content{
  margin-inline: auto;
}


/* ==========================================================
   LSB-EDITOR MODAL ÔÇö Layout auf Dokumentbreite, 1 Scrollbar
   ========================================================== */

/* Fallback-Breite, wenn nichts gemessen wird: +ñhnlich wie Chat-Container */
:root { --lb-sheet-w: clamp(680px, 76%, 1280px); }

/* Bitte dem Editor-Modal die Klasse .lb-modal geben.
   Falls dein Markup andere IDs nutzt, wirken die Fallbacks unten mit. */
.lb-modal .modal-dialog,
#lbEditorModal .modal-dialog,
#docEditorModal .modal-dialog{
  width: auto !important;
  max-width: none !important;
  margin: 12px auto !important;
}

.lb-modal .modal-content,
#lbEditorModal .modal-content,
#docEditorModal .modal-content{
  /* Container folgt der Dokumentbreite */
  width: var(--lb-sheet-w) !important;
  max-width: min(100vw - 24px, var(--lb-sheet-w)) !important;

  /* volle verf++gbare H+Âhe, ohne +ñu+ƒeren Scroll */
  height: calc(100vh - 24px) !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* Header | Inhalt | Footer */
  overflow: hidden !important;
}

/* Header & Footer b++ndig zu den Dokumentkanten ausrichten */
.lb-modal .modal-header,
.lb-modal .modal-footer,
#lbEditorModal .modal-header,
#lbEditorModal .modal-footer,
#docEditorModal .modal-header,
#docEditorModal .modal-footer{
  padding-left:  calc((100% - var(--lb-sheet-w)) / 2) !important;
  padding-right: calc((100% - var(--lb-sheet-w)) / 2) !important;
}

/* Nur der Dokumentbereich scrollt */
.lb-modal .modal-body,
#lbEditorModal .modal-body,
#docEditorModal .modal-body{
  padding: 0 !important;
  overflow: hidden !important;        /* kein zweiter Scrollbalken au+ƒen */
}


/* Chat-Leiste im Modal exakt auf Dokumentbreite und optisch andocken */
.lb-modal .chat-input-wrap,
.lb-modal .lb-chatbar,
#lbEditorModal .chat-input-wrap,
#docEditorModal .chat-input-wrap{
  width: var(--lb-sheet-w) !important;
  max-width: min(100vw - 24px, var(--lb-sheet-w)) !important;
  margin: 0 auto 10px auto !important;
}

/* Wenn das Modal offen ist, keine zus+ñtzliche Page-Scrollbar */
body.modal-open { overflow: hidden; }

/* ==========================================================
   NUR IM MODAL: ++berbreite Projektchat-Overrides r++ckg+ñngig machen
   (damit der Senden-Button wieder wie vorher aussieht)
   ========================================================== */
.project-page .lb-modal .input-actions-right,
.project-page #lbEditorModal .input-actions-right,
.project-page #docEditorModal .input-actions-right{
  all: revert;
}
.project-page .lb-modal .input-actions-right .btn-primary,
.project-page #lbEditorModal .input-actions-right .btn-primary,
.project-page #docEditorModal .input-actions-right .btn-primary,
.project-page .lb-modal .input-actions-right .btn-icon,
.project-page #lbEditorModal .input-actions-right .btn-icon,
.project-page #docEditorModal .input-actions-right .btn-icon{
  all: revert;
}


/* === FINAL OVERRIDES ÔÇö Projektdetails & Layout-Symmetrie ================== */
/* A) In der Details-Card: Label + Wert direkt nebeneinander (kein Rechtsfloat) */
#projektInfoView > div{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: .35rem !important;
  align-items: start !important;
}
#projektInfoView b{
  white-space: normal !important;        /* lange Labels d++rfen umbrechen */
  word-break: break-word !important;
}
#projektInfoView span{
  justify-self: start !important;        /* Wert linksb++ndig in Spalte 2 */
  text-align: left !important;
}

/* B) Seitenr+ñnder: links b++ndig wie der Burger, rechts symmetrisch */
body.project-page{ --edge: 2rem; }       /* wie der Burger (left:2rem) */
body.project-page main.project-main{
  padding-inline: var(--edge) !important;
}

/* C) Spaltenbreiten: linke Cards minimal breiter, rechte Rail an den Rand  */
body.project-page .project-layout{
  /* links etwas breiter (17ÔÇô22vw), Chat flexibel, rechts fix 300ÔÇô360px */
  grid-template-columns:
    clamp(260px, 22vw, 360px)
    minmax(640px, 1fr)
    clamp(300px, 20vw, 360px) !important;
  column-gap: clamp(16px, 2vw, 26px) !important;
}
body.project-page .project-left  { justify-self: start !important; }
body.project-page .project-right { justify-self: end !important; margin-right: 0 !important; }

/* D) Sicherheitsnetz: Cards links d++rfen ruhig etwas breiter werden */
body.project-page .project-left .projekt-info-box,
body.project-page #projektCPVBox{ max-width: none !important; }



/* === LB-Editor im Chat-Look (Drop-in, harte Overrides) =================== */
/* Modal/Doc exakt so breit wie der Projekt-Chat */
#docEditorModal .va-modal__dialog{
  width: var(--chat-block-w) !important;
  max-width: var(--chat-block-w) !important;
  height: 100dvh !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* Header | Body | Footer */
  margin: 0 auto !important;
}

/* +£berschriftenzeile b++ndig */
#docEditorModal .va-modal__header{
  width: var(--chat-block-w) !important;
  margin: 0 auto !important;
  padding: 10px 12px !important;
}

/* Nur das Dokument scrollt ÔÇô keine Au+ƒen-Scrollbars */
#docEditorModal .va-modal__body{
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}
#docEditorModal .va-editor{
  display: grid !important;
  grid-template-columns: 1fr !important;   /* Kommentarspalte standardm+ñ+ƒig aus */
  height: 100% !important;
}
#docEditorModal .va-editor__content{
  min-height: 0 !important;
  overflow: auto !important;               /* EIN Scrollbereich */
  padding: 0 !important;
}

/* Dokumentspalte = gleiche Breite wie Chat-Bubbles */
#docEditor{
  width: var(--chat-block-w) !important;
  margin: 0 auto !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 24px 28px !important;           /* schlanke Innenluft */
}

/* Keine vertikalen L++cken zwischen Header, Dokument und Input-Zeile */
#docEditorModal .va-modal__header,
#docEditorModal .va-modal__body,
#docEditorModal .va-editor__footer{
  margin: 0 !important;
}
#docEditorModal .va-modal__body{ padding: 0 !important; }

/* Input-Zeile unten: exakt wie im Projekt-Chat (ohne Upload) */
#docEditorModal .va-editor__footer{
  position: sticky !important;
  bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 12px !important;            /* b++ndig ans Dokument */
}
#docFooterInner{
  width: var(--chat-block-w) !important;
  margin: 0 auto !important;
}

/* Chat-Eingabe-Wrapper (kopiert den Projekt-Chat-Look) */
#docEditorModal .chat-input-wrap{
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  padding: 6px 8px !important;
  box-shadow: none !important;
}
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  min-height: 36px !important;
  max-height: 40vh !important;
  resize: none !important;
  border: 0 !important; outline: 0 !important;
  background: transparent !important;
  line-height: 1.35 !important;
  color: #0B2941 !important;
  padding: 0 !important;
}
#docEditorModal .input-actions-right .btn-icon,
#docEditorModal .input-actions-right .btn-primary{
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kommentarspalte ausblendbar; keine L++cke erzwingen */
#docEditorModal .va-editor__aside[hidden]{ display: none !important; }

/* =====================================================================
   Final DocEditor adjustments
   The document content and chat input bar now use the full width of the
   modal and align flush left and right. The header spans the full modal
   width, the modal body uses the full viewport height minus a small
   symmetrical margin, and the send/mic buttons are styled to match the
   project chat.
====================================================================== */

/* Dialog symmetrisch einr++cken: oben/unten jeweils 12ÔÇ»px Abstand */
#docEditorModal .va-modal__dialog{
  top: 12px !important;
  bottom: 12px !important;
}

/* Header ++ber volle Breite ÔÇô keine automatische Zentrierung */
#docEditorModal .va-modal__header{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Dokumentcontainer (Reader) nutzt 100ÔÇ»% der verf++gbaren Breite */
#docEditorModal #docEditor,
#docEditorModal .va-reader{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Footer/Chatbar und zugeh+Ârige Wrapper ++ber die volle Breite */
#docEditorModal .va-editor__footer,
#docEditorModal #docChatBar,
#docEditorModal .chat-input-wrap,
#docEditorModal #docFooterInner{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ChatÔÇæEingabe: Buttons im ChatÔÇæLook (wie ProjektÔÇæChat) */
#docEditorModal .input-actions-right .btn-icon{
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  border: 1px solid #C8DBEE !important;
  background: #0F2A3A0F !important;
  color: #1d4767 !important;
}
#docEditorModal .input-actions-right .btn-primary{
  height: 32px !important;
  padding: 0 .85rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  background: #009EE1 !important;
  border: 1px solid #0a9edc !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* =====================================================================


/* Make the modal dialog span the full viewport with a small top/bottom margin
#docEditorModal .va-modal__dialog{
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  top: 2px !important;
  bottom: 2px !important;
  height: calc(100dvh - 4px) !important;
  margin: 0 !important;
}
*/


/* Apply the same 60% centered width to the chat bar and its wrappers */
#docEditorModal .va-editor__footer,
#docEditorModal #docChatBar,
#docEditorModal .chat-input-bar,
#docEditorModal .chat-input-wrap{
  width: 60vw !important;
  max-width: 60vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tuck the chat footer to the bottom of the modal with a tiny margin */
#docEditorModal .va-editor__footer{
  margin-bottom: 2px !important;
  padding-top: 4px !important;
  padding-bottom: 0 !important;
}

/* Ensure the textarea spans the full width of its container */
#docEditorModal #docChatInput{
  width: 100% !important;
}

/* Position the action buttons correctly within the chat input */
#docEditorModal .input-actions-right{
  right: 12px !important;
  bottom: 12px !important;
}


/* === DOC-EDITOR ÔÇö 60%-zentriert & Fullscreen (finaler Drop-In) ================== */
/*  Am ENDE der projekt.css einf++gen. Greift nur im #docEditorModal. */

#docEditorModal{ --doc-center-w: 60vw; } /* exakt 60% der Viewportbreite */

/* Modal wirklich fullscreen, mit 2px Abstand oben/unten; horizontal sauber zentriert */
/*
#docEditorModal .va-modal__dialog{
  position: fixed !important;
  left: 0 !important; right: 0 !important;
  top: 2px !important; bottom: 2px !important;
  margin: 0 auto !important;
  width: 100vw !important; max-width: 100vw !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  transform: none !important;
  overflow: hidden !important;
}
*/


/* Body darf scrollen, ohne zus+ñtzliche Innenabst+ñnde */
#docEditorModal .va-modal__body{
  padding: 0 !important;
  overflow: auto !important;
  background: #fff !important;
}

/* Dokumentbereich: 60% breit, zentriert, b++ndig mit Footer */
#docEditorModal .va-editor,
#docEditorModal .va-editor__content{ width: 100% !important; }

#docEditorModal #docEditor{
  width: var(--doc-center-w) !important;
  max-width: var(--doc-center-w) !important;
  margin: 0 auto !important;
  padding: 18px 24px !important;
  background: #fff !important;
  color: #0B2941 !important;
}

/* Footer/Chat-Input: exakt gleiche Breite + Zentrierung wie der Body */
#docEditorModal .va-editor__footer,
#docEditorModal #docChatBar,
#docEditorModal #docFooterInner,
#docEditorModal .chat-input-bar{
  width: var(--doc-center-w) !important;
  max-width: var(--doc-center-w) !important;
  margin: 0 auto 2px auto !important;     /* unten schmaler Rand */
  padding: 6px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Eingabe-Wrapper: wie im Projekt-Chat, kein blauer Fokusrahmen */
#docEditorModal .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: .5rem !important;
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  box-shadow: none !important;
}
#docEditorModal .chat-input-wrap:focus-within{
  outline: none !important;
  box-shadow: none !important;
  border-color: #C8DBEE !important;
}

/* Textfeld: l+ñuft nicht unter die Buttons (Platz rechts), keine blaue Outline */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  min-height: 44px !important;
  max-height: 45vh !important;
  resize: none !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: transparent !important;
  color: #0B2941 !important;
  padding: 8px 118px 8px 12px !important;   /* Platz f++r Mic+Senden rechts */
}

/* Buttons unten rechts NEBENEINANDER im Feld */
#docEditorModal .input-actions-right{
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .45rem !important;
}
#docEditorModal .input-actions-right .btn-icon,
#docEditorModal .input-actions-right .btn-primary{
  height: 36px !important;
  min-width: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Sicherheitsnetz gegen alte Breiten/Grids, die Einr++ckungen verursachen */
#docEditorModal .va-reader,
#docEditorModal #docFooterInner,
#docEditorModal .va-editor__content,
#docEditorModal .chat-input-bar--doc{
  width: var(--doc-center-w) !important;
  max-width: var(--doc-center-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#docEditorModal .chat-input-wrap{
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}



/* --- DROP-IN: Editor/Reader Layout-Fixes --- */

/* Reader soll die verf++gbare Breite im Modal ausnutzen */
.va-modal__dialog.va-editor { width: min(96vw, 1600px); }
.va-editor__body .va-editor__scroll {
  width: 100%;
  max-width: none;
  padding: 1rem 2rem;
}

/* Editor-Eingabe: zentriert ~50% der Bildschirmbreite */
.va-editor__footer .chat-input-bar {
  width: 50vw;
  max-width: 980px;
  margin: 0.5rem auto 1rem;
}

/* Optional: im schmalen Viewport nicht zu eng werden */
@media (max-width: 900px) {
  .va-editor__footer .chat-input-bar { width: 92vw; }
}


/* =========================================================
   Vergabeunterlagen ÔÇô DocViewer H+Âhe & Chat-Breite (Overrides)
   ========================================================= */

/* Seite darf vertikal strecken */
html, body { height: 100% !important; }

/* Scope auf die Vergabeunterlagen-Seite (nimm den selektor, der bei dir existiert) */
:is(#vergabeunterlagen, .vergabeunterlagen, [data-page="vergabeunterlagen"]) {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Haupt-Wrapper des Viewers ++ber gesamte Resth+Âhe
   (triff zuverl+ñssig g+ñngige Klassen/IDs; beh+ñlt anderes unangetastet) */
:is(#vergabeunterlagen, .vergabeunterlagen, [data-page="vergabeunterlagen"]) 
  :is(.doc-viewer-wrapper, .doc-viewer, #viewerContainer) {
  flex: 1 1 auto !important;
  min-height: 0 !important;      /* verhindert, dass unten "abgeschnitten" wird */
  height: auto !important;
  max-height: none !important;
}

/* PDF.js-Container (falls verwendet) wirklich auf 100% der Resth+Âhe setzen */
:is(#vergabeunterlagen, .vergabeunterlagen, [data-page="vergabeunterlagen"]) #viewerContainer {
  height: 100% !important;
  overflow: auto !important;
}

/* ---------------------------------------------------------
   Chat-Eingabe: gleiche Breite wie der Dokumentbereich
   --------------------------------------------------------- */
/* 1) Lege (nur hier) eine gemeinsame Breiten-Variable fest.
      Setze sie auf dem Container, der den Dokumentinhalt zentriert
      (nimm die zutreffende der drei Varianten). */
:is(#vergabeunterlagen, .vergabeunterlagen, [data-page="vergabeunterlagen"]) 
  :is(.doc-content, .pdfViewer, .document) {
  /* Passe 816px/24px ggf. an dein Dokument-Layout an */
  --doc-max-width: 816px;
  --doc-padding-x: 24px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) Die Chat-Leiste innerhalb des Viewers exakt gleich breit zentrieren */
:is(#vergabeunterlagen, .vergabeunterlagen, [data-page="vergabeunterlagen"]) 
  :is(#viewerContainer, .doc-viewer, .doc-viewer-wrapper) 
  :is(.chat-composer, .chat-input, .chat-bar) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--doc-max-width, 816px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--doc-padding-x, 24px) !important;
  padding-right: var(--doc-padding-x, 24px) !important;
  display: block !important; /* falls ein altes flex/inline-Layout st+Ârt */
}



/* Variablen f++r zentrale Breitensteuerung */
:root {
  /* Breite des DocViewers und der ChatÔÇæEingabe in Prozent der Seite */
  --vw-55: 55%;
}

/* Stellen Sie sicher, dass html und body die volle H+Âhe einnehmen */
html, body {
  height: 100% !important;
}

/*
 * DocViewer auf volle H+Âhe der Seite strecken.
 *
 * Diese Regeln wirken nur im Kontext der Vergabeunterlagen-Seite und
 * ++berschreiben existierende H+Âhenangaben, auch solche mit !important.
 */
#vergabeunterlagen,
#vergabeunterlagen .doc-viewer-wrapper,
#vergabeunterlagen #viewerContainer {
  /* H+Ârt auf, die H+Âhe zu begrenzen und f++llt den verf++gbaren Platz */
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
}

/*
 * Breite des Dokumentinhalts (Viewer) auf 55ÔÇ»% der Seite setzen und
 * horizontal zentrieren. Gilt f++r bekannte WrapperÔÇæElemente des PDFÔÇæ
 * bzw. Dokumentviewers.
 */
#vergabeunterlagen #viewerContainer,
#vergabeunterlagen .doc-viewer,
#vergabeunterlagen .doc-viewer-wrapper,
#vergabeunterlagen .pdfViewer,
#vergabeunterlagen .doc-content {
  width: var(--vw-55) !important;
  max-width: var(--vw-55) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/*
 * ChatÔÇæEingabe exakt so breit wie der Dokumentbereich machen und zentrieren.
 */
#vergabeunterlagen .chat-composer,
#vergabeunterlagen .chat-input,
#vergabeunterlagen .chat-bar {
  width: var(--vw-55) !important;
  max-width: var(--vw-55) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/*
 * Stellt sicher, dass der ChatÔÇæComposer als Block angezeigt wird,
 * damit die automatische Zentrierung via margin wirksam ist.
 */
#vergabeunterlagen .chat-composer,
#vergabeunterlagen .chat-input,
#vergabeunterlagen .chat-bar,
#vergabeunterlagen #viewerContainer {
  display: block !important;
}


/* =======================================================================
   VERGABEUNTERLAGEN ÔÇô Modal: volle H+Âhe + 55% zentriert (harte Overrides)
   ======================================================================= */
:root{ --doc-55: 55%; }

html, body { height:100% !important; }

/* Dialog als Flex-Spalte in voller Viewport-H+Âhe */
#docEditorModal .va-editor{
  display:flex !important;
  flex-direction:column !important;
  height:100vh !important;           /* f++llt die Seite */
  max-height:100vh !important;
  box-sizing:border-box !important;
}

/* Scrollk+Ârper darf wachsen und wirklich scrollen */
#docEditorModal .va-editor__body{
  flex:1 1 auto !important;
  min-height:0 !important;           /* verhindert 95%-Cutoff */
  overflow:hidden !important;
}


/* Dokumentbereich (gerendertes MD) ÔÇô 55% breit & zentriert */
#docEditorModal #docEditor{
  width: var(--doc-55) !important;
  max-width: var(--doc-55) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Footer klebt unten, Inputbar exakt so breit wie der Textbereich */
#docEditorModal .va-editor__footer{
  flex: 0 0 auto !important;
  padding-bottom: max(.25rem, env(safe-area-inset-bottom)) !important;
  background: transparent !important;
}
#docEditorModal #docChatBar,
#docEditorModal .va-editor__footer .chat-input-bar{
  width: var(--doc-55) !important;
  max-width: var(--doc-55) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Eingabewrap immer auf 100% der Chatbar, damit Buttons korrekt sitzen */
#docEditorModal .chat-input-wrap{
  width:100% !important;
  margin:0 auto !important;
}

/* Sicherheit: alte Layouts, die die Breite/Position ++berschreiben */
#docEditorModal .chat-input-bar,
#docEditorModal .chat-input-wrap,
#docEditorModal #docChatInput{
  display:block !important;
}

/* Falls alte Regeln fix Breiten auf dem Modal setzen, neutralisieren */
#vergabeunterlagen{ width:100% !important; max-width:none !important; margin:0 !important; }


/* =========================================================
   DOC-EDITOR (Modal) ÔÇô Vollh+Âhe, 55%-Spaltenbreite, kein Fade,
   kein Horizontal-Scroll. Nur Modal-spezifische Selektoren.
   ========================================================= */

/* 0) Gemeinsame Zielbreite */
:root { --va-col-55: 55%; }

/* 1) Dialog-Kolonne nutzt den gesamten Viewport */
#docEditorModal .va-editor{
  display:flex !important;
  flex-direction:column !important;
  height:100vh !important;
  max-height:100vh !important;
  box-sizing:border-box !important;
}

/* Scrollbarer Body bekommt den ganzen Rest */
#docEditorModal .va-editor__body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;   /* nur der innere Scroller scrollt */
}
#docEditorModal .va-editor__scroll{
  height:100%;
  overflow-y:auto;
  overflow-x:hidden; /* verhindert horizontalen Scroll */
  -webkit-overflow-scrolling: touch;
  mask-image: none !important;  /* falls per CSS Mask gesetzt wurde */
}

/* 2) Jede Art von ÔÇ×Fade/MaskÔÇ£ am unteren Rand deaktivieren */
#docEditorModal .va-editor__scroll::after,
#docEditorModal .va-editor__body::after,
#docEditorModal .va-editor::after,
#docEditorModal [data-fade="bottom"]::after{
  content:none !important;
  display:none !important;
  background:none !important;
  pointer-events:none !important;
}

/* 3) Dokument-Inhalt: niemals breiter als die Spalte,
      lange W+Ârter umbrechen, keine +£berbreite */
#docEditorModal #docEditor{
  width: var(--va-col-55) !important;
  max-width: var(--va-col-55) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
#docEditorModal #docEditor *{
  max-width:100% !important;            /* Bilder/Tabellen etc. */
  box-sizing:border-box !important;
}

/* 4) Chat-Eingabe: exakt gleiche Breite wie der Textbereich, zentriert */
#docEditorModal #docChatBar,
#docEditorModal .va-editor__footer .chat-input-bar{
  width: var(--va-col-55) !important;
  max-width: var(--va-col-55) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
  display:block !important;
}

/* Innenleben der Eingabe volle Leistenbreite */
#docEditorModal .chat-input-wrap{
  width:100% !important;
  margin:0 !important;
}

/* 5) Sicherheitsnetz gegen Fremd-Setzungen */
#docEditorModal #docEditor,
#docEditorModal #docChatBar{
  position:relative !important;
  left:auto !important; right:auto !important;
}

/* 6) (Optional) schmale Innenabst+ñnde, wenn gew++nscht */
#docEditorModal #docEditor{ padding-inline: 0 !important; }
#docEditorModal #docChatBar{ padding-inline: 0 !important; }


/* Vergabeunterlagen breiter: +10%-Punkte */
#docEditorModal { 
  --va-col-55: 65% !important; 
}



/* =========================================================
   DOC-EDITOR Modal ÔÇô breiterer Inhalt + Auto-Grow Input
   (nur f++r #docEditorModal; +ñndert nichts au+ƒerhalb)
   ========================================================= */

/* A) Breite f++r Dokument + Chat-Input: statt 55ÔÇô65% jetzt ~72% der Seite */
#docEditorModal{ --va-col-55: 72% !important; }

/* B) Seitliche R+ñnder wirklich schmal halten (keine versteckten Paddings) */
#docEditorModal .va-editor,
#docEditorModal .va-editor__body,
#docEditorModal .va-editor__scroll,
#docEditorModal #docEditor,
#docEditorModal #docChatBar{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* D) Chat-Leiste exakt so breit & zentriert wie der Dokumenttext */
#docEditorModal #docChatBar{
  width: var(--va-col-55) !important;
  max-width: var(--va-col-55) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}



/* =========================================================
   DOC-EDITOR Modal ÔÇô schmaler Rand, Overlay-Footer & Auto-Grow
   ========================================================= */

/* A) Breite: noch etwas breiter als zuletzt (wei+ƒe Fl+ñche schmal) */
#docEditorModal { --va-col-55: 78% !important; } /* ggf. 76ÔÇô80% feinjustieren */

/* B) S+ñmtliche seitlichen Paddings im Modal-Viewport eliminieren,
      damit der wei+ƒe Rand wirklich direkt am Content endet */
#docEditorModal .va-editor,
#docEditorModal .va-editor__body,
#docEditorModal .va-editor__scroll {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* C) Der gerenderte Dokumentbereich: exakt die Spaltenbreite,
      innen nur ein sehr schmaler Text-Rand */
#docEditorModal #docEditor {
  width: var(--va-col-55) !important;
  max-width: var(--va-col-55) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;

  /* schmaler Innenrand direkt am Text */
  padding-left: 16px !important;
  padding-right: 16px !important;

  /* keine horizontale Scrollbar durch lange Inhalte */
  overflow-x: hidden !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
#docEditorModal #docEditor * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* D) Scroll-Viewport: Content soll bis hinter die Chatleiste laufen */
#docEditorModal .va-editor__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 0 !important;   /* kein Zusatzabstand ÔÇô Text darf "unter" die Leiste laufen */
  -webkit-overflow-scrolling: touch;
}

/* E) Chatleiste als Overlay am unteren Rand "dar++ber" fixieren */
#docEditorModal .va-editor__footer {
  position: sticky !important;     /* bleibt unten im Scroll-Container kleben */
  bottom: 0 !important;
  z-index: 3 !important;
  background: transparent !important; /* Overlay-Effekt */
  padding-top: 8px !important;
}



/* G) Platzierung/Gr+Â+ƒe innerhalb der Leiste:
      ÔÇô ohne Text kompakt (Placeholder auf Button-H+Âhe)
      ÔÇô beim Schreiben w+ñchst NUR die Textarea, nicht die Bar */
#docEditorModal .chat-input-wrap {
  display: flex !important;
  align-items: center !important;   /* Placeholder fluchtet mit Buttons */
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Buttons rechts bleiben kompakt */
#docEditorModal .input-actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* H) Textarea: Default kompakt, bei Eingabe Auto-Grow bis ~6 Zeilen */
#docEditorModal #docChatInput {
  flex: 1 1 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;

  min-height: 40px !important;        /* kompakter Default (Ôëê Button-H+Âhe) */
  line-height: 1.4 !important;
  padding: 10px 12px !important;

  /* Auto-Grow arbeitet per JS: wir erlauben echtes Wachsen */
  height: auto !important;
  overflow: hidden !important;
  resize: none !important;

  /* Obergrenze f++rÔÇÖs wachsen (~6 Zeilen) ÔÇô JS setzt exakt, CSS als Fallback */
  max-height: 14em !important;  /* Ôëê 6ÔÇô7 Zeilen bei line-height:1.4 */
}

/* I) Sicherheitsnetz: Keine Fades/Masks am unteren Rand */
#docEditorModal .va-editor__scroll::after,
#docEditorModal .va-editor__body::after,
#docEditorModal .va-editor::after,
#docEditorModal [data-fade="bottom"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  pointer-events: none !important;
}


/* ===== DOC-EDITOR ÔÇô finale, kollisionssichere Overwrites (nur #docEditorModal) ===== */

/* Zielbreite f++r Dokument + Chat: hier 55% der Seite (anpassbar auf Wunsch) */
#docEditorModal { --doc-center-w: 55vw; }

/* Vollfl+ñchiges Modal + 3-Zeilen-Grid: Header | Body(scrollt) | Footer */
/*
#docEditorModal .va-modal__dialog{
  position: fixed !important;
  inset: 2px 0 2px 0 !important;
  width: 100vw !important; max-width: 100vw !important;
  display: grid !important; grid-template-rows: auto 1fr auto !important;
  margin: 0 !important; overflow: hidden !important;
}
*/

/* Body scrollt; kein extra Innenabstand, kein Fade */
#docEditorModal .va-modal__body{ padding:0 !important; overflow:auto !important; }
#docEditorModal .va-editor__scroll::after,
#docEditorModal .va-editor__body::after,
#docEditorModal .va-editor::after{ content:none !important; }

/* ÔÇö Breite synchronisieren ÔÇö 
   Durch hohe Spezifit+ñt schlagen wir bestehende 100%-Regeln aus deinen CSS-Bl+Âcken. */
#docEditorModal .va-modal__dialog .va-editor__body .va-editor__scroll #docEditor,
#docEditorModal .va-modal__dialog .va-editor__footer #docFooterInner,
#docEditorModal .va-modal__dialog .va-editor__footer #docChatBar,
#docEditorModal .va-modal__dialog .va-editor__footer .chat-input-bar,
#docEditorModal .va-modal__dialog .va-editor__footer .chat-input-wrap{
  width: var(--doc-center-w) !important;
  max-width: var(--doc-center-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Dokumenttext: schmaler Innenrand, keine horizontale Scrollbar */
#docEditorModal #docEditor{
  padding: 18px 20px !important;
  background: #fff !important;
  overflow-x: hidden !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Footer als Overlay: bleibt unten, Content darf ÔÇ×darunterÔÇ£ weiterlaufen */
#docEditorModal .va-editor__footer{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  background: transparent !important;
  padding: 6px 0 8px !important;
}

/* Chat-Input kompakt im Leerlauf (Placeholder auf H+Âhe der Buttons) */
#docEditorModal .chat-input-wrap{
  position: relative !important;
  display: flex !important; align-items: center !important; gap: .5rem !important;
  background: #fff !important; border: 1px solid #C8DBEE !important; border-radius: 12px !important;
  padding: 6px 8px !important; box-shadow: none !important;
}

/* Buttons unten rechts, innerhalb des Feldes */
#docEditorModal .input-actions-right{
  position: absolute !important; right: 10px !important; bottom: 10px !important;
  display: inline-flex !important; align-items: center !important; gap: .45rem !important;
}

/* Textarea ÔÇô 1 Zeile im Leerlauf, w+ñchst per JS, darf bei viel Text scrollen */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  height: 36px !important;               /* kompakter Start */
  min-height: 36px !important;
  max-height: 18em !important;           /* Ôëê 6ÔÇô7 Zeilen, JS begrenzt ebenfalls */
  line-height: 1.4 !important;
  padding: 6px 110px 6px 10px !important;/* rechts Platz f++r Buttons */
  border: 0 !important; outline: 0 !important; background: transparent !important;
  resize: none !important; overflow-y: auto !important;
}

/* Harte Gegenregel gegen vorhandene 100%-Breiten auf Footer/Wrap (macht uns schmaler) */
#docEditorModal .va-editor__footer,
#docEditorModal #docChatBar,
#docEditorModal .chat-input-wrap,
#docEditorModal #docFooterInner{
  max-width: var(--doc-center-w) !important;
  width: var(--doc-center-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== Chat-Input: kompakter Default + Leiste w+ñchst komplett mit ===== */

/* Leiste soll automatische H+Âhe haben */
#docEditorModal #docChatBar { height: auto !important; }

/* Wrapper: keine fixe Positionierung der Buttons ÔÇô soll mitwachsen */
#docEditorModal .chat-input-wrap{
  display: flex !important;
  align-items: center !important;      /* Placeholder & Buttons fluchten */
  gap: 8px !important;
  padding: 6px 10px !important;        /* kompakter Leerlauf */
  height: auto !important;             /* w+ñchst mit der Textarea */
}

/* Buttons NICHT mehr absolut positionieren (w+ñchst mit) */
#docEditorModal .input-actions-right{
  position: static !important;
  margin-left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Textarea: Leerlauf flach, kein eigener Scroll, w+ñchst per JS */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  min-height: 32px !important;         /* flacher als vorher */
  height: auto !important;             /* durch JS gesetzt */
  line-height: 1.4 !important;
  padding: 6px 8px !important;
  overflow: hidden !important;         /* keine Scrollbar, Leiste w+ñchst */
  resize: none !important;
}


/* ===== DOC-EDITOR ÔÇô Chatleiste: flacher Default, w+ñchst als Ganzes ===== */

/* Zielzeilenh+Âhe/Buttongr+Â+ƒe (bei Bedarf 34ÔÇô40px testen) */
#docEditorModal { --chat-row: 30px !important; }

/* Leiste/Wrap d++rfen NIE fix hoch sein, sie sollen mit Textarea mitwachsen */
#docEditorModal #docChatBar,
#docEditorModal .chat-input-wrap {
  height: auto !important;
}

/* Wrap: Buttons und Text zentriert; kleiner Innenabstand */
#docEditorModal .chat-input-wrap{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 10px !important;        /* schmaler Rand oben/unten */
  box-sizing: border-box !important;
}

/* Buttons: H+Âhe definiert den visuellen ÔÇ×DefaultÔÇ£ der Leiste */
#docEditorModal .input-actions-right .btn-primary,
#docEditorModal .input-actions-right .btn-icon{
  height: var(--chat-row) !important;
  min-height: var(--chat-row) !important;
  line-height: calc(var(--chat-row) - 2px) !important; /* optisch mittig */
}

/* Buttons wachsen mit ÔÇô NICHT absolut positionieren */
#docEditorModal .input-actions-right{
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Textarea: flacher Default (= Buttonh+Âhe), w+ñchst per JS, KEIN eigener Scroll */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  box-sizing: border-box !important;

  min-height: var(--chat-row) !important;
  height: var(--chat-row) !important;          /* Start exakt so hoch wie Buttons */
  max-height: none !important;                 /* keine Obergrenze durch CSS */
  line-height: 1.4 !important;
  padding: 6px 8px !important;

  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
  overflow: hidden !important;                 /* Leiste w+ñchst statt Scroll */
}



/* ==== DOC-EDITOR: Chat-Leiste flach im Leerlauf, w+ñchst als Ganzes ==== */
/* maximale Spezifit+ñt, damit ALTE 100%/min-height/padding-Regeln verlieren */
#docEditorModal #vergabeunterlagen.va-editor .va-editor__footer #docChatBar,
#docEditorModal #vergabeunterlagen.va-editor .va-editor__footer #docChatBar .chat-input-wrap {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* kompakter Wrap: Buttons & Text mittig, nur schmaler Rand */
#docEditorModal #vergabeunterlagen.va-editor .va-editor__footer #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: center !important;      /* Placeholder auf Buttonh+Âhe */
  gap: 8px !important;
  box-sizing: border-box !important;
  padding: 4px 8px !important;         /* schmaler Top/Bottom-Rand */
}

/* Buttons definieren die visuelle Zeilenh+Âhe */
#docEditorModal #vergabeunterlagen.va-editor .va-editor__footer #docChatBar .input-actions-right{
  position: static !important;         /* NICHT absolut ÔÇô soll mitwachsen */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#docEditorModal #vergabeunterlagen.va-editor .va-editor__footer #docChatBar .input-actions-right .btn-icon,
#docEditorModal #vergabeunterlagen.va-editor .va-editor__footer #docChatBar .input-actions-right .btn-primary{
  height: 32px !important;             /* Zielh+Âhe Leerlauf */
  min-height: 32px !important;
  line-height: 30px !important;
}

/* Textarea: exakt so hoch wie die Buttons im Leerlauf, w+ñchst ohne Scroll */
#docEditorModal #vergabeunterlagen.va-editor .va-editor__footer #docChatBar #docChatInput{
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  height: 32px !important;             /* Start = Buttonh+Âhe */
  min-height: 32px !important;
  max-height: none !important;         /* keine CSS-Deckelung */
  padding: 4px 6px !important;         /* klein, damit es schlank wirkt */
  line-height: 1.4 !important;
  border: 0 !important; outline: 0 !important;
  resize: none !important;
  overflow: hidden !important;         /* Leiste w+ñchst statt Textarea-Scroll */
}


/* Wei+ƒer Hintergrund-Steg in Dokumentbreite, der bis zur Chat-Leiste reicht */
#docEditorModal .va-editor__body .va-editor__scroll{
  position: relative !important;
  z-index: 0 !important;                 /* unter Content/Chat */
}

/* zentrierte "Karte" in gleicher Breite wie Text/Chat, ++ber gesamte H+Âhe */
#docEditorModal .va-editor__body .va-editor__scroll::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 55vw !important;                 /* exakt deine finale Breite */
  bottom: 0 !important;                   /* bis ganz nach unten */
  background: #fff !important;
  border-radius: 12px !important;         /* falls du rund m+Âchtest; sonst entfernen */
  z-index: 0 !important;
}

/* Inhalt & Chat ++ber die "Karte" legen */
#docEditorModal #docEditor,
#docEditorModal .va-editor__footer{
  position: relative !important;
  z-index: 1 !important;
}



/* =============== DOC-EDITOR: Fl+ñche bis zum Chat und flexible Chatleiste =============== */

/* Wei+ƒer Dokumentbereich soll sichtbar "unter" die Chatleiste laufen */
#docEditorModal .va-editor__body{ position: relative !important; }
#docEditorModal .va-editor__scroll{
  position: relative !important;
  background: #fff !important;
  /* reicht bis unter die Chatleiste; JS setzt --doc-chat-h dynamisch */
  padding-bottom: calc(var(--doc-chat-h, 16px) + 16px) !important;
  min-height: 100% !important;
}

/* Chatleiste darf KEINE fixe H+Âhe haben */
#docEditorModal .va-editor__footer,
#docEditorModal #docChatBar.chat-input-bar{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 0 !important;
}

/* Inneres Wrap der Chatleiste ÔÇô am unteren Rand ausrichten, damit Buttons ÔÇ×ReferenzÔÇ£ sind */
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: flex-end !important;
  gap: .5rem !important;
}

/* Textarea: schlanke Grundh+Âhe (wie Buttons) und kein eigener Scrollbalken;
   w+ñchst per JS in der H+Âhe. */
#docEditorModal #docChatInput{
  display: block !important;
  width: 100% !important;
  min-height: 36px !important;    /* Buttons sind ~36px hoch */
  max-height: 50vh !important;    /* Sicherheitsdeckel, w+ñchst bis halbe Viewporth+Âhe */
  overflow: hidden !important;    /* kein interner Scroll ÔÇô wir wachsen stattdessen */
  resize: none !important;
  line-height: 1.45 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  background: #fff !important;
}


/* ===== DOC-EDITOR: finale Overwrites (nur Dock-Viewer) ===== */
/* A) Wei+ƒer Bereich bis an die Chatleiste spannen (unten Platz = H+Âhe der Leiste) */
#docEditorModal .va-modal__dialog .va-editor__body .va-editor__scroll{
  /* ++berschreibt fr++here padding-bottom:0 !important */
  padding-bottom: calc(var(--doc-chat-h, 56px) + 16px) !important;
  background: #fff !important; /* durchg+ñngige wei+ƒe Fl+ñche */
}

/* B) Chatleiste darf keine fixe H+Âhe haben; Wrap am unteren Rand ausrichten */
#docEditorModal .va-modal__dialog .va-editor__footer,
#docEditorModal .va-modal__dialog #docChatBar{
  height: auto !important;
  min-height: 0 !important;
}
#docEditorModal .va-modal__dialog #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: flex-end !important; /* Text baseline = Buttonh+Âhe */
  gap: .5rem !important;
}

/* C) Textarea: kompakter Default, dann echtes Auto-Grow (ohne eigenen Scroll) */
#docEditorModal .va-modal__dialog .va-editor__footer #docChatInput{
  display: block !important;
  width: 100% !important;
  /* Defaulth+Âhe ~ Buttonh+Âhe */
  min-height: 36px !important;
  /* entscheidend: keine feste H+Âhe, kein eigener Scroll */
  height: auto !important;
  max-height: 50vh !important;
  overflow: hidden !important;
  resize: none !important;
  line-height: 1.45 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  background: transparent !important;
}


#docEditorModal .va-modal__dialog .va-editor__body .va-editor__scroll{
  padding-bottom: calc(var(--doc-chat-h, 56px) + 16px) !important;
  background: #fff !important;
  min-height: 100% !important;
}



/* --- DocEditor: Wei+ƒfl+ñche garantiert bis hinter die Chatleiste --- */
#docEditorModal .va-editor__body .va-editor__scroll{
  /* Falls woanders padding-bottom wieder auf 0 gesetzt wird,
     sorgt der Pseudo-Block trotzdem f++r die volle H+Âhe. */
  position: relative !important;
  background: #fff !important;
  min-height: 100% !important;
}

/* F++gt am Ende der Scrollfl+ñche einen "Spacer" in H+Âhe der Chatleiste an */
#docEditorModal .va-editor__body .va-editor__scroll::after{
  content: "" !important;
  display: block !important;
  height: var(--doc-chat-h, 72px) !important;  /* wird per JS live gesetzt */
}



/* --- LV: Icon-Layout & Farbe analog zur LSB-Optik --- */
.va-docgrid.has-lv {
  /* identisch wie .has-lsb */
  grid-template-columns: 1fr auto;
}

#btnGenLV { grid-column: 1; }

#btnEditLV[hidden] { display: none !important; }

#btnEditLV {
  grid-column: 2;
  justify-self: end;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  /* gleiche Anmutung wie LSB-Icon */
  background: var(--primary-50);
  color: var(--primary-600);
}

#btnEditLV .material-icons {
  font-size: 20px;
  line-height: 1;
}


/* Workboard: LV + Dokument-Icon in einer Zeile (wie LSB) */
.va-docgrid.has-lv { grid-template-columns: 1fr auto; align-items: center; }
.va-docgrid.has-lv #btnGenLV { grid-column: 1; }
#btnEditLV { grid-column: 2; }

/* Alle anderen Buttons in voller Breite lassen (auch wenn LV-Icon da ist) */
.va-docgrid > button:not(#btnGenLSB):not(#btnEditLSB):not(#btnGenLV):not(#btnEditLV){
  grid-column: 1 / -1;
}

/* LV-Doku-Icon ÔÇô identische Optik wie bei LSB */
#btnEditLV.btn-icon{
  width:38px; height:38px; border-radius:10px;
  border:1px solid #d6e1f0; background:#f7fbff; color:#1a4f86;
}
#btnEditLV.btn-icon:hover{ background:#eaf3ff; }




/* ===== DOC-EDITOR ÔÇô Scroll & Wei+ƒfl+ñche sauber, nur innerer Scroll ===== */

/* Dialog: nimmt den Viewport komplett, kein eigener Scroll */
#docEditorModal .va-modal__dialog.va-editor{
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  overflow: hidden !important;           /* verhindert zweiten Scrollbalken */
}

/* Body selbst scrollt NICHT ÔÇô nur der innere Scroller */
#docEditorModal .va-editor__body{
  overflow: hidden !important;
}

/* Innerer Scroller: vertikal scrollen, horizontal nie; Wei+ƒfl+ñche bis zur Chatleiste */
#docEditorModal .va-editor__scroll{
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff !important;
  min-height: 100% !important;
  /* Platz unten = aktuelle Chatleisten-H+Âhe + kleiner Abstand */
  padding-bottom: calc(var(--doc-chat-h, 64px) + 8px) !important;
}

/* Chat-Footer ÔÇ×klebtÔÇ£ unten und r++ckt etwas n+ñher an den wei+ƒen Bereich */
#docEditorModal .va-editor__footer{
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background: transparent !important;
  padding-top: 6px !important;   /* kleiner Abstand zum wei+ƒen Bereich */
  padding-bottom: 6px !important;
}

/* Chatbar/Wrap d++rfen KEINE fixe H+Âhe haben ÔÇô sie wachsen mit */
#docEditorModal #docChatBar,
#docEditorModal #docChatBar .chat-input-wrap{
  height: auto !important;
  min-height: 0 !important;
}

/* Wrap: w+ñchst mit der Textarea; Buttons nicht absolut platzieren */
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: flex-end !important;  /* Textbasis auf Button-H+Âhe */
  gap: 8px !important;
  padding: 4px 10px !important;      /* schlanker Default */
}
#docEditorModal #docChatBar .input-actions-right{
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Textarea: flacher Start, KEIN interner Scroll ÔÇô w+ñchst in der H+Âhe */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;

  min-height: 32px !important;     /* Buttons ~3236px hoch  passt optisch */
  height: auto !important;         /* wird per JS gesetzt */
  max-height: none !important;     /* NICHT deckeln ÔÇô Leiste darf wachsen */
  overflow: hidden !important;     /* keine Textarea-Scrollbar */
  resize: none !important;

  line-height: 1.4 !important;
  padding: 6px 8px !important;
  border: 0 !important;
  background: #fff !important;
}



/* === LV: Button + Edit-Icon nebeneinander, gleiche Optik wie LSB === */
.va-docgrid.has-lv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
}

#btnGenLV {
  grid-column: 1 / 2;
  min-width: 0;
}

#btnEditLV {
  grid-column: 2 / 3;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  /* gleiche Ghost-Optik wie LSB */
  background: var(--btn-ghost-bg, transparent);
  border: 1px solid var(--btn-ghost-br, rgba(0,0,0,.08));
}

#btnEditLV .material-icons {
  font-size: 22px;
  line-height: 1;
  color: var(--brand); /* identische blaue Farbe wie bei LSB */
  vertical-align: -4px;
}


/* === DocEditor Dock-Feinschliff ====================================== */

/* Nur der Body scrollt, der Dialog selbst NIE (verhindert 2. Scrollbar) */
#docEditorModal.va-dock .va-modal__dialog,
#docEditorModal.va-dock .va-modal__content{
  overflow: hidden !important;
}

/* Body/Scroll: keine Mindesth+Âhe erzwingen, sauber scrollen */
#docEditorModal.va-dock .va-editor__body,
#docEditorModal.va-dock .va-editor__scroll{
  min-height: 0;
  overflow: auto;
}

/* Wei+ƒer Bereich nutzt die ganze H+Âhe bis an die Chatleiste heran */
#docEditorModal.va-dock .va-editor__scroll{
  /* Abstand unten = aktuelle Chatleistenh+Âhe; Wert kommt aus JS */
  padding-bottom: calc(var(--doc-chat-h, 14px) + 10px) !important;
}

/* Dokument + Chatbar exakt gleich breit und zentriert (55vw) */
#docEditorModal.va-dock #docEditor,
#docEditorModal.va-dock .va-editor__footer,
#docEditorModal.va-dock #docChatBar,
#docEditorModal.va-dock .chat-input-bar,
#docEditorModal.va-dock .chat-input-wrap{
  width: var(--dock-w, 55vw) !important;
  max-width: var(--dock-w, 55vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Chat-Textarea: kleine Starth+Âhe, KEIN eigener Scroll ÔÇô w+ñchst real */
#docEditorModal #docChatInput{
  min-height: 36px !important;     /* ungef+ñhr Buttonh+Âhe */
  max-height: none !important;
  line-height: 1.45 !important;
  resize: none !important;
  overflow: hidden !important;     /* wichtig: keinen inneren Scroll zeigen */
  padding: 0 !important;           /* Text senkrecht mit Buttons fluchten */
}

/* Buttons & Text vertikal b++ndig unten ausrichten */
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: flex-end !important;
  gap: .5rem !important;
}
#docEditorModal #docChatBar{
  position: sticky !important;
  bottom: 0 !important;
  background: transparent !important;
  padding: 8px 0 !important;
}


/* ========================================
   DOCÔÇæEDITOR CARD (Breite 60-á%, volle H+Âhe)
   ======================================== */

/* Dialog als Card mittig platzieren und ++ber die ganze freie H+Âhe strecken */
#docEditorModal .va-modal__dialog.va-editor {
  width: 60vw !important;            /* CardÔÇæBreite: 60-á% des Bildschirms */
  max-width: 60vw !important;
  height: calc(100vh - var(--header-height, 56px)) !important;
  margin: 0 auto !important;         /* horizontal zentrieren */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;       /* verhindert zweiten Scrollbalken */
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 0 16px rgba(0,0,0,0.08) !important;
}

/* Der Dokumentbereich f++llt die Card und scrollt bei Bedarf */
#docEditorModal .va-editor__body {
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
#docEditorModal .va-editor__scroll {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 24px !important;        /* optional: seitlicher Rand im Text */
}

/* ChatÔÇæFooter immer unten an der Card; kein eigener Scroll */
#docEditorModal .va-editor__footer {
  flex: 0 0 auto !important;
  background: #fff !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Chatbar exakt so breit wie die Card und zentriert */
#docChatBar.chat-input-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ChatÔÇæWrap: Buttons & Text auf einer Linie, w+ñchst komplett in der H+Âhe */
#docChatBar.chat-input-bar .chat-input-wrap {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 16px !important;
}

/* Textarea: startet kompakt und w+ñchst ohne eigenen Scrollbalken */
#docChatInput {
  flex: 1 1 auto !important;
  min-height: 32px !important;        /* H+Âhe der Buttons */
  height: auto !important;            /* wird per JS gesetzt */
  max-height: none !important;
  resize: none !important;
  overflow: hidden !important;
  border: 0 !important;
  padding: 6px 8px !important;
  line-height: 1.5 !important;
  background: #fff !important;
}

/* Buttons am Ende der Chatleiste */
#docChatBar .input-actions-right {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 8px !important;
}


/* === DROP-IN: LV-Icon Styling/Position (ans Dateiende von projekt.css) === */

/* Grid: Button + Icon in einer Zeile */
.va-docgrid.has-lv { grid-template-columns: 1fr auto; align-items: center; }
.va-docgrid.has-lv #btnGenLV { grid-column: 1; }
#btnEditLV { grid-column: 2; }

/* Icon identisch zur LSB-Optik */
#btnEditLV.btn-icon{
  width:38px; height:38px; border-radius:10px;
  border:1px solid #d6e1f0; background:#f7fbff; color:#1a4f86;
}
#btnEditLV.btn-icon:hover{ background:#eaf3ff; }

/* Material Icon selbst einf+ñrben (falls globale Styles ++berstimmen) */
#btnEditLV .material-icons{ color:#1a4f86; font-size:20px; line-height:1; }

/* Nur zeigen, wenn ein LV existiert */
#btnEditLV[hidden]{ display:none !important; }

/* Alle anderen Buttons weiterhin volle Breite ÔÇô wie gehabt */
.va-docgrid > button:not(#btnGenLSB):not(#btnEditLSB):not(#btnGenLV):not(#btnEditLV){
  grid-column: 1 / -1;
}


/* =======================
   DocViewer ÔÇô Card @ 55%
   ======================= */
:root {
  --doc-card-w: 55vw;            /* gemeinsame Breite f++r Viewer + Chat */
}

/* Overlay dunkler machen, wenn das Modal sichtbar ist */
#docEditorModal .va-modal__overlay{
  background: rgba(10, 24, 44, .55) !important;
  backdrop-filter: blur(2px);
}

/* Dialog als zentrierte Card, volle H+Âhe ab Header */
#docEditorModal .va-modal__dialog.va-editor{
  width: var(--doc-card-w) !important;
  max-width: var(--doc-card-w) !important;
  height: calc(100vh - var(--doc-header-h, 64px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;  /* Header | Body (scrollt innen) | Footer */
  overflow: hidden !important;                   /* verhindert 2. Scrollbar au+ƒen */
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 14px 40px rgba(4,22,48,.12) !important;
}

/* Body selbst scrollt NICHT ÔÇô nur der innere Scroller */
#docEditorModal .va-editor__body{ overflow: hidden !important; }

/* Innerer Scroller: nur vertikal, keine horizontale Leiste */
#docEditorModal .va-editor__scroll{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 24px !important;                  /* schmaler Rand links/rechts */
  background: #fff !important;
  /* wei+ƒer Bereich bis zur Chatleiste: Spacer unten = reale Chat-H+Âhe */
  position: relative !important;
}
#docEditorModal .va-editor__scroll::after{
  content: "" !important;
  display: block !important;
  height: var(--doc-chat-h, 64px) !important;  /* wird via JS live gesetzt */
}

/* Inhalt darf niemals breiter als die Card sein */
#docEditorModal #docEditor,
#docEditorModal .va-reader,
#docEditorModal .rendered-md{
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}
#docEditorModal .rendered-md img,
#docEditorModal .rendered-md table{
  max-width: 100% !important;
}

/* Footer/Chat unten, gleich breit wie die Card */
#docEditorModal .va-editor__footer{
  width: 100% !important;
  background: #fff !important;
  padding: 8px 0 !important;
}

/* Chatbar exakt auf Card-Breite, zentriert */
#docEditorModal #docChatBar{
  width: var(--doc-card-w) !important;
  max-width: var(--doc-card-w) !important;
  margin: 0 auto !important;
}

/* Chat-Wrap: Buttons und Text am unteren Rand ausrichten, w+ñchst mit */
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

/* Textarea: schlanker Start, kein eigener Scroll ÔÇô w+ñchst per JS */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  min-height: 36px !important;   /* ungef+ñhr Buttonh+Âhe */
  height: auto !important;       /* wird per JS gesetzt */
  max-height: none !important;
  resize: none !important;
  overflow: hidden !important;
  line-height: 1.5 !important;
  border: 0 !important;
  padding: 6px 8px !important;
  background: #fff !important;
}

/* Action-Buttons rechts einfach inline ÔÇô keine absolute Positionierung */
#docEditorModal #docChatBar .input-actions-right{
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}



/* --- VA Docgrid: Buttons immer gleich breit --- */
.va-docgrid > .btn-primary,
.va-docgrid > .btn-secondary { width: 100%; }

/* Wenn ein Dokument vorhanden ist, Button + Icon in einer Zeile */
.va-docgrid.has-lsb,
.va-docgrid.has-lv { grid-template-columns: 1fr auto; }

/* Icon-Gr+Â+ƒe & Look vereinheitlichen (wie oben bei LSB) */
.va-docgrid .btn-icon {
  width: 38px; height: 38px; min-width: 38px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 10px;
}
#btnEditLSB.btn-icon,
#btnEditLV.btn-icon {
  background: #e8f1fb;     /* gleiches Blau wie oben */
  color: #0a66c2;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
}





/* Falls kein Wrapper im Einsatz, hilft die Grid-Klasse ebenfalls */
.va-docgrid.has-lv { grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }



/* =========================
   DOC VIEWER ÔÇô Fix Paket
   ========================= */

/* A) Overlay etwas dunkler */
#docEditorModal .va-modal__overlay{
  background: rgba(8, 20, 40, .65) !important;
  backdrop-filter: blur(2px);
}

/* B) Card/Viewer strikt 55% breit, im Viewport zentriert, nur innen scrollen */
#docEditorModal .va-modal__dialog.va-editor{
  width: 55vw !important;
  max-width: 55vw !important;
  height: 100vh !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-rows: auto 1fr auto !important;  /* Header | Body | Footer */

  overflow: hidden !important;    /* -> kein 2. Scrollbalken am Dialog */
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(4,22,48,.16) !important;
}

/* C) Header/Body/Footer d++rfen NICHT horizontal scrollen */
#docEditorModal .va-modal__header,
#docEditorModal .va-editor__body,
#docEditorModal .va-editor__footer{
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* D) Nur der innere Scroller scrollt vertikal */
#docEditorModal .va-editor__body{ overflow: hidden !important; }
#docEditorModal .va-editor__scroll{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;   /* -> keine horizontale Leiste */
  padding: 0 20px !important;      /* schmaler Rand links/rechts */
  background: #fff !important;
  position: relative !important;
}

/* E) Wei+ƒer Bereich bis zur Chatleiste (Spacer unten in Chat-H+Âhe) */
#docEditorModal .va-editor__scroll::after{
  content: "" !important;
  display: block !important;
  height: var(--doc-chat-h, 64px) !important;   /* JS setzt exakte H+Âhe */
}

/* F) Content niemals breiter als die Card ÔÇô Tabellen/Bilder brechen sauber um */
#docEditorModal #docEditor,
#docEditorModal .va-reader,
#docEditorModal .rendered-md{
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
}
#docEditorModal .rendered-md table{
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
#docEditorModal .rendered-md img,
#docEditorModal .rendered-md svg{
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* G) Chat unten sichtbar, exakt Card-breit; kein eigener Scroll */
#docEditorModal .va-editor__footer{
  background: #fff !important;
  padding: 8px 0 !important;
  z-index: 2 !important;
}
#docEditorModal #docChatBar{
  width: 55vw !important;
  max-width: 55vw !important;
  margin: 0 auto !important;
}
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: flex-end !important;   /* Text auf Button-Linie */
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
}

/* H) Textarea flach starten, OHNE eigenen Scroll ÔÇô w+ñchst per JS */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  min-height: 32px !important;   /* Ôëê Buttonh+Âhe */
  height: auto !important;       /* JS setzt echte H+Âhe */
  max-height: none !important;
  resize: none !important;
  overflow: hidden !important;
  line-height: 1.5 !important;
  padding: 6px 8px !important;
  border: 0 !important;
  background: #fff !important;
}
#docEditorModal #docChatBar .input-actions-right{
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}


/* === Workboard: gleiche Breite f++r alle Dokument-Buttons ================== */
.va-docgrid > .btn { width: 100% !important; }

/* LSB/LV: sobald ein Dokument existiert, Button + Icon in einer Zeile */
.va-docgrid.has-lsb,
.va-docgrid.has-lv {
  grid-template-columns: 1fr auto;
  align-items: center;
}

/* LV-Icon rechts neben dem Button (wie bei LSB) */
#btnGenLV { grid-column: 1; }
#btnEditLV { grid-column: 2; }

/* Icon-Optik exakt wie bei LSB */
#btnEditLV.btn-icon{
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: 1px solid #d6e1f0 !important;
  background: #f7fbff !important;
  color: #1a4f86 !important;
}
#btnEditLV.btn-icon:hover{ background: #eaf3ff !important; }




/* === DOC-EDITOR ÔÇô final layout & sizing (55% Card, centered) ================= */
#docEditorModal .va-modal__overlay{
  /* etwas dunkler */
  background: rgba(5,16,32,.62) !important;
}

#docEditorModal .va-modal__dialog.va-editor{
  /* Card: 55% der Seite, aber nie gr+Â+ƒer als 1200px; zentriert, volle H+Âhe */
  width: clamp(720px, 55vw, 1200px) !important;
  max-height: 96dvh !important;
  margin: 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;          /* verhindert zweiten Scrollbalken */
  box-sizing: border-box !important;
}

/* Header oben, Body f++llt, Footer unten */
#docEditorModal .va-modal__header{ flex: 0 0 auto; }
#docEditorModal .va-editor__body{
  flex: 1 1 auto !important;
  min-height: 0 !important;             /* wichtig f++r korrektes Flex-Scrolling */
  overflow: auto !important;
  overflow-x: hidden !important;        /* nie horizontal scrollen */
}
#docEditorModal .va-editor__footer{
  flex: 0 0 auto !important;
  padding: 12px 24px !important;
  background: transparent !important;
  position: sticky; bottom: 0; z-index: 2;  /* bleibt sichtbar, wenn Inhalt kurz ist */
}

/* Scroll-Container innen: Platz bis an die Chatleiste lassen */
#docEditorModal .va-editor__scroll{
  box-sizing: border-box !important;
  padding: 24px 28px calc(var(--doc-chat-h, 84px) + 16px) !important;
  max-width: 100% !important;
}

/* Dokument-Inhalt: nie breiter als Card, kein Overflow */
#docEditor{
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  overflow-wrap: anywhere !important;
}
#docEditor *{
  max-width: 100% !important;           /* Tabellen/Bilder brechen ein */
  box-sizing: border-box !important;
}
#docEditor table{ display: block; width: 100% !important; overflow: auto; }
#docEditor pre{ white-space: pre-wrap; overflow-wrap: anywhere; }

/* Chat-Bar: volle Card-Breite, gleich breit wie Textbereich */
#docChatBar.chat-input-bar{
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 8px 0 6px !important;
  box-sizing: border-box !important;
}

/* kompakte Standardh+Âhe; Buttons & Placeholder in einer Linie */
#docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;

  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  padding: 6px 8px !important;
}

/* Textfeld: 1 Zeile im Leerlauf, w+ñchst bis 40% der Dialogh+Âhe */
#docChatInput{
  flex: 1 1 auto !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  resize: none !important;
  line-height: 1.4 !important;
  min-height: 36px !important;                  /* Start-H+Âhe (eine Zeile) */
  max-height: 40vh !important;                  /* Deckel */
  overflow: hidden !important;                  /* kein eigener Scroll */
}

/* rechte Button-Gruppe & Upload-Icon wie gehabt */
#docChatBar .input-actions-right{ flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
#docChatBar .btn-icon, #docChatBar .btn-primary{
  height: 36px !important; display: inline-flex; align-items: center; justify-content: center;
}
#docChatBar .upload-inside{
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #DBE6F3; border-radius: 10px; background: transparent; color:#476887;
}

/* Sicherheitsnetz: Keine horizontale Seite-Scrollbar durch 100vw irgendwo anders */
#docEditorModal, #docEditorModal *{ max-width: 100%; }
body.project-page{ overflow-x: hidden !important; }



/* === LV-Querformat Feinjustierung (optional) === */
#docEditorModal.is-lv .va-editor__scroll{
  /* bei breiterem Inhalt die Seitenr+ñnder minimal schlanker halten */
  padding: 0 20px !important;
}

/* Chatbar folgt automatisch der Card-Breite ++ber --doc-card-w;
   zus+ñtzliche Klarstellung f++r die LV-Klasse (falls andere Regeln sp+ñter greifen) */
#docEditorModal.is-lv #docChatBar{
  width: var(--doc-card-w) !important;
  max-width: var(--doc-card-w) !important;
}

/* Dokumentfl+ñche nutzt die komplette Card-Breite */
#docEditorModal.is-lv #docEditor,
#docEditorModal.is-lv .va-reader,
#docEditorModal.is-lv .rendered-md{
  max-width: 100% !important;
}

/* (optional) Tabellen im LV sind breit ÔÇô lasse sie vollfl+ñchig, aber ohne Quer-Scroll */
#docEditorModal.is-lv .rendered-md table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto;
}


/* LV im Querformat breiter darstellen */
#docEditorModal.is-lv .va-modal__dialog.va-editor {
  width: var(--doc-card-w) !important;
  max-width: var(--doc-card-w) !important;
}

/* Breite f++r den eigentlichen Viewer-Inhalt (PDF/Doc/MD) */
#docEditorModal.is-lv #vergabeunterlagen
  :is(#viewerContainer, .doc-viewer, .doc-viewer-wrapper, .pdfViewer, .doc-content) {
  width: var(--vw-55) !important;
  max-width: var(--vw-55) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sicherheitsnetz: Content nie breiter als die Card */
#docEditorModal.is-lv #docEditor,
#docEditorModal.is-lv .va-reader,
#docEditorModal.is-lv .rendered-md {
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* === LV-ROW exakt wie LSB ----------------------------------------------- */
.va-docgrid{ display:grid; gap:.5rem; grid-template-columns: 1fr; }

/* Sobald ein LV existiert: 2 Spalten (Button | Icon) */
.va-docgrid.has-lv{ grid-template-columns: 1fr auto; align-items: center; }

/* Positionierung der beiden Elemente in der Grid-Reihe */
#btnGenLV{ grid-column: 1; width: 100%; }
#btnEditLV{ grid-column: 2; justify-self: end; }
#btnEditLV[hidden]{ display: none !important; }

/* Icon-Look 1:1 wie oben bei LSB (falls globale Styles abweichen) */
#btnEditLSB.btn-icon,
#btnEditLV.btn-icon{
  width:38px; height:38px; min-width:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:#e8f1fb;            /* gleiches Blau wie oben */
  color:#0a66c2;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
}
#btnEditLV .material-icons{ font-size:20px; line-height:1; }



/* ===== DOC-EDITOR ÔÇö finale Abst+ñnde & Breiten ================================== */
/* Gemeinsamer Innenrand f++r Text & Chat, klein und symmetrisch */
#docEditorModal { --doc-pad-x: 18px; }

/* A) Nur der innere Scroller scrollt; kein horizontaler Overflow */
#docEditorModal .va-editor__body { 
  overflow: hidden !important; 
}
#docEditorModal .va-editor__scroll{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Wichtig: kein Platz unten ÔÇô der Chat ++berlappt optisch */
  padding: 24px var(--doc-pad-x) 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}
/* Fr++herer Spacer unten wird neutralisiert (=> kein wei+ƒer Spalt) */
#docEditorModal .va-editor__scroll::after{
  content: "" !important;
  display: block !important;
  height: 0 !important;
}

/* B) Dokumentinhalt darf nie breiter als die Card werden */
#docEditor{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
}
#docEditor *{ max-width: 100% !important; box-sizing: border-box !important; }
#docEditor table{ width:100% !important; table-layout:fixed !important; display:block; }
#docEditor pre{ white-space: pre-wrap; }

/* C) Chatleiste: exakt Card-breit, am unteren Rand ÔÇ×++berÔÇ£ dem Text */
#docEditorModal .va-editor__footer{
  position: sticky !important; 
  bottom: 0 !important; 
  z-index: 3 !important;
  background: #fff !important;
  /* Optische +£berlappung: zieht den Text bis direkt unter die Leiste */
  margin-top: calc(-1 * var(--doc-chat-h, 0px)) !important;
  padding: 0 !important;
}
#docEditorModal #docChatBar{
  width: 100% !important; 
  max-width: 100% !important; 
  margin: 0 auto !important;
}

/* D) Chat-Wrap: gleicher Innenrand wie Text ÔÇô dadurch b++ndige Kanten */
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: center !important;            /* Placeholder auf Button-H+Âhe */
  gap: 8px !important;
  width: 100% !important;
  padding: 8px var(--doc-pad-x) !important;  /* identisch zum Text-Innenrand */
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* E) Textarea: 1 Zeile im Leerlauf, w+ñchst ohne eigenen Scroll */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  border: 0 !important; outline: 0 !important; background: transparent !important;
  padding: 0 !important; margin: 0 !important;
  line-height: 1.4 !important;
  min-height: 36px !important;           /* Start = Buttonh+Âhe */
  height: auto !important;               /* wird per JS gesetzt */
  max-height: 40vh !important;           /* Sicherheitsdeckel */
  resize: none !important;
  overflow: hidden !important;           /* keine interne Scrollbar */
}

/* Buttons rechts unver+ñndert, nur inline ÔÇô keine absolute Positionierung */
#docEditorModal #docChatBar .input-actions-right{
  position: static !important; 
  display:inline-flex !important; 
  align-items:center !important; 
  gap:8px !important;
}



#docEditorModal .va-editor__scroll{ padding-bottom: 0 !important; }



/* === LV-Viewer: querformatig fast vollbreit, schmale R+ñnder, nur innerer Scroll === */
#docEditorModal.is-lv { 
  /* Dokument + Chat-Leiste fast vollbreit; ~12px Rand links/rechts */
  --doc-center-w: calc(100vw - 24px);
}

/* Nur der innere Bereich scrollt; der Dialog selbst nicht */
#docEditorModal.is-lv .va-modal__dialog { 
  inset: 2px 0 2px 0 !important; 
  overflow: hidden !important; 
}
#docEditorModal.is-lv .va-editor__body { overflow: hidden !important; }
#docEditorModal.is-lv .va-editor__scroll{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* kleiner extra-Puffer unten ÔÇô wird durch JS via --doc-chat-h noch pr+ñziser */
  padding-bottom: calc(var(--doc-chat-h, 80px) + 8px) !important;
}

/* Dokumenttext mit sehr schmalen Innenr+ñndern -> nutzt Breite f++r Tabellen */
#docEditorModal.is-lv #docEditor{
  padding: 8px 12px !important;   /* vorher 18px 20px */
  background: #fff !important;
  overflow-x: hidden !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Tabellen vollfl+ñchig ziehen und sauber umbrechen */
#docEditorModal.is-lv #docEditor table{
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}
#docEditorModal.is-lv #docEditor *{ max-width: 100% !important; }
#docEditorModal.is-lv .va-editor__footer{ padding: 6px 0 8px !important; }



/* ===== DOC VIEWER ÔÇö finale Breite, Innenabst+ñnde, kein Horizontal-Scroll ===== */

#docEditorModal .va-modal__dialog.va-editor{
  /* Card-Breite 55% des Viewports, zentriert */
  --dock-w: 55vw;
  width: var(--dock-w);
  max-width: clamp(720px, 55vw, 1200px);
  margin: 0 auto;
  overflow: hidden;                     /* verhindert 2. Scrollbalken */
}

/* Kopfzeile b++ndig, schmale R+ñnder wie in der Titelzeile */
#docEditorModal .va-modal__header{
  padding: 10px 16px !important;
}

/* Scrollbereich: nutzt die gesamte Dialogh+Âhe, kein Extra-Wei+ƒraum */
#docEditorModal .va-editor__body{
  padding: 0 !important;
  height: calc(100vh - var(--doc-header-h, 64px)) !important;
}
#docEditorModal .va-editor__scroll{
  height: 100% !important;
  overflow: auto !important;
  padding: 12px 16px 0 !important;      /* oben/seitlich schmal, unten = 0 */
  margin: 0 !important;
  overscroll-behavior: contain;
  overflow-x: hidden !important;        /* horizontalen Scroll unterbinden */
}

/* Dokument selbst: volle Card-Breite innen, nur schmaler Rand */
#docEditorModal #docEditor{
  box-sizing: border-box;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
}
#docEditorModal .rendered-md{
  padding: 0 12px !important;           /* gleicher Rand links/rechts wie Chat */
}
#docEditorModal .rendered-md img,
#docEditorModal .rendered-md table{
  max-width: 100% !important;
}
#docEditorModal .rendered-md pre{
  max-width: 100% !important;
  overflow: auto;
}

/* Footer/Chat: klebt optisch unten auf der Card und ++berdeckt beim Scrollen */
#docEditorModal .va-editor__footer{
  position: sticky;                      /* Text ÔÇ×scrollt dahinter vorbeiÔÇ£ */
  bottom: 0;
  z-index: 5;
  background: #f7fbff;
  padding: 10px 16px 12px !important;
  border-top: 1px solid #DBE6F3;
}

/* Eingabeleiste: 1-Zeile im Leerlauf, Buttons/Placeholder auf einer Linie */
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #C8DBEE;
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 4px 16px rgba(10,40,70,.06);
}
#docEditorModal #docChatInput{
  flex: 1 1 auto;
  border: 0; outline: 0; resize: none;
  padding: 0 !important; margin: 0 !important;
  line-height: 1.35;
  min-height: 36px;                      /* leer = genau Buttonh+Âhe */
  max-height: 50vh;                      /* w+ñchst bis halbe H+Âhe */
  overflow: hidden;                      /* kein eigener Scroll */
}
#docEditorModal .input-actions-right .btn-icon,
#docEditorModal .input-actions-right .btn-primary{
  height: 36px; display: inline-flex; align-items: center; justify-content: center;
}

/* Headerh+Âhe als Variable f++r die Body-Berechnung (Fallback) */
#docEditorModal .va-modal__header{ --doc-header-h: 64px; }



/* === LV-ROW exakt wie LSB ----------------------------------------------- */
.va-docgrid{ display:grid; gap:.5rem; grid-template-columns: 1fr; }

/* Sobald ein LV existiert: 2 Spalten (Button | Icon) */
.va-docgrid.has-lv{ grid-template-columns: 1fr auto; align-items: center; }

/* Positionierung der beiden Elemente in der Grid-Reihe */
#btnGenLV{ grid-column: 1; width: 100%; }
#btnEditLV{ grid-column: 2; justify-self: end; }
#btnEditLV[hidden]{ display: none !important; }

/* Icon-Look 1:1 wie oben bei LSB (falls globale Styles abweichen) */
#btnEditLSB.btn-icon,
#btnEditLV.btn-icon{
  width:38px; height:38px; min-width:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:#e8f1fb;            /* gleiches Blau wie oben */
  color:#0a66c2;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
}
#btnEditLV .material-icons{ font-size:20px; line-height:1; }






/* ===== LV: volle Card-Breite nutzen & "schmale Karte" deaktivieren ===== */

/* 1) Der wei+ƒe Hintergrund-Steg im Body ist aktuell auf 55vw festgenagelt.
      F++r LV (Querformat) auf Card-Breite umstellen. */
#docEditorModal.is-lv .va-editor__body .va-editor__scroll::before{
  width: var(--doc-card-w) !important; /* statt 55vw */
}

/* 2) Dokumentfl+ñche wirklich so breit wie die Card fahren,
      mit nur schmalem Innenrand f++r die Optik. */
#docEditorModal.is-lv #docEditor{
  width: var(--doc-card-w) !important;
  max-width: var(--doc-card-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 8px 12px !important;    /* schmale R+ñnder links/rechts */
  box-sizing: border-box !important;
}

/* 3) Nur der innere Bereich scrollt, der Dialog selbst nicht. */
#docEditorModal.is-lv .va-modal__dialog{ overflow: hidden !important; }
#docEditorModal.is-lv .va-editor__body{ overflow: hidden !important; }
#docEditorModal.is-lv .va-editor__scroll{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: calc(var(--doc-chat-h, 80px) + 8px) !important;
}

/* ===== LV-Tabellen: einheitliche Spaltenbreiten ++ber alle Gruppen ===== */

/* Basis: volle Breite, feste Layout-Berechnung */
#docEditorModal.is-lv .rendered-md table{
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* Polster */
#docEditorModal.is-lv .rendered-md table th,
#docEditorModal.is-lv .rendered-md table td{
  padding: 10px 12px !important;
  vertical-align: top !important;
}

/* Spaltenbreiten (Pos | Kurztext | Menge | Einheit | Details | optional Hinweise) */
#docEditorModal.is-lv .rendered-md table th:nth-child(1),
#docEditorModal.is-lv .rendered-md table td:nth-child(1){  /* Pos.-Nr. */
  width: clamp(110px, 9%, 150px) !important;
  min-width: 110px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: center !important;
}

#docEditorModal.is-lv .rendered-md table th:nth-child(2),
#docEditorModal.is-lv .rendered-md table td:nth-child(2){  /* Kurztext */
  width: clamp(260px, 30%, 460px) !important;
}

#docEditorModal.is-lv .rendered-md table th:nth-child(3),
#docEditorModal.is-lv .rendered-md table td:nth-child(3){  /* Menge */
  width: clamp(110px, 9%, 160px) !important;
  min-width: 110px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: right !important;
}

#docEditorModal.is-lv .rendered-md table th:nth-child(4),
#docEditorModal.is-lv .rendered-md table td:nth-child(4){  /* Einheit */
  width: clamp(110px, 9%, 160px) !important;
  min-width: 110px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-align: center !important;
}

/* Letzte Spalte bekommt den Rest ÔÇô lange Texte d++rfen umbrechen */
#docEditorModal.is-lv .rendered-md table th:nth-child(5),
#docEditorModal.is-lv .rendered-md table td:nth-child(5){  /* Details/Leistungsinhalt */
  width: clamp(200px, 28%, 480px) !important;
  min-width: 200px !important;
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

#docEditorModal.is-lv .rendered-md table th:nth-child(6),
#docEditorModal.is-lv .rendered-md table td:nth-child(6){  /* Hinweise */
  width: clamp(150px, 15%, 260px) !important;
  min-width: 150px !important;
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Optional: d++nnere Rahmen/Zeilen */
#docEditorModal.is-lv .rendered-md table th,
#docEditorModal.is-lv .rendered-md table td{
  border: 1px solid #e6edf5 !important;
}



/* ===== DOC-EDITOR ÔÇô Breite f++llen, Spalt unten entfernen, Auto-Grow erm+Âglichen ===== */

/* 0) einheitliche, schmale Innenabst+ñnde links/rechts */
#docEditorModal { --doc-pad-x: 12px; }

/* 1) Scrollcontainer: volle Breite, keine horizontale Leiste, unten KEIN Padding */
#docEditorModal .va-editor__body{
  overflow: hidden !important;                /* nur innen scrollen */
}
#docEditorModal .va-editor__scroll{
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;

  /* oben etwas Luft, links/rechts schmal ÔÇô unten KEIN Abstand */
  padding: 10px var(--doc-pad-x) 0 !important;
  margin: 0 !important;
}
/* falls irgendwo noch ein Spacer gesetzt war: neutralisieren */
#docEditorModal .va-editor__scroll::after{
  content: "" !important;
  height: 0 !important;
  display: block !important;
}

/* 2) Inhalt niemals breiter als der Viewer; f++llt die Breite mit schmalem Rand */
#docEditorModal #docEditor,
#docEditorModal .va-reader,
#docEditorModal .rendered-md{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left:  var(--doc-pad-x) !important;
  padding-right: var(--doc-pad-x) !important;
}
#docEditorModal .rendered-md *{
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#docEditorModal .rendered-md table{ width:100% !important; table-layout: fixed !important; display:block; }
#docEditorModal .rendered-md pre { white-space: pre-wrap; }

/* 3) Chat-Footer sitzt b++ndig unten, ++berlappt optisch den Textbereich */
#docEditorModal .va-editor__footer{
  position: relative !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background: #fff !important;
  padding: 8px var(--doc-pad-x) 10px !important;
  margin-top: 0 !important;                  /* KEINE zus+ñtzliche L++cke nach oben */
  border-top: 1px solid #DBE6F3;
}

/* 4) Chatbar: exakt Viewer-breit, keine absolute Positionierung der Buttons */
#docEditorModal #docChatBar{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 6px 8px !important;               /* gleiche optische Linie wie Text */
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
#docEditorModal #docChatBar .input-actions-right{
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 5) Textarea ÔÇô CSS blockiert kein Wachstum mehr (JS kann die H+Âhe setzen) */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important; margin: 0 !important;

  line-height: 1.4 !important;
  min-height: 36px !important;              /* 1 Zeile = Buttonh+Âhe */
  height: auto !important;                  /* JS darf erh+Âhen */
  max-height: 50vh !important;              /* Sicherheitsdeckel */
  resize: none !important;
  overflow: hidden !important;              /* keine eigene Scrollbar */
}



/* === FINAL OVERRIDE ÔÇô Docgrid: LV-Zeile & Icon-Optik exakt wie LSB ========= */


/* Doku-Icon nur f++r die 2 Dokument-Icons definieren ÔÇô NICHT global */
#btnEditLSB.btn-icon,
#btnEditLV.btn-icon{
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--n-200);
  background: var(--n-100);
  color: var(--n-700);
  box-shadow: none;
}
#btnEditLSB.btn-icon .material-icons,
#btnEditLV.btn-icon .material-icons{ font-size:20px; line-height:1; }

/* LV-Icon nur zeigen, wenn ein LV existiert */
#btnEditLV[hidden]{ display:none !important; }



/* === EE-Palette (dezent, nutzt deine .btn-Styles) === */
.ee-start { display: grid; gap: 16px; }
.ee-head h2 { margin: 0; }
.ee-sub { color: var(--text-muted, #555); margin: 0; }

.ee-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.ee-intake { display: grid; gap: 8px; }
.ee-upload { display: flex; align-items: center; gap: 8px; }
.ee-upload .ee-note { font-size: .9em; color: var(--text-muted, #666); }

.ee-free textarea { width: 100%; resize: vertical; }
.ee-free-actions { display: flex; gap: 8px; margin-top: 4px; }
.btn-icon { aspect-ratio: 1/1; padding: 0 .75rem; }



/* ====== DOCGRID ÔÇô finale, einheitliche Logik ====== */

/* Grundlayout: 1 Spalte; alle Items erstmal volle Breite */
.va-docgrid{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap: .5rem !important;
}
.va-docgrid > *{ grid-column: 1 / -1 !important; }

/* Wenn eine LSB existiert: genau diese Zeile 2-spaltig (Button | Icon) */
.va-docgrid.has-lsb{
  grid-template-columns: 1fr auto !important;
}
.va-docgrid.has-lsb #btnGenLSB{ grid-column: 1 / 2 !important; }
.va-docgrid.has-lsb #btnEditLSB{
  grid-column: 2 / 3 !important;
  justify-self: end !important;
}

/* Wenn ein LV existiert: genau diese Zeile 2-spaltig (Button | Icon) */
.va-docgrid.has-lv{
  grid-template-columns: 1fr auto !important;
}
.va-docgrid.has-lv #btnGenLV{ grid-column: 1 / 2 !important; }
.va-docgrid.has-lv #btnEditLV{
  grid-column: 2 / 3 !important;
  justify-self: end !important;
}

/* WICHTIG: Alle anderen Buttons behalten volle Breite ÔÇô auch wenn 2 Spalten aktiv sind */
.va-docgrid.has-lsb > :not(#btnGenLSB):not(#btnEditLSB){ grid-column: 1 / -1 !important; }
.va-docgrid.has-lv  > :not(#btnGenLV):not(#btnEditLV){   grid-column: 1 / -1 !important; }

/* Icon-Optik angleichen: LV-Icon exakt wie LSB (Basis-Style aus .btn-icon/.btn-ghost) */
#btnEditLV.btn-icon{
  width:38px !important; height:38px !important;
  border-radius:10px !important;
  background: var(--n-100) !important;
  border:1px solid var(--n-200) !important;
  color: var(--n-700) !important;
  box-shadow:none !important; padding:0 !important;
}
#btnEditLV.btn-icon .material-icons{ font-size:20px !important; line-height:1 !important; }

/* Sicherheit: verstecktes LV-Icon nicht layouten */
#btnEditLV[hidden]{ display:none !important; }



/* === DOC VIEWER ÔÇô finale Layout-Fixierung =================================== */
/* Gemeinsame schmale Innenr+ñnder (anpassen, falls n+Âtig) */
#docEditorModal { --doc-pad-x: 12px; }

/* Card-Breite: 55% des Viewports, zentriert. Keine horizontale Scrollbar. */
#docEditorModal .va-modal__dialog.va-editor {
  width: clamp(720px, 55vw, 1100px) !important;
  max-width: clamp(720px, 55vw, 1100px) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Header und Footer behalten schmale Abst+ñnde; Body f++llt den Rest. */
#docEditorModal .va-modal__header { padding: 8px var(--doc-pad-x) !important; flex: 0 0 auto !important; }
#docEditorModal .va-editor__footer {
  flex: 0 0 auto !important;
  padding: 8px var(--doc-pad-x) 10px !important;
  margin: 0 !important;
  background: #fff !important;
  border-top: 1px solid #DBE6F3;
  position: sticky; bottom: 0; z-index: 5;
}

/* Nur der Dokumentbereich scrollt vertikal ÔÇô kein horizontaler Scrollbalken. */
#docEditorModal .va-editor__body { flex: 1 1 auto !important; overflow: hidden !important; }
#docEditorModal .va-editor__scroll {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Dokument: nutzt 100% der Card-Breite, nur 12px Innenrand links/rechts */
#docEditorModal #docEditor,
#docEditorModal .va-reader {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: var(--doc-pad-x) !important;
  padding-right: var(--doc-pad-x) !important;
  box-sizing: border-box !important;
}
/* Tabellen/Bilder brechen sauber um */
#docEditorModal #docEditor * { max-width: 100% !important; box-sizing: border-box !important; }

/* Chatleiste exakt so breit wie der Viewer, b++ndig links/rechts */
#docEditorModal #docChatBar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
#docEditorModal #docChatBar .chat-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  width: 100% !important;
  padding: 6px var(--doc-pad-x) !important;
  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}
#docEditorModal #docChatInput {
  flex: 1 1 auto !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  line-height: 1.4 !important;
  min-height: 36px !important;       /* eine Zeile im Leerlauf */
  max-height: 50vh !important;       /* w+ñchst bis halbe Viewport-H+Âhe */
  resize: none !important;
  overflow: hidden !important;       /* kein interner Scrollbalken */
}
#docEditorModal #docChatBar .input-actions-right {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
}




/* ====================================================================== */
/* Leistungsverzeichnis (LV) ÔÇô Breite auf ~80% beschr+ñnken, Text voll nutzen */
/* Diese Regeln greifen nur, wenn dem Modal die Klasse `.is-lv` zugewiesen ist. */

#docEditorModal.is-lv {
  /* Dokument- und Kartenbreite: 80ÔÇ»% der Viewportbreite (max 1280ÔÇ»px) */
  --doc-center-w: min(80vw, 1280px);
  --docW: var(--doc-center-w);
  --doc-card-w: var(--doc-center-w);
  --va-col-55: 80%;
  --doc-pad: 16px;
}

/* Dokumentbereich breit ausnutzen, innen nur schmaler Rand */
#docEditorModal.is-lv #docEditor,
#docEditorModal.is-lv .va-reader {
  width: var(--doc-center-w) !important;
  max-width: var(--doc-center-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--doc-pad) !important;
  padding-right: var(--doc-pad) !important;
  box-sizing: border-box !important;
}

/* Chat-Leiste exakt so breit wie der Textbereich */
#docEditorModal.is-lv .va-editor__footer,
#docEditorModal.is-lv #docChatBar,
#docEditorModal.is-lv #docFooterInner,
#docEditorModal.is-lv .chat-input-bar {
  width: calc(var(--doc-center-w) - (var(--doc-pad) * 2)) !important;
  max-width: calc(var(--doc-center-w) - (var(--doc-pad) * 2)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Untertitel f++r LV (Los-/Beschaffungstitel) leicht hervorheben */
#docEditorModal.is-lv .doc-lv-subtitles {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  font-weight: 600;
  color: #0b2941;
}

/* Ende der LV-Anpassungen */




/* === Einheitliches Icon-Design f++r alle Edit-/Dokumenten-Buttons === */
#btnEditLSB, #btnEditLV,
#btnEditEignung, #btnEditZuschlag, #btnEditPreisblatt, #btnEditEE, #btnEditVertrag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 12px;
  background: #EAF3FF;
  box-shadow: 0 6px 14px rgba(10, 92, 168, .18);
  padding: 0; border: 0; cursor: pointer;
}
#btnEditLSB svg, #btnEditLV svg,
#btnEditEignung svg, #btnEditZuschlag svg, #btnEditPreisblatt svg, #btnEditEE svg, #btnEditVertrag svg {
  width: 18px; height: 18px; color: #0a5ca8;
}

/* Basis-Grid (volle Breite) */
.va-docgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.va-docgrid > * { grid-column: 1 / -1; }

/* Wenn ein Icon f++r einen Typ vorhanden ist, wird nur dessen Zeile 1fr + auto zweispaltig */
.va-docgrid.has-lsb       { grid-template-columns: 1fr auto; }
.va-docgrid.has-lv        { grid-template-columns: 1fr auto; }
.va-docgrid.has-eignung   { grid-template-columns: 1fr auto; }
.va-docgrid.has-zuschlag  { grid-template-columns: 1fr auto; }
.va-docgrid.has-preisblatt{ grid-template-columns: 1fr auto; }
.va-docgrid.has-ee        { grid-template-columns: 1fr auto; }
.va-docgrid.has-vertrag   { grid-template-columns: 1fr auto; }

/* Nur die jeweilige Button/Icon-Zeile wird in 2 Spalten aufgeteilt, alles andere bleibt 1-spaltig */
.va-docgrid.has-lsb       > :not(#btnGenLSB):not(#btnEditLSB)               { grid-column: 1 / -1 !important; }
.va-docgrid.has-lv        > :not(#btnGenLV):not(#btnEditLV)                 { grid-column: 1 / -1 !important; }
.va-docgrid.has-eignung   > :not(#btnGenEignung):not(#btnEditEignung)       { grid-column: 1 / -1 !important; }
.va-docgrid.has-zuschlag  > :not(#btnGenZuschlag):not(#btnEditZuschlag)     { grid-column: 1 / -1 !important; }
.va-docgrid.has-preisblatt> :not(#btnGenPreisblatt):not(#btnEditPreisblatt) { grid-column: 1 / -1 !important; }
.va-docgrid.has-ee        > :not(#btnGenEE):not(#btnEditEE)                 { grid-column: 1 / -1 !important; }
.va-docgrid.has-vertrag   > :not(#btnGenVertrag):not(#btnEditVertrag)       { grid-column: 1 / -1 !important; }

/* Position: Button links, Icon rechts ÔÇô exakt wie bei LSB */
#btnGenLSB        { grid-column: 1 / 2; }       #btnEditLSB        { grid-column: 2 / 3; }
#btnGenLV         { grid-column: 1 / 2; }       #btnEditLV         { grid-column: 2 / 3; }
#btnGenEignung    { grid-column: 1 / 2; }       #btnEditEignung    { grid-column: 2 / 3; }
#btnGenZuschlag   { grid-column: 1 / 2; }       #btnEditZuschlag   { grid-column: 2 / 3; }
#btnGenPreisblatt { grid-column: 1 / 2; }       #btnEditPreisblatt { grid-column: 2 / 3; }
#btnGenEE         { grid-column: 1 / 2; }       #btnEditEE         { grid-column: 2 / 3; }
#btnGenVertrag    { grid-column: 1 / 2; }       #btnEditVertrag    { grid-column: 2 / 3; }




/* DocViewer: Pseudo-Hintergrund immer in Dokument-Breite */
#docEditorModal .va-editor__body .va-editor__scroll::before{
  width: var(--doc-center-w) !important;
}

/* dezente Optik f++r die Untertitelzeile unter der H1 */
#docEditorModal .doc-lv-subtitles{
  margin: 0 0 12px 0 !important;
  color: #476887 !important;
}
#docEditorModal .doc-lv-subtitles strong{
  color: #0B2941 !important;
}






/* === VA DOCVIEWER ÔÇô FINALE OVERRIDES (APPEND AT END) ===================== */
/* Dialog zentriert, 55vw breit; kein Au+ƒen-Scroll */
#docEditorModal .va-modal__dialog {
  width: 55vw !important;
  max-width: 55vw !important;
  margin: 0 auto !important;
  overflow: hidden !important;      /* Doppel-Scroll verhindern */
}

/* Nur der Body scrollt ÔÇô der zus+ñtzliche Wrapper soll NICHT scollen */
#docEditorModal .va-editor__body {
  height: calc(100vh - var(--doc-header-h, 56px)) !important;
  min-height: 0 !important;
  overflow: auto !important;        /* EIN Scrollbalken */
  /* Wei+ƒfl+ñche bis zur Chatleiste (wird per JS gesetzt) */
  padding-bottom: var(--doc-chat-h, 8px) !important;
}

/* Wrapper unsch+ñdlich machen: kein eigener Scroll/keine H+Âhe */
#docEditorModal .va-editor__scroll {
  display: contents !important;     /* ÔÇ×entkapseltÔÇ£ den Inhalt */
  height: auto !important;
  overflow: visible !important;
}

/* Inhalt: volle Card-Breite (mit schmalem Innenrand), kein Horizontal-Scroll */
#docEditorModal #docEditor {
  /* identisch zur Dialogbreite, nur mit Innenrand */
  width: calc(55vw - 2 * var(--doc-pad, 16px)) !important;
  max-width: calc(55vw - 2 * var(--doc-pad, 16px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--doc-pad, 16px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Chatbar exakt so breit wie der Inhalt */
#docEditorModal .va-editor__footer,
#docEditorModal #docChatBar {
  position: relative !important;
  bottom: 0 !important;
  background: transparent !important;
}
#docEditorModal #docChatBar {
  width: calc(55vw - 2 * var(--doc-pad, 16px)) !important;
  max-width: calc(55vw - 2 * var(--doc-pad, 16px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Chat-Textarea: klein starten, ohne interne Scrollbar; w+ñchst per JS */
#docEditorModal #docChatBar .chat-input-wrap { align-items: flex-end !important; }
#docEditorModal #docChatInput {
  min-height: 36px !important;             /* Buttonh+Âhe als Start */
  max-height: none !important;
  line-height: 1.45 !important;
  resize: none !important;
  overflow: hidden !important;             /* kein eigener Scroll */
}

/* Harter Neutralizer gegen +ñltere feste Breiten/H+Âhen, die reinfunken
   (die fr++heren ÔÇ×Reader-Only/Drop-InÔÇ£-Bl+Âcke mit 1100/1200px, Grid etc.) */
#docEditorModal .va-modal__content,
#docEditorModal .va-editor {
  display: block !important;      /* Grid/Flex-Overrides neutralisieren */
  max-height: none !important;
}




/* === WORKBOARD ÔÇô Einheitliche Buttons + Doc-Icons (final) ================= */

/* Grid: standardm+ñ+ƒig 1-spaltig, voller Button */
.va-docgrid { display:grid; grid-template-columns: 1fr; grid-auto-rows:auto; gap: 12px; }
.va-docgrid > * { grid-column: 1 / -1; }

/* Wenn f++r einen Typ ein Dokument existiert, wird nur dessen Zeile 2-spaltig.
   (Wir schalten die Klasse .has-<typ> per JS je nach Existenz.) */
.va-docgrid.has-lsb,
.va-docgrid.has-lv,
.va-docgrid.has-eignung,
.va-docgrid.has-zuschlag,
.va-docgrid.has-preisblatt,
.va-docgrid.has-ee,
.va-docgrid.has-vertrag { grid-template-columns: 1fr auto; align-items: center; }

/* Alle anderen Elemente derselben Grid-Instanz bleiben 1-spaltig */
.va-docgrid.has-lsb        > :not(#btnGenLSB):not(#btnEditLSB)               { grid-column: 1 / -1 !important; }
.va-docgrid.has-lv         > :not(#btnGenLV):not(#btnEditLV)                 { grid-column: 1 / -1 !important; }
.va-docgrid.has-eignung    > :not(#btnGenEignung):not(#btnEditEignung)       { grid-column: 1 / -1 !important; }
.va-docgrid.has-zuschlag   > :not(#btnGenZuschlag):not(#btnEditZuschlag)     { grid-column: 1 / -1 !important; }
.va-docgrid.has-preisblatt > :not(#btnGenPreisblatt):not(#btnEditPreisblatt) { grid-column: 1 / -1 !important; }
.va-docgrid.has-ee         > :not(#btnGenEE):not(#btnEditEE)                 { grid-column: 1 / -1 !important; }
.va-docgrid.has-vertrag    > :not(#btnGenVertrag):not(#btnEditVertrag)       { grid-column: 1 / -1 !important; }

/* Positionierung Button (links) + Icon (rechts) pro Typ */
#btnGenLSB         { grid-column: 1 / 2; }   #btnEditLSB         { grid-column: 2 / 3; justify-self: end; }
#btnGenLV          { grid-column: 1 / 2; }   #btnEditLV          { grid-column: 2 / 3; justify-self: end; }
#btnGenEignung     { grid-column: 1 / 2; }   #btnEditEignung     { grid-column: 2 / 3; justify-self: end; }
#btnGenZuschlag    { grid-column: 1 / 2; }   #btnEditZuschlag    { grid-column: 2 / 3; justify-self: end; }
#btnGenPreisblatt  { grid-column: 1 / 2; }   #btnEditPreisblatt  { grid-column: 2 / 3; justify-self: end; }
#btnGenEE          { grid-column: 1 / 2; }   #btnEditEE          { grid-column: 2 / 3; justify-self: end; }
#btnGenVertrag     { grid-column: 1 / 2; }   #btnEditVertrag     { grid-column: 2 / 3; justify-self: end; }

/* Icon-Look exakt wie beim LSB-Icon */
#btnEditLSB.btn-icon,
#btnEditLV.btn-icon,
#btnEditEignung.btn-icon,
#btnEditZuschlag.btn-icon,
#btnEditPreisblatt.btn-icon,
#btnEditEE.btn-icon,
#btnEditVertrag.btn-icon {
  width: 38px; height: 38px; min-width: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid #DBE6F3;
  background: #E8F1FB; color: #0a66c2; box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
}
#btnEditLSB .material-icons,
#btnEditLV .material-icons,
#btnEditEignung .material-icons,
#btnEditZuschlag .material-icons,
#btnEditPreisblatt .material-icons,
#btnEditEE .material-icons,
#btnEditVertrag .material-icons { font-size: 20px; line-height: 1; }

/* WICHTIG: Icons wirklich unsichtbar, solange [hidden] gesetzt ist */
#btnEditLSB[hidden], #btnEditLV[hidden], #btnEditEignung[hidden],
#btnEditZuschlag[hidden], #btnEditPreisblatt[hidden],
#btnEditEE[hidden], #btnEditVertrag[hidden] { display: none !important; }



/* ===== DOC EDITOR ÔÇô zentriert, 55% Breite, nur innerer Scroll, kein Horizontal-Scroll ===== */

/* Dialog zentrieren + Breite begrenzen */
#docEditorModal .va-modal__dialog.va-editor{
  width:55vw !important;
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;              /* kein +ñu+ƒerer Scroll */
}

/* Header/Body/Footer als Spalte, Body nimmt Resth+Âhe */
#docEditorModal .va-editor{
  display:flex !important;
  flex-direction:column !important;
  height:calc(100vh - 16px) !important;    /* kompakt, aber vollfl+ñchig */
}

/* Body selbst scrollt NICHT, sondern nur der innere Scroll-Container */
#docEditorModal .va-editor__body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* EINZIGER Scrollbereich: Inhalt; unten Puffer = Chat-H+Âhe */
#docEditorModal .va-editor__scroll{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  padding-bottom: var(--doc-chat-h, 0px) !important; /* Text reicht bis an Chat heran */
  scrollbar-gutter: stable both-edges;               /* verhindert Layoutspringen */
  overscroll-behavior: contain;
}

/* Keine horizontale Scrollm+Âglichkeit ÔÇô Inhalte brechen um */
#docEditorModal .va-editor__scroll,
#docEditorModal .va-reader,
#docEditorModal .rendered-md{
  box-sizing:border-box !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  word-break:break-word !important;
}

/* Dokumenttext mit schmalem Innenrand links/rechts (symmetrisch) */
#docEditorModal .rendered-md{
  padding-left:16px !important;
  padding-right:16px !important;
}

/* Gro+ƒe Elemente niemals breiter als die Card */
#docEditorModal .rendered-md img,
#docEditorModal .rendered-md table,
#docEditorModal .rendered-md pre{
  max-width:100% !important;
}

/* Chat-Leiste zentriert und gleich breit wie der Dialog */
#docEditorModal .va-editor__footer .chat-input-bar{
  width:55vw !important;
  max-width:1200px !important;
  margin:8px auto 12px !important;
}

/* Chat: 1 Zeile im Leerlauf, w+ñchst ohne internen Scroll */
#docEditorModal #docChatInput{
  height:1.6em !important;                 /* ~1 Zeile */
  max-height:45vh !important;              /* Deckel */
  overflow:hidden !important;              /* kein eigener Scroll */
  resize:none !important;
}

/* Buttons und Placeholder auf einer Linie */
#docEditorModal .chat-input-wrap{
  display:flex !important;
  align-items:center !important;
  gap:.5rem !important;
}

/* Sicherheit: kein horizontales +£berlaufen im gesamten Modal */
#docEditorModal{ overflow:hidden !important; }



/* Sicherheit: versteckte Icon-Buttons wirklich unsichtbar */
.btn-icon[hidden] { display: none !important; }



/* === FINAL OVERRIDE ÔÇö Workboard: einheitliche Breite + Doku-Icons ============== */
/* Basis: alle Workboard-Buttons nehmen die volle Spaltenbreite ein */
.va-docgrid > .btn-primary,
.va-docgrid > .btn-secondary { width: 100% !important; }

/* Wenn ein Dokument existiert, macht JS .has-<typ> auf der Grid-Box an.
   Dann wird NUR die betroffene Zeile 2-spaltig: 1fr (Button) + auto (Icon). */
/* LSB */
.va-docgrid.has-lsb{ grid-template-columns: 1fr auto !important; align-items: center !important; }
.va-docgrid.has-lsb #btnGenLSB { grid-column: 1 / 2 !important; }
.va-docgrid.has-lsb #btnEditLSB{ grid-column: 2 / 3 !important; justify-self: end !important; }
/* LV */
.va-docgrid.has-lv{ grid-template-columns: 1fr auto !important; align-items: center !important; }
.va-docgrid.has-lv #btnGenLV { grid-column: 1 / 2 !important; }
.va-docgrid.has-lv #btnEditLV{ grid-column: 2 / 3 !important; justify-self: end !important; }
/* Eignung */
.va-docgrid.has-eignung{ grid-template-columns: 1fr auto !important; align-items: center !important; }
.va-docgrid.has-eignung #btnGenEignung { grid-column: 1 / 2 !important; }
.va-docgrid.has-eignung #btnEditEignung{ grid-column: 2 / 3 !important; justify-self: end !important; }
/* Zuschlag */
.va-docgrid.has-zuschlag{ grid-template-columns: 1fr auto !important; align-items: center !important; }
.va-docgrid.has-zuschlag #btnGenZuschlag { grid-column: 1 / 2 !important; }
.va-docgrid.has-zuschlag #btnEditZuschlag{ grid-column: 2 / 3 !important; justify-self: end !important; }
/* Preisblatt */
.va-docgrid.has-preisblatt{ grid-template-columns: 1fr auto !important; align-items: center !important; }
.va-docgrid.has-preisblatt #btnGenPreisblatt { grid-column: 1 / 2 !important; }
.va-docgrid.has-preisblatt #btnEditPreisblatt{ grid-column: 2 / 3 !important; justify-self: end !important; }
/* Eigenerkl+ñrungen */
.va-docgrid.has-ee{ grid-template-columns: 1fr auto !important; align-items: center !important; }
.va-docgrid.has-ee #btnGenEE { grid-column: 1 / 2 !important; }
.va-docgrid.has-ee #btnEditEE{ grid-column: 2 / 3 !important; justify-self: end !important; }
/* Vertrag */
.va-docgrid.has-vertrag{ grid-template-columns: 1fr auto !important; align-items: center !important; }
.va-docgrid.has-vertrag #btnGenVertrag { grid-column: 1 / 2 !important; }
.va-docgrid.has-vertrag #btnEditVertrag{ grid-column: 2 / 3 !important; justify-self: end !important; }

/* Alle anderen Elemente derselben Grid-Instanz bleiben trotz 2 Spalten 1-spaltig */
.va-docgrid.has-lsb        > :not(#btnGenLSB):not(#btnEditLSB)               { grid-column: 1 / -1 !important; }
.va-docgrid.has-lv         > :not(#btnGenLV):not(#btnEditLV)                 { grid-column: 1 / -1 !important; }
.va-docgrid.has-eignung    > :not(#btnGenEignung):not(#btnEditEignung)       { grid-column: 1 / -1 !important; }
.va-docgrid.has-zuschlag   > :not(#btnGenZuschlag):not(#btnEditZuschlag)     { grid-column: 1 / -1 !important; }
.va-docgrid.has-preisblatt > :not(#btnGenPreisblatt):not(#btnEditPreisblatt) { grid-column: 1 / -1 !important; }
.va-docgrid.has-ee         > :not(#btnGenEE):not(#btnEditEE)                 { grid-column: 1 / -1 !important; }
.va-docgrid.has-vertrag    > :not(#btnGenVertrag):not(#btnEditVertrag)       { grid-column: 1 / -1 !important; }

/* Einheitliches Icon-Design (exakt wie bei der Leistungsbeschreibung) */
#btnEditLSB.btn-icon,
#btnEditLV.btn-icon,
#btnEditEignung.btn-icon,
#btnEditZuschlag.btn-icon,
#btnEditPreisblatt.btn-icon,
#btnEditEE.btn-icon,
#btnEditVertrag.btn-icon{
  width: 38px !important; height: 38px !important; min-width: 38px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 10px !important;
  border: 1px solid #DBE6F3 !important;
  background: #E8F1FB !important;
  color: #0a66c2 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset !important;
  padding: 0 !important;
}
#btnEditLSB.btn-icon .material-icons,
#btnEditLV.btn-icon .material-icons,
#btnEditEignung.btn-icon .material-icons,
#btnEditZuschlag.btn-icon .material-icons,
#btnEditPreisblatt.btn-icon .material-icons,
#btnEditEE.btn-icon .material-icons,
#btnEditVertrag.btn-icon .material-icons{ font-size: 20px !important; line-height: 1 !important; }

/* Versteckte Icon-Buttons wirklich ausblenden */
button.btn-icon[hidden]{ display: none !important; }




/* Zentriere den Dialog und ++bersteuere fr++here Breiten-/Scrollangaben */
body #docEditorModal .va-modal__dialog.va-editor {
  width: 55vw !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
}

/* Nur ein Scroll ÔÇô Body scrollt, Wrapper wird stumm */
body #docEditorModal .va-editor__body { overflow: auto !important; min-height: 0 !important; }
body #docEditorModal .va-editor__scroll { display: contents !important; overflow: visible !important; }

/* Dokument f++llt den Viewer bis auf einen kleinen Innenrand */
body #docEditorModal #docEditor,
body #docEditorModal .va-reader { width: 100% !important; max-width: 100% !important; padding: 0 16px !important; }

/* Chatbar exakt so breit wie der Viewer, b++ndig unten */
body #docEditorModal .va-editor__footer .chat-input-bar {
  width: 55vw !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}



/* ===== DocEditor: zentriert, 55vw breit, 3-Zeilen-Layout ===== */
#docEditorModal .va-modal__dialog{
  width: 55vw !important;
  max-width: 55vw !important;
  margin: 0 auto !important;                  /* Zentrierung */
  height: calc(100vh - 32px) !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* Header | Body(scrollt) | Footer */
  overflow: hidden !important;                /* keine +ñu+ƒere Scrollbar */
}


/* Nur der Body (Inhalt) scrollt ÔÇô inneren Wrapper aufl+Âsen */
#docEditorModal .va-modal__body{ overflow: hidden !important; } /* au+ƒen keine Scrollbar */
#docEditorModal .va-editor__body{
  position: relative !important;
  overflow: auto !important;                  /* EIN vertikaler Scrollbereich */
  min-height: 0 !important;
}
#docEditorModal .va-editor__scroll{
  display: contents !important;               /* entkapselt: verhindert Doppel-Scroll */
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
}


/* Dokumentspalte: volle Editorbreite mit schmalem Innenrand, ohne Horiz-Scroll */
#docEditorModal #docEditor{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;                 /* schmaler Rand links/rechts */
 box-sizing: border-box !important;
  overflow-x: hidden !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
#docEditorModal #docEditor *{
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* Chat-Input: deckungsgleich mit dem Dokument */
#docEditorModal #docChatBar,
#docEditorModal .va-editor__footer .chat-input-bar{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;                 /* gleicher Innenrand wie Inhalt */
  box-sizing: border-box !important;
  display: block !important;
}


/* Textarea: Auto-Grow bis 50% der Bodyh+Âhe; danach interner Scroll */
#docEditorModal #docChatInput{
  width: 100% !important;
  min-height: 40px !important;               /* kompakter Default (Ôëê Buttonh+Âhe) */
  line-height: 1.4 !important;
  height: auto !important;                   /* wird per JS gesetzt */
  max-height: 50vh !important;               /* Deckel f++r Auto-Grow */
  overflow: hidden !important;               /* bis zum Deckel kein interner Scroll */
  resize: none !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-sizing: border-box !important;
}



/* === Row-Layout pro Dokumentenart (Button | Icon) ===================== */
.va-row{
  display:grid; grid-template-columns: 1fr auto;
  gap: .5rem; align-items: center;
}

/* Button soll die linke Spalte ausf++llen */
.va-row > .btn,
.va-row > .btn-primary,
.va-row > .btn-secondary{ width: 100%; }

/* Icon-Button rechts, identischer Look f++r alle */
.doc-icon{
  width: 38px; height: 38px; min-width: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid #DBE6F3;
  background: #E8F1FB; color: #0a66c2;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
  padding: 0;
}
.doc-icon .material-icons{ font-size:20px; line-height:1; }

/* Wirklich verstecken, wenn [hidden] gesetzt ist */
.doc-icon[hidden]{ display:none !important; }


/* === VA-Editor: harte, kollisionssichere Overrides (nur im Doc-Modal) === */
#docEditorModal { --doc-center-w: clamp(680px, 55vw, 1200px); }

/* Dialog f++llt den Viewport, nur der innere Scroller scrollt */
#docEditorModal .va-modal__dialog.va-editor {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  overflow: hidden !important;
}

/* Body selbst scrollt nicht */
#docEditorModal .va-editor__body {
  overflow: hidden !important;
  min-height: 0 !important;
}

/* Innerer Scroller: nur vertikal, keine Horizontal-Scrollleiste */
#docEditorModal .va-editor__scroll {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding: 16px 0 calc(var(--doc-chat-h, 84px) + 12px) 0 !important; /* Platz bis Chatleiste */
}
#docEditorModal .va-editor__scroll::after,
#docEditorModal .va-editor__body::after,
#docEditorModal .va-editor::after { content: none !important; display: none !important; }

/* Dokument: genau 55% (zentriert), niemals breiter, bricht lange Inhalte */
#docEditorModal #docEditor {
  width: var(--doc-center-w) !important;
  max-width: var(--doc-center-w) !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
#docEditorModal #docEditor * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#docEditorModal #docEditor table { display: block; width: 100% !important; overflow: auto; }
#docEditorModal #docEditor pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Footer klebt unten; Chat-Bar exakt so breit wie der Lesebereich */
#docEditorModal .va-editor__footer {
  position: relative !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background: transparent !important;
  padding: 6px 0 10px !important;
}
#docEditorModal #docChatBar,
#docEditorModal .va-editor__footer .chat-input-bar {
  width: var(--doc-center-w) !important;
  max-width: var(--doc-center-w) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Chat-Input wie im Projekt-Chat ÔÇô h+Âher, Buttons gr+Â+ƒer, sauber wachsend */
#docEditorModal #docChatBar .chat-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
}
#docEditorModal #docChatInput {
  flex: 1 1 auto !important;
  min-height: 48px !important;                 /* Start-H+Âhe */
  max-height: 50vh !important;                 /* harte Obergrenze (Fallback) */
  height: auto !important;                     /* w+ñchst per JS */
  padding: 12px 12px !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
  overflow-y: hidden !important;               /* kein interner Scroll bis max erreicht */
  line-height: 1.4 !important;
  color: #0B2941 !important;
}
#docEditorModal .input-actions-right .btn-icon,
#docEditorModal .input-actions-right .btn-primary {
  height: 40px !important;
  min-width: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Sicherheit: nirgendwo horizontale +£berbreite */
#docEditorModal, #docEditorModal * { max-width: 100% !important; }
html, body { overflow-x: hidden !important; }



/* === Fix: LV-Dokumenten-Icon an ++brige Icons angleichen === */
#btnEditLV.btn-icon{
  background: #E8F1FB !important;  /* wie die anderen */
  border-color: #DBE6F3 !important;
  color: #0a66c2 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset !important;
}
#btnEditLV.btn-icon .material-icons{
  color: currentColor !important;   /* Icon ++bernimmt den Button-Farbton */
}


/* === VA-Editor: zentriert (55%), 1 Scrollbereich, sichtbarer Chat-Footer === */
#docEditorModal { --doc-w: clamp(680px, 55vw, 1200px); }

/* Dialog = Fullscreen-Grid: Header | Body(scrolling) | Footer */
#docEditorModal .va-modal__dialog.va-editor{
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  overflow: hidden !important;
}

/* Body selbst nicht scrollen, nur der innere Wrapper */
#docEditorModal .va-editor__body{
  overflow: hidden !important;
  min-height: 0 !important;
}

/* Innerer Scrollbereich: nur vertikal; Inhalt mittig ausrichten */
#docEditorModal .va-editor__scroll{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  justify-content: center !important;
  /* Platz bis zur Chatleiste; wird per JS aktualisiert */
  padding-bottom: var(--doc-chat-h, 14px) !important;
  box-sizing: border-box !important;
}

/* Der eigentliche Dokumentbereich: 55% breit & mittig */
#docEditorModal #docEditor{
  flex: 0 0 var(--doc-w) !important;
  width: var(--doc-w) !important;
  max-width: var(--doc-w) !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
#docEditorModal #docEditor *{
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Footer bleibt sichtbar; Chatleiste exakt so breit wie der Textbereich */
#docEditorModal .va-editor__footer{
  position: relative !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background: transparent !important;
  padding: 6px 0 8px !important;
}
#docEditorModal #docChatBar,
#docEditorModal .va-editor__footer .chat-input-bar{
  width: var(--doc-w) !important;
  max-width: var(--doc-w) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Chat-Input wie im Projekt-Chat: h+Âher, Buttons gr+Â+ƒer, klares Feld */
#docEditorModal #docChatBar .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
}

/* Textfeld w+ñchst bis 50% des Editors, danach eigener Scroll */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  min-height: 48px !important;
  height: auto !important;            /* wird per JS gesetzt */
  max-height: 50vh !important;
  padding: 12px 12px !important;
  border: 0 !important; outline: 0 !important;
  resize: none !important;
  overflow-y: hidden !important;
  line-height: 1.4 !important;
  color: #0B2941 !important;
}

/* Actions rechts unten im Feld ÔÇô Gr+Â+ƒen wie Projekt-Chat */
#docEditorModal .input-actions-right{
  position: absolute !important;
  right: 12px !important; bottom: 12px !important;
  display: inline-flex !important;
  align-items: center !important; gap: .45rem !important;
}
#docEditorModal .input-actions-right .btn-icon,
#docEditorModal .input-actions-right .btn-primary{
  height: 40px !important; min-width: 40px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}

/* Global: absolut keine horizontale Scrollm+Âglichkeit */
html, body { overflow-x: hidden !important; }



/* ===== VA: Kommentieren-Bubble & Absatz-Hervorhebung ===== */

#docEditor { position: relative; padding-right: 64px; } /* Platz rechts f++r die Bubble */

.va-line-highlight {
  background: linear-gradient(90deg, rgba(255, 230, 150, .35), rgba(255, 230, 150, .18) 60%, transparent);
  outline: 2px solid rgba(255, 200, 0, .25);
  outline-offset: 2px;
  border-radius: .25rem;
  transition: background-color .12s ease, outline-color .12s ease, box-shadow .12s ease;
}

.va-comment-bubble {
  position: absolute;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  top: 0; left: 0;
  transform: translate(-9999px, -9999px); /* au+ƒerhalb bis positioniert */
  padding: .25rem .6rem;
  border-radius: 999px;
  background: #0ea5e9;          /* sky-500 */
  color: #fff;
  font-size: .85rem;
  line-height: 1.1;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  pointer-events: auto;          /* klickbar */
  user-select: none;
  white-space: nowrap;
}

.va-comment-bubble[hidden] { display: none; }

.va-comment-bubble button {
  all: unset;
  cursor: pointer;
  font-weight: 600;
  padding: .1rem .2rem;
}



/* === VA-DOC ÔÇô Kommentieren-Bubble stabil sichtbar (Hotfix) === */
#docEditor { position: relative; } /* Bezug f++r absolute Positionierung */

#docEditor .va-comment-bubble{
  position: absolute;
  z-index: 20;
  transform: none !important;         /* hebt ein evtl. translate(-9999px) auf */
  pointer-events: auto;
  transition: opacity .06s linear;
}
#docEditor .va-comment-bubble[hidden]{ display:none !important; }

#docEditor .va-comment-bubble button{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .55rem;
  border-radius:999px; border:1px solid #cfe0f1;
  background:#fff; color:#0b2941;
  box-shadow:0 8px 22px rgba(14,49,89,.14);
  cursor:pointer;
}
#docEditor .va-comment-bubble button:hover{
  box-shadow:0 10px 28px rgba(14,49,89,.18);
}

/* Zeilen-Highlight dezent (sichtbar, aber nicht ÔÇ×marker-gelbÔÇ£) */
#docEditor .va-line-highlight{
  outline:2px solid #a7d4ff;
  outline-offset:2px;
  background:
    linear-gradient(180deg, rgba(167,212,255,.18), rgba(167,212,255,.08));
}



/* === VU: Projekttitel kleiner, kein +£berlappen mit dem Chat === */
body.project-page .project-hero .project-title,
body.project-page .project-title{
  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
  line-height: 1.2 !important;
  max-width: 100%;
  overflow-wrap: anywhere;
}


/* === VA DOCVIEWER ÔÇô FINAL ONE TRUE LAYOUT (zentriert + kein X-Scroll) === */
/* Breite der ÔÇ×KarteÔÇ£ */
#docEditorModal{ --va-doc-w: clamp(680px, 55vw, 1200px); }

/* Dialog wirklich vollfl+ñchig, zentriert (ohne left:50% Altlasten) */
#docEditorModal .va-modal__dialog.va-editor{
  position: fixed !important;
  inset: 0 !important;               /* top/right/bottom/left = 0 */
  left: 0 !important; right: 0 !important; /* wichtig gegen Alt-Patches */
  margin: 0 auto !important;
  width: 100vw !important; max-width: 100vw !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* Header | Body | Footer */
  overflow: hidden !important;
  transform: none !important;        /* evtl. zentr. Transform komplett aus */
}

/* Nur innen wird gescrollt; horizontal niemals */
#docEditorModal .va-editor__body{
  overflow: hidden !important;
  min-height: 0 !important;
}
#docEditorModal .va-editor__scroll{
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;     /* killt X-Scrollbar zuverl+ñssig */
  display: flex !important;
  justify-content: center !important;/* zentriert den Inhalt horizontal */
  padding: 0 0 var(--doc-chat-pad, 14px) 0 !important; /* Platz f++r Chatleiste */
  box-sizing: border-box !important;
}

/* Das eigentliche Dokument ÔÇô exakt 55% (o. Clamp) und mittig */
#docEditorModal #docEditor{
  flex: 0 0 var(--va-doc-w) !important;
  width: var(--va-doc-w) !important;
  max-width: var(--va-doc-w) !important;
  margin: 0 !important;
  padding: 0 16px 16px !important;   /* schmaler Innenrand */
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
#docEditorModal #docEditor *{
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Footer/Chat fix am unteren Rand des Scrollcontainers */
#docEditorModal .va-editor__footer{
  position: relative !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background: transparent !important;
  padding: 8px 0 !important;
}
#docEditorModal #docChatBar,
#docEditorModal .va-editor__footer .chat-input-bar{
  width: var(--va-doc-w) !important;
  max-width: var(--va-doc-w) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Chatbar-Optik wie im Projektchat: h+Âher + gr+Â+ƒere Buttons */
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
}
#docEditorModal #docChatBar .btn-icon,
#docEditorModal #docChatBar .btn-primary{
  height: 36px !important; min-height: 36px !important;
}
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 44px !important;           /* initial h+Âher */
  height: auto !important;                /* JS setzt dynamisch */
  max-height: 50vh !important;            /* Sicherheitsdeckel */
  line-height: 1.45 !important;
  padding: 8px 10px !important;
  border: 0 !important; outline: 0 !important;
  resize: none !important;
  overflow: hidden !important;            /* bis zum Deckel kein interner Scroll */
}

/* Sicherheitsnetz gegen alte Regeln (mehrfach vorhanden in projekt.css) */
#docEditorModal .va-editor__scroll::before,
#docEditorModal .va-editor__scroll::after,
#docEditorModal .va-editor__body::after,
#docEditorModal .va-editor::after{
  content: none !important; display: none !important;
}



#docEditorModal .va-actions { position: relative; }  /* Fallback-Anker */
#docEditorModal #docExportWrap { position: relative; } /* expliziter Anker */



/* === VA-Editor: Footer immer sichtbar und voll ausgef++llt ========== */
#docEditorModal .va-modal__dialog.va-editor{
  /* 3-Zeilen-Layout: Header | Body (scrollt) | Footer (Chat) */
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  height: 100vh !important;           /* volle Modal-H+Âhe */
  max-height: 100vh !important;
  box-sizing: border-box;
  overflow: hidden !important;         /* kein Au+ƒen-Scroll */
}

#docEditorModal .va-editor__body{
  min-height: 0 !important;           /* Grid-Shrink zulassen */
  overflow: auto !important;          /* nur hier scrollen */
  /* keine Unterlappung mit dem Footer */
  padding-bottom: 0 !important;
}

#docEditorModal .va-editor__scroll{
  overflow-x: hidden !important;       /* horizontalen Scroll komplett aus */
}

#docEditorModal .va-editor__footer{
  padding: 0 !important;               /* Chat f++llt den Footer randlos */
  margin: 0 !important;
  background: #f9fbff;                 /* dezente Absetzung (wie Projekt-Chat) */
  border-top: 1px solid #e3e7ef;
}

#docEditorModal .va-editor__footer .chat-input-bar{
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
}

/* Textarea darf wachsen, aber nicht ++ber 50% des Editors hinaus */
#docEditorModal #docChatInput{
  max-height: 50vh !important;         /* robust: halber Viewport */
  overflow-y: auto;
}







/* Logo oben rechts auch im generischen Host platzieren */
.va-doc-host .va-doc-logo { float: right; margin: 8px 8px 0 0; }
.va-doc-logo img { display: block; height: auto; max-height: 72px; max-width: 260px; }



/* === DOC-EDITOR: sichtbarer Footer + Chat f++llt Footer ================= */
/* Dialog als 3-Zeilen-Grid: Header | Body (scrollt) | Footer (Chat)      */
#docEditorModal .va-modal__dialog.va-editor{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  height: 100vh !important;
  overflow: hidden !important;               /* kein Au+ƒen-Scroll */
}

/* Body darf NICHT festh+Âhe haben ÔÇô er bekommt den Rest und scrollt */
#docEditorModal .va-editor__body{
  min-height: 0 !important;
  height: auto !important;                   /* neutralisiert JS-Setzung */
  overflow: auto !important;                 /* EIN vertikaler Scroll */
}

/* interner Wrapper: kein eigener Bottom-Puffer (Footer ist separate Zeile) */
#docEditorModal .va-editor__scroll{
  overflow-x: hidden !important;
  padding-bottom: 0 !important;
}

/* Footer sitzt fest in der dritten Grid-Zeile und bleibt sichtbar */
#docEditorModal .va-editor__footer{
  position: relative !important;             /* ++berschreibt 'sticky' */
  bottom: auto !important;
  margin: 0 !important;
  padding: 8px 0 !important;                 /* gern anpassen */
  background: transparent !important;
  z-index: 1 !important;
}

/* Chatbar f++llt den Footer und ist wie der Textbereich zentriert */
#docEditorModal .va-editor__footer .chat-input-bar{
  width: 55vw !important;                    /* identisch zum Reader */
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Eingabewrap nutzt volle Breite ÔÇô Buttons rechts, Text w+ñchst */
#docEditorModal .chat-input-wrap{
  width: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: .5rem !important;
}

/* Textarea: w+ñchst bis 50% der Editorh+Âhe ÔÇô ohne eigenen Scroll */
#docEditorModal #docChatInput{
  flex: 1 1 auto !important;
  min-height: 36px !important;
  max-height: 50vh !important;
  height: auto !important;
  overflow: hidden !important;
  resize: none !important;
}



/* === Absatz-Button rechts (stabil & zweizeilig) ====================== */
/* Platz f++r eine schmale Aktions-Spalte rechts der Textspalte */
.project-page {
  --comment-rail-w: clamp(140px, 16ch, 200px);
  --comment-rail-gap: 10px;
}
.project-page .va-doc,
.project-page .doc-viewer,
.project-page #docViewer,
.project-page #docContent{
  position: relative;
  overflow: visible; /* Buttons d++rfen nicht abgeschnitten werden */
  padding-right: calc(var(--comment-rail-w) + var(--comment-rail-gap));
}

/* Jeder Absatz wird als Bezugspunkt verwendet */
.project-page .va-paragraph{ position: relative; }

/* Der eigentliche Button rechts neben dem Absatz */
.project-page .para-change-btn{
  position: absolute;
  right: calc(-1 * (var(--comment-rail-w) + var(--comment-rail-gap)));
  top: 50%;
  transform: translateY(-50%);
  width: var(--comment-rail-w);
  min-height: 2.6em; /* erzwingt ÔÇ×++ber zwei ZeilenÔÇ£ */
  padding: .45rem .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  font-weight: 700;
  color: #104a88;
  background: #F2F7FF;
  border: 1px solid #CFE0F1;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(10,40,70,.06);
  cursor: pointer;
  z-index: 3200; /* sicher ++ber dem DocViewer */
}

/* optische Zuordnung: wenn der Absatz hervorgehoben ist */
.project-page .va-paragraph.is-highlight .para-change-btn,
.project-page .va-paragraph.highlight .para-change-btn{
  border-color: #86D8F0;
  background: #E9F7FF;
  box-shadow: 0 4px 16px rgba(0,158,225,.18);
}

/* Fokus- und Hover-Feedback */
.project-page .para-change-btn:focus{ outline: 2px solid #86D8F0; outline-offset: 2px; }
.project-page .va-paragraph:hover .para-change-btn{ filter: brightness(.98); }

/* Optional: jeden alten, ++berlagernden ÔÇ×KommentierenÔÇ£-Overlay-Button ausblenden */
.project-page .comment-btn,
.project-page #commentButton{ display: none !important; }

/* Mobile/eng: Button unter den Absatz klappen (kein Randverlust) */
@media (max-width: 900px){
  .project-page .va-doc,
  .project-page .doc-viewer,
  .project-page #docViewer,
  .project-page #docContent{
    padding-right: 0;
  }
  .project-page .para-change-btn{
    position: static;
    transform: none;
    width: auto;
    margin-top: .4rem;
  }
}



/* === VA: Button-Optik angleichen & "+ñu+ƒeres Blau" entfernen ============ */

/* Eine gemeinsame Farbe/Fl+ñche f++r Absatz-Highlight UND Button */
.project-page {
  /* entweder ein einfarbiges Hellblau: */
  --va-hl-fill: #EAF3FF;
  /* oder ÔÇô falls du den Verlauf bevorzugst ÔÇô nutze den gleichen Gradient: */
  /* --va-hl-fill: linear-gradient(180deg, rgba(167,212,255,.18), rgba(167,212,255,.08)); */
}

/* Absatz-Hervorhebung (falls bereits vorhanden, nur angleichen) */
.project-page .va-paragraph.is-highlight,
.project-page .va-paragraph.highlight,
.project-page .va-line-highlight{
  background: var(--va-hl-fill) !important;
  outline: 2px solid rgba(61,132,255,.28);
  outline-offset: 2px;
}

/* Der Button rechts neben dem Absatz */
.project-page .para-change-btn{
  /* Layout (bleibt wie zuvor) */
  position: absolute;
  right: calc(-1 * (var(--comment-rail-w, 170px) + var(--comment-rail-gap, 10px)));
  top: 50%;
  transform: translateY(-50%);
  width: var(--comment-rail-w, 170px);
  min-height: 2.6em;
  padding: .5rem .7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  font-weight: 700;

  /* Optik: gleich wie Absatz-Highlight, KEIN +ñu+ƒerer blauer Rahmen */
  background: var(--va-hl-fill) !important; /* Button selbst hellblau */
  border: none !important;                   /* Rand weg */
  box-shadow: none !important;               /* Schatten weg */
  color: #0b2941;                            /* gut lesbar auf Hellblau */
  z-index: 3200;                             /* sicher ++ber dem Viewer */
}

/* leichte Feedbacks ohne "blauen Rahmen" */
.project-page .para-change-btn:hover { filter: brightness(.98); }
.project-page .para-change-btn:focus { outline: 2px solid rgba(61,132,255,.28); outline-offset: 2px; }

/* wenn der Absatz hervorgehoben ist, sieht der Button identisch aus */
.project-page .va-paragraph.is-highlight .para-change-btn,
.project-page .va-paragraph.highlight .para-change-btn{
  background: var(--va-hl-fill) !important;
}

/* F++r schmale Screens: Button unter den Absatz klappen */
@media (max-width: 900px){
  .project-page .para-change-btn{
    position: static;
    transform: none;
    width: 100%;
    margin-top: .4rem;
  }
}





#docEditorModal .va-modal__header .va-actions { display: inline-flex; align-items: center; gap: .5rem; }
#docEditorModal .va-menu { position: relative; }
#docEditorModal .va-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; }
#docEditorModal .va-menu__list[hidden] { display: none !important; }




/* === DOC-Editor: rechter Aktions-Button ohne blauen Au+ƒenkreis === */
#docEditor{
  /* Platz rechts f++r den Button (zwei Zeilen m+Âglich) */
  --va-rail-w: 180px;
  --va-rail-gap: 12px;
  padding-right: calc(var(--va-rail-w) + var(--va-rail-gap)) !important;
  position: relative;
}

/* H++lle der Bubble: komplett transparent & ohne Shadow */
#docEditor .va-comment-bubble{
  z-index: 3200 !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  width: var(--va-rail-w);
}

/* Button selbst: hellblau wie die Absatz-Hervorhebung, zwei Zeilen erlaubt */
#docEditor .va-comment-bubble button{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 2.6em;
  padding: .48rem .6rem;
  white-space: normal;            /* bricht auf 2 Zeilen */
  text-align: center;
  line-height: 1.15;
  font-weight: 700;

  border-radius: 10px;
  border: 1px solid #86D8F0 !important;
  background: #E6F3FF !important;
  color: #104a88 !important;
  box-shadow: 0 2px 10px rgba(10,40,70,.06);
}

/* dezente visuelle Kopplung an die Absatz-Markierung */
#docEditor .va-line-highlight{
  outline: 2px solid #86D8F0 !important;
  outline-offset: 2px !important;
  background: linear-gradient(180deg, rgba(230,243,255,.92), rgba(230,243,255,.55)) !important;
  border-radius: .25rem !important;
}

/* falls irgendwo noch ein altes transform versteckt ist  neutralisieren */
#docEditor .va-comment-bubble{ transform: none !important; }
#docEditor .va-comment-bubble[hidden]{ display: none !important; }




/* LV (Querformat) im Doc-Editor: volle Breite + minimale Raender */
#docEditorModal.is-lv {
  --lv-edge-gap: clamp(0.4rem, 1vw, 0.85rem);
  --lv-top-gap: clamp(0.35rem, 1vh, 0.85rem);
  --lv-bottom-gap: clamp(0.2rem, 0.7vh, 0.6rem);
  --lv-inner-pad: clamp(0.9rem, 1.2vw, 1.5rem);
  --doc-card-w: calc(100vw - (var(--lv-edge-gap) * 2));
  --doc-center-w: var(--doc-card-w);
  --vw-55: var(--doc-card-w);   /* Chat-Composer Fallback */
  --doc-55: var(--doc-card-w);  /* generische 55%-Regeln folgen nun der LV-Breite */
}

#docEditorModal.is-lv .va-modal__dialog.va-editor {
  padding: 0 !important;
}

#docEditorModal.is-lv .va-modal__header {
  padding: clamp(0.8rem, 1.4vw, 1.1rem) var(--lv-edge-gap) clamp(0.35rem, 0.9vh, 0.55rem) !important;
}

#docEditorModal.is-lv .va-editor__body {
  padding: var(--lv-top-gap) var(--lv-edge-gap) var(--lv-bottom-gap) !important;
}

#docEditorModal.is-lv .va-editor__scroll {
  padding: 0 0 var(--lv-bottom-gap) 0 !important;
  width: 100% !important;
  justify-content: flex-start !important;
  display: block !important;
}

#docEditorModal.is-lv #docEditor {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: var(--lv-inner-pad) !important;
  border-radius: clamp(12px, 1vw, 18px) !important;
  border: 1px solid rgba(13, 44, 88, 0.08) !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
}

#docEditorModal.is-lv .va-editor__footer {
  padding: clamp(0.2rem, 0.5vw, 0.45rem) var(--lv-edge-gap) clamp(0.7rem, 1vw, 1rem) !important;
  background: transparent !important;
  margin-top: 0 !important;
}

#docEditorModal.is-lv #docChatBar,
#docEditorModal.is-lv .va-editor__footer .chat-input-bar {
  width: var(--doc-card-w) !important;
  max-width: var(--doc-card-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#docEditorModal.is-lv .doc-lv-subtitles {
  margin-top: 0 !important;
  margin-bottom: clamp(0.8rem, 1.2vw, 1.4rem) !important;
}





/* 1. Enlarge the chat input (#docChatInput) default height and allow growth */
#docChatInput {
  /* At least double the current height (e.g., ~2 lines) */
  min-height: 3em !important;
  /* Prevent manual resizing (we handle size via script) */
  resize: none;
}

/* Limit the textarea height to 30% of the visible editor modal */
#vergabeunterlagen .va-editor__body #docChatInput {
  max-height: 30vh;  /* Fallback: 30% of viewport height if modal height not known */
  /* If #vergabeunterlagen has fixed height, JS will handle exact 30% via inline style */
}

/* 2. Remove horizontal scrollbar above chat input (disable horizontal overflow) */
.va-editor__scroll {
  overflow-x: hidden !important;   /* no horizontal scroll */
}

/* 3. Remove right-side comment area and let document content use full width */
.va-editor__body {
  /* If originally a flex/grid with a comment panel, force single-column layout */
  display: block !important;
}

.va-editor__scroll {
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;  /* remove any reserved space for comments */
}



/* === Doc-Export-Men++ ÔÇô helle Variante ================================== */
#docExportMenu {
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #fff;
  border: 1px solid #e5ecf8;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 38, 73, .12);
  /* falls das Men++ durchs Theme enger/zu breit wirkt, kannst du hier feintunen: */
  max-width: 320px;
}

#docExportMenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#docExportMenu > li + li { margin-top: 2px; }

#docExportMenu button {
  display: block;
  width: 100%;
  padding: 8px 12px;             /* schlankere Zeilen */
  background: none;
  border: 0;
  border-radius: 8px;
  text-align: left;
  font: inherit;
  line-height: 1.25;
  color: var(--va-blue-700, #0f2a57) !important;  /* Text bleibt blau/dunkel */
}

#docExportMenu button:hover,
#docExportMenu button:focus {
  background: #f4f8ff;           /* sanftes Hover, Text bleibt sichtbar */
  color: var(--va-blue-800, #0b2547) !important;
  outline: none;
}

/* Safety: entferne eventuelle bullets/Einr++ckung, falls global was greift */
#docExportMenu,
#docExportMenu li { list-style-type: none; padding-left: 0; }





/* === Doc-Editor: Reparatur & H+ñrtung (nur Modaldialog) === */

/* 1) Layout des Body wieder als Flex (f+ñngt "wei+ƒe Seite" ab) */
#vergabeunterlagen .va-editor__body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0; /* wichtig f++r korrektes Scrollen im Kind */
}

/* 2) Scrollbereich f++llt die H+Âhe, kein Horizontal-Scroll */
#vergabeunterlagen .va-editor__scroll {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important; /* killt den horizontalen Balken */
}

/* 3) R++ckg+ñngigmachung der fr++heren :not()-Regel (falls noch aktiv) */
#vergabeunterlagen .va-editor__body > * {
  display: revert !important; /* zeigt alle direkten Kinder wieder an */
}

/* 4) Inhalt robust gegen lange Zeilen/W+Ârter (verhindert horizontales Scrollen) */
#vergabeunterlagen #docEditor {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5) Chat-Textarea: sp++rbar gr+Â+ƒer im Leerlauf, kein manuelles Resize */
#vergabeunterlagen #docChatInput {
  min-height: 56px !important; /* ~ doppelt/mehr als vorher */
  resize: none !important;
  line-height: 1.45;
}





/* === DOC-EDITOR: Stabilisierung & Input-Wachstum (scoped) ============== */

/* 1) Kommentarspalte komplett weg, Layout 1-spaltig */
#docEditorModal .va-editor {
  display: grid !important;
  grid-template-columns: 1fr !important;
}
#docEditorModal .va-editor__aside { display: none !important; }

/* 2) Nur der innere Scroller scrollt vertikal; horizontal nie */
#docEditorModal .va-editor__body {
  min-height: 0 !important;
  overflow: hidden !important;
}
#docEditorModal .va-editor__scroll {
  display: block !important;             /* ++berschreibt "display: contents" */
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;         /* killt den horizontalen Scrollbalken */
  box-sizing: border-box !important;
  padding-bottom: var(--doc-chat-h, 12px) !important; /* JS setzt exakte H+Âhe */
}

/* 3) Footer/Chatbar bleibt unten; keine fixe H+Âhe */
#docEditorModal .va-editor__footer {
  position: relative !important;
  bottom: 0 !important;
  background: transparent !important;
  padding: 6px 0 !important;
}
#docEditorModal #docChatBar .chat-input-wrap {
  display: flex !important;
  align-items: flex-end !important;
  gap: .5rem !important;
}

/* 4) Nur der Doc-Chat: gr+Â+ƒerer Start + flexibles Wachstum (JS deckelt bei 30%) */
#docEditorModal #docChatInput {
  flex: 1 1 auto !important;
  min-height: 80px !important;           /* deutlich h+Âherer Start */
  height: auto !important;               /* wird per JS gesetzt */
  max-height: none !important;           /* Deckel ++bernimmt JS */
  resize: none !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
}

/* 5) Sicherheit: Inhalt bricht, nie horizontal scrollen */
#docEditorModal #docEditor,
#docEditorModal #docEditor * {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}





/* Nur die Messages scollen, Input unten b++ndig */
body.project-page .chat-inner {
  display: flex !important;
  flex-direction: column !important;
}

body.project-page .chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  margin: 0 !important;
  padding-bottom: .25rem !important; /* kleiner Abstand zur Input-Leiste */
}

/* Globales Basis-Margin aus style.css neutralisieren */
.chat-messages { margin-bottom: 0 !important; }



/* === DOC-CHAT: nach oben wachsend, sticky am unteren Rand (hard override) === */

#docEditorModal .va-editor__footer,
#docEditorModal #docChatBar.chat-input-bar{
  position: relative !important;
  bottom: 0 !important;
  z-index: 5 !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  padding: 8px 0 !important;
}

/* Wrap unten ausrichten, damit die Buttons die ÔÇ×BaselineÔÇ£ bilden */
#docEditorModal #docChatBar .chat-input-wrap{
  display: flex !important;
  align-items: flex-end !important;
  gap: .5rem !important;
  padding: 4px 10px !important;
}

/* Buttons d++rfen NICHT absolut sein ÔÇô sie m++ssen mitwachsen */
#docEditorModal #docChatBar .input-actions-right{
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
}

/* Textarea: kein eigener Scroll, echte H+Âhenvergr+Â+ƒerung des Bars */
#docEditorModal #docChatBar #docChatInput{
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 32px !important;            /* Starth+Âhe ~ Button */
  max-height: 50vh !important;            /* Sicherheitsdeckel */
  line-height: 1.4 !important;
  padding: 6px 8px !important;
  border: 0 !important; outline: 0 !important;
  resize: none !important;
  overflow: hidden !important;            /* <ÔÇö wichtig: kein eigener Scroll */
}

/* Dokument-Scroller bekommt Platz bis zur Chatleiste (JS setzt --doc-chat-h) */
#docEditorModal .va-editor__body .va-editor__scroll{
  position: relative !important;
  padding-bottom: calc(var(--doc-chat-h, 16px) + 16px) !important;
  overflow-x: hidden !important;
}





/* Doc-Chat: nach oben wachsend + Buttons unten ausgerichtet */
#docEditorModal #docChatBar .chat-input-wrap{
  display:flex !important;
  align-items:flex-end !important;
  gap:.5rem !important;
  height:auto !important;
  max-height:none !important;
}
#docEditorModal #docChatBar .input-actions-right{
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.5rem !important;
  flex:0 0 auto !important;
}
#docEditorModal #docChatInput{
  flex:1 1 auto !important;
  resize:none !important;
  overflow:hidden !important;
  min-height:64px !important;
  line-height:1.4 !important;
}
#docEditorModal .va-editor__body .va-editor__scroll{
  overflow-x:hidden !important;
  padding-bottom:var(--doc-chat-h, 16px) !important;
}



/* Doc-Chat: fester 3-Zeilen-Block mit internem Scroll */
#docEditorModal #docChatInput{
  overflow-y: auto !important; /* zeigt Scrollbar ab Zeile 4 */
  resize: none !important;     /* keine manuelle Gr+Â+ƒen+ñnderung */
  box-sizing: border-box !important;
}




/* === DROP-IN: Full-height Chat + b++ndige Spalten (++berschreibt fr++here Regeln) === */

/* Seite selbst nicht scrollen lassen */
body.project-page { overflow: hidden; }

/* Der 3-Spalten-Wrapper f++llt den Viewport unter dem Header */
body.project-page .project-layout {
  height: calc(100dvh - var(--header-h,72px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Rechte Spalte beginnt b++ndig mit dem Chat-Header und scrollt intern bei Bedarf */
body.project-page .project-right {
  position: sticky !important;
  top: var(--header-h,72px) !important;       /* KEIN +16px Offset */
  align-self: start !important;
  max-height: calc(100dvh - var(--header-h,72px)) !important;
  overflow: auto !important;
}



/* Eingabe w+ñchst nach oben bis max. 30% der Seite; danach eigener Scroll */
#chatInput {
  resize: none !important;
  min-height: 44px !important;
  max-height: 30dvh !important;
  overflow: auto !important;
}




/* === DROP-IN: DOC CHAT INPUT ÔÇô fester 3-Zeilen-Block mit interner Scrollbar === */
/* Greift im Doc-Editor sicherer als +ñltere Regeln. */
#docEditorModal #docChatBar #docChatInput,
#docEditorModal .va-editor__footer #docChatBar #docChatInput,
#vergabeunterlagen #docChatBar #docChatInput {
  /* H+Âhe exakt 3 Zeilen (inkl. Padding dank border-box) */
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  height: calc(1.4em * 3) !important;
  min-height: calc(1.4em * 3) !important;
  max-height: calc(1.4em * 3) !important;

  /* Scrollen statt wachsen */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  resize: none !important;

  /* Mobile/Safari: fl++ssiges Scrollen */
  -webkit-overflow-scrolling: touch !important;
}

/* Falls +ñltere Bl+Âcke eine fixe H+Âhe f++r die ganze Bar erzwingen: neutralisieren */
#docEditorModal #docChatBar,
#vergabeunterlagen #docChatBar {
  height: auto !important;
  min-height: 0 !important;
}



/* === FINAL OVERRIDES: Chat/Right b++ndig unter Header, Chat f++llt Spalte === */

/* Der Grid-Wrapper f++llt den Viewport (unterhalb des Headers) und scrollt NICHT */
body.project-page .project-layout{
  height: calc(100dvh - var(--header-h,72px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: start !important;
}

/* Rechte Spalte b++ndig unter dem Header, eigener Scroll bei Bedarf */
body.project-page .project-right{
  position: sticky !important;
  top: var(--header-h,72px) !important;     /* <ÔÇö KEIN zus+ñtzlicher Offset */
  align-self: start !important;
  max-height: calc(100dvh - var(--header-h,72px)) !important;
  overflow: auto !important;
  margin-top: 0 !important;
}



/* DOC-CHAT: 3..8 Zeilen, interner Scroll ab Zeile 9 (nur Doc-Editor) */
#docEditorModal #docChatInput {
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  resize: none !important;
  line-height: 1.4 !important;               /* Referenz f++r 3/8 Zeilen */
  /* scrollbar stabil (optional, moderne Browser) */
  scrollbar-gutter: stable both-edges;
}





/* Rechte Spalte (Bedarfserfassung) oben ÔÇ×anklebenÔÇ£ */
body.project-page .project-right{
  position: sticky !important;
  top: calc(var(--header-h,72px) + 8px) !important;
  align-self: start !important;
}
body.project-page .project-right .projekt-info-box,
body.project-page .project-right .va-rightbox{
  position: static !important;
  width: 100% !important;
  margin: 0 0 14px 0 !important;
}




/* Sicherheitsnetz: alte Regeln global neutralisieren */
.chat-input-bar{ position: static !important; top:auto !important; bottom:auto !important; }

/* Rechte Spalte sauber oben anheften und unabh+ñngig scrollen */
body.project-page .project-right{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  max-height: calc(100dvh - var(--header-h,72px)) !important;
  overflow: auto !important;
  align-self: start !important;
  margin-top: 0 !important;
}



/* === DOC-CHAT: Scrollbarkeit im Chat Input =============================== */
#docEditorModal #docChatInput{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  resize: none !important;
  box-sizing: border-box !important;
}




/* === VERGABEUNTERLAGEN ÔÇô FINAL LAYOUT OVERRIDES (harte Variante) === */

/* Seite selbst nicht scrollen; H+Âhe = 100dvh */
html, body.project-page{ height:100%; overflow:hidden !important; }

/* 3-Spalten-Grid ++ber volle Resth+Âhe unter dem Header */
body.project-page .project-layout{
  display:grid !important;
  grid-template-columns: minmax(240px,18vw) minmax(640px,55vw) minmax(320px,360px) !important;
  column-gap: 22px !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  align-items: stretch !important;
  justify-content: center !important;       /* mittlere Spalte zentriert im Gesamtgrid */
  overflow: hidden !important;
}

/* Spalten selbst scrollen bei +£berl+ñnge */
body.project-page .project-left,
body.project-page .project-right{
  overflow:auto !important;
  min-height:0 !important;
}

/* rechte ÔÇ×BedarfserfassungÔÇ£-Spalte oben kleben */
body.project-page .project-right{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  align-self: start !important;
}



/* Titel im Chat-Header gr+Â+ƒer */
body.project-page .chat-topbar .chat-topbar-title strong{
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
}





/* DocEditor: AG-Logo oben rechts */
#docEditor .va-doc-logo,
.va-doc-host .va-doc-logo {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .5rem;
}
#docEditor .va-doc-logo img,
.va-doc-host .va-doc-logo img {
  max-height: 64px;
  height: auto;
  width: auto;
}



/* === FINAL FIX: Chat-Footer b++ndig unten, nur Messages scrollen (harte Variante) === */

/* Scroll nur innerhalb der Spalten, NICHT auf Body */
html, body.project-page { height: 100%; overflow: hidden !important; }

/* Grid-H+Âhe = Viewport ÔÇô Header; mittlere Spalte = Chat */
body.project-page .project-layout{
  display: grid !important;
  grid-template-columns: minmax(240px,18vw) minmax(640px,55vw) minmax(320px,360px) !important;
  column-gap: 22px !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Linke/rechte Spalte d++rfen intern scrollen */
body.project-page .project-left,
body.project-page .project-right{
  overflow: auto !important;
  min-height: 0 !important;
}

/* Rechte Spalte oben kleben */
body.project-page .project-right{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  overflow: auto !important;
  align-self: start !important;
}




/* Titel gr+Â+ƒer */
body.project-page .project-chat .chat-topbar .chat-topbar-title strong{
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
}



/* === VERGABEUNTERLAGEN ÔÇô Chat: Input unten, Verlauf nutzt Restfl+ñche (FINAL) === */
/* Seite nicht scrollen ÔÇô Spaltenh+Âhe = Viewport minus Header */
html, body.project-page { height:100%; overflow:hidden !important; }

/* 3-Spalten-Grid ++ber volle H+Âhe unter dem Header */
body.project-page .project-layout{
  display:grid !important;
  grid-template-columns: minmax(240px,18vw) minmax(640px,55vw) minmax(320px,360px) !important;
  column-gap: 22px !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Linke/rechte Spalte scrollen selbst */
body.project-page .project-left,
body.project-page .project-right{
  overflow:auto !important;
  min-height:0 !important;
}

/* Rechte Spalte ÔÇ×stickyÔÇ£ am Header */
body.project-page .project-right{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  align-self: start !important;
}




/* === VERGABEUNTERLAGEN ÔÇô Chat: Input unten, Verlauf nutzt Restfl+ñche (FINAL) === */
/* Seite nicht scrollen ÔÇô Spaltenh+Âhe = Viewport minus Header */
html, body.project-page { height:100%; overflow:hidden !important; }

/* 3-Spalten-Grid ++ber volle H+Âhe unter dem Header */
body.project-page .project-layout{
  display:grid !important;
  grid-template-columns: minmax(240px,18vw) minmax(640px,55vw) minmax(320px,360px) !important;
  column-gap: 22px !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Linke/rechte Spalte scrollen selbst */
body.project-page .project-left,
body.project-page .project-right{
  overflow:auto !important;
  min-height:0 !important;
}

/* Rechte Spalte ÔÇ×stickyÔÇ£ am Header */
body.project-page .project-right{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  align-self: start !important;
}





/* Retrieval-Subtext im Processing-Overlay */
#vaProcessing .va-processing__steps .step .step-subtext {
  margin-left: .5rem;
  font-weight: 600;
  white-space: nowrap;
}
#vaProcessing .va-processing__steps .step .step-subtext::before {
  content: "";
  display: inline-block;
  margin-right: .35rem;
  opacity: .85;
}




/* === PROJECT CHAT ÔÇö FLOOR-LOCK FINAL (Vergabeunterlagen) === */

/* 0) Globale Feinjustage: Abstand zum Seitenende hart auf ~2px */
body.project-page{
  --stick-bottom: 2px !important;
}

/* 1) Drei-Spalten-Grid auf volle H+Âhe unter dem Header */
html, body.project-page { height: 100%; overflow: hidden !important; }
body.project-page .project-layout{
  display: grid !important;
  grid-template-columns: minmax(240px,18vw) minmax(640px,55vw) minmax(320px,360px) !important;
  column-gap: 22px !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

/* Linke & rechte Spalte scrollen selbst */
body.project-page .project-left,
body.project-page .project-right{
  overflow: auto !important;
  min-height: 0 !important;
}

/* Rechte Spalte oben fixieren (unter dem Header) */
body.project-page .project-right{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  align-self: start !important;
}





/* Drop-in: Doc-Footer stets ++ber Overlay */
#docEditorModal .va-modal__overlay { z-index: 1 !important; }
#docEditorModal .va-modal__dialog  { z-index: 2 !important; }
#docEditorModal .va-editor__footer { z-index: 999 !important; }



/* Processing: Untertitelzeile f++r Schritt 2 (bricht sauber um, st+Ârt den Dot nicht) */
.va-processing__steps .step .step-subtext{
  display:block; margin-top:2px; font-size:.92rem; opacity:.9;
  white-space:normal; word-break:break-word; line-height:1.25;
}
#vaProcDebug a{ color:inherit; text-decoration:underline; }



/* --- DROP-IN: Processing-Subtext immer in neuer Zeile, Dot unver+ñndert --- */
#vaProcessing .va-processing__steps .step {
  display: flex;
  align-items: flex-start;    /* verhindert "Dot-Mitwachsen" bei hoher Zeile */
  flex-wrap: wrap;            /* erlaubt Umbruch */
  gap: .5rem;
}
#vaProcessing .va-processing__steps .step .dot {
  flex: 0 0 auto;             /* feste Gr+Â+ƒe, kein Stretching */
  width: 10px; height: 10px; border-radius: 50%;
}
#vaProcessing .va-processing__steps .step .step-subtext {
  flex-basis: 100%;           /* immer neue Zeile */
  margin-left: 1.25rem;       /* Einzug unterhalb des Textes (nicht unter Dot) */
  font-size: .95em;
  line-height: 1.25;
  white-space: normal;        /* wichtig: keine Einzeiler erzwingen */
}



/* === FINAL NEUTRALIZER === */
body.project-page { --stick-bottom: 2px !important; } /* knapper Fu+ƒraum */




/* === VA-CHAT ISOLATION (Chat-Layout ohne alte JS-Resizes) ============ */
body.project-page .project-layout > .va-chat{
  grid-column: 2 !important;            /* mittlere Spalte */
}

/* Container: f++llt den Viewport unter dem Header; innen wird gescrollt */
body.project-page .va-chat > .chat-container{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;

  /* dein bestehender Look, stabilisiert */
  border: 1px solid #86d8f0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 10px 36px rgba(3,32,66,.06) !important;
}

/* Innenleben: 3 Reihen ÔÇö Topbar | Messages (1fr) | Input */
body.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  height: 100% !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Nur der Verlauf scrollt; NIRGENDS feste H+Âhen */
body.project-page .va-chat .chat-messages{
  min-height: 0 !important;
  overflow: auto !important;
  height: auto !important;
  margin: 0 !important;
}

/* Footer ist Teil des Flows  bleibt unten */
body.project-page .va-chat .chat-input-bar{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  padding: .6rem 16px !important;
}

/* Gurt & Hosentr+ñger: globale Alt-Regeln neutralisieren */
body.project-page .va-chat .chat-container *,
body.project-page .va-chat .chat-input-bar,
body.project-page .va-chat .chat-messages{
  top: auto !important;
  bottom: auto !important;
}



.project-page .chat-messages--flush { padding-bottom:0 !important; margin-bottom:0 !important; }



/* Vergabeunterlagen: Steps ÔÇô Dot zur ersten Zeile zentrieren */
#vaProcessing .va-processing__steps .step{
  display: flex;
  align-items: center !important;   /* statt flex-start */
  flex-wrap: wrap;                  /* Subtext darf umbrechen */
  gap: .6rem;                       /* wie Basissetup */
}

/* Einheitliche Dot-Gr+Â+ƒe (es existieren 10px/12px Varianten) */
#vaProcessing .va-processing__steps .step .dot{
  flex: 0 0 auto;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
  align-self: center;               /* falls +ñltere Regeln greifen */
}

/* Hauptzeilentext */
#vaProcessing .va-processing__steps .step .label,
#vaProcessing .va-processing__steps .step > span:not(.dot):not(.step-subtext){
  line-height: 1.25;
}

/* Subtext: neue Zeile, sauber einger++ckt unter dem Text (nicht unter dem Dot) */
#vaProcessing .va-processing__steps .step .step-subtext{
  flex-basis: 100%;
  margin-left: calc(12px + .6rem);  /* Einzug = Dot + Gap */
  margin-top: .125rem;
  line-height: 1.25;
  white-space: normal;
}


:root{
  --va-chat-fixed-gap: 8px;
  --va-chat-input-h: 64px;  /* JS ++berschreibt exakt */
}





/* Inhalte in der Input-Bar */
.project-page .va-chat .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: center !important;         /* leer: alles in einer Linie */
  gap: .5rem !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
}
.project-page .va-chat #chatInput{
  flex: 1 1 auto !important;
  min-height: 36px !important;            /* exakt eine Zeile im Leerlauf */
  max-height: 50vh !important;
  line-height: 1.45 !important;
  border: 0 !important; outline: 0 !important; resize: none !important;
  background: transparent !important; color: #0B2941 !important;
  padding: 8px 112px 8px 60px !important; /* Platz f++r + / Mic / Senden */
  overflow-y: auto !important;
}
.project-page .va-chat .upload-inside{
  position: absolute !important;
  left: 12px; bottom: 10px; width: 36px; height: 36px;
  border: 1px solid #CFE0F1; border-radius: 10px;
  background: #0f2a3a0a; color: #476887; display: inline-flex;
  align-items: center; justify-content: center;
}
.project-page .va-chat .input-actions-right{
  position: absolute !important;
  right: 12px; bottom: 10px; display: inline-flex;
  align-items: center; gap: .45rem;
}
.project-page .va-chat .input-actions-right .btn-icon,
.project-page .va-chat .input-actions-right .btn-primary{
  height: 36px !important; display: inline-flex; align-items: center; justify-content: center;
}

/* Ab ~2 Zeilen: Textfeld springt nach oben in eine eigene Zeile;
   Buttons bleiben unten; die Bar w+ñchst nach OBEN (overlay) */
.project-page .va-chat .chat-input-wrap.is-multiline{
  flex-wrap: wrap !important;
  align-items: center !important;
}
.project-page .va-chat .chat-input-wrap.is-multiline #chatInput{
  order: -1 !important;
  flex-basis: 100% !important;
  min-height: calc(1.45em * 2) !important;
  padding: 10px 12px !important;          /* eigene Zeile ÔåÆ normale Innenabst+ñnde */
}
.project-page .va-chat .chat-input-wrap.is-multiline .upload-inside,
.project-page .va-chat .chat-input-wrap.is-multiline .input-actions-right{
  order: 2 !important;
}



/* Beispiel (falls noch nicht vorhanden) */
.va-processing__steps .step.ok .dot { background: #16a34a; }     /* gr++n */
.va-processing__steps .step.active .dot { box-shadow: 0 0 0 4px rgba(0,0,0,.06); }
.va-processing__steps .step.err .dot { background: #dc2626; }     /* rot */





/* === VA-CHAT: b++ndig bis unten + Input-Leiste als Overlay === */
.project-page .va-chat .chat-container{
  /* f++llt den Bereich zwischen Header und (ggf. nicht vorhandenen) Footer */
  margin: 0 !important;
  overflow: hidden !important;
}

.project-page .va-chat .chat-inner{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Messages nutzen den gesamten Rest und scollen; 
   unten nur so viel Luft wie die Basis-H+Âhe der Leiste ohne Text */
.project-page .va-chat { --va-input-base-h: 44px; }   /* 36px Button + ~8px Innenabstand */
.project-page .va-chat .chat-messages{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  margin: 0 !important;
}


/* Inhalt der Leiste: Buttons unten b++ndig, Text w+ñchst nach oben */
.project-page .va-chat .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;     /* Buttons ÔÇ×bilden den BodenÔÇ£ */
  gap: .5rem !important;
}

/* flacher Leerlauf */
.project-page .va-chat #chatInput{
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 36px !important;
  max-height: calc(var(--chat-viewport-h, 100dvh) * .5) !important;
  line-height: 1.4 !important;
  padding: 8px 112px 8px 60px !important;  /* Platz f++r + links, Mic+Senden rechts */
  border: 0 !important; outline: 0 !important; resize: none !important;
  background: transparent !important;
  overflow-y: auto !important;
}

/* + links unten, Mic/Senden rechts unten */
.project-page .va-chat .upload-inside{
  position: absolute !important; left: 16px; bottom: 10px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid #CFE0F1; background:#0f2a3a0a; color:#476887;
  display: inline-flex; align-items: center; justify-content: center;
}
.project-page .va-chat .input-actions-right{
  position: absolute !important; right: 16px; bottom: 10px;
  display: inline-flex !important; align-items: center !important; gap: .45rem !important;
}
.project-page .va-chat .input-actions-right .btn-icon,
.project-page .va-chat .input-actions-right .btn-primary{
  height: 36px !important; display: inline-flex !important; align-items:center !important; justify-content:center !important;
}

/* Ab 2 Zeilen Text: Feld springt nach oben, Leiste ++berdeckt Nachrichten */
.project-page .va-chat .chat-input-wrap.is-multiline{
  flex-wrap: wrap !important; align-items: center !important;
}
.project-page .va-chat .chat-input-wrap.is-multiline #chatInput{
  order: -1 !important; flex-basis: 100% !important;
  min-height: calc(1.5em * 2) !important; padding: 10px 12px !important;
}
.project-page .va-chat .chat-input-wrap.is-multiline .upload-inside,
.project-page .va-chat .chat-input-wrap.is-multiline .input-actions-right{
  order: 2 !important;
}

/* Sicherheitsnetz: alte globale Regeln wirkungslos machen */
.project-page .va-chat .chat-input-bar,
.project-page .va-chat .chat-input-wrap,
.project-page .va-chat #chatInput,
.project-page .va-chat .chat-messages{
  margin: 0 !important;
}



/* === VA-CHAT: Messages wirklich b++ndig bis unten, Input ++berlagert === */

/* 1) Container: volle H+Âhe unter dem Header, nur innen scrollen */
.project-page .va-chat .chat-container{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  overflow: hidden !important;
}

/* 2) Kein Grid im Chat-Innenleben (sonst bleibt unten eine leere Zeile) */
.project-page .va-chat > .chat-container > .chat-inner{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 3) Verlauf f++llt den Rest ÔÇô ohne Bodenabstand */
.project-page .va-chat #chatMessages{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  margin: 0 !important;
  padding-bottom: 0 !important;      /* <ÔÇö wirklich b++ndig */
}
/* falls die Klasse gesetzt ist, ebenfalls 0 erzwingen */
.project-page .va-chat #chatMessages.chat-messages--flush{
  padding-bottom: 0 !important;
}


/* 5) Kompakter Leerlauf in der Zeile */
.project-page .va-chat .chat-input-wrap{ align-items: center !important; }
.project-page .va-chat #chatInput{
  min-height: 36px !important;
  height: auto !important;
  max-height: 50vh !important;
  resize: none !important;
}



/* === VA-CHAT: finales Layout (Topbar | Messages | Input) ================== */

/* Container: an den Header ÔÇ×anklebenÔÇ£ und auf Viewporth+Âhe begrenzen */
.project-page .va-chat .chat-container{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* 3-Zeilen-Grid auf dem Inneren */
.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* topbar | messages | input */
  height: 100% !important;
  gap: 0 !important;
}

/* Topbar bleibt im Fluss */
.project-page .va-chat .chat-topbar{ position: static !important; margin: 0 !important; }

/* Verlauf: nimmt den gesamten Restplatz ein und scrollt */
.project-page .va-chat .chat-messages,
.project-page .va-chat .chat-messages--flush{
  position: static !important;   /* Overlay-Regeln au+ƒer Kraft setzen */
  min-height: 0 !important;      /* <ÔÇö wichtig, damit 1fr wirklich schrumpfen darf */
  height: auto !important;
  overflow: auto !important;
  margin: 0 !important;
  padding-bottom: 0rem !important;
}

/* Input-Bar b++ndig am Grid-Fu+ƒ ÔÇô NICHT sticky/fixed */
.project-page .va-chat .chat-input-bar{
  position: static !important; inset: auto !important;
  width: 100% !important; margin: 0 !important;
}

/* Falls chat-ux.js "va-fixed-bottom" setzt: hier neutralisieren */
.project-page .va-chat .chat-input-bar.va-fixed-bottom{
  position: static !important; left:auto !important; right:auto !important; width:auto !important;
}

/* Kompakter Grundzustand f++r die Zeile (damit sie nicht "leer" zu hoch ist) */
.project-page .va-chat .chat-input-wrap{ align-items: flex-end !important; }
.project-page .va-chat #chatInput{
  min-height: 36px !important; /* kleiner als vorher */
  height: auto !important;
  max-height: 50vh !important;
  resize: none !important;
  overflow-y: auto !important;
  /* etwas schlankere Innenabst+ñnde, damit die Gesamth+Âhe runtergeht */
  padding: 8px 112px 8px 60px !important;
}
.project-page .va-chat .upload-inside{ bottom: 8px !important; width: 32px !important; height: 32px !important; }
.project-page .va-chat .input-actions-right{ bottom: 8px !important; }



/* === VA-CHAT: HARTE R+£CKSTELLUNG AUF GRID (Topbar | 1fr | Input) === */

/* 1) Container: unter Header ÔÇ£anklebenÔÇØ, innen scrollt nur der Verlauf */
.project-page .va-chat .chat-container{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  overflow: hidden !important;
}

/* 2) Innenleben = 3 Zeilen; KEIN absolute/overlay mehr */
.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  height: 100% !important;
  gap: 0 !important;
}

/* 3) Messages: echte 1fr-Zeile, ohne Zusatz-Padding und ohne absolute */
.project-page .va-chat #chatMessages,
.project-page .va-chat .chat-messages,
.project-page .va-chat .chat-messages--flush{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;      /* entscheidend, damit 1fr wirklich schrumpfen darf */
  height: auto !important;
  overflow: auto !important;
}

/* 4) Input-Bar: Teil des Flows, b++ndig unten */
.project-page .va-chat .chat-input-bar{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
}

/* 5) Kompakter Leerzustand der Textarea (w+ñchst nach oben, eigener Scroll) */
.project-page .va-chat #chatInput{
  min-height: 36px !important;
  height: auto !important;
  max-height: 50vh !important;
  resize: none !important;
  overflow-y: auto !important;
}

/* 6) Alt-Overlay-Regeln explizit aushebeln (die Problemquelle) */
.project-page .va-chat .chat-messages,
.project-page .va-chat .chat-messages--flush,
.project-page .va-chat .chat-input-bar{
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  background: inherit !important;               /* beseitigt Overlay-Gradient */
  z-index: auto !important;
}



/* === FINALES Layout f++r <section class="va-chat"> === */

/* 1) Container f++llt den Bereich unter dem Header ÔÇô ohne zus+ñtzliche Luft nach unten */
body.project-page .va-chat .chat-container {
  position: sticky !important;
  top: var(--header-h, 72px) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* 2) Innenleben: genau drei Zeilen ÔÇô Topbar | Messages | Input */
body.project-page .va-chat .chat-inner {
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  height: 100% !important;
  width: 100% !important;
}

/* 3) Messages-Zeile nimmt den gesamten verbleibenden Platz ein und hat KEIN extra Bottom-Padding */
body.project-page .va-chat .chat-messages {
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
  margin: 0 !important;
  padding-bottom: 0 !important; /* wichtig: kein Luftspalt unterhalb der letzten Nachricht */
}

/* 4) Input-Leiste bleibt am Fu+ƒ der Grid-Zeile (kein fixed/overlay) */
body.project-page .va-chat .chat-input-bar {
  position: static !important;
  margin: 0 !important;
}





/* === VA-CHAT: finales, robustes Layout (Topbar | Messages | Input) === */

/* 1) Container f++llt den Viewport unter dem Header.
   chat-ux.js liefert --chat-viewport-h bereits (100dvh - header - footer). */
main.project-main.project-page .va-chat .chat-container{
  position: sticky !important;
  top: var(--header-h, 72px) !important;
  height: var(--chat-viewport-h, calc(100dvh - var(--header-h,72px) - 4px)) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 2) Innenleben = 3 Zeilen: Topbar | (1fr) Messages | Input; keine Gaps */
main.project-main.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  height: 100% !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* 3) Messages f++llen den gesamten Mittelbereich, ohne Luftspalt unten */
main.project-main.project-page .va-chat .chat-messages{
  position: static !important;    /* Overlay/absolute ausschalten */
  margin: 0 !important;
  padding: 12px 16px 12px 16px !important;
  min-height: 0 !important;       /* wichtig f++r echtes Shrinken von 1fr */
  height: auto !important;
  overflow: auto !important;
}

/* 4) Input-Bar ist ganz unten im Grid-Fluss (kein sticky/fixed in va-chat) */
main.project-main.project-page .va-chat .chat-input-bar{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  /* optische Kleinigkeiten nach Wunsch:
  border-top: 1px solid #D6E4F3 !important;
  background: #fff !important;
  padding: 8px 12px !important;
  */
}

/* 5) Textfeld ÔÇô kleiner Leerzustand, Wachsen steuert JS (chat-ux.js) */
main.project-main.project-page .va-chat #chatInput{
  width: 100% !important;
  min-height: 36px !important;    /* 1 Zeile als Start ÔÇô kann auch noch kleiner */
  height: auto !important;        /* keine starre H+Âhe */
  max-height: none !important;    /* keine harte Kappe in CSS */
  resize: none !important;
  overflow-y: hidden !important;  /* JS schaltet bei Bedarf auf auto */
}

/* 6) Sicherheitsnetz: potentielle Alt-Overlays in va-chat wirkungslos machen */
main.project-main.project-page .va-chat .chat-messages,
main.project-main.project-page .va-chat .chat-input-bar{
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  z-index: auto !important; background: inherit !important;
}

/* 7) (Optional) Keine Au+ƒenabst+ñnde, damit nichts ÔÇ×dr++cktÔÇ£ */
main.project-main.project-page .va-chat .chat-container > *,
main.project-main.project-page .va-chat .chat-inner > *{
  margin: 0 !important;
}




/* === VA-CHAT FINAL FLOOR-LOCK (nur f++r Projektseite) =================== */

main.project-main.project-page .va-chat .chat-container{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  min-height: calc(100dvh - var(--header-h,72px)) !important;
  overflow: hidden !important;
  margin: 0 !important;
}

main.project-main.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* Topbar | Messages | Input */
  height: 100% !important;
  width: 100% !important;
  gap: 0 !important;
}

main.project-main.project-page .va-chat .chat-messages{
  position: static !important;
  min-height: 0 !important;          /* wichtig f++r 1fr-Schrumpfen */
  height: auto !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 12px 14px 8px 14px !important; /* kein k++nstliches Bottom-Padding */
}

main.project-main.project-page .va-chat .chat-input-bar{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

main.project-main.project-page .va-chat #chatInput{
  width: 100% !important;
  min-height: 36px !important;       /* kompakter Leerlauf */
  height: auto !important;           /* echtes Wachsen erlaubt */
  max-height: 50vh !important;       /* obere Kappe */
  resize: none !important;
  overflow-y: auto !important;       /* ab Kappe scrollt nur das Feld */
  padding: 8px 112px 8px 60px !important; /* Platz f++r +/Mic/Senden */
}

/* Alt-Overlay-Relikte unsch+ñdlich machen */
main.project-main.project-page .va-chat .chat-messages,
main.project-main.project-page .va-chat .chat-messages--flush,
main.project-main.project-page .va-chat .chat-input-bar{
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  z-index:auto !important; background:inherit !important;
  padding-bottom: 0 !important;
}

/* Falls irgendwo doch .va-fixed-bottom gesetzt w++rde: neutralisieren */
main.project-main.project-page .va-chat .chat-input-bar.va-fixed-bottom{
  position: static !important; width:auto !important;
}


/* DROP-IN: Pfeil im Retrieval-Subtext entfernen */
#vaProcessing .va-processing__steps .step .step-subtext::before,
#vaProcessing .va-processing__steps .step .text::before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}



/* === VA-CHAT FINAL OVERRIDE (stellt Grid-Layout sicher) ================ */
main.project-main.project-page .va-chat .chat-container{ 
  position: sticky !important;
  top: var(--header-h,72px) !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  min-height: calc(100dvh - var(--header-h,72px)) !important;
  overflow: hidden !important;
  margin: 0 !important;
}
main.project-main.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  height: 100% !important; width: 100% !important;
  gap: 0 !important; padding: 0 !important;
}
main.project-main.project-page .va-chat .chat-messages{
  position: static !important; min-height: 0 !important; height: auto !important;
  overflow: auto !important; margin: 0 !important; padding-bottom: 0 !important;
}
main.project-main.project-page .va-chat .chat-messages,
main.project-main.project-page .va-chat .chat-messages--flush,
main.project-main.project-page .va-chat .chat-input-bar{
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  z-index:auto !important; background:inherit !important; padding-bottom: 0 !important;
}
main.project-main.project-page .va-chat .chat-input-bar{
  position: static !important; inset: auto !important; margin: 0 !important;
}
main.project-main.project-page .va-chat #chatInput{
  width: 100% !important; min-height: 36px !important; height: auto !important;
  max-height: none !important; resize: none !important; overflow-y: hidden !important;
}


/* Processing: Trefferzahl ohne Pfeil */
#vaProcessing .va-processing__steps .step .step-subtext::before {
  content: none !important;
}





/* === VA-CHAT FLOOR-LOCK ÔÇö FINAL OVERRIDES (als Allerletztes in projekt.css) === */

/* Container f++llt Viewport unter dem Header; nur innen wird gescrollt */
body.project-page main.project-main section.va-chat .chat-container{
  position: sticky !important;
  top: var(--header-h, 72px) !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Innenleben = 3 Zeilen: Topbar | (1fr) Messages | Input */
body.project-page main.project-main section.va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Verlauf f++llt den gesamten Mittelbereich ÔÇô kein Bodenabstand */
body.project-page main.project-main section.va-chat .chat-messages{
  position: static !important;       /* kein sticky/fixed */
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
  margin: 0 !important;
  padding-bottom: 0 !important;      /* <ÔÇö wei+ƒer Spalt aus */
}

/* Sicherheitsnetz: alle evtl. alten Positionierungen neutralisieren */
body.project-page main.project-main section.va-chat .chat-messages,
body.project-page main.project-main section.va-chat .chat-input-bar{
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  z-index: auto !important;
}

/* Input-Leiste bleibt unten im Grid-Fluss */
body.project-page main.project-main section.va-chat .chat-input-bar{
  position: static !important;
  margin: 0 !important;
}

/* Inhalt der Leiste: Buttons ÔÇ×bilden den BodenÔÇ£, Text w+ñchst nach oben */
body.project-page main.project-main section.va-chat .chat-input-wrap{
  display: flex !important;
  align-items: flex-end !important;
  gap: .5rem !important;
}

/* Textarea: flacher Start, echtes Auto-Grow (JS k++mmert sich), kein eigener Scroll */
body.project-page main.project-main section.va-chat #chatInput{
  width: 100% !important;
  min-height: 36px !important;
  height: auto !important;
  max-height: 50vh !important;       /* Sicherheitsdeckel */
  resize: none !important;
  overflow: hidden !important;        /* Leiste w+ñchst statt Textarea-Scroll */
}





/* === DROP-IN C: Logo oben rechts im Dokument === */
#docEditor,
.va-doc-host { position: relative; }

#docEditor .va-doc-logo,
.va-doc-host .va-doc-logo {
  position: absolute;
  top: 12px;
  right: 12px;
  max-width: 140px;
  z-index: 2;
}

#docEditor .va-doc-logo img,
.va-doc-host .va-doc-logo img {
  display: block;
  max-width: 100%;
  height: auto;
  opacity: 0.95;
}

#docEditor.has-doc-logo,
.va-doc-host.has-doc-logo {
  padding-top: 96px;
}

#docEditor.has-doc-logo .va-doc-logo + *,
.va-doc-host.has-doc-logo .va-doc-logo + * {
  margin-top: 0;
}

/* Optional sch+Ân im Druck */
@media print {
  #docEditor .va-doc-logo,
  .va-doc-host .va-doc-logo {
    top: 10mm;
    right: 10mm;
    max-width: 35mm;
  }
}




/* === VA-CHAT FINAL LOCK (vergabeunterlagen) ============================ */
/* Layout: Topbar | 1fr (Messages) | Input ÔÇô ohne Overlays, ohne Kappen */

main.project-main.project-page .va-chat > .chat-container{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  min-height: calc(100dvh - var(--header-h,72px)) !important;
  overflow: hidden !important;
  margin: 0 !important;
}

main.project-main.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  height: 100% !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
}

main.project-main.project-page .va-chat .chat-messages{
  /* der Verlauf nimmt den ganzen Mittelraum ein */
  min-height: 0 !important;
  height: 100% !important;
  overflow: auto !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}

main.project-main.project-page .va-chat .chat-input-bar{
  /* Teil des Flows (nicht sticky), liegt b++ndig unten */
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
}

/* Alt-Relikte (absolute/sticky) wirkungslos machen */
main.project-main.project-page .va-chat .chat-messages,
main.project-main.project-page .va-chat .chat-input-bar,
main.project-main.project-page .va-chat .chat-container *{
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  z-index:auto !important;
}




/* Logo oben rechts im DocViewer */
#vaDocHost .va-doc-logo,
.va-doc-host .va-doc-logo {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
#vaDocHost .va-doc-logo img,
.va-doc-host .va-doc-logo img {
  max-height: 64px;
  height: auto;
}




/* === VA-CHAT: Buttons rechts unten, Input-Rahmen, Messages bis ganz unten === */
/* Gilt nur f++r die Vergabeunterlagen-Seite mit <main class="project-main project-page"> */

main.project-main.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* Topbar | Messages | Input */
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Messages spannen bewusst +£BER die Input-Zeile (liegen darunter) */
main.project-main.project-page .va-chat .chat-messages{
  grid-row: 2 / 4 !important;         /* spannt von Messages bis Input-Zeile */
  z-index: 0 !important;              /* unter der Eingabeleiste */
  height: 100% !important;            /* f++llt ihren Bereich voll aus */
  min-height: 0 !important;
  overflow: auto !important;
  margin: 0 !important;
  padding-bottom: 0 !important;       /* kein k++nstlicher Wei+ƒraum unten */
  position: relative !important;
}

/* Eingabeleiste bleibt als oberste Grid-Zeile sichtbar */
main.project-main.project-page .va-chat .chat-input-bar{
  grid-row: 3 / 4 !important;
  position: relative !important;
  z-index: 1 !important;              /* ++ber den Messages */
  margin: 0 !important;
  background: transparent !important;
}

/* Eingabe-"Karte" mit Rahmen und Platz f++r Icons links/rechts */
main.project-main.project-page .va-chat .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;   /* Buttons definieren die Grundlinie */
  gap: .5rem !important;

  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(10,40,70,.06) !important;

  /* Platz f++r Upload links und Buttons rechts */
  padding: 8px 112px 8px 60px !important;
}

/* Upload-Plus links unten in der Leiste */
main.project-main.project-page .va-chat .upload-inside{
  position: absolute !important;
  left: 10px !important;
  bottom: 10px !important;
  width: 36px !important; height: 36px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid #DBE6F3 !important; border-radius: 10px !important;
  background: transparent !important;
  color: #476887 !important;
}

/* Mic- + Senden-Buttons wieder rechts unten, innerhalb der Leiste */
main.project-main.project-page .va-chat .input-actions-right{
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
}

/* Textfeld: schlank starten, JS darf es hochziehen (Autogrow) */
main.project-main.project-page .va-chat #chatInput{
  width: 100% !important;
  min-height: 36px !important;        /* 1 Zeile im Leerlauf */
  height: auto !important;
  max-height: 50vh !important;        /* Cap ÔÇô ab dort scrollt das Feld */
  overflow-y: auto !important;
  resize: none !important;

  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}

/* Sicherheitsnetz: keine alte Absolute/Sticky-Position soll reinfunken */
main.project-main.project-page .va-chat .chat-messages,
main.project-main.project-page .va-chat .chat-input-bar{
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  z-index:auto !important;
}





/* VA-Editor: Chat-Input-Border b++ndig zum Dokumenttext */
body.project-page .va-chat .chat-input-bar .chat-input-wrap{
  width: calc(100% - 2rem) !important;  /* 1rem + 1rem Bubble-Padding */
  margin-inline: auto !important;
}






/* === VA-CHAT: Final Fix ÔÇô 1 Spalte, volle Breite, Messages bis unten === */

main.project-main.project-page .va-chat .chat-container{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  min-height: calc(100dvh - var(--header-h,72px)) !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* 1) Grid sauber definieren: 1 Spalte, 3 Zeilen */
main.project-main.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;  /* Topbar | Messages | Input */
  grid-template-columns: 1fr !important;         /* <-- erzwingt EINE Spalte */
  height: 100% !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* 2) Beide Bereiche immer ++ber die ganze Breite */
main.project-main.project-page .va-chat .chat-messages,
main.project-main.project-page .va-chat .chat-input-bar{
  grid-column: 1 / -1 !important;                /* volle Breite */
  width: 100% !important;
}

/* 3) Messages: echter Restplatz, kein k++nstlicher Bodenabstand */
main.project-main.project-page .va-chat .chat-messages{
  grid-row: 2 / 3 !important;                    /* NUR Zeile 2 (kein Overlay) */
  min-height: 0 !important;                      /* entscheidend f++r 1fr */
  height: auto !important;
  overflow: auto !important;
  margin: 0 !important;
  padding-bottom: 0 !important;                  /* wei+ƒer Steg weg */
  position: relative !important;
}

/* 4) Input unten im Flow (nicht sticky/fixed), volle Breite */
main.project-main.project-page .va-chat .chat-input-bar{
  grid-row: 3 / 4 !important;
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  background: transparent !important;
  width: 100% !important;
}

/* 5) Input-Karte + Buttons rechts unten wiederherstellen */
main.project-main.project-page .va-chat .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: .5rem !important;

  width: 100% !important;
  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(10,40,70,.06) !important;

  /* Platz f++r + links und Buttons rechts */
  padding: 8px 112px 8px 60px !important;
}

/* Plus-Button links unten */
main.project-main.project-page .va-chat .upload-inside{
  position: absolute !important;
  left: 10px !important; bottom: 10px !important;
  width: 36px !important; height: 36px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 1px solid #DBE6F3 !important; border-radius: 10px !important;
  background: transparent !important; color: #476887 !important;
}

/* Mic + Senden: rechts unten in der Leiste */
main.project-main.project-page .va-chat .input-actions-right{
  position: absolute !important;
  right: 12px !important; bottom: 10px !important;
  display: inline-flex !important; align-items: center !important; gap: .5rem !important;
}

/* Textfeld: kompakter Start, JS/Autogrow darf es erh+Âhen */
main.project-main.project-page .va-chat #chatInput{
  width: 100% !important;
  min-height: 36px !important;
  height: auto !important;
  max-height: 50vh !important;            /* ab dort scrollt das Feld */
  overflow-y: auto !important;
  resize: none !important;
  border: 0 !important; outline: 0 !important; background: transparent !important;
}

/* 6) Hard neutralize ÔÇô falls irgendwo noch Spalten/Sticky/Absolute reinfunken */
main.project-main.project-page .va-chat .chat-messages,
main.project-main.project-page .va-chat .chat-input-bar{
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  z-index:auto !important;
}
main.project-main.project-page .va-chat .chat-inner > *{
  min-width: 0 !important;                 /* verhindert Spalten-Schieben durch Overflow */
}



/* === VA-CHAT ÔÇö HARD FINAL (nur Projektseite) ============================ */
/* Container f++llt den Viewport unter dem Header; nur innen scrollen */
main.project-main.project-page .va-chat .chat-container{
  position: sticky !important;
  top: var(--header-h,72px) !important;
  height: calc(100dvh - var(--header-h,72px)) !important;
  width: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Innenleben: exakt 3 Zeilen, eine Spalte, volle Breite */
main.project-main.project-page .va-chat .chat-inner{
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr auto !important; /* Topbar | Messages | Input */
  height: 100% !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Alle drei Bereiche sollen die ganze Breite belegen */
main.project-main.project-page .va-chat .chat-topbar,
main.project-main.project-page .va-chat .chat-messages,
main.project-main.project-page .va-chat .chat-input-bar{
  grid-column: 1 / -1 !important;
}

/* Verlauf: wirklich die komplette mittlere Zeile nutzen */
main.project-main.project-page .va-chat .chat-messages{
  position: static !important;      /* keine Overlays mehr */
  margin: 0 !important;             /* keine L++cke erzeugen */
  padding: 12px 14px 0 !important;  /* unten 0  b++ndig zur Inputbar */
  min-height: 0 !important;
  height: 100% !important;          /* entspricht der 1fr-Zeile */
  overflow: auto !important;
}

/* Inputbar: Teil des Flusses, minimal im Leerlauf */
main.project-main.project-page .va-chat .chat-input-bar{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 10px 14px 12px !important;
  background: transparent !important;
  border: 0 !important;
}

/* Eingabe-ÔÇ×KarteÔÇ£: sichtbare Umrandung + Buttons rechts unten */
main.project-main.project-page .va-chat .chat-input-wrap{
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;         /* Buttons bilden die Baseline */
  gap: .5rem !important;
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #C8DBEE !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  box-shadow: 0 4px 16px rgba(10,40,70,.06) !important;
}

/* Textfeld: 1 Zeile Start ÔåÆ w+ñchst OHNE eigenen Scroll, Deckel bei 40vh */
main.project-main.project-page .va-chat #chatInput{
  flex: 1 1 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 36px !important;          /* Leerlauf = 1 Zeile */
  height: auto !important;              /* JS setzt reale H+Âhe */
  max-height: 40vh !important;          /* Sicherheitsdeckel */
  line-height: 1.45 !important;
  padding: 6px 112px 6px 44px !important;/* Platz f++r + links + Buttons rechts */
  border: 0 !important; outline: 0 !important;
  background: transparent !important;
  resize: none !important;
  overflow: hidden !important;          /* kein interner Scroll */
}

/* + links unten, Buttons rechts unten ÔÇô innerhalb des Wraps */
main.project-main.project-page .va-chat .upload-inside{
  position: absolute !important;
  left: 8px; bottom: 8px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #C8DBEE; border-radius: 10px; background: #0F2A3A0F; color:#1d4767;
}
main.project-main.project-page .va-chat .input-actions-right{
  position: absolute !important;
  right: 8px; bottom: 8px;
  display: inline-flex !important; align-items: center !important; gap: .5rem !important;
}
main.project-main.project-page .va-chat .input-actions-right .btn-icon,
main.project-main.project-page .va-chat .input-actions-right .btn-primary{
  height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}

/* Altregeln endg++ltig neutralisieren (verhindert den ÔÇ×links/rechtsÔÇ£-Split) */
main.project-main.project-page .va-chat .chat-messages,
main.project-main.project-page .va-chat .chat-messages--flush,
main.project-main.project-page .va-chat .chat-input-bar{
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  z-index:auto !important; background:inherit !important; width: 100% !important;
  padding-bottom: 0 !important;
}


/* Vergabeunterlagen: Legacy-Layout neutralisieren */
body.vergabeunterlagen-page main.project-main.project-page .va-chat .chat-container {
  position: static !important;
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

body.vergabeunterlagen-page main.project-main.project-page .va-chat .chat-inner {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
}

body.vergabeunterlagen-page main.project-main.project-page .va-chat .chat-messages {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}

body.vergabeunterlagen-page main.project-main.project-page .va-chat .chat-input-bar {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
}

body.vergabeunterlagen-page main.project-main.project-page .va-chat .chat-input-wrap {
  align-items: center !important;
  gap: 0.65rem !important;
}

body.vergabeunterlagen-page main.project-main.project-page .va-chat #chatInput {
  max-height: 50vh !important;
  overflow-y: auto !important;
}

body.vergabeunterlagen-page main.project-main.project-page .va-chat .chat-container *,
body.vergabeunterlagen-page main.project-main.project-page .va-chat .chat-input-bar,
body.vergabeunterlagen-page main.project-main.project-page .va-chat .chat-messages {
  top: auto !important;
  bottom: auto !important;
  position: relative !important;
}

/* === CPV-Modal: 80%-Breite, volle Höhe, zentriert (Projektseite) === */
body.project-page #cpvModal{
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2100 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: center !important;
  background: rgba(6, 13, 30, 0.45) !important;
  backdrop-filter: blur(4px) !important;
}
body.project-page #cpvModal.show,
body.project-page #cpvModal.active{
  display: flex !important;
}
body.project-page #cpvModal .modal-dialog.cpv-modal,
body.project-page #cpvModal .modal-dialog.cpv-modal.leftwide{
  width: 80vw !important;
  max-width: 80vw !important;
  min-width: 80vw !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  position: relative !important;
  box-shadow: 0 30px 80px rgba(5, 13, 36, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
}
body.project-page #cpvModal .modal-content{
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  margin: 0 !important;
  background: #fff !important;
}
body.project-page #cpvModal .modal-body{
  flex: 1 1 auto !important;
  overflow: auto !important;
  width: 100% !important;
}
body.project-page #cpvModal .modal-header{
  position: relative !important;
  padding-right: 4rem !important;
}
body.project-page #cpvModal .modal-header .modal-close{
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #1f2a37 !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 10px 30px rgba(12, 21, 46, 0.18) !important;
  cursor: pointer !important;
}
body.project-page #cpvModal .modal-header .modal-close:hover{
  background: #f1f5f9 !important;
}

#cpvModal .cpv-search-row{
  display:flex;
  align-items:center;
  gap:.6rem;
}

#cpvSynBtn.cpv-syn-btn{
  flex:0 0 auto;
  padding:.55rem 1rem;
  border-radius:999px;
  border:1px solid #d2def0;
  background:#f3f6fb;
  color:#4f6686;
  font-weight:600;
  cursor:not-allowed;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
#cpvSynBtn.cpv-syn-btn:not([disabled]){
  cursor:pointer;
  background:#0fb6d9;
  border-color:#0fb6d9;
  color:#fff;
  box-shadow:0 8px 20px rgba(15,182,217,.25);
}
#cpvSynBtn.cpv-syn-btn:not([disabled]):hover{
  filter:brightness(1.05);
}
#cpvSynBtn.cpv-syn-btn.is-loading{
  position:relative;
  color:transparent;
}
#cpvSynBtn.cpv-syn-btn.is-loading::after{
  content:'';
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  border-top-color:#fff;
  animation:cpv-syn-spin .8s linear infinite;
}

@keyframes cpv-syn-spin{
  to{ transform:rotate(360deg); }
}

#cpvSynonyms.cpv-synonyms{
  margin-top:.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
#cpvSynonyms[hidden]{ display:none; }

.cpv-syn-card{
  border:1px solid #d5e0f0;
  border-radius:999px;
  padding:.3rem .9rem;
  font-size:.9rem;
  background:#fff;
  color:#1b314f;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
  user-select:none;
}
.cpv-syn-card:hover{
  border-color:#0fb6d9;
  color:#0b6075;
}
.cpv-syn-card.is-active{
  background:#0fb6d9;
  border-color:#0fb6d9;
  color:#fff;
  box-shadow:0 8px 18px rgba(15,182,217,.35);
}
.cpv-synonyms__empty{
  padding:.45rem .75rem;
  border-radius:.65rem;
  background:#f5f7fb;
  color:#4f6686;
  font-size:.9rem;
}
#cpvModal .cpv-search-row .cpv-search{ flex:1 1 auto; }
.cpv-syn-card--clear{
  min-width:34px;
  padding:.3rem .6rem;
  border-style:dashed;
  color:#8b9ab4;
  font-weight:700;
}
.cpv-syn-card--clear:hover{
  background:#eef3fb;
  color:#13233a;
  border-color:#c0cee4;
}