/* workspace-bento-formulare.css — Zusatz-Gestaltung des Bereichs „Formulare" in der Bento-Ansicht (Logik: workspace-bento-formulare.js). Kurzbeschreibung (für Laien): Ralph, 24.10.2026 — der Formular-Baukasten im Bento-Look: nur Kacheln im Raster der Startseite (gleiche Spalten, Reihenhöhe, Abstände, Rundung, Schatten wie workspace-bento-wissen.css), vorn die blaue Kopf-Karte mit weißen Pillen, je Formular eine Kachel, am Ende die gestrichelte „+"-Kachel. Im großen Formular: Pillen statt Aufklapp-Listen, Einträge als Tabelle mit Kopf, der eingebettete Baukasten, der drehbare Tablet-Rahmen und Teilen mit QR-Code. Kennzahl-Leiste, Suchfeld und Filter-Pillen der Vorlage sind ausgeblendet (gesucht wird oben). Greift nur im geöffneten Bereich (#bsBereich[data-bereich="formulare"]). Farben nur aus marke.css, hell + dunkel + Handy. */ /* Kachel-Ansicht (ohne Menü-Modus); im Menü-Modus gilt unten die Liste rechts + Arbeitsfläche links */ :root:not(.wb-menue-modus) #bsBereich[data-bereich="formulare"] { grid-template-rows: minmax(0, 1fr); } #bsBereich[data-bereich="formulare"] .bs-kopf, #bsBereich[data-bereich="formulare"] .bs-werkzeug, #bsBereich[data-bereich="formulare"] .bs-pillen { display: none; } :root:not(.wb-menue-modus) #bsBereich[data-bereich="formulare"] .bs-liste-karte { overflow: visible; } :root:not(.wb-menue-modus) #bsBereich[data-bereich="formulare"] .bs-liste { margin: 0 -20px -20px; padding: 12px 20px 20px; } /* Raster und Kachel wie die Startseite */ #bsBereich[data-bereich="formulare"] .bfo-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 168px; grid-auto-flow: dense; gap: 16px; } #bsBereich[data-bereich="formulare"] .bfo-k { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 20px 22px; box-sizing: border-box; overflow: hidden; background: var(--bs-karte); color: var(--bs-text); border-radius: var(--bs-r); box-shadow: var(--wb-rand, none); font-family: var(--marke-schrift); transition: box-shadow .25s, transform .25s; } #bsBereich[data-bereich="formulare"] .bfo-k.bs-kachel { cursor: pointer; } #bsBereich[data-bereich="formulare"] .bfo-k.bs-kachel:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-3px); } #bsBereich[data-bereich="formulare"] .bfo-k.bs-kachel:focus-visible { box-shadow: 0 0 0 2px var(--bs-grund), 0 0 0 4px var(--marke-akzent); } #bsBereich[data-bereich="formulare"] .bfo-kopf { grid-column: 1 / span 2; grid-row: 1 / span 2; min-height: 0; justify-content: flex-end; gap: 12px; } #bsBereich[data-bereich="formulare"] .bfo-leer { grid-column: span 2; align-items: center; justify-content: center; text-align: center; font-size: 13px; color: var(--bs-leise); } #bsBereich[data-bereich="formulare"] .bfo-k-kopf { display: flex; flex-wrap: wrap; gap: 6px; } #bsBereich[data-bereich="formulare"] .bfo-k-name { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--bs-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } #bsBereich[data-bereich="formulare"] .bfo-k-zahl { font-size: 13px; color: var(--bs-text); } #bsBereich[data-bereich="formulare"] .bfo-k-zahl small { font-size: 12px; color: var(--bs-leise); } #bsBereich[data-bereich="formulare"] .bfo-k-fuss { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--bs-leise); min-width: 0; } #bsBereich[data-bereich="formulare"] .bfo-k-fuss > span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* „+"-Kachel wie „+ Kachel hinzufügen" auf der Startseite */ #bsBereich[data-bereich="formulare"] .bfo-plus { align-items: center; justify-content: center; gap: 8px; background: transparent; border: 2px dashed var(--marke-linie-stark); box-shadow: none; color: var(--bs-leise); font: 600 13px var(--marke-schrift); cursor: pointer; text-align: center; } #bsBereich[data-bereich="formulare"] .bfo-plus:hover { background: var(--bs-karte); } #bsBereich[data-bereich="formulare"] .bfo-plus:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } #bsBereich[data-bereich="formulare"] .bfo-plus svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* Pillen: weiß in der blauen Kopf-Karte; im großen Formular (hell) grau, die gewählte dunkel */ #bsBereich[data-bereich="formulare"] .bfo-pillen, #bsBereich[data-bereich="formulare"] .bfo-filter, #bsBereich[data-bereich="formulare"] .bfo-reiter { display: flex; flex-wrap: wrap; gap: 8px; } #bsBereich[data-bereich="formulare"] .bfo-pille { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: var(--marke-r-pill); background: var(--wb-auf-farbe, #fff); color: var(--marke-grafit); font: 600 12px var(--marke-schrift); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; } #bsBereich[data-bereich="formulare"] .bfo-pille b, #bsBereich[data-bereich="formulare"] .bfo-pille i { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .55; } #bsBereich[data-bereich="formulare"] .bfo-pille:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .18); } #bsBereich[data-bereich="formulare"] .bfo-pille.an { background: var(--marke-grafit); color: #fff; } #bsBereich[data-bereich="formulare"] .bfo-pille.an b, #bsBereich[data-bereich="formulare"] .bfo-pille.an i { opacity: .7; } #bsBereich[data-bereich="formulare"] .bfo-pille:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } #bsBereich[data-bereich="formulare"] .bfo-pille.hell { background: var(--bs-weich); color: var(--bs-text); } #bsBereich[data-bereich="formulare"] .bfo-pille.hell:hover { box-shadow: none; background: color-mix(in srgb, var(--bs-text) 10%, var(--bs-karte)); } #bsBereich[data-bereich="formulare"] .bfo-pille.hell.an { background: var(--bs-dunkel); color: #fff; } #bsBereich[data-bereich="formulare"] .bfo-reiter { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--bs-linie); } #bsBereich[data-bereich="formulare"] .bfo-reiter .bfo-pille { height: 32px; padding: 0 16px; font-size: 13px; } /* Großes Formular */ #bsBereich[data-bereich="formulare"] .bfo-unter { margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #bsBereich[data-bereich="formulare"] .bs-etikett.ton-gelb { background: color-mix(in srgb, var(--marke-warn) 18%, var(--bs-karte)); color: var(--bs-text); } #bsBereich[data-bereich="formulare"] .bfo-inhalt { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; } #bsBereich[data-bereich="formulare"] .bfo-text { margin: 0; font-size: 13px; color: var(--bs-leise); } #bsBereich[data-bereich="formulare"] .bfo-leerbox { margin-top: 0; } #bsBereich[data-bereich="formulare"] .bfo-gefahr { color: var(--marke-gefahr); } #bsBereich[data-bereich="formulare"] .bs-d-aktion .bfo-gefahr { margin-left: auto; } #bsBereich[data-bereich="formulare"] .bfo-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } #bsBereich[data-bereich="formulare"] .bfo-zeile a.bs-knopf { display: inline-flex; align-items: center; text-decoration: none; } #bsBereich[data-bereich="formulare"] .bfo-label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--bs-leise); } #bsBereich[data-bereich="formulare"] .bfo-h { font-size: 14px; font-weight: 700; } #bsBereich[data-bereich="formulare"] .bs-meldung .bs-box { margin: 0 0 12px; } /* Einträge: Tabelle mit Kopf */ #bsBereich[data-bereich="formulare"] .bfo-tabelle { overflow-x: hidden; } #bsBereich[data-bereich="formulare"] .bfo-tabelle .bs-tabelle th { position: static; } #bsBereich[data-bereich="formulare"] .bfo-tabelle .bs-tabelle th:first-child { width: 30%; } #bsBereich[data-bereich="formulare"] .bfo-tabelle .bs-tabelle th.rechts { width: 64px; } #bsBereich[data-bereich="formulare"] .bfo-tabelle .bs-tabelle th:last-child { width: 128px; } #bsBereich[data-bereich="formulare"] .bfo-zurueck { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px 0 6px; border: 0; border-radius: var(--marke-r-pill); background: var(--bs-weich); color: var(--bs-text); font: 600 12px var(--marke-schrift); cursor: pointer; } #bsBereich[data-bereich="formulare"] .bfo-zurueck:hover { background: color-mix(in srgb, var(--bs-text) 10%, var(--bs-karte)); } #bsBereich[data-bereich="formulare"] .bfo-zurueck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #bsBereich[data-bereich="formulare"] .bfo-eintrag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #bsBereich[data-bereich="formulare"] .bfo-frist { margin-top: 0; } #bsBereich[data-bereich="formulare"] .bfo-antworten { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; } #bsBereich[data-bereich="formulare"] .bfo-antworten th { width: 38%; text-align: left; font-weight: 500; color: var(--bs-leise); padding: 8px 12px 8px 0; vertical-align: top; border-bottom: 1px solid var(--bs-linie); } #bsBereich[data-bereich="formulare"] .bfo-antworten td { padding: 8px 0; vertical-align: top; border-bottom: 1px solid var(--bs-linie); white-space: pre-line; overflow-wrap: anywhere; } #bsBereich[data-bereich="formulare"] .bfo-antworten tr.bfo-ab th { width: auto; padding-top: 16px; font-size: 14px; font-weight: 700; color: var(--bs-text); } #bsBereich[data-bereich="formulare"] .bfo-bilder { display: flex; flex-wrap: wrap; gap: 8px; } #bsBereich[data-bereich="formulare"] .bfo-bilder img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--marke-r-m); background: var(--bs-weich); cursor: zoom-in; } #bsBereich[data-bereich="formulare"] .bfo-bilder img.unterschrift { width: 200px; object-fit: contain; background: #fff; } #bsBereich[data-bereich="formulare"] .bfo-notiz { width: 100%; box-sizing: border-box; font: inherit; resize: vertical; margin-bottom: 8px; } #bsBereich[data-bereich="formulare"] .bfo-eintrag-aktion { padding-top: 12px; border-top: 1px solid var(--bs-linie); } #bsBereich[data-bereich="formulare"] .bfo-eintrag-aktion .bfo-gefahr { margin-left: auto; } /* Bearbeiten: der Baukasten eingebettet */ #bsBereich[data-bereich="formulare"] .bfo-rahmen { display: block; width: 100%; height: max(520px, calc(100vh - 320px)); border: 1px solid var(--bs-linie); border-radius: var(--bs-r-k); background: var(--bs-karte); } /* Tablet-Rahmen: Gerät mit dunklem Rand, Bildschirm maßstabsgetreu verkleinert, drehbar */ #bsBereich[data-bereich="formulare"] .bfo-tablet-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } #bsBereich[data-bereich="formulare"] .bfo-buehne { display: flex; justify-content: center; padding: 8px 0; min-width: 0; } /* marke-ausnahme: der Geräterand ist ein Tablet-Gehäuse (Grafit), keine Fläche der Oberfläche */ #bsBereich[data-bereich="formulare"] .bfo-geraet { position: relative; box-sizing: border-box; padding: var(--bfo-rand, 28px); border-radius: calc(var(--bfo-rand, 28px) * 1.3); background: var(--marke-grafit); box-shadow: 0 18px 40px rgba(15, 23, 42, .18); transition: width .3s, height .3s; overflow: hidden; } #bsBereich[data-bereich="formulare"] .bfo-skala { transform-origin: 0 0; border-radius: 6px; overflow: hidden; background: var(--marke-flaeche); } #bsBereich[data-bereich="formulare"] .bfo-skala iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--marke-flaeche); } /* Teilen */ #bsBereich[data-bereich="formulare"] .bfo-teilen { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; } #bsBereich[data-bereich="formulare"] .bfo-teilen-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; } #bsBereich[data-bereich="formulare"] .bfo-link { width: 100%; box-sizing: border-box; } #bsBereich[data-bereich="formulare"] .bfo-qr { display: grid; justify-items: center; gap: 12px; } #bsBereich[data-bereich="formulare"] .bfo-qr img { width: 200px; height: 200px; padding: 8px; box-sizing: border-box; border-radius: var(--bs-r-k); background: #fff; } #bsBereich[data-bereich="formulare"] .bfo-qr a.bs-knopf { display: inline-flex; align-items: center; text-decoration: none; } /* Neues Formular: Vorlagen als Kacheln */ #bsBereich[data-bereich="formulare"] .bfo-vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; } #bsBereich[data-bereich="formulare"] .bfo-vorlage { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 132px; padding: 16px 18px; border: 0; border-radius: var(--bs-r-k); background: var(--bs-weich); color: var(--bs-text); font-family: var(--marke-schrift); text-align: left; cursor: pointer; transition: box-shadow .25s, transform .25s; } #bsBereich[data-bereich="formulare"] .bfo-vorlage:hover { box-shadow: var(--wb-schatten-hover, 0 10px 26px rgba(15, 23, 42, .10)); transform: translateY(-2px); } #bsBereich[data-bereich="formulare"] .bfo-vorlage:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; } #bsBereich[data-bereich="formulare"] .bfo-vorlage:disabled { opacity: .55; cursor: default; } #bsBereich[data-bereich="formulare"] .bfo-vorlage b { font-size: 14px; font-weight: 700; } #bsBereich[data-bereich="formulare"] .bfo-vorlage span { font-size: 12px; color: var(--bs-leise); line-height: 1.45; } #bsBereich[data-bereich="formulare"] .bfo-vorlage small { margin-top: auto; font-size: 11px; font-weight: 600; color: var(--bs-leise); } /* Druck-Rahmen für den Prüfbericht: unsichtbar */ .bfo-druck { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; } /* Spalten wie die Startseite (6 · 4 bis 1100 px · 3 bis 899 px · 1 unter 700 px) */ @media (max-width: 1100px) { #bsBereich[data-bereich="formulare"] .bfo-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 899px) { #bsBereich[data-bereich="formulare"] .bfo-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { :root:not(.wb-menue-modus) #bsBereich[data-bereich="formulare"] .bs-liste { margin: 0 -12px -12px; padding: 12px; } #bsBereich[data-bereich="formulare"] .bfo-raster { gap: 12px; } #bsBereich[data-bereich="formulare"] .bs-d-aktion { position: static; margin-top: 8px; } #bsBereich[data-bereich="formulare"] .bs-d-aktion .bfo-gefahr, #bsBereich[data-bereich="formulare"] .bfo-eintrag-aktion .bfo-gefahr { margin-left: 0; } #bsBereich[data-bereich="formulare"] .bfo-teilen { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 699px) { #bsBereich[data-bereich="formulare"] .bfo-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 132px; } #bsBereich[data-bereich="formulare"] .bfo-k { padding: 16px 18px; } #bsBereich[data-bereich="formulare"] .bfo-leer { grid-column: span 1; } #bsBereich[data-bereich="formulare"] .bfo-kopf { grid-column: 1 / -1; grid-row: span 2; } #bsBereich[data-bereich="formulare"] .bfo-tabelle .bs-tabelle th:first-child { width: auto; } /* Handy: Frist und Fotos stehen im Eintrag selbst – in der Liste nur Eingang, Von, Stand */ #bsBereich[data-bereich="formulare"] .bfo-tabelle .bfo-schmal { display: none; } #bsBereich[data-bereich="formulare"] .bfo-tabelle .bs-tabelle td:first-child { white-space: normal; } #bsBereich[data-bereich="formulare"] .bfo-tabelle .bs-tabelle th:last-child { width: 108px; } #bsBereich[data-bereich="formulare"] .bfo-antworten th { width: 44%; } } @media (prefers-reduced-motion: reduce) { #bsBereich[data-bereich="formulare"] .bfo-k.bs-kachel:hover, #bsBereich[data-bereich="formulare"] .bfo-vorlage:hover { transform: none; } #bsBereich[data-bereich="formulare"] .bfo-geraet { transition: none; } } /* ── Menü-Modus (Ralph 08.11.2026): rechts die schmale Liste „Meine Formulare" (zuklappbar), links die Arbeitsfläche; Aufbau wie die Transkription. Spalten, Trennlinie und Zeilen kommen vom gemeinsamen Baustein .wss.wss-zwei (workspace-bento-schlicht.css / -seite-liste.css). ── */ .bfo-lkopf { display: flex; align-items: center; gap: 8px; min-width: 0; } .bfo-lkopf h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; font: 600 14px/1.3 var(--marke-schrift); color: var(--wb-text, var(--bs-text)); } .bfo-zahl { flex: none; min-width: 22px; height: 20px; padding: 0 7px; box-sizing: border-box; border-radius: var(--marke-r-pill); background: var(--wb-weich, var(--bs-weich)); color: var(--wb-leise, var(--bs-leise)); font: 700 12px/20px var(--marke-schrift); text-align: center; font-variant-numeric: tabular-nums; } .bfo-zu, .bfo-leiste { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--marke-r-s, 6px); background: transparent; color: var(--wb-leise, var(--bs-leise)); cursor: pointer; } .bfo-zu { margin-left: auto; } .bfo-zu:hover, .bfo-leiste:hover { background: var(--wb-weich, var(--bs-weich)); color: var(--wb-text, var(--bs-text)); } .bfo-zu:focus-visible, .bfo-leiste:focus-visible { outline: 2px solid var(--marke-nav-blau); outline-offset: 1px; } .bfo-zu svg, .bfo-leiste svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bfo-leiste { display: none; width: 36px; height: 36px; border: 1px solid var(--marke-linie); } .bfo-zeile-neu .wss-sym svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Zugeklappt: kein Platz für die Liste – nur ein kleiner schwebender Knopf (Pfeil + Zahl) unten rechts, die Arbeitsfläche bekommt die volle Breite */ .bfo-wss.bfo-liste-zu { position: relative; } :root.wb-menue-modus #bsBereich[data-bereich] .bfo-wss.bfo-liste-zu > .wss-spalte, .bfo-wss.bfo-liste-zu .wss-spalte { position: absolute; right: 12px; bottom: 12px; z-index: 6; width: auto; height: auto; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; } .bfo-wss.bfo-liste-zu .wss-spalte > :not(.bfo-leiste) { display: none; } .bfo-wss.bfo-liste-zu .bfo-leiste { display: inline-flex; gap: 6px; width: auto; height: 36px; padding: 0 14px 0 10px; box-sizing: border-box; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-pill, 999px); background: var(--wb-karte, var(--marke-flaeche)); box-shadow: var(--marke-schatten, 0 8px 22px rgba(15, 23, 42, .16)); color: var(--wb-text, var(--bs-text)); font: 700 12px var(--marke-schrift); font-variant-numeric: tabular-nums; } .bfo-leiste-zahl:empty { display: none; } @media (min-width: 1001px) { :root.wb-menue-modus #bsBereich[data-bereich] .bfo-wss.wss-zwei.bfo-liste-zu { grid-template-columns: minmax(0, 1fr); } } /* Arbeitsfläche: Detail steht flach auf dem Grund, die Aktionsleiste unten ohne Überstand */ .bfo-wss .wss-detail { padding-bottom: 12px; } .bfo-wss .bs-d-aktion { position: static; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--bs-linie, var(--marke-linie)); background: none; box-shadow: none; } .bfo-wss .bfo-vorlagen { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .bfo-start { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px 16px; } .bfo-start h2 { margin: 0; font: 700 20px var(--marke-schrift); color: var(--wb-text, var(--bs-text)); } .bfo-start p { margin: 0; max-width: 360px; font-size: 13px; line-height: 1.5; color: var(--wb-leise, var(--bs-leise)); } @media (max-width: 1000px) { /* Handy: oben die Arbeitsfläche (scrollt für sich), darunter die Kopfzeile, die die Liste aufklappt */ :root.wb-menue-modus #bsBereich[data-bereich] .bfo-wss.wss-zwei { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: var(--marke-sp-3); } :root.wb-menue-modus #bsBereich[data-bereich] .bfo-wss.wss-zwei > .wss-detail { order: 1; border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; min-height: 0; overflow-y: auto; } :root.wb-menue-modus #bsBereich[data-bereich] .bfo-wss.wss-zwei > .wss-spalte { order: 2; } :root.wb-menue-modus #bsBereich .bfo-wss .wss-liste { max-height: 36vh; } .bfo-lkopf { padding: 10px 12px; border: 1px solid var(--marke-linie); border-radius: var(--marke-r-m); cursor: pointer; } .bfo-zu svg { transform: rotate(90deg); } .bfo-liste-zu .bfo-zu svg { transform: rotate(-90deg); } :root.wb-menue-modus #bsBereich[data-bereich] .bfo-wss.wss-zwei.bfo-liste-zu { grid-template-rows: minmax(0, 1fr); row-gap: 0; } } /* lange Namen enden mit „…", die Zeile bricht nie um */ :root.wb-menue-modus #bsBereich .bfo-wss .bfo-zeile { flex-wrap: nowrap; } :root.wb-menue-modus #bsBereich .bfo-wss .bfo-zeile .wss-text { flex: 1 1 0; min-width: 0; } :root.wb-menue-modus #bsBereich[data-bereich] .bfo-wss.bfo-liste-zu > .wss-detail { border-right: 0; padding-right: 0; }