/* ============================================================================
   bausync — Seiten-Kopf ("Box-Kopf ins Menü integriert").
   Wiederverwendbarer Header für Inhaltsseiten: Titel + Kontext-Button +
   Phase-Steuerung + Aktions-Icons in EINER Leiste, bündig zur Menükante und
   in Sidebar-Farbe -> Kopf und Menü lesen sich als eine Einheit.
   Nutzt die Design-Tokens aus bs_menu_redesign.css (:root). Wird NACH dieser
   Datei geladen. Klassenpräfix .bph- (bausync page header), kollisionsfrei.
   Vorlage: mockups/box_into_menu_mockup.html (vom User freigegeben).
   ============================================================================ */

/* Blaue Info-Farbe ergänzen (nicht in bs_menu_redesign.css definiert) */
:root{ --blue:#168DCB; --blue-bg:#E4F1FA; }

/* Seiten mit neuem Kopf: Legacy-Container (bs23_frame_0 = position:absolute; right:50%,
   zentrierte Spalte) auf normalen, vollbreiten Fluss umstellen, damit die Kopfleiste
   bündig an der Menükante andockt und über die volle Inhaltsbreite spannt. */
#main_field_1 .bph-page.bs23_frame_0{ position:static !important; right:auto !important;
  box-sizing:border-box !important; width:100% !important;
  margin-left:0 !important; margin-right:0 !important;
  padding-left:10px !important; padding-right:10px !important; }
/* Luft zwischen Breadcrumb und Seiteninhalt. Seiten mit zentrierter Taskleiste bringen
   den Abstand ueber deren margin:10px auto schon mit — dort NICHT doppelt. */
#main_field_1 .bph-page.bs23_frame_0{ padding-top:10px !important; }
#main_field_1 .bph-page.bs23_frame_0:has(.bph-bar-center){ padding-top:0 !important; }
/* Inhalt auf die pro Seite VORGEGEBENE Breite begrenzen und mittig zentrieren.
   Quelle = JS-Variable bsWidth (jede Seite setzt sie) -> im Layout als --bph-content-max
   auf #box_standard_1 gespiegelt. KEINE Klassifizierung nach Inhaltstyp.
   Kopfleiste + Deadline-Streifen bleiben vollbreit (ausgenommen).
   Seiten mit bsWidth="auto" (kein --bph-content-max gesetzt) bleiben vollbreit. */
#main_field_1 .bph-page > *:not(.bph-bar):not(.bph-deadstrip):not(script):not(style):not(link):not(.lity-hide){
  max-width:var(--bph-content-max, none);
  margin-left:auto !important; margin-right:auto !important;
  box-sizing:border-box; }

#main_field_1 .bph-bar,
#main_field_1 .bph-bar *{ box-sizing:border-box; }

/* Deadline-Streifen: zentriert unter der mittigen Taskleiste (Regeln weiter unten,
   im Deadstrip-Block). Frueher lief die Flaeche randlos ueber die volle Breite. */

/* Kopfleiste ist jetzt ein FLIEGENDES Element: rechtsbündig, nur so breit wie ihr Inhalt
   (Aktions-Icons / Phase). Kein vollbreiter grauer Balken mehr — den Titel zeigt die
   Breadcrumb (#bs_crumb). Schwebt oben rechts, der Inhalt fliesst links/darunter. */
#main_field_1 .bph-bar{ float:right; width:auto; max-width:100%; display:inline-flex; align-items:center;
  gap:8px; flex-wrap:wrap; justify-content:flex-end;
  background:var(--side); border:1px solid var(--line); border-radius:12px; padding:4px 12px; min-height:0;
  margin:10px 0 10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.04);
  font-family:Abel,Helvetica,Arial,sans-serif;
  /* Ein nachfolgender Block mit eigener Flaeche (z.B. bs23_frame_2) wuerde den Float sonst
     ueberdecken -> Bar unklickbar. Stapelt sie darueber. */
  position:relative; z-index:21; }
/* leere Bar (keine Phase/Aktionen) nimmt keinen Platz weg */
#main_field_1 .bph-bar:empty{ display:none; }
/* Microtip-Tooltip nach vorne holen: die Elemente in der Leiste sind alle position:relative
   ohne z-index -> das im DOM SPAETERE Geschwister lag sonst ueber dem Tooltip (Pfeil sah
   abgeschnitten aus). Zusaetzlich die ganze Leiste, damit der Tooltip nicht unter dem
   nachfolgenden Seiteninhalt verschwindet. */
#main_field_1 .bph-bar [role="tooltip"]{ position:relative; }
#main_field_1 .bph-bar [role="tooltip"]:hover{ z-index:60; }
#main_field_1 .bph-bar:hover{ z-index:60; }

/* ZENTRIERTE Taskleiste-Variante: gleiche graue Optik, aber horizontal zentriert
   (statt rechts schwebend). Kann zusaetzlich zur rechten Taskleiste existieren. */
#main_field_1 .bph-bar.bph-bar-center{ float:none; display:flex; justify-content:center;
  width:fit-content; max-width:100%; margin:10px auto; }
/* Existiert eine zentrierte Taskleiste, wird die rechte ABSOLUT positioniert (aus dem Fluss),
   damit die zentrierte wirklich mittig sitzt (float wuerde sie nach links druecken). */
#main_field_1 .bph-page:has(.bph-bar-center){ position:relative; }
#main_field_1 .bph-page:has(.bph-bar-center) .bph-bar:not(.bph-bar-center){
  position:absolute; top:0; right:10px; float:none; margin:10px 0; z-index:21; }
/* Vertikaler Trenner innerhalb der zentrierten Taskleiste (z.B. Switch | Benutzer hinzufügen).
   War frueher 3px WEISS — auf dem hellen Leistenhintergrund (#F7F8F8) damit praktisch
   unsichtbar. Jetzt eine feine graue Linie in der ueblichen Linienfarbe. */
#main_field_1 .bph-center-divider{ width:1px; height:22px; background:#C4C9C5; flex:none; margin:0 8px; }

/* SEGMENT-UMSCHALTER in der zentrierten Taskleiste (z.B. Projekte/Archiv).
   EINE Definition fuer alle Seiten — vorher stand sie als lokaler <style>-Block in
   projectoverview/lv-overview und in managebkp in einer aelteren Fassung, dadurch sah
   derselbe Schalter je Seite anders aus. Bewusst auf .bph-bar-center gescoped: die
   Klassen bs23_company_list_menu_* werden auch ausserhalb der Taskleiste verwendet
   (z.B. report_overview) und sollen dort unveraendert bleiben.
   switch_1 = aktiv, switch_2 = inaktiv. */
#main_field_1 .bph-bar-center .bs23_company_list_menu_2{
  float:none; background-color:transparent; border-radius:0; box-shadow:none; line-height:normal; }
#main_field_1 .bph-bar-center .bs23_company_list_menu_switch_1{
  width:auto; height:28px; border-radius:14px; background-color:#fff; color:#4B4B4B; font-weight:500;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  padding:0 14px; box-shadow:0 1px 2px rgba(0,0,0,.10); text-align:center; }
#main_field_1 .bph-bar-center .bs23_company_list_menu_switch_2{
  width:auto; height:28px; border-radius:14px; background-color:transparent; color:#9a9a9a;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  padding:0 14px; cursor:pointer; text-align:center; }
#main_field_1 .bph-bar-center .bs23_company_list_menu_switch_2:hover{
  background-color:rgba(0,0,0,0.04); color:#4B4B4B; }

/* BUTTON-Typ: Icon + Text als eine Einheit (Pille) — im Gegensatz zum reinen
   Icon-Chip .bph-tbtn. Sitzt gleichwertig in einer Taskleiste. */
#main_field_1 .bph-btn{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  border-radius:17px; background:var(--surface); border:1px solid var(--line); color:var(--ink);
  text-decoration:none; font-size:15px; line-height:1; cursor:pointer; white-space:nowrap; flex:none; }
#main_field_1 .bph-btn:hover{ background:var(--green-bg); border-color:var(--green); color:var(--ink); }
#main_field_1 .bph-btn img, #main_field_1 .bph-btn svg{ width:19px; height:19px; object-fit:contain; flex:none; }
#main_field_1 .bph-btn.is-disabled{ opacity:.45; cursor:default; pointer-events:none; }
/* Gefahr/Loeschen-Variante (frueher .bs23_company_list_menu_1_active, roter Loesch-Modus). */
#main_field_1 .bph-btn.is-danger{ background:#FFEAEB; border-color:#E4B9BC; color:#92383D; }
#main_field_1 .bph-btn.is-danger:hover{ background:#FBDCDE; border-color:#C97F85; color:#92383D; }
/* Deadline-Streifen (die Bar schwebt jetzt rechts daneben). */
#main_field_1 .bph-page .bph-deadstrip{ margin-top:0; margin-bottom:10px; }

/* Titel (integriert) */
#main_field_1 .bph-title{ font-size:24px; color:var(--ink); white-space:nowrap; line-height:1.1;
  transition:transform .2s ease; }
/* Titel folgt dem Menü beim Peek nach rechts (wie #bs_crumb), damit ihn das
   ausfahrende Overlay-Menü (244px) nicht überdeckt. Verschiebung = 244 - 64 = 180px. */
html.nav-collapsed.nav-peek:not(.nav-locked) #main_field_1 .bph-title{ transform:translateX(180px); }
html.bs-noanim #main_field_1 .bph-title{ transition:none !important; }

/* Ausschreibungs-/Kontext-Name: kleiner, heller Button direkt nach dem Titel */
#main_field_1 .bph-tender{ display:inline-flex; align-items:center; font-size:var(--fs0); color:var(--grey2);
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:4px 12px;
  white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
#main_field_1 a.bph-tender:hover{ background:var(--hover); color:var(--ink); }

/* Vertikaler Trenner + Spacer */
#main_field_1 .bph-vdiv{ width:1px; height:30px; background:var(--line); flex:none; }
#main_field_1 .bph-sp{ flex:1; }

/* Phase-Gruppe */
#main_field_1 .bph-phase{ display:flex; align-items:center; gap:8px; }
#main_field_1 .bph-phase-lead{ font-size:var(--fs0); color:var(--grey2); }

/* Phase-Dropdown wie der Versions-Button im lv/editor (.lv-title-version-btn):
   weisser Button mit Chevron, bei Hover/Fokus (= geöffnet) grün. */
#main_field_1 .bph-select{ font-family:Abel,Helvetica,Arial,sans-serif; font-size:16px; color:#4d4d4d;
  height:38px; padding:0 34px 0 14px; background-color:#fff; border:1px solid #e8e8e8; border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.03); cursor:pointer; -webkit-appearance:none; appearance:none; line-height:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
  transition:border-color .18s, background-color .18s, color .18s, box-shadow .18s; }
#main_field_1 .bph-select:hover,
#main_field_1 .bph-select:focus{ outline:none; background-color:var(--green); border-color:var(--green); color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }

/* Phase als Custom-Dropdown — Button UND Einträge wie im lv/editor
   (.lv-title-version-btn / .lv-title-version-dropdown / .lv-title-version-item). */
#main_field_1 .bph-phase-wrap{ position:relative; }
#main_field_1 .bph-phase-btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  background:#fff; border:1px solid #e8e8e8; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.03);
  font-family:Abel,sans-serif; font-size:16px; color:#4d4d4d; cursor:pointer;
  transition:border-color .18s, background-color .18s, color .18s, box-shadow .18s; }
#main_field_1 .bph-phase-btn:hover{ background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.05); }
#main_field_1 .bph-phase-wrap.is-open .bph-phase-btn{ background:var(--green); border-color:var(--green); color:#fff; }
#main_field_1 .bph-phase-chev{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
#main_field_1 .bph-phase-wrap.is-open .bph-phase-chev{ transform:rotate(180deg); }
#main_field_1 .bph-phase-dropdown{ display:none; position:absolute; top:calc(100% + 6px); left:0;
  min-width:240px; max-width:340px; background:#fff; border:1px solid #e2e2e2; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); padding:4px; z-index:200; }
#main_field_1 .bph-phase-wrap.is-open .bph-phase-dropdown{ display:block; }
#main_field_1 .bph-phase-item{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:5px; cursor:pointer; font-family:Abel,sans-serif; color:#525252; transition:background .12s; }
#main_field_1 .bph-phase-item:hover{ background:#f4f4f4; }
#main_field_1 .bph-phase-item.is-current{ background:#ecf2e9; }
#main_field_1 .bph-phase-item.is-current:hover{ background:#d9e8d2; }
#main_field_1 .bph-phase-item-main{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
#main_field_1 .bph-phase-item-title{ font-size:13px; color:#2f2f2f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#main_field_1 .bph-phase-item-tag{ flex:0 0 auto; font-size:10px; color:#999; text-transform:uppercase; letter-spacing:.4px; }
#main_field_1 .bph-phase-divider{ height:1px; margin:4px 6px; background:#ececec; }
/* Icon vor dem Titel (z.B. Phasenübersicht als Aktions-Eintrag, analog "Neue Version" im lv) */
#main_field_1 .bph-phase-item-icon{ width:15px; height:15px; flex:0 0 auto; color:var(--grey2); }
#main_field_1 .bph-phase-item-action{ color:var(--green-tx); }
#main_field_1 .bph-phase-item-action .bph-phase-item-title{ color:var(--green-tx); font-weight:400; }
#main_field_1 .bph-phase-item-action .bph-phase-item-icon{ color:var(--green); }
#main_field_1 .bph-phase-item-action:hover{ background:#ecf2e9; }

/* "Nächste Phase" — satter grüner CTA (klar sichtbar auf hellem Grund) */
#main_field_1 .bph-next{ display:flex; align-items:center; gap:7px; padding:7px 13px 7px 10px; border-radius:9px;
  cursor:pointer; text-decoration:none; color:#fff; background:var(--green); font-size:var(--fs0);
  white-space:nowrap; border:1px solid var(--green); box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:background-color .15s ease, border-color .15s ease; }
#main_field_1 .bph-next:hover{ background:var(--green-d); border-color:var(--green-d); }
/* grünes PNG-Icon auf grünem Grund -> per Filter weiss einfärben */
#main_field_1 .bph-next img{ width:20px; height:20px; filter:brightness(0) invert(1); }

/* Icon-Buttons mit den ECHTEN PNG-Icons — weisser Chip, weil die App-Icons
   hellgraue Flächen mit dunkler Kontur für weissen Grund sind. */
#main_field_1 .bph-tbtn{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; text-decoration:none; position:relative;
  background:var(--surface); border:1px solid var(--line); flex:none; }
/* Info-/Hinweisboxen stehen IMMER unterhalb der Taskleiste. Die .bph-bar floatet
   rechts — ohne clear laeuft eine Box, die im Markup danach kommt, seitlich neben
   ihr hoch (z.B. cockpitReport). Gilt fuer die Komponente components/info-box
   (id="info_box_*") und die alten Info-Tabellen direkt im Seiten-Wrapper. */
#main_field_1 [id^="info_box_"],
#main_field_1 .bph-page > .bs23_box_info_1,
#main_field_1 .bph-page > .bs23_table_info{ clear:both; }

#main_field_1 .bph-tbtn:hover{ background:var(--green-bg); border-color:var(--green); }
/* Inline-SVG-Icons zeichnen mit stroke/fill:currentColor und wuerden deshalb die
   globale a:hover-Farbe erben. Beim Hover wechseln nur Flaeche und Rand — das Icon
   bleibt schwarz (gilt fuer alle Chips, z.B. Konditionen in lv/overview). */
#main_field_1 .bph-tbtn,
#main_field_1 .bph-tbtn:hover,
#main_field_1 .bph-tbtn:focus,
#main_field_1 .bph-tbtn:active{ color:var(--ink,#242424); }
#main_field_1 .bph-tbtn img{ width:21px; height:21px; object-fit:contain; display:block; }
/* Ana-Portrait: ueberall GLEICH (LV-Editor, LV-Uebersicht, ...). Der Chip bleibt rund,
   das Bild fuellt ihn — die 2px padding bilden den Rand nach innen, damit das Portrait
   nicht an der Kante klebt. Immer als: x-bph.action class="ana" icon="/images/portrait_ai.png" */
#main_field_1 .bph-tbtn.ana{ padding:2px; overflow:hidden; border-radius:50%; }
#main_field_1 .bph-tbtn.ana img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 20%; }
#main_field_1 .bph-tbtn .bph-badge{ position:absolute; top:-3px; right:-3px; background:var(--green); color:#fff;
  font-size:10px; border-radius:20px; min-width:15px; height:15px; display:flex; align-items:center;
  justify-content:center; padding:0 3px; }
/* deaktivierte Variante (graue Icons) */
#main_field_1 .bph-tbtn.is-disabled{ opacity:.45; cursor:default; }
#main_field_1 .bph-tbtn.is-disabled:hover{ background:var(--surface); border-color:var(--line); }

/* Alte Toolbar-Icons (bs23_menu_icon_0 = eckig, gepunkteter Rand) im Kopf RUND wie die
   neuen bph-tbtn (Mockup .tbtn). Struktur: .bph-actions > a > div.bs23_menu_icon_0 > img. */
#main_field_1 .bph-actions > a{ display:inline-flex; align-items:center; text-decoration:none; }
#main_field_1 .bph-actions .bs23_menu_icon_0,
#main_field_1 .bph-actions .bs23_menu_icon_0d{
  float:none; margin:0; padding:0; box-sizing:border-box;
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  background:var(--surface); display:inline-flex; align-items:center; justify-content:center; }
#main_field_1 .bph-actions .bs23_menu_icon_0:hover{ background:var(--green-bg); border-color:var(--green); color:inherit; }
#main_field_1 .bph-actions .bs23_menu_icon_0d{ opacity:.45; }
#main_field_1 .bph-actions .bs23_menu_icon_0 img,
#main_field_1 .bph-actions .bs23_menu_icon_0d img{ width:21px; height:21px; object-fit:contain; }

/* Aktions-Gruppe */
#main_field_1 .bph-actions{ display:flex; align-items:center; gap:4px; }
/* Info/Help-Element IMMER ganz rechts (letztes Element der Aktionen), Trennstrich links.
   Deckt neues help_dd_wrap/bph-info UND die alte in den actions-Slot uebernommene
   Toolbar (bs23_box_frame_1_menu) ab; unabhaengig von der Reihenfolge im Slot. */
#main_field_1 .bph-actions .help_dd_wrap,
#main_field_1 .bph-actions .bph-info,
#main_field_1 .bph-actions > .bs23_box_frame_1_menu{ order:100; }
/* Der alte Toolbar-Wrapper ist display:block -> seine Icon-Chips hingen als Inline-Elemente
   an der TEXT-Baseline und standen dadurch unterschiedlich hoch (je nach img/svg-Inhalt).
   Als Flex-Zeile sitzen sie alle auf derselben Mittellinie. */
#main_field_1 .bph-actions .bs23_box_frame_1_menu{
  display:inline-flex; align-items:center; gap:4px; float:none; }
#main_field_1 .bph-actions .bph-info{ border-left:1px solid rgba(159,192,159,1); padding-left:12px; margin-left:5px; }

/* info-Trigger als blauer Button; die GEÖFFNETE weisse Fläche (help_dd_content) wird
   zur Sprechblase mit Spitze nach oben zum info-Button. */
#main_field_1 .bph-actions .help_dd_wrap{ display:inline-flex; align-items:center; }
/* Blau gilt fuer ALLE Info-Trigger: neues bph-info / help_dd_wrap UND die alte in den
   actions-Slot uebernommene Toolbar (a[help]/a[help-disabled] -> war grün via bs23_white). */
#main_field_1 .bph-info,
#main_field_1 .bph-actions .help_dd_wrap > a,
#main_field_1 .bph-actions a[help],
#main_field_1 .bph-actions a[help-disabled]{ font-size:var(--fs0); color:#fff !important; background:var(--blue) !important;
  border:1px solid var(--blue) !important; border-radius:7px; padding:6px 14px; cursor:pointer; text-decoration:none;
  line-height:1.4; display:inline-block; }
#main_field_1 .bph-info:hover,
#main_field_1 .bph-actions .help_dd_wrap > a:hover,
#main_field_1 .bph-actions a[help]:hover,
#main_field_1 .bph-actions a[help-disabled]:hover{ background:#127bb3 !important; border-color:#127bb3 !important; color:#fff !important; }
/* geöffnete Fläche = Sprechblase mit Spitze nach oben */
#main_field_1 .help_dd_content{ overflow:visible !important; margin-top:9px; }
#main_field_1 .help_dd_content::after{ content:''; position:absolute; top:-8px; right:18px; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #fff;
  filter:drop-shadow(0 -2px 1px rgba(0,0,0,.05)); }

/* Ebene unter der Kopfleiste: Phase-Dropdown + Nächste Phase (links) + Abgabe/Nachfrist */
#main_field_1 .bph-deadstrip{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 26px 0; }
#main_field_1 .bph-deadstrip .bph-dead-item{ display:flex; align-items:center; gap:7px; font-size:var(--fs0); color:var(--grey2); }
#main_field_1 .bph-deadstrip .bph-dead-item svg{ width:15px; height:15px; color:var(--grey2); fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#main_field_1 .bph-deadstrip .bph-dead-item b{ font-weight:400; color:var(--ink); }
/* Trenner zwischen Phase-Steuerung und Abgabe/Nachfrist */
#main_field_1 .bph-deadstrip .bph-dead-sep{ width:1px; height:24px; background:var(--line); flex:none; }
/* Keinen Trenn-Border direkt unter dem Deadstrip (das Folge-Element bringt einen border-top mit). */
#main_field_1 .bph-page .bph-deadstrip{ border-bottom:none; }
#main_field_1 .bph-page .bph-deadstrip + *{ border-top:none !important; }
/* Abgabe/Nachfrist sitzt zentriert unter der mittigen Taskleiste. width:fit-content sorgt
   dafuer, dass die graue Trennlinie darueber GENAU so breit ist wie der Text. */
#main_field_1 .bph-deadstrip{ justify-content:center; }
#main_field_1 .bph-page .bph-deadstrip{
  width:fit-content; max-width:100%; margin-left:auto; margin-right:auto;
  padding:10px 0 0; border-top:1px solid #D3D8D4; }

/* ---- Breadcrumb-Erweiterung: 3. Ebene + Zurück-Button (im #bs_crumb) ---- */
#bs_crumb .bph-crumb-back{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs0); color:var(--grey);
  text-decoration:none; padding:4px 11px; border:1px solid var(--line); border-radius:7px; background:var(--surface);
  cursor:pointer; }
#bs_crumb .bph-crumb-back:hover{ background:var(--hover); color:var(--ink); border-color:#d3d6d4; }
#bs_crumb .bph-crumb-back svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
#bs_crumb .bph-crumb-div{ width:1px; height:18px; background:var(--line); margin:0 4px; display:inline-block; vertical-align:middle; }

/* ---- Info-/Hilfe-Button aus der Kopfleiste in die Breadcrumb verlagert (per JS) ----
   Ganz rechts (Trennstrich links davor), blau wie zuvor. */
#bs_crumb .bs-crumb-infodiv{ margin-left:auto; width:1px; height:18px; background:var(--line); flex:none; }
#bs_crumb .bs-crumb-info{ flex:none; float:none !important; }
#bs_crumb .help_dd_wrap.bs-crumb-info{ border-left:none !important; padding-left:0 !important; margin-left:0 !important;
  display:inline-flex; align-items:center; }
/* Trigger blau — alle Varianten: help_dd_wrap-Trigger (help ODER help-disabled),
   altes Menü-a[help]/[help-disabled] direkt, sowie bph-info. */
#bs_crumb .help_dd_wrap.bs-crumb-info > a,
#bs_crumb a.bs-crumb-info,
#bs_crumb .bph-info.bs-crumb-info{ font-size:var(--fs0); color:#fff !important; background:var(--blue) !important;
  border:1px solid var(--blue) !important; border-radius:7px; padding:3px 12px; text-decoration:none;
  line-height:1.4; display:inline-block; cursor:pointer; }
#bs_crumb .help_dd_wrap.bs-crumb-info > a:hover,
#bs_crumb a.bs-crumb-info:hover,
#bs_crumb .bph-info.bs-crumb-info:hover{ background:#127bb3 !important; border-color:#127bb3 !important; color:#fff !important; }
/* 3. Ebene kürzen mit "…" wenn zu lang (min-width:0 nötig, damit der Flex-Eintrag schrumpfen darf) */
#bs_crumb .bph-crumb-extra{ color:var(--grey2); min-width:0; max-width:min(46vw, 520px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Seiten-definierte Navigation (window.bsCrumbTrail): beliebig viele Ebenen ----
   Jede Ebene ist .bph-crumb-step; die aktuelle Seite ist ein <b class="is-active">.
   Nicht-aktive Ebenen duerfen schrumpfen und kuerzen mit "…", die aktive bleibt lesbar. */
/* font-size/-family/-weight ERBEN vom #bs_crumb — sonst ziehen die globalen a-Regeln
   (bs23_white.css) die Link-Ebenen auf 20px, waehrend die aktive Ebene bei 16px bleibt. */
#bs_crumb .bph-crumb-step{ color:var(--grey2); text-decoration:none; min-width:0;
  font-size:inherit; font-family:inherit; font-weight:inherit; line-height:inherit;
  max-width:min(40vw, 460px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#bs_crumb a.bph-crumb-step{ cursor:pointer; }
#bs_crumb a.bph-crumb-step:hover{ color:var(--ink); text-decoration:underline; }
/* Aktuelle Seite: linker gruener Balken, Schrift fett und schwarz (Mockup-Variante 8). */
#bs_crumb b.bph-crumb-step.is-active{
  flex:0 1 auto; font-weight:bold; color:var(--ink, #242424);
  border-left:3px solid var(--green, #72AE74); padding-left:9px; }

/* ============================ MOBILE ============================
   Breakpoint wie die App (max-width:1000px / max-height:660px). Auf Mobile ist
   #main_field_1 left:0; width:100%; padding:0 5px, die Sidebar ein Popup.
   Die Kopfleiste bricht um: Titel + Phase oben, Aktions-Icons darunter. */
@media (max-width:1000px), (max-height:660px){
  /* Desktop-Trick (10px-Marge/negative Marge) zurücknehmen — Mobile nutzt den 5px-Rand von #main_field_1 */
  #main_field_1 .bph-page.bs23_frame_0{ padding-left:0 !important; padding-right:0 !important; }
  #main_field_1 .bph-page .bph-deadstrip{ margin-left:auto; margin-right:auto; width:fit-content; max-width:100%; }
  /* Auf Mobil ist immer NUR EINE, ZENTRIERTE Taskleiste (beide Varianten zentriert,
     kein float — sonst bricht das schmale Layout). */
  #main_field_1 .bph-bar{ float:none !important; width:fit-content; max-width:100%; margin:10px auto;
    flex-wrap:wrap; gap:10px; padding:4px 12px; min-height:0; position:static !important;
    top:auto !important; right:auto !important; justify-content:center; }
  /* Button-Typ (Icon + Text) auf Mobil: nur das Icon zeigen (Text ausgeblendet). */
  #main_field_1 .bph-btn span{ display:none; }
  #main_field_1 .bph-btn{ padding:0; width:34px; height:34px; justify-content:center; border-radius:50%; }
  #main_field_1 .bph-title{ font-size:var(--fs3); }
  #main_field_1 .bph-tender{ max-width:150px; }
  #main_field_1 .bph-sp{ display:none; }                 /* Inhalte links packen, nicht auseinanderziehen */
  #main_field_1 .bph-vdiv{ display:none; }               /* Trenner stören beim Umbruch */
  #main_field_1 .bph-phase-lead{ display:none; }         /* Platz sparen */
  #main_field_1 .bph-phase{ flex-wrap:wrap; gap:8px; }
  /* In der verschmolzenen Taskleiste bleiben Switch + Aktionen in EINER zentrierten Zeile
     (nicht mehr flex-basis:100% -> keine erzwungene eigene Zeile). */
  #main_field_1 .bph-actions{ flex-basis:auto; display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; }
  #main_field_1 .bph-next{ padding:6px; }                /* nur Icon (Label ausblenden) */
  #main_field_1 .bph-next{ font-size:0; }
  #main_field_1 .bph-next img{ margin:0; }
  #main_field_1 .bph-deadstrip{ gap:6px 16px; padding:8px 10px 0; }
  #main_field_1 .bph-phase-dropdown{ left:0; right:auto; min-width:min(280px, 80vw); }
}