/* Menue und Leiste (claude-2d, 14.10.2026). Eigene Datei neben cockpit.css (dort ist claude-c0 zustaendig), damit
   sich beide nicht in die Quere kommen. Steht in jeder Seite direkt vor cockpit-leiste.js; ein Stylesheet vor einem
   Skript ist geladen, bevor das Skript laeuft, die Leiste zeichnet also nie ungestaltet.
   Teil 1 gilt ueberall, Teil 2 (Menue Fassung 2) nur unter html.menue-v2. Nur --ui-* Token. */

/* Teil 1: Fusszeile wie bei ChatGPT (Ruben, 14.10.2026): ein Satz, klein und zentriert, ohne Trennlinie. */
.ck-seitenfuss.ck-fusshinweis { display: block; max-width: 980px; margin: 40px auto 0; padding: 12px 16px 18px;
  border-top: 0; font: 400 12px/1.5 Inter, system-ui, sans-serif; color: var(--ui-text-2); text-align: center; }
.ck-seitenfuss.ck-fusshinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px;
  background: none !important; padding: 0; border-radius: 0; box-shadow: none; }
.ck-seitenfuss.ck-fusshinweis a:hover { color: var(--ui-text); }
.ck-seitenfuss.ck-fusshinweis a:focus-visible { outline: 2px solid var(--ui-akzent); outline-offset: 2px; }

/* Teil 2: Menue Fassung 2 (KONZEPT_Menue-final_2026-10-14.md, Entwurf Menue-Vergabestelle.dc.html). */

/* Neue Beschaffung: der eine grosse Knopf oben, darunter die Auswahl. */
html.menue-v2 .mv2-neu { margin: 4px 0 8px; }
/* 16.10.2026 (Ruben: „Neue Beschaffung dezenter machen“): hell mit Rand statt voll violett; den Akzent traegt nur
   das Plus. Darueber und bei offener Auswahl zart violett hinterlegt. Eingeklappt bleibt es beim Symbol. */
html.menue-v2 .mv2-neu-knopf { width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 12px; border: 1px solid var(--ui-rand); border-radius: var(--ui-r-knopf); background: var(--ui-flaeche);
  color: var(--ui-text); font: 600 var(--ui-s14)/1.2 var(--ui-schrift); cursor: pointer; }
html.menue-v2 .mv2-neu-knopf .mv2-neu-text svg { color: var(--ui-akzent); }
html.menue-v2 .mv2-neu-knopf .mv2-neu-winkel { color: var(--ui-text-2); }
html.menue-v2 .mv2-neu-knopf:hover, html.menue-v2 .mv2-neu-knopf[aria-expanded="true"] { border-color: var(--ui-akzent-rand);
  background: var(--ui-akzent-hell); color: var(--ui-akzent-tief); }
html.menue-v2 .ck.schmal .mv2-neu-knopf .mv2-neu-text svg { color: inherit; }
html.menue-v2 .mv2-neu-knopf:focus-visible { outline: 2px solid var(--ui-fokus); outline-offset: 2px; }
html.menue-v2 .mv2-neu-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
html.menue-v2 .mv2-neu-winkel svg { transition: transform .15s; }
html.menue-v2 .mv2-neu-knopf[aria-expanded="true"] .mv2-neu-winkel svg { transform: rotate(180deg); }
html.menue-v2 .mv2-neu-liste { position: fixed; z-index: 60; width: 310px; max-width: calc(100vw - 24px); padding: 6px;
  background: var(--ui-flaeche); border: 1px solid var(--ui-rand); border-radius: var(--ui-r-karte); box-shadow: var(--ui-schatten-2); }
html.menue-v2 .mv2-neu-liste[hidden] { display: none; }
/* 16.10.2026 (Ruben, Bild): Die Auswahl ragt in den Hauptbereich und wurde dort verdeckt. Die Leiste ist sticky und
   damit eine eigene Stapelebene, der Hauptbereich kommt danach und lag darueber. Solange die Auswahl offen ist, liegt
   die Leiste oben. */
html.menue-v2 .ck-leiste:has(.mv2-neu-liste:not([hidden])) { z-index: 60; }
html.menue-v2 .mv2-neu-eintrag { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 8px 10px; border: 0;
  border-radius: 8px; background: none; color: var(--ui-text); text-align: left; text-decoration: none;
  font: 400 var(--ui-s14)/1.3 var(--ui-schrift); cursor: pointer; }
html.menue-v2 .mv2-neu-eintrag strong { font-weight: 600; }
html.menue-v2 .mv2-neu-eintrag small { font-size: var(--ui-s12); color: var(--ui-text-2); }
html.menue-v2 .mv2-neu-eintrag:hover, html.menue-v2 .mv2-neu-eintrag:focus-visible { background: var(--ui-grund); outline: none; }
html.menue-v2 .mv2-neu-eintrag:focus-visible { box-shadow: inset 0 0 0 2px var(--ui-fokus); }
html.menue-v2 .mv2-neu-nerd { margin-bottom: 4px; background: var(--ui-akzent-hell); }
html.menue-v2 .mv2-neu-nerd strong { color: var(--ui-akzent-tief); }
html.menue-v2 .mv2-neu-nerd:hover { background: var(--ui-akzent-hell); box-shadow: inset 0 0 0 1px var(--ui-akzent-rand); }

/* Suchen: Feld unter dem Knopf, oeffnet die Palette (Strg+K). */
html.menue-v2 .mv2-suche { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0 0 4px; padding: 0 10px; border: 1px solid var(--ui-rand); border-radius: var(--ui-r-knopf);
  background: var(--ui-flaeche); color: var(--ui-text-2); font: 400 var(--ui-s14)/1.2 var(--ui-schrift); cursor: pointer; }
html.menue-v2 .mv2-suche:hover { border-color: var(--ui-rand-stark); color: var(--ui-text); }
html.menue-v2 .mv2-suche:focus-visible { outline: 2px solid var(--ui-fokus); outline-offset: 2px; }
html.menue-v2 .mv2-suche-text { display: inline-flex; align-items: center; gap: 8px; }
html.menue-v2 .mv2-taste { font: 400 var(--ui-s12)/1 var(--ui-schrift); color: var(--ui-text-2); background: none; border: 0; }

/* Bloecke: Linie statt Abstand allein; der Nerd mit Akzent im Symbol (KI-Einstieg). */
html.menue-v2 .mv2-block + .mv2-block, html.menue-v2 .mv2-nav > .ck-bereich { border-top: 1px solid var(--ui-linie, var(--ui-rand));
  padding-top: 8px; margin-top: 8px; }
html.menue-v2 .mv2-nerd > svg { color: var(--ui-akzent); }
html.menue-v2 .mv2-nerd { font-weight: 600; }

/* Zaehler: grau, rot heisst ueberfaellig. */
html.menue-v2 .mv2-zahl { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--ui-grund); color: var(--ui-text-2); font: 700 var(--ui-s12)/20px var(--ui-schrift); font-style: normal;
  text-align: center; font-variant-numeric: tabular-nums; }
html.menue-v2 .mv2-zahl[hidden] { display: none; }
/* 16.10.2026 (Ruben: „Die Zahl bei der Übersicht ebenfalls dezenter“): zartrot hinterlegt statt voll rot. */
html.menue-v2 .mv2-zahl.rot { background: var(--ui-fehler-hell); color: var(--ui-fehler); }

/* Ausklapper der Werkzeuge: ganze Zeile ist der Knopf, Winkel rechts dreht sich. */
html.menue-v2 button.ck-zeile { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
html.menue-v2 .mv2-winkel { margin-left: auto; display: inline-flex; color: var(--ui-text-2); }
html.menue-v2 .mv2-winkel svg { transition: transform .15s; }
html.menue-v2 .mv2-klapp[aria-expanded="true"] .mv2-winkel svg { transform: rotate(90deg); }
html.menue-v2 .mv2-kinder[hidden] { display: none; }
html.menue-v2 .mv2-kinder .ck-unter-zusatz { display: block; font-size: var(--ui-s12); color: var(--ui-text-2); font-weight: 400; }
html.menue-v2 .mv2-alle a { color: var(--ui-akzent-tief); font-weight: 600; font-style: normal; display: flex; align-items: center; gap: 6px; }
html.menue-v2 .mv2-alle .mv2-pfeil { flex: none; }

/* Unten: Einstellungen und Hilfe in einem Block. */
html.menue-v2 .mv2-unten { border-top: 1px solid var(--ui-linie, var(--ui-rand)); padding-top: 8px; }
html.menue-v2 .mv2-unten > .ck-zeile[hidden] { display: none; }

/* Eingeklappte Leiste: nur Symbole; die Auswahl schwebt daneben. */
html.menue-v2 .ck.schmal .mv2-neu-knopf, html.menue-v2 .ck.schmal .mv2-suche { justify-content: center; padding: 0; }
html.menue-v2 .ck.schmal .mv2-zahl { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 11px; line-height: 16px; padding: 0 4px; }
html.menue-v2 .ck.schmal .ck-zeile { position: relative; }

/* Schublade am Telefon: die Auswahl steht im Fluss unter dem Knopf. */
@media (max-width: 900px) {
  html.menue-v2 .mv2-neu-liste { position: static; width: auto; max-width: none; margin-top: 6px; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.menue-v2 .mv2-neu-winkel svg, html.menue-v2 .mv2-winkel svg { transition: none; }
}

/* Laengere Eintraege (etwa „Markterkundung und Anfragen“) brechen um statt abgeschnitten zu werden. */
html.menue-v2 .mv2-nav .ck-bereich > a.ck-zeile .ck-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
/* Der Nerd als KI-Einstieg: Funkelsymbol in der Akzentfarbe (Konzept 1.6, G-08). */
html.menue-v2 #ckLeiste a.ck-zeile.mv2-nerd > svg { color: var(--ui-akzent); stroke: var(--ui-akzent); }

/* 15.10.2026 (Ruben): Die Spalte „Ihre Gespraeche“ auf der Nerd-Seite entfaellt, die Gespraeche stehen im Nerd-Zweig der
   Leiste. Der Zweig nutzt die Stile von „Verfahren“ (.ck-zweig, .ck-kopfzeile, .ck-pfeil); der Name bleibt fett. */
html.menue-v2 #ckNerdKopf > a.mv2-nerd { font-weight: 600; }
/* Schalter „Temporär“ der Nerd-Seite: rechts unter dem Seitenkopf (stand vorher neben der Gesprächsspalte). */
html.menue-v2 .ck-haupt.nd .nd-chip.nd-temp { top: calc(var(--mv2-kopf-h, 57px) + 14px); right: 18px; }
/* Unter 900 px steht über dem Seitenkopf noch der Knopf „Menü“ (14 bis 54 px). */
@media (max-width: 900px) { html.menue-v2 .ck-haupt.nd .nd-chip.nd-temp { top: calc(var(--mv2-kopf-h, 57px) + 68px); right: 16px; } }
/* Knoepfe in der Leiste (Ausklapper, Einstellungen, Hilfe) wie die Links: 14 px, gleiche Hoehe. */
html.menue-v2 #ckLeiste button.ck-zeile { font-size: var(--ui-s14); line-height: 20px; min-height: 34px; padding-top: 7px; padding-bottom: 7px; }

/* Beschriftete Schmalleiste (Konzept 3, M10): 72 px, acht Eintraege mit Symbol und Namen darunter. */
html.menue-v2 .mv2-schmal { display: none; }
html.menue-v2 .ck.schmal { --ck-leiste: 72px; }
html.menue-v2 .ck.schmal .mv2-nav, html.menue-v2 .ck.schmal .mv2-unten > .ck-zeile { display: none; }
html.menue-v2 .ck.schmal .mv2-schmal { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 6px 4px 0; box-sizing: border-box; }
html.menue-v2 .mv2-schmal-eintrag { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 8px 2px 7px;
  border: 0; border-radius: var(--ui-r-knopf); background: none; color: var(--ui-text-2); text-align: center; text-decoration: none;
  font: 500 var(--ui-s12)/1.15 var(--ui-schrift); cursor: pointer; }
html.menue-v2 .mv2-schmal-eintrag svg { width: 20px; height: 20px; color: var(--ui-text); flex: none; }
html.menue-v2 .mv2-schmal-eintrag:hover { background: var(--ui-grund); color: var(--ui-text); }
html.menue-v2 .mv2-schmal-eintrag:focus-visible { outline: 2px solid var(--ui-fokus); outline-offset: 1px; }
html.menue-v2 .mv2-schmal-eintrag[aria-current="page"] { background: var(--ui-akzent-hell); color: var(--ui-akzent-tief); }
html.menue-v2 .mv2-schmal-nerd svg { color: var(--ui-akzent); stroke: var(--ui-akzent); }
html.menue-v2 .ck.schmal .mv2-neu { padding: 0 6px; }
html.menue-v2 .ck.schmal .mv2-suche { margin: 0 6px 4px; width: calc(100% - 12px); }

/* Eingeklappt minimal wie bei ChatGPT (Ruben, 14.10.2026 spaet, Bild): nur Symbole ohne Beschriftung, 56 px.
   Oben Neue Beschaffung und Suchen, darunter Vergabe-Nerd und Verfahren, unten das Profil. */
html.menue-v2 .ck.schmal { --ck-leiste: 56px; }
html.menue-v2 .ck.schmal .mv2-neu { display: flex; justify-content: center; padding: 0; margin: 4px 0 2px; }
html.menue-v2 .ck.schmal .mv2-neu-knopf, html.menue-v2 .ck.schmal .mv2-suche, html.menue-v2 .ck.schmal .mv2-schmal-eintrag {
  width: 40px; height: 40px; min-height: 40px; margin: 0 auto; padding: 0; gap: 0; border: 0; border-radius: var(--ui-r-knopf);
  background: none; color: var(--ui-text); justify-content: center; align-items: center; }
html.menue-v2 .ck.schmal .mv2-neu-knopf:hover, html.menue-v2 .ck.schmal .mv2-suche:hover, html.menue-v2 .ck.schmal .mv2-schmal-eintrag:hover { background: var(--ui-grund); }
html.menue-v2 .ck.schmal .mv2-neu-knopf svg, html.menue-v2 .ck.schmal .mv2-suche svg { width: 20px; height: 20px; }
html.menue-v2 .ck.schmal .mv2-schmal { align-items: center; gap: 2px; padding: 2px 0 0; }
html.menue-v2 .ck.schmal .mv2-schmal-eintrag[aria-current="page"] { background: var(--ui-akzent-hell); color: var(--ui-akzent-tief); }
html.menue-v2 .ck.schmal .mv2-unten { border: 0; padding: 0; }

/* 16.10.2026 (Ruben): Kein Suchfeld mehr unter „Neue Beschaffung“; die Suche ist eine dezente Lupe oben neben „Einklappen“
   (#ckSuche, Strg+K bleibt). Eingeklappt steht sie als Symbol unter dem Zeichen, am Telefon im Kopf der Schublade. */
html.menue-v2 .mv2-lupe { margin-left: auto; flex: none; width: 30px; height: 30px; display: inline-grid; place-items: center;
  padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ui-text-2); cursor: pointer; }
html.menue-v2 .mv2-lupe + .ck-klapp { margin-left: 0; }
html.menue-v2 .mv2-lupe:hover { background: var(--ui-grund); color: var(--ui-text); }
html.menue-v2 .mv2-lupe:focus-visible { outline: 2px solid var(--ui-fokus); outline-offset: 2px; }
html.menue-v2 .ck.schmal .mv2-lupe { margin: 0 auto; width: 40px; height: 40px; border-radius: var(--ui-r-knopf); color: var(--ui-text); }
html.menue-v2 .ck.schmal .mv2-lupe svg { width: 20px; height: 20px; }