/* ── Startseite der Rollen im „Bento“-Stil (v4.928) ────────────────────────────────────────────── * Peter, 27.10.2026, nach der Vorschau mit vier Stilen: „die Bento-Variante finde ich wirklich modern … eine große * Hauptkarte, die anderen ein Stück kleiner“ — und ÜBERALL gleich, am iPad wie am PC und Notebook („sonst fragt sich * jeder, warum es beim iPad anders aussieht“). * Gilt für Mitarbeiter (#empTileGrid), Kunde und Besteller (#custTileGrid). Die Steuer-Startseite bleibt, wie sie ist. * Aufbau: oben ein schmaler Streifen mit der Handlung (Einchecken / Bestellung aufgeben), darunter links die große * Hauptkachel mit Verlauf, rechts vier kleine; beim Kundenadmin ganz unten der Streifen „Freigaben“. * Welche Kachel was ist, setzt js/bento.js (Klassen bnStreifen/bnGross/bnKlein am Gitterfeld, `data-bn` = Spalten). * ⚠️ Liegt ÜBER den bisherigen Kachelregeln (index.html, `.empTile`/`.ktKachel`, teils mit !important und cqw-Maßen). * Darum der Vorsatz mit beiden Ansichts-Kennungen und an den Stellen, die dort !important tragen, ebenfalls * !important. Ohne die Klasse `bento` am Gitter (js/bento.js fehlt) gilt alles Bisherige unverändert. */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento{ display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-auto-rows:auto!important;grid-auto-flow:row dense; gap:14px!important;align-content:start!important;flex:0 0 auto!important; margin-top:18px!important;padding:0 2px 6px;perspective:none; --bnRand:rgba(255,255,255,.08);--bnLeise:#6d8299;--bnSpur:rgba(255,255,255,.08); } html[data-theme=light] :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento{ --bnRand:rgba(15,23,42,.07);--bnLeise:#9aa3ad;--bnSpur:#eef1f4; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento > *{min-width:0;display:flex} /* ⚠️ Am Rechner (≥ 981 px, Maus) setzt index.html `.ktZelle{align-items:center}` und begrenzt die Kachel auf 88cqw — die große Kachel stand dadurch mittig und halb so hoch wie ihre zwei Reihen (gesehen 1440 × 900). Hier wird gestreckt. */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento > .ktZelle{align-items:stretch!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento > .bnStreifen{grid-column:1/-1;order:-3} /* Freigaben (nur Kundenadmin) unten, wie in der bisherigen Startseite: die Kachel kommt oft erst nach den übrigen (sie wartet auf die Anfragen vom Server) — oben schob sie dann alles um 90 px nach unten (Kontrolletti, 28.10.2026). */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento > .bnStreifen2{grid-column:1/-1;order:1} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento > .bnGross{grid-column:span 2;grid-row:span 2;order:-1} /* ⚠️ Reihen nach Inhalt (`grid-auto-rows:auto`), die Mindesthöhe trägt die kleine Kachel: mit einer Mindesthöhe der REIHEN wurde auch die Streifen-Reihe 150 px hoch, und unter dem Streifen klaffte eine Lücke (gesehen 27.10.2026). */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnKlein .empTile{min-height:150px!important} /* Im Querformat etwas mit der Fensterhöhe mitwachsen: am Rechner (900 px hoch) blieb sonst die halbe Seite leer. Hochkant nicht — dort standen die kleinen Kacheln dann halb leer (iPad Air hochkant, 27.10.2026). */ @media (orientation:landscape){ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnKlein .empTile{min-height:clamp(150px,20vh,210px)!important} } /* Schmaler (iPad hochkant mit Seitenleiste, kleines Fenster): zwei Spalten, die Hauptkachel über die ganze Breite. */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento[data-bn="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento[data-bn="2"] > .bnGross{grid-column:1/-1;grid-row:span 1} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento[data-bn="1"]{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento[data-bn="1"] > .bnGross{grid-column:1/-1;grid-row:span 1} /* ── Die Karte selbst: ruhig, eine Fläche, keine Zeichnung ── */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTile{ --bnAkz:rgb(var(--empTileTint));--bnFl:rgba(var(--empTileTint),.14); width:100%;height:auto!important;max-height:none!important;min-height:0!important; border-radius:22px!important;padding:16px 18px!important; /* ⚠️ Kein Spaltenabstand im Raster, sondern Ränder an Symbol, Zähler, Pfeil, Knopf: Ein `column-gap` fiel auch vor der leeren dritten Spalte an und nahm dem Titel 10 px — „Klassifizierung“ brach dann dreizeilig um (820 px). Ganz ohne Abstand klebte das Symbol am Titel (Kontrolletti, 27.10.2026). */ gap:0!important; background:var(--card)!important;border:1px solid var(--bnRand)!important; box-shadow:none;overflow:hidden; display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto; align-items:center; } html[data-theme=light] :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTile{box-shadow:0 1px 2px rgba(15,35,56,.05)} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTile.ktKachel{--bnAkz:var(--ktAkz);--bnFl:var(--ktFl)} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTile :is(.ktIllu,.empTileWm,.empTileDesc){display:none!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .ktZelle::after{border-radius:22px} /* Platzhalter der Start-Einblendung (index.html hängt `.dbSkelGrp` an jede Kachel und nimmt ihn nach gut 2 s wieder weg): im Raster der Kachel war er eine zusätzliche Zeile — der Streifen wuchs von 70 auf 137 px, und beim Entfernen sprangen die Kacheln darunter um 67 px hoch (Kontrolletti, 28.10.2026). Darum schwebend an der Stelle des Titels, der solange verborgen ist; `--bnSk*` = Innenabstand der Kachel, links dazu Symbol und dessen Rand. */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTile > .dbSkelGrp{ position:absolute!important;top:var(--bnSkOben,16px);left:var(--bnSkLinks,62px);right:18px;padding:0!important;pointer-events:none; } /* Zwei Balken statt drei: der dritte reichte in der kleinen Kachel in die Zahl (63 gegen 58 px ab Oberkante). */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTile > .dbSkelGrp > .dbSkel:nth-child(n+3){display:none} /* Ohne den Abstand unter dem nun letzten Balken: mit ihm war der Platzhalter 41 px hoch, der Mitarbeiter-Streifen 40 — er wuchs beim Laden um 1 px. */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTile > .dbSkelGrp > .dbSkel:nth-child(2){margin-bottom:0!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnKlein .empTile{--bnSkLinks:58px} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnGross .empTile{--bnSkOben:20px;--bnSkLinks:64px} /* Im Streifen genau in der Textspalte zwischen Symbol und Knopf: mit festem Abstand von rechts reichte der Balken in die Fußnote „12 ausstehend“ neben dem Knopf (Kontrolletti, 28.10.2026). Feste Zeilen 1–2, also keine neue Zeile, kein Sprung (zwei Balken = 36 px, die beiden Zeilen sind mit dem Symbol mindestens 40 px hoch). */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2) .empTile > .dbSkelGrp{ position:static!important;grid-column:2;grid-row:1/3;align-self:center; } /* Der Zustand „Noch nicht eingecheckt“ steht in der Zeile der Beschreibung, ist aber keine (#empExtra__checkin ist die Zahlenzeile der Kachel) — index.html blendet ihn darum beim Laden nicht aus, und er stand sichtbar unter dem Balken (Kontrolletti, 28.10.2026). Hier wie die Beschreibung: aus, solange der Platzhalter steht, dann mit dem Titel wischen. */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnStreifen .empTile:has(> .dbSkelGrp) .empCiStatus{opacity:0!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnStreifen .empTile:has(> .empTileTitle.dbContentWipe) .empCiStatus{ animation:dbContentWipe .7s cubic-bezier(.25,.46,.45,.94) forwards; } /* Kopf: Symbol, Titel, (große Kachel:) Pfeil */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileIcon{ grid-column:1;grid-row:1;width:34px!important;height:34px!important;border-radius:10px!important; border:0!important;background:var(--bnFl)!important;box-shadow:none!important;color:var(--bnAkz)!important;margin:0 10px 0 0!important; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileIcon svg{width:19px!important;height:19px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileTitle{ grid-column:2;grid-row:1;margin:0!important;font-size:16px!important;font-weight:600;line-height:1.25!important;letter-spacing:0!important; color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileArrow{ grid-column:3;grid-row:1;position:static!important;width:28px!important;height:28px!important;border:0!important; color:var(--bnLeise)!important;display:none!important;align-items:center;justify-content:center;margin-left:8px!important; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileArrow svg{width:18px!important;height:18px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnGross .empTileArrow{display:flex!important} /* Zähler (offene Aufgaben, Freigaben): klein neben dem Titel statt in der Ecke */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileBadge{ position:static!important;grid-column:3;grid-row:1;justify-self:end; min-width:22px!important;height:22px!important;border-radius:999px!important;padding:0 7px!important;font-size:12px!important; display:inline-flex;align-items:center;justify-content:center;margin-left:8px; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnGross .empTileBadge{grid-column:3;margin-right:34px} /* Zahl unten, Beschriftung daneben, Fußnote darunter */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileBigNum{ grid-column:1/-1;grid-row:3;padding:0!important;margin:0!important;max-width:none!important; display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;align-content:flex-start;min-width:0; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileBigNum:not(.empTileBigNumCust){flex-direction:row;align-items:baseline;gap:6px;flex-wrap:wrap} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileBigNumRow{display:flex;align-items:baseline;gap:6px!important;max-width:none!important;flex-wrap:wrap} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileBigNumV{ font-size:34px!important;font-weight:700;line-height:1;letter-spacing:-.03em!important;color:var(--txt)!important;font-variant-numeric:tabular-nums; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileBigNumV:is([data-count="0"],[data-count="0.0"]){color:var(--bnLeise)!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.empTileBigNumLInline,.empTileBigNumL,.empTileBigNumUnit){ font-size:14px!important;font-weight:500;color:var(--mut)!important;margin:0!important;max-width:100%!important; text-transform:none!important;letter-spacing:0!important; position:static!important;white-space:normal;overflow-wrap:break-word; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileFootnote{ font-size:13px!important;color:var(--mut)!important;margin:5px 0 0!important;max-width:100%!important; background:none!important;padding:0!important;border:0!important;border-radius:0!important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block!important;-webkit-line-clamp:unset!important; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileFootnote *{white-space:nowrap} /* Unter der Zahl bis zu zwei Zeilen: einzeilig blieb vom Produkt oft nur „Letzte: Seitenwand-…“ (Kontrolletti, 27.10.2026). */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileBigNum .empTileFootnote{ white-space:normal;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2!important;overflow-wrap:break-word;line-height:1.35!important; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileBigNum .empTileFootnote *{white-space:normal} /* ── Kleine Kacheln ── */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnKlein .empTileBigNum{margin-top:12px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnKlein .empTileIcon{width:30px!important;height:30px!important;border-radius:9px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnKlein .empTileIcon svg{width:17px!important;height:17px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnKlein .empTileTitle{ /* Bis zu drei Zeilen: „Wartet auf interne Freigabe“ braucht hochkant (820 px) drei, Platz ist in der Füllzeile. */ font-size:14px!important;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; /* „Qualitätskontrolle“ ist EIN Wort — ohne Trennung blieb es einzeilig mit „…“ statt umzubrechen. Getrennt werden nur lange Wörter: ohne die Grenzen trennte der Browser auch „inter-ne Freigabe“. */ -webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word; hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5; } /* ── Große Kachel ── */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnGross .empTile{padding:20px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnGross .empTileTitle{font-size:17px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnGross .empTileBigNum{grid-row:2;align-self:start;margin-top:18px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnGross .empTileBigNumV{font-size:56px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnGross :is(.empTileBigNumLInline,.empTileBigNumL,.empTileBigNumUnit){font-size:15px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnGross .bnChart{grid-column:1/-1;grid-row:4;margin-top:16px} .bnBalken{display:flex;align-items:flex-end;gap:10px;height:96px} /* ⚠️ Je Tag ein Raster (Säulenfeld, Beschriftung): als Flex-Spalte rechnete die Prozenthöhe gegen die ganzen 96 px samt Beschriftung und wurde dann oben gestaucht — 9 h und 12 h standen gleich hoch (Kontrolletti, 27.10.2026). */ .bnBalken > div{flex:1;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto;row-gap:6px;justify-items:center;height:100%} .bnBalken i{display:block;align-self:end;width:100%;max-width:56px;border-radius:8px;background:var(--bnAkz);opacity:.55} .bnBalken > .heute i{opacity:1} .bnBalken i.leer{background:var(--bnSpur);opacity:1} .bnBalken span{font-size:12px;color:var(--mut)} .bnBalken > .heute span{color:var(--txt);font-weight:600} .bnVert{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:3px;background:var(--bnSpur)} .bnVert i{display:block;height:100%;min-width:6px} .bnLeg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin-top:14px;font-size:14px} .bnLeg span{display:flex;align-items:flex-start;gap:8px;color:var(--mut);min-width:0;line-height:1.35} /* Mit Trennstrich trennen: nur `break-word` brach am schmalen Fenster „Zurückgewies|en“ (Kontrolletti, 375 px). */ .bnLeg span u{text-decoration:none;overflow-wrap:break-word;min-width:0;-webkit-hyphens:auto;hyphens:auto; hyphenate-limit-chars:12 5 5;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5} .bnLeg b{margin-left:auto;color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums} .bnLeg em{width:10px;height:10px;border-radius:3px;flex:none;margin-top:4px} /* Farbe je Abschnitt = Farbe der zugehörigen kleinen Kachel (Variablen von dort übernommen) */ .bnFarbe{background:rgb(var(--empTileTint))} .bnFarbe.bnKt{background:var(--ktAkzD)} html[data-theme=light] .bnFarbe.bnKt{background:var(--ktAkzH)} /* ── Streifen (Handlung) ── */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2) .empTile{ border-radius:20px!important;padding:14px 16px!important;grid-template-rows:auto auto; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2) .empTileIcon{grid-row:1/3;width:40px!important;height:40px!important;border-radius:12px!important;margin-right:14px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2) .empTileIcon svg{width:21px!important;height:21px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2) .empTileTitle{align-self:end} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2) .empTileDesc{ grid-column:2;grid-row:2;align-self:start;margin:1px 0 0!important;font-size:14px!important; color:var(--mut)!important;max-width:none!important; /* Ohne Zeilengrenze: auf zwei Zeilen gekappt endete „Bestellung aufgeben“ zwischen 561 und 640 px mit „…“ (Kontrolletti, 28.10.2026). Der Streifen wird dann eben eine Zeile höher. */ white-space:normal;display:block!important; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2) .empTileArrow{display:none!important} /* Einchecken: Zustand als zweite Zeile, Knopf rechts (statt der Beschreibung) */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnStreifen #empExtra__checkin{display:contents!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnStreifen:has(#empExtra__checkin .empCiStatus) .empTileDesc{display:none!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnStreifen .empCiStatus{ grid-column:2;grid-row:2;align-self:start;margin:1px 0 0!important;font-size:14px!important;color:var(--mut)!important;max-width:none!important; white-space:normal;display:block!important; /* Zeilenhöhe der Beschreibung, die der Zustand ersetzt (index.html: 1.25 gegen 1.45). Sonst schrumpfte der Streifen von 71 auf 70 px, wenn die Zeiterfassung erst nach dem Einblenden kam, und alles darunter rückte 1 px hoch (Kontrolletti, 28.10.2026). */ line-height:1.45!important; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnStreifen .empTileCheckedIn .empCiStatus{color:var(--cwOk)!important;font-weight:600} /* ⚠️ `align-self` ausdrücklich: index.html heftet `.empCiBtn` oben an (flex-start) — „Einchecken“ stand 1,6 px über der Mitte, bei zweizeiligem Zustand 9,6 px (Kontrolletti, 28.10.2026). */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2) :is(.empCiBtn,.ktCtaWrap,.empTileExtra){grid-column:3;grid-row:1/3;margin:0 0 0 14px!important;align-self:center!important} /* ⚠️ index.html gibt dem Knopfrahmen oben 14 px Abstand und stapelt senkrecht (Kachel „Bestellung aufgeben“ alter Art) — im Streifen stand der Knopf dadurch 7 px unter der Mitte (Kontrolletti, 28.10.2026). */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .ktCtaWrap{display:flex!important;flex-direction:row;align-items:center;gap:14px;padding:0;position:static!important} /* `align-self` ausdrücklich: index.html setzt `flex-start` (dort links, in der Spalte) — in der Reihe hier hieß das oben, „12 ausstehend“ stand 10 px über der Mitte des Knopfs. */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .ktCtaWrap .empTileFootnote{margin:0!important;font-size:13px!important;align-self:center!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.empCiBtn,.ktCta){ font-size:15px!important;font-weight:600;padding:9px 18px!important;border-radius:999px!important; background:#2076b8!important;color:#fff!important;white-space:nowrap;display:inline-flex!important;align-items:center;gap:8px; border:0!important;box-shadow:none!important;height:auto!important;min-height:0!important;line-height:1.25!important; } html[data-theme=light] :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.empCiBtn,.ktCta){background:#1d5f9e!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .ktCta svg{width:16px!important;height:16px!important} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileExtra{ display:flex;align-items:center;gap:6px;font-size:13px!important;color:var(--mut)!important;border:0!important;padding:0!important;white-space:nowrap; } :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .empTileExtra:empty{display:none} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnStreifen2 .empTileBadge{grid-column:3;grid-row:1/3} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento .bnStreifen2:has(.empTileBadge:not([style*="none"])) .empTileExtra{display:none} /* Reicht der Platz neben dem Knopf nicht für den ganzen Titel, steht der Knopf unter dem Text (`bnUnter` setzt js/bento.js nach Messung): daneben wurde der Titel zu „Bestel…“ und der Text bis sieben Zeilen hoch (Kontrolletti, 28.10.2026). */ :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2).bnUnter .empTile{grid-template-rows:auto auto auto} :is(#viewEmpDashboard,#viewCustDashboard) .empTiles.bento :is(.bnStreifen,.bnStreifen2).bnUnter :is(.empCiBtn,.ktCtaWrap,.empTileExtra){grid-column:1/-1;grid-row:3;margin:12px 0 0!important;justify-self:start}