/* /Components/Layout/AdminBanner.razor.rz.scp.css */ /* Höhe bewusst fest (identisch zu html.has-app-banner in app.css) statt var(--app-banner-h): so bleibt der Banner auch sichtbar, wenn die -Klasse mal nicht (mehr) stimmt — sonst gäbe es einen 0px-Banner bzw. reservierten Leerraum ohne Inhalt. */ .abanner[b-avrnb8s8uc] { /* Eigener Stacking-Context: Seiten wie /dashboard ziehen ihren Inhalt per negativem Margin unter Banner + Header — ohne z-index übermalt deren heller Hintergrund den dunklen Banner (weiße Schrift auf hellem Grund = scheinbar leerer Streifen über dem Header). */ position: relative; z-index: 1200; display: flex; align-items: center; justify-content: center; gap: 9px; height: calc(40px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); padding-left: 16px; padding-right: 16px; box-sizing: border-box; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 700; color: #fff; text-align: center; flex-shrink: 0; } .abanner--info[b-avrnb8s8uc] { background: #16181c; } .abanner--warn[b-avrnb8s8uc] { background: #a15c00; } .abanner-ic[b-avrnb8s8uc] { display: inline-flex; align-items: center; flex: none; opacity: .9; } .abanner-text[b-avrnb8s8uc] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 520px) { .abanner[b-avrnb8s8uc] { height: calc(36px + env(safe-area-inset-top, 0px)); } } /* /Components/Layout/AdminImpersonationBar.razor.rz.scp.css */ .aimp-bar[b-bzhxd4ntl0] { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2600; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 999px; background: #16181c; color: #fff; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13.5px; max-width: calc(100vw - 24px); } .aimp-ic[b-bzhxd4ntl0] { display: inline-flex; align-items: center; opacity: .85; flex: none; } .aimp-text[b-bzhxd4ntl0] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aimp-text strong[b-bzhxd4ntl0] { font-weight: 800; } .aimp-form[b-bzhxd4ntl0] { flex: none; margin: 0; } .aimp-btn[b-bzhxd4ntl0] { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: #16181c; font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: background .14s ease; } @media (hover: hover) { .aimp-btn:hover[b-bzhxd4ntl0] { background: #e4e4e7; } } /* /Components/Layout/AdminMessagePopup.razor.rz.scp.css */ .amsgpop-overlay[b-98xj4halx5] { position: fixed; inset: 0; z-index: 2400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(22, 24, 28, .4); backdrop-filter: blur(3px); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .amsgpop-card[b-98xj4halx5] { width: min(480px, 100%); max-height: 82dvh; display: flex; flex-direction: column; background: #fff; border: 1px solid #e4e4e7; border-radius: 20px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .3); overflow: hidden; animation: amsgpop-pop-b-98xj4halx5 .2s ease; } @keyframes amsgpop-pop-b-98xj4halx5 { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .amsgpop-head[b-98xj4halx5] { padding: 22px 24px 14px; border-bottom: 1px solid #f0f0f2; } .amsgpop-badge[b-98xj4halx5] { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #80858d; margin-bottom: 8px; } .amsgpop-badge--note[b-98xj4halx5] { color: #16a34a; } .amsgpop-title[b-98xj4halx5] { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: #16181c; } .amsgpop-body[b-98xj4halx5] { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 24px; color: #3c4148; font-size: 14.5px; line-height: 1.6; } .amsgpop-foot[b-98xj4halx5] { display: flex; align-items: center; gap: 12px; padding: 14px 24px 18px; border-top: 1px solid #f0f0f2; } .amsgpop-count[b-98xj4halx5] { font-size: 12.5px; color: #80858d; font-weight: 600; } .amsgpop-ok[b-98xj4halx5] { margin-left: auto; height: 46px; padding: 0 28px; border: 0; border-radius: 12px; background: #16181c; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .14s ease; } @media (hover: hover) { .amsgpop-ok:hover[b-98xj4halx5] { background: #26282e; } } /* /Components/Layout/CommandPalette.razor.rz.scp.css */ /* ================================================================ Befehlspalette (Strg+K) — monochrom, wie die Header-Dropdowns. ================================================================ */ .cpal[b-7m6vxs9nxz] { position: fixed; inset: 0; z-index: 4000; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } .cpal__backdrop[b-7m6vxs9nxz] { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(22, 24, 28, .28); backdrop-filter: blur(2px); cursor: default; animation: cpal-fade-b-7m6vxs9nxz .14s ease-out; } .cpal__panel[b-7m6vxs9nxz] { position: relative; width: min(560px, calc(100vw - 32px)); margin: 9vh auto 0; background: #fff; border: 1px solid #e4e4e7; border-radius: 18px; corner-shape: superellipse(1.2); /* weiche Squircle-Ecken, s. Header */ box-shadow: 0 40px 80px -32px rgba(0, 0, 0, .45), 0 8px 20px -12px rgba(0, 0, 0, .18); overflow: hidden; animation: cpal-up-b-7m6vxs9nxz .16s cubic-bezier(.2, .9, .3, 1); } /* ---- Suchzeile ---- */ .cpal__search[b-7m6vxs9nxz] { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid #f0f0f2; } .cpal__lupe[b-7m6vxs9nxz] { width: 18px; height: 18px; flex: 0 0 auto; color: #80858d; } .cpal__search input[b-7m6vxs9nxz] { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: #16181c; } .cpal__search input[b-7m6vxs9nxz]::placeholder { color: #a6aab1; font-weight: 500; } .cpal__kbd[b-7m6vxs9nxz] { flex: 0 0 auto; padding: 2px 6px; border: 1px solid #e4e4e7; border-radius: 6px; background: #fafafa; font-family: inherit; font-size: 10.5px; font-weight: 700; color: #80858d; line-height: 1.4; } /* ---- Gruppenfilter-Chips (Alt+0–9) ---- Grid statt Flex: jede Zelle gleich breit (auto-fill hält auch die letzte, nicht volle Zeile auf derselben Spaltenbreite). */ .cpal__filters[b-7m6vxs9nxz] { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 5px; padding: 9px 14px; border-bottom: 1px solid #f0f0f2; } .cpal__chip[b-7m6vxs9nxz] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 24px; padding: 0 6px; border: 1px solid #e4e4e7; border-radius: 999px; background: #fff; color: #3c4148; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; cursor: pointer; transition: background .13s ease, color .13s ease, border-color .13s ease; } @media (hover: hover) { .cpal__chip:hover[b-7m6vxs9nxz] { background: #efeff1; color: #16181c; } } .cpal__chip.is-on[b-7m6vxs9nxz] { background: #16181c; border-color: #16181c; color: #fff; } /* kleine Ziffern-Kachel = die Alt-Taste des Chips */ .cpal__chip-num[b-7m6vxs9nxz] { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 5px; background: #efeff1; color: #80858d; font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .cpal__chip.is-on .cpal__chip-num[b-7m6vxs9nxz] { background: rgba(255, 255, 255, .18); color: #fff; } /* ---- Treffer ---- */ .cpal__results[b-7m6vxs9nxz] { max-height: min(64vh, 640px); overflow-y: auto; padding: 8px; overscroll-behavior: contain; } .cpal__group[b-7m6vxs9nxz] { margin: 2px 0 1px; padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a6aab1; } .cpal__group:not(:first-child)[b-7m6vxs9nxz] { margin-top: 6px; padding-top: 10px; border-top: 1px solid #f0f0f2; } .cpal__row[b-7m6vxs9nxz] { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: 10px; color: #16181c; text-decoration: none; font-size: 13.5px; font-weight: 600; } /* Aktiv-Zeile wird über is-active (Tastatur + Mouseenter) geführt, nicht über :hover — sonst konkurrieren zwei Markierungen. */ .cpal__row:focus-visible[b-7m6vxs9nxz] { color: #16181c; text-decoration: none; outline: none; } @media (hover: hover) { .cpal__row:hover[b-7m6vxs9nxz] { color: #16181c; text-decoration: none; outline: none; } } .cpal__row.is-active[b-7m6vxs9nxz] { background: #efeff1; } .cpal__icon[b-7m6vxs9nxz] { width: 18px; height: 18px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #8b9097; } .cpal__icon svg[b-7m6vxs9nxz] { width: 17px; height: 17px; } .cpal__row.is-active .cpal__icon[b-7m6vxs9nxz] { color: #16181c; } .cpal__label[b-7m6vxs9nxz] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cpal__detail[b-7m6vxs9nxz] { margin-left: auto; padding-left: 12px; flex: 0 1 auto; max-width: 45%; color: #9095a0; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cpal__empty[b-7m6vxs9nxz] { padding: 28px 12px; text-align: center; color: #80858d; font-size: 13.5px; font-weight: 500; } /* ---- Fußzeile ---- */ .cpal__foot[b-7m6vxs9nxz] { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid #f0f0f2; color: #80858d; font-size: 11.5px; font-weight: 600; } .cpal__foot span[b-7m6vxs9nxz] { display: inline-flex; align-items: center; gap: 5px; } @keyframes cpal-fade-b-7m6vxs9nxz { from { opacity: 0; } } @keyframes cpal-up-b-7m6vxs9nxz { from { opacity: 0; transform: translateY(-8px) scale(.98); } } @media (prefers-reduced-motion: reduce) { .cpal__backdrop[b-7m6vxs9nxz], .cpal__panel[b-7m6vxs9nxz] { animation: none; } } /* Handy: Panel höher ansetzen, damit die Bildschirmtastatur Platz hat */ @media (max-width: 520px) { .cpal__panel[b-7m6vxs9nxz] { margin-top: 8vh; width: calc(100vw - 24px); } } /* /Components/Layout/Header.razor.rz.scp.css */ /* ================================================================ HEADER — Schwarz-Weiß Redesign Weiße Pill-Navigation mittig, runde Icon-Buttons rechts, weiße Dropdowns mit abgerundetem Zeiger. Akzent = Schwarz. ================================================================ */ .topbar[b-l04bbodsdm] { position: relative; display: flex; align-items: center; gap: 18px; height: var(--app-topbar-h); padding: var(--app-safe-top) 24px 0; box-sizing: content-box; background: #f5f5f7; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; flex-shrink: 0; } /* Auf der Karte (/dashboard): Header schwebt transparent über der Karte */ .topbar--overlay[b-l04bbodsdm] { background: transparent; z-index: 1200; } /* ---- Mobile: Hamburger + Titel (Desktop ausgeblendet) ---- */ .hburger[b-l04bbodsdm] { position: relative; display: none; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid #e4e4e7; border-radius: 999px; background: #fff; color: #16181c; cursor: pointer; padding: 0; box-shadow: 0 6px 18px -12px rgba(0,0,0,.22); touch-action: manipulation; } .hburger:active[b-l04bbodsdm] { background: #16181c; color: #fff; border-color: #16181c; } .hburger svg[b-l04bbodsdm] { width: 20px; height: 20px; } .hburger-dot[b-l04bbodsdm] { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #16181c; border: 2px solid #f5f5f7; } .htitle[b-l04bbodsdm] { display: none; position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 16px; color: #16181c; white-space: nowrap; pointer-events: none; } /* Über der Karte (Dashboard-Overlay, transparenter Header) bekommt der Brand-Titel eine weiße Pille – sonst läge der dunkle Text im Kompakt-Modus unleserlich direkt auf der Karte. Greift nur, wenn der Titel sichtbar ist (Kompakt/≤520px); sonst ist .htitle ohnehin display:none. */ .topbar--overlay .htitle[b-l04bbodsdm] { top: 50%; transform: translate(-50%, -50%); padding: 10px 18px; background: #fff; border: 1px solid #e4e4e7; border-radius: 999px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .04); } /* ===== Header-Uhr: große Zeit, daneben KW über kurzem Datum, mittig im Header ===== Sekunden zeigt keine Ziffer, sondern die Linie am Pillenboden (.hclock-sec): sie füllt sich in 60 s und ist genau zum Minutenwechsel voll. */ .hclock[b-l04bbodsdm] { display: none; position: relative; align-items: center; gap: 12px; flex: 0 0 auto; /* zusammen mit .htools margin-left:auto → die Uhr landet mittig zwischen Nav-Pille und Tools */ margin-left: auto; /* eigene weiße Pille wie Nav/Tools → über der Karte lesbar und zum Header passend */ height: 42px; padding: 0 16px; background: #fff; border: 1px solid #e4e4e7; border-radius: 999px; corner-shape: superellipse(1.2); /* weiche Squircle-Ecken, s. .hnav */ box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .04); white-space: nowrap; font-family: 'Plus Jakarta Sans', -apple-system, "Segoe UI", sans-serif; } .hclock-time[b-l04bbodsdm] { display: inline-flex; align-items: baseline; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .4px; color: #16181c; font-variant-numeric: tabular-nums; } /* Eigene Spans, damit headerClock.js Stunde und Minute getrennt hochrollen kann. */ .hclock-hh[b-l04bbodsdm], .hclock-mm[b-l04bbodsdm] { display: inline-block; } .hclock-colon[b-l04bbodsdm] { padding: 0 1px; } /* Haarlinie zwischen Zeit und KW/Datum-Block */ .hclock-div[b-l04bbodsdm] { width: 1px; height: 22px; flex: 0 0 auto; background: #ececef; } .hclock-stack[b-l04bbodsdm] { display: flex; flex-direction: column; line-height: 1.15; } .hclock-kw[b-l04bbodsdm] { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: #16181c; font-variant-numeric: tabular-nums; } .hclock-date[b-l04bbodsdm] { font-size: 11px; font-weight: 600; color: #80858d; text-transform: capitalize; font-variant-numeric: tabular-nums; } /* Sekundenlinie: seitlich auf Textbreite eingerückt (sonst würde der Anfang in der runden Pillenkappe verschwinden). Der Takt wird per negativem animation-delay aus der echten Uhr gesetzt (headerClock.js) – die Linie läuft dadurch phasengleich und driftet nicht. */ .hclock-sec[b-l04bbodsdm] { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 99px; background: #16181c; transform: scaleX(0); transform-origin: left center; animation: hclock-sec-b-l04bbodsdm 60s linear infinite; } @keyframes hclock-sec-b-l04bbodsdm { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Nur zeigen, wenn neben Nav-Pille und Tools genug Platz für die Mitte ist. */ @media (min-width: 1200px) { .hclock[b-l04bbodsdm] { display: flex; } } /* Kein prefers-reduced-motion-Riegel: die Linie IST die Sekundenanzeige, ein stufiges Weiterspringen sah aus wie ein Fehler. Sie läuft daher immer flüssig durch. */ /* ===== Nav-Pill (links) ===== */ .hnavzone[b-l04bbodsdm] { flex: 0 1 auto; min-width: 0; display: flex; justify-content: flex-start; } .hnav[b-l04bbodsdm] { position: relative; display: flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #e4e4e7; border-radius: 999px; /* Superellipse-Ecken (iOS-„Squircle"): glättet den harten Krümmungssprung, wo der Halbkreis in die gerade Kante übergeht. In Browsern ohne corner-shape (z. B. ältere Safari/Firefox) fällt es lautlos auf die normale Pille zurück. */ corner-shape: superellipse(1.2); /* Kein Innen-Padding: die Aktiv-/Hover-Pille füllt die Bar voll aus (kein weißer Rahmen um den ausgewählten Bereich). Bar bleibt 44px hoch, da die Tabs auf 42px wachsen (44 − 2×1px Border). */ padding: 0; box-shadow: 0 8px 24px -12px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.04); } .hitem[b-l04bbodsdm] { position: relative; display: flex; } .htab[b-l04bbodsdm] { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; line-height: 1; border: 0; border-radius: 999px; corner-shape: superellipse(1.2); /* weiche Squircle-Ecken, s. .hnav */ background: transparent; color: #16181c; font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; } @media (hover: hover) { .htab:not(.is-active):hover[b-l04bbodsdm] { background: #efeff1; color: #16181c; text-decoration: none; } } .htab.is-open:not(.is-active)[b-l04bbodsdm] { background: #efeff1; } /* Ghost-Kopie (weiße Text-Ebene in der schwarzen Aktiv-Pill) erbt nie den Offen-Zustand */ .hnav-ghost .htab.is-open:not(.is-active)[b-l04bbodsdm] { background: transparent; } /* Aktiv-Pill (morphend) + weiße Text-Kopie (Ghost) statt statischer Aktiv-Färbung */ .hnav-ind[b-l04bbodsdm] { position: absolute; /* headerNav.js misst die Tab-Positionen ab der Border-Box der .hnav; die Aktiv-Pille ist aber absolut positioniert (Ursprung = Padding-Box, 1px innerhalb der Border). Ohne Ausgleich säßen Pille UND Ghost-Text 1px zu tief/rechts. -1px (= Border-Breite) rückt beide exakt auf die echten Tabs. */ top: -1px; left: -1px; height: 42px; width: 0; overflow: hidden; border-radius: 999px; corner-shape: superellipse(1.2); /* weiche Squircle-Ecken, s. .hnav */ background: #16181c; z-index: 2; opacity: 0; pointer-events: none; transition: transform .42s cubic-bezier(.66,0,.18,1), width .42s cubic-bezier(.66,0,.18,1), height .42s cubic-bezier(.66,0,.18,1); } .hnav-ghost[b-l04bbodsdm] { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 2px; padding: 0; border: 1px solid transparent; pointer-events: none; white-space: nowrap; transition: transform .42s cubic-bezier(.66,0,.18,1); } .hnav-ghost .hitem[b-l04bbodsdm] { position: relative; display: flex; } .hnav-ghost .htab[b-l04bbodsdm] { color: #fff; background: transparent; } .hnav-ghost .hchev[b-l04bbodsdm] { color: #fff; } .hnav-ghost .htab-dot[b-l04bbodsdm], .hnav-ghost .hmenu[b-l04bbodsdm], .hnav-ghost .hmenu-backdrop[b-l04bbodsdm] { display: none; } /* Chevron folgt der Textfarbe (schwarz/weiß), nicht grau */ .hchev[b-l04bbodsdm] { width: 14px; height: 14px; margin: 0 -4px 0 -2px; color: inherit; transition: transform .18s ease; } .htab.is-open .hchev[b-l04bbodsdm] { transform: rotate(180deg); } /* Status-/Frist-Punkt am Tab (oben rechts) */ .htab-dot[b-l04bbodsdm] { position: absolute; top: -2px; right: 6px; z-index: 3; width: 10px; height: 10px; border-radius: 50%; background: #16181c; border: 2px solid #fff; pointer-events: none; } .htab.is-active ~ .htab-dot[b-l04bbodsdm] { background: #fff; border-color: #16181c; } /* ===== Tools (rechts) ===== */ .htools[b-l04bbodsdm] { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; /* hält die Tools rechts (vorher über hnavzone:flex:1; jetzt eigenständig, da die Uhr dazwischen liegt) */ margin-left: auto; } .hbtn[b-l04bbodsdm] { position: relative; width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid #e4e4e7; border-radius: 999px; background: #fff; color: #3c4148; cursor: pointer; padding: 0; box-shadow: 0 6px 18px -12px rgba(0,0,0,.22); transition: background .15s ease, color .15s ease, border-color .15s ease; touch-action: manipulation; } .hbtn.is-hot[b-l04bbodsdm] { background: #efeff1; color: #16181c; border-color: #e4e4e7; } @media (hover: hover) { .hbtn:hover[b-l04bbodsdm] { background: #efeff1; color: #16181c; border-color: #e4e4e7; } } /* Schwarz erst bei Klick (oder wenn das zugehörige Panel offen ist) */ .hbtn:active[b-l04bbodsdm], .hbtn.is-on[b-l04bbodsdm] { background: #16181c; color: #fff; border-color: #16181c; } .hbtn svg[b-l04bbodsdm] { width: 19px; height: 19px; } .hbtn-dot[b-l04bbodsdm] { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #16181c; border: 2px solid #fff; pointer-events: none; } .hbtn:active .hbtn-dot[b-l04bbodsdm], .hbtn.is-on .hbtn-dot[b-l04bbodsdm] { background: #fff; border-color: #16181c; } .hbtn-wrap[b-l04bbodsdm] { position: relative; display: inline-flex; } /* ---- User-Pill (nur Name) ---- */ .huser[b-l04bbodsdm] { display: flex; align-items: center; gap: 6px; height: 44px; padding: 4px 6px 4px 4px; margin-left: 2px; background: #fff; border: 1px solid #e4e4e7; border-radius: 999px; corner-shape: superellipse(1.2); /* weiche Squircle-Ecken, s. .hnav */ box-shadow: 0 6px 18px -12px rgba(0,0,0,.22); } .huser-btn[b-l04bbodsdm] { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; cursor: pointer; border-radius: 999px; padding: 2px 6px 2px 2px; font: inherit; transition: background .15s ease; } @media (hover: hover) { .huser-btn:hover[b-l04bbodsdm] { background: #efeff1; } } .havatar[b-l04bbodsdm] { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: #16181c; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 15px; } .huser-name[b-l04bbodsdm] { font-size: 14px; font-weight: 700; color: #16181c; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; } .hlogout-form[b-l04bbodsdm] { display: flex; margin: 0; } .hlogout[b-l04bbodsdm] { width: 36px; height: 36px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: #3c4148; cursor: pointer; transition: background .15s ease, color .15s ease; touch-action: manipulation; } @media (hover: hover) { .hlogout:hover[b-l04bbodsdm] { background: #fbeae8; color: #e2483b; } } .hlogout svg[b-l04bbodsdm] { width: 18px; height: 18px; } /* ===== Dropdown (weiß, mit abgerundetem Zeiger) ===== */ .hmenu-backdrop[b-l04bbodsdm] { position: fixed; inset: 0; z-index: 1999; border: 0; background: transparent; padding: 0; cursor: default; } .hmenu[b-l04bbodsdm] { position: absolute; top: calc(100% + 8px); z-index: 2000; min-width: 250px; padding: 8px; background: #fff; border: 1px solid #e4e4e7; border-radius: 16px; corner-shape: superellipse(1.2); /* weiche Squircle-Ecken, s. .hnav */ box-shadow: 0 24px 50px -20px rgba(0,0,0,.26), 0 6px 14px -10px rgba(0,0,0,.12); } .hmenu--left[b-l04bbodsdm] { left: 50%; transform: translateX(-50%); } .hmenu--right[b-l04bbodsdm] { right: 0; } /* unsichtbare Hover-Brücke über die Lücke (Hover bleibt beim Weg zum Menü erhalten) */ .hmenu[b-l04bbodsdm]::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } /* Kein Zeiger/Caret — abgesetztes Popover, blendet kurz ein */ @keyframes hmenu-fade-b-l04bbodsdm { from { opacity: 0; } } .hmenu[b-l04bbodsdm] { animation: hmenu-fade-b-l04bbodsdm .12s ease-out; } @media (prefers-reduced-motion: reduce) { .hmenu[b-l04bbodsdm] { animation: none; } } /* ===== Kompakte Dropdown-Variante (Einstellungen, Kunden, Ressourcen, Mitarbeiter): kleinere Zeilen, Icons ohne Chip, Hairline-Trenner zwischen den Gruppen ===== */ .hmenu--compact[b-l04bbodsdm] { /* breit genug für „Kontakte & Baustellen" + Aktiv-Häkchen in EINER Zeile */ min-width: 248px; padding: 6px; border-radius: 14px; } .hmenu-group[b-l04bbodsdm] { margin: 2px 0 1px; padding: 6px 9px 4px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a6aab1; } .hmenu-group:not(:first-child)[b-l04bbodsdm] { margin-top: 6px; padding-top: 10px; border-top: 1px solid #f0f0f2; } .hmenu--compact .hmrow[b-l04bbodsdm] { min-height: 32px; padding: 6px 9px; gap: 10px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #26282d; } .hmenu--compact .hmi[b-l04bbodsdm] { width: 16px; height: 16px; border-radius: 0; background: transparent; color: #8b9097; } .hmenu--compact .hmi svg[b-l04bbodsdm] { width: 16px; height: 16px; } .hmenu--compact .hmrow:focus-visible .hmi[b-l04bbodsdm] { background: transparent; color: #16181c; } @media (hover: hover) { .hmenu--compact .hmrow:hover .hmi[b-l04bbodsdm] { background: transparent; color: #16181c; } } .hmrow[b-l04bbodsdm] { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 11px; border: 0; border-radius: 13px; background: transparent; color: #16181c; text-decoration: none; cursor: pointer; text-align: left; font: inherit; font-size: 14px; font-weight: 700; transition: background .13s ease; touch-action: manipulation; } .hmrow:focus-visible[b-l04bbodsdm] { background: #efeff1; /* Zeilen sind echte Links (Strg+Klick → neuer Tab): Bootstraps a:hover- Unterstreichung/Farbe hier neutralisieren. */ color: #16181c; text-decoration: none; outline: none; } @media (hover: hover) { .hmrow:hover[b-l04bbodsdm] { background: #efeff1; /* Zeilen sind echte Links (Strg+Klick → neuer Tab): Bootstraps a:hover- Unterstreichung/Farbe hier neutralisieren. */ color: #16181c; text-decoration: none; outline: none; } } .hmi[b-l04bbodsdm] { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: #efeff1; color: #16181c; display: flex; align-items: center; justify-content: center; transition: background .13s ease, color .13s ease; } .hmi svg[b-l04bbodsdm] { width: 18px; height: 18px; } @media (hover: hover) { .hmrow:hover .hmi[b-l04bbodsdm] { background: #16181c; color: #fff; } } /* Aktuelle Seite im Dropdown: dezente Tönung + Häkchen rechts */ .hmrow.is-active[b-l04bbodsdm], .hmrow.is-active:focus-visible[b-l04bbodsdm] { background: #efeff1; font-weight: 700; } @media (hover: hover) { .hmrow.is-active:hover[b-l04bbodsdm] { background: #efeff1; font-weight: 700; } } .hmenu--compact .hmrow.is-active .hmi[b-l04bbodsdm] { color: #16181c; } @media (hover: hover) { .hmenu--compact .hmrow.is-active:hover .hmi[b-l04bbodsdm] { color: #16181c; } } .hmrow.is-active[b-l04bbodsdm]::after { content: ""; width: 15px; height: 15px; margin-left: auto; flex: 0 0 auto; background: #16181c; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } /* Sonderfall: Zeile mit Status-Punkt UND Häkchen — Punkt behält den Auto-Abstand, das Häkchen rückt mit festem Abstand dahinter. */ .hmrow.is-active:has(.hmrow-dot)[b-l04bbodsdm]::after { margin-left: 8px; } /* Status-Punkt am Ende einer Dropdown-Zeile (Lager/Werkzeug/Fuhrpark) */ .hmrow-dot[b-l04bbodsdm] { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #16181c; flex: 0 0 auto; } /* ===== Kompakt / Mobile: Topbar reduziert sich auf Hamburger + Titel ===== .topbar--compact setzt headerNav.js, sobald Inline-Nav + rechte Tools nicht mehr in eine Zeile passen. Da die Tab-Anzahl je Berechtigung schwankt, kann das keine feste Breite leisten – gemessen wird die tatsächliche Breite. Die ≤520px-Regel ist der Fallback für echte Handys (falls JS noch nicht lief); beide erzeugen exakt dieselbe Optik. */ .topbar--compact[b-l04bbodsdm] { padding-left: 14px; padding-right: 14px; gap: 8px; } .topbar--compact .hburger[b-l04bbodsdm] { display: flex; } .topbar--compact .htitle[b-l04bbodsdm] { display: block; } .topbar--compact .hnavzone[b-l04bbodsdm], .topbar--compact .htools[b-l04bbodsdm], .topbar--compact .hclock[b-l04bbodsdm] { display: none; } /* Uhr ausblenden, wenn sie neben Nav + Tools keinen Platz mehr hätte (headerNav.js misst). Höhere Spezifität als die ≥1200px-Media-Query, gewinnt also gegen deren display:flex. */ .topbar--noclock .hclock[b-l04bbodsdm] { display: none; } @media (max-width: 520px) { .topbar[b-l04bbodsdm] { padding: var(--app-safe-top) 14px 0; gap: 8px; } .hburger[b-l04bbodsdm] { display: flex; } .htitle[b-l04bbodsdm] { display: block; } .hnavzone[b-l04bbodsdm], .htools[b-l04bbodsdm] { display: none; } } /* ================================================================ MOBILE NAVIGATION — Drawer (nur Handy-Ansicht) ================================================================ */ .mnav[b-l04bbodsdm] { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 3000; display: none; } /* Drawer sichtbar, sobald der Header kompakt ist (JS) bzw. auf echten Handys (Fallback). */ .topbar--compact ~ .mnav[b-l04bbodsdm] { display: block; } @media (max-width: 520px) { .mnav[b-l04bbodsdm] { display: block; } } .mnav__backdrop[b-l04bbodsdm] { position: absolute; inset: 0; border: none; padding: 0; /* Etwas kräftigere Abdunkelung ersetzt einen Teil des Blurs — backdrop-filter über der Live-Karte (Dashboard) ist auf iPad-GPUs der teuerste Effekt; kleinerer Radius = flüssiger. */ background: rgba(15, 15, 18, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; /* iOS: kein Mitscrollen der Seite hinter dem Drawer */ touch-action: none; animation: mnavBackdropIn-b-l04bbodsdm 0.2s ease-out; } @keyframes mnavBackdropIn-b-l04bbodsdm { from { opacity: 0; } to { opacity: 1; } } .mnav__panel[b-l04bbodsdm] { position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 88vw); display: flex; flex-direction: column; min-height: 0; background: #f5f5f7; border-right: 1px solid #e4e4e7; border-radius: 0 26px 26px 0; corner-shape: superellipse(1.2); /* weiche Squircle-Ecken, s. .hnav */ box-shadow: 24px 0 60px -24px rgba(0, 0, 0, 0.35); overscroll-behavior: contain; /* vertikal scrollt der Browser; horizontal gehört die Geste dem Swipe-Schließen (headerNav.js) */ touch-action: pan-y; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; will-change: transform; animation: mnavPanelIn-b-l04bbodsdm 0.26s cubic-bezier(0.32, 0.72, 0, 1); } @keyframes mnavPanelIn-b-l04bbodsdm { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* Inhalt hebt sich beim Öffnen gestaffelt an — ein orchestrierter Moment statt vieler */ .mnav__head[b-l04bbodsdm], .mnav__search[b-l04bbodsdm], .mnav__card[b-l04bbodsdm], .mnav__foot[b-l04bbodsdm] { animation: mnavRise-b-l04bbodsdm 0.34s cubic-bezier(0.22, 0.9, 0.3, 1) backwards; } .mnav__head[b-l04bbodsdm] { animation-delay: 0.03s; } .mnav__search[b-l04bbodsdm] { animation-delay: 0.06s; } .mnav__cards .mnav__card:nth-child(1)[b-l04bbodsdm] { animation-delay: 0.09s; } .mnav__cards .mnav__card:nth-child(2)[b-l04bbodsdm] { animation-delay: 0.13s; } .mnav__foot[b-l04bbodsdm] { animation-delay: 0.15s; } @keyframes mnavRise-b-l04bbodsdm { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .mnav__panel[b-l04bbodsdm], .mnav__backdrop[b-l04bbodsdm], .mnav__head[b-l04bbodsdm], .mnav__search[b-l04bbodsdm], .mnav__card[b-l04bbodsdm], .mnav__foot[b-l04bbodsdm] { animation: none; } } /* ---- Kopf: Brand + Datum/KW, Schließen ---- */ .mnav__head[b-l04bbodsdm] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 8px 18px; flex-shrink: 0; } .mnav__brandwrap[b-l04bbodsdm] { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mnav__brand[b-l04bbodsdm] { font-family: 'Quicksand', sans-serif; color: #16181c; font-size: 19px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mnav__date[b-l04bbodsdm] { display: inline-flex; align-items: center; gap: 6px; color: #80858d; font-size: 11.5px; font-weight: 600; text-transform: capitalize; font-variant-numeric: tabular-nums; white-space: nowrap; } .mnav__date-dot[b-l04bbodsdm] { width: 3px; height: 3px; border-radius: 50%; background: #cfcfd4; flex-shrink: 0; } .mnav__close[b-l04bbodsdm] { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #e4e4e7; border-radius: 999px; padding: 0; color: #16181c; background: #fff; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.22); cursor: pointer; touch-action: manipulation; flex-shrink: 0; } .mnav__close:active[b-l04bbodsdm] { background: #16181c; color: #fff; border-color: #16181c; } /* ---- Scrollbereich: Suche + Karten ---- */ .mnav__scroll[b-l04bbodsdm] { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px; } /* Such-Pill im iOS-Suchfeld-Look — öffnet die Befehlspalette */ .mnav__search[b-l04bbodsdm] { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; border: 1px solid #e4e4e7; border-radius: 999px; corner-shape: superellipse(1.2); background: #fff; color: #80858d; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.22); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; text-align: left; touch-action: manipulation; flex-shrink: 0; transition: background 0.15s ease, transform 0.12s ease; } .mnav__search svg[b-l04bbodsdm] { color: #3c4148; flex-shrink: 0; } .mnav__search:active[b-l04bbodsdm] { background: #efeff1; transform: scale(0.985); } /* ---- Karten („inset grouped"): weiße Flächen auf dem grauen Canvas ---- */ .mnav__cards[b-l04bbodsdm] { display: flex; flex-direction: column; gap: 10px; } .mnav__card[b-l04bbodsdm] { display: flex; flex-direction: column; gap: 1px; padding: 5px; background: #fff; border: 1px solid #e4e4e7; border-radius: 16px; corner-shape: superellipse(1.2); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.22); flex-shrink: 0; } /* ---- Zeilen ---- */ .mnav__item[b-l04bbodsdm] { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; border: 0; border-radius: 11px; padding: 5px 11px; color: #16181c; background: transparent; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; text-align: left; text-decoration: none; touch-action: manipulation; flex-shrink: 0; transition: background 0.13s ease, color 0.13s ease, transform 0.12s ease; } /* Hover nur auf echten Pointern — auf iOS bleibt sonst der Hover-Zustand „kleben" */ @media (hover: hover) { .mnav__item:hover[b-l04bbodsdm] { background: #efeff1; text-decoration: none; } } .mnav__item:focus-visible[b-l04bbodsdm] { background: #efeff1; text-decoration: none; outline: none; } /* Nur navigierende Nav-Links (ohne aria-expanded) bekommen das kurze Gedrückt-Feedback. Aufklappbare Gruppenzeilen (Kunden, Ressourcen, …) NICHT: kein grauer Blitz beim Antippen und kein Scale — das Scale hatte sonst die Connector-Linie mitskaliert und sichtbar nach rechts verschoben. */ .mnav__item:not([aria-expanded]):active[b-l04bbodsdm] { background: #e7e7ea; transform: scale(0.985); text-decoration: none; } .mnav__item--active[b-l04bbodsdm], .mnav__item--active:active[b-l04bbodsdm] { color: #fff; background: #16181c; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.5); } @media (hover: hover) { .mnav__item--active:hover[b-l04bbodsdm] { color: #fff; background: #16181c; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.5); } } /* Icon wie im Desktop-Dropdown: ohne Chip, grau → dunkel bei Hover/Aktiv. Feste Spaltenbreite hält die Labels bündig (Desktop nutzt dafür die .hmi-Breite). */ .mnav__item-icon[b-l04bbodsdm] { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #3c4148; transition: color 0.13s ease; } .mnav__item-icon svg[b-l04bbodsdm] { width: 19px; height: 19px; } @media (hover: hover) { .mnav__item:hover .mnav__item-icon[b-l04bbodsdm] { color: #16181c; } } /* Aufgeklappte Gruppe: Icon dunkel (Desktop-Hover-Grammatik, ohne Chip) */ .mnav__item--open .mnav__item-icon[b-l04bbodsdm] { color: #16181c; } /* Stammlinie des Baums beginnt an der Unterkante des Gruppen-Icons und überbrückt den Spalt zur Unterpunkt-Liste — so „wächst" die Linie sichtbar aus dem Icon (die Liste selbst liegt im abgeschnittenen Aufklapp-Container und kann nicht hinaufreichen). */ .mnav__item--open[b-l04bbodsdm]::after { content: ""; position: absolute; left: 21px; top: 30px; bottom: -5px; width: 1px; background: #d4d4d8; pointer-events: none; } .mnav__item--active .mnav__item-icon[b-l04bbodsdm] { color: #fff; } .mnav__item-label[b-l04bbodsdm] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mnav__item-dot[b-l04bbodsdm] { width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: #16181c; flex-shrink: 0; } .mnav__item--active .mnav__item-dot[b-l04bbodsdm] { background: #fff; } .mnav__chevron[b-l04bbodsdm] { margin-left: auto; color: #80858d; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } /* Punkt + Chevron zusammen: der Punkt übernimmt den Auto-Abstand, das Chevron rückt fest dahinter */ .mnav__item-dot ~ .mnav__chevron[b-l04bbodsdm] { margin-left: 8px; } .mnav__item--active .mnav__chevron[b-l04bbodsdm] { color: #fff; } .mnav__item--open .mnav__chevron[b-l04bbodsdm] { color: #16181c; } .mnav__chevron--open[b-l04bbodsdm] { transform: rotate(180deg); } /* ---- Unterpunkte: animiertes Aufklappen (Grid-Rows-Technik) + Führungslinie ---- Der Block ist immer gerendert (inert wenn zu), damit Auf- UND Zuklappen animieren. */ .mnav__sub[b-l04bbodsdm] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .mnav__sub--open[b-l04bbodsdm] { grid-template-rows: 1fr; } @media (prefers-reduced-motion: reduce) { .mnav__sub[b-l04bbodsdm] { transition: none; } } .mnav__sub-clip[b-l04bbodsdm] { overflow: hidden; min-height: 0; /* Den Layout-/Paint-Aufwand der Höhen-Animation auf diesen Teilbaum begrenzen, statt die ganze Seite reflowen zu lassen — das nimmt der grid-Animation auf iPad den Ruckler. */ contain: layout paint; } /* Baum-Connector: eine vertikale Linie sitzt unter der Icon-Mitte der Gruppenzeile (x = 21px, entspricht dem Gruppen-Icon-Center) und schickt in jeden Untereintrag einen kurzen Ast. Die Linien-Stücke gehören zu den Items selbst (::before = Ast + oberer Bogen, ::after = Verlängerung nach unten), damit sie nicht hinter benachbarte Item-Hintergründe geraten. */ .mnav__sub-list[b-l04bbodsdm] { position: relative; display: flex; flex-direction: column; gap: 2px; margin-left: 0; padding: 2px 2px 4px 0; } /* Abschnitts-Label in den Einstellungs-Unterpunkten — wie .hmenu-group im Desktop-Dropdown. In die Connector-Spalte eingerückt (padding-left 32), damit der Text rechts der Baumlinie steht. */ .mnav__subgroup[b-l04bbodsdm] { position: relative; margin: 1px 0; padding: 5px 10px 3px 32px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a6aab1; } .mnav__subgroup:not(:first-child)[b-l04bbodsdm] { margin-top: 3px; } /* Die Stammlinie läuft auch neben den Abschnitts-Labels durch — der Baum bleibt zusammenhängend. */ .mnav__subgroup[b-l04bbodsdm]::before { content: ""; position: absolute; left: 21px; top: -6px; bottom: -6px; width: 1px; background: #d4d4d8; pointer-events: none; } /* Unterpunkt-Zeile — wie .hmrow im kompakten Desktop-Dropdown, nur touch-hoch. padding-left lässt Platz für die Connector-Spalte (Baumlinie + Ast). */ .mnav__subitem[b-l04bbodsdm] { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; border: 0; border-radius: 10px; padding: 5px 10px 5px 32px; color: #26282d; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; touch-action: manipulation; transition: background 0.13s ease, color 0.13s ease, transform 0.12s ease; } /* Baum-Stamm: EINE gerade vertikale Linie je Zeile, die den Gap nach oben und unten leicht überlappt → über alle Zeilen durchgehend. Einheitlich 1px als Hintergrund; frühere border-Linien rundeten auf 1px während parallele background-Linien 1,5px blieben — das ergab den doppelten, leicht versetzten Strich. */ .mnav__subitem[b-l04bbodsdm]::before { content: ""; position: absolute; left: 21px; top: -3px; bottom: -3px; width: 1px; background: #d4d4d8; pointer-events: none; } /* Letzte Zeile: der Stamm endet an der Ast-Höhe (Mitte) → ergibt ein „└". */ .mnav__subitem:last-child[b-l04bbodsdm]::before { bottom: auto; height: calc(50% + 3px); } /* Ast: eine waagerechte Linie vom Stamm zur Icon-Mitte; kreuzt den Stamm zu „├" bzw. „└". */ .mnav__subitem[b-l04bbodsdm]::after { content: ""; position: absolute; left: 21px; top: 50%; width: 10px; height: 1px; background: #d4d4d8; pointer-events: none; } @media (hover: hover) { .mnav__subitem:hover[b-l04bbodsdm] { background: #efeff1; color: #16181c; } .mnav__subitem:hover .mnav__subitem-icon[b-l04bbodsdm] { color: #16181c; } } .mnav__subitem:focus-visible[b-l04bbodsdm] { background: #efeff1; color: #16181c; outline: none; } .mnav__subitem:active[b-l04bbodsdm] { background: #e7e7ea; transform: scale(0.98); } .mnav__subitem:active .mnav__subitem-icon[b-l04bbodsdm] { color: #16181c; } /* Icon wie im Desktop-Dropdown: 16px, ohne Chip, grau → schwarz bei Hover/Aktiv */ .mnav__subitem-icon[b-l04bbodsdm] { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #8b9097; transition: color 0.13s ease; } .mnav__subitem-icon svg[b-l04bbodsdm] { width: 16px; height: 16px; } /* Aktive Seite wie im Desktop-Dropdown: dezente Tönung + Häkchen rechts. Das Häkchen liegt als Hintergrundbild rechtsbündig — nicht als ::after, denn das ::after ist bereits der waagerechte Connector-Ast; so bleiben Ast UND Häkchen beim aktiven Eintrag. */ .mnav__subitem--active[b-l04bbodsdm], .mnav__subitem--active:active[b-l04bbodsdm] { background-color: #efeff1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 15px 15px; color: #16181c; font-weight: 700; } @media (hover: hover) { .mnav__subitem--active:hover[b-l04bbodsdm] { background-color: #efeff1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 15px 15px; color: #16181c; font-weight: 700; } } .mnav__subitem--active .mnav__subitem-icon[b-l04bbodsdm] { color: #16181c; } /* Zeile mit Status-Punkt (Fristen): der Punkt sitzt ganz rechts, das Häkchen rückt davor. */ .mnav__subitem--active:has(.mnav__subitem-dot)[b-l04bbodsdm] { background-position: right 28px center; } .mnav__subitem-label[b-l04bbodsdm] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Benachrichtigungspunkt am Unterpunkt (z. B. Werkzeug: fällige Fristen) – wie in der Desktop-Dropdown-Zeile, hier rechtsbündig im Drawer-Unterpunkt. */ .mnav__subitem-dot[b-l04bbodsdm] { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #16181c; flex-shrink: 0; } /* ---- Fuß: Nutzerkarte + Push + Abmelden ---- */ .mnav__foot[b-l04bbodsdm] { display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; } .mnav__user[b-l04bbodsdm] { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; border: 1px solid #e4e4e7; border-radius: 16px; corner-shape: superellipse(1.2); padding: 7px 10px; color: #16181c; background: #fff; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.22); cursor: pointer; font: inherit; text-align: left; touch-action: manipulation; transition: background 0.13s ease, transform 0.12s ease; } .mnav__user:active[b-l04bbodsdm] { background: #efeff1; transform: scale(0.985); } .mnav__user-avatar[b-l04bbodsdm] { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; color: #fff; background: #16181c; font-family: 'Quicksand', sans-serif; font-size: 15px; font-weight: 700; object-fit: cover; } .mnav__user-text[b-l04bbodsdm] { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .mnav__user-name[b-l04bbodsdm] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; line-height: 1.25; } .mnav__user-sub[b-l04bbodsdm] { font-size: 11px; font-weight: 600; line-height: 1.25; color: #80858d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Push-Button (eigene Komponente) auf die Footer-Höhe der Nachbarn heben */ .mnav__foot[b-l04bbodsdm] .push-setup--compact { width: 52px; height: 52px; } .mnav__logout-form[b-l04bbodsdm] { display: flex; margin: 0; flex-shrink: 0; } .mnav__logout[b-l04bbodsdm] { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid #e4e4e7; border-radius: 999px; padding: 0; color: #e2483b; background: #fff; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.22); cursor: pointer; touch-action: manipulation; transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease; } .mnav__logout:active[b-l04bbodsdm] { background: #e2483b; border-color: #e2483b; color: #fff; } /* ================================================================ NOTIFICATIONS — Reject confirmation overlay (viewport-wide) ================================================================ */ .reject-overlay[b-l04bbodsdm] { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; padding: 28px; animation: rejectOverlayIn-b-l04bbodsdm 0.18s ease-out; } @keyframes rejectOverlayIn-b-l04bbodsdm { from { opacity: 0; } to { opacity: 1; } } .reject-overlay__backdrop[b-l04bbodsdm] { position: absolute; inset: 0; border: none; padding: 0; background: rgba(15, 15, 18, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: pointer; } .reject-card[b-l04bbodsdm] { position: relative; width: min(440px, 100%); max-height: calc(100vh - 56px); overflow: auto; background: #fff; border: 1px solid #e4e4e7; border-radius: 18px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.26), 0 6px 14px -10px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; animation: rejectCardIn-b-l04bbodsdm 0.2s cubic-bezier(0.34, 1.3, 0.64, 1); } @keyframes rejectCardIn-b-l04bbodsdm { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .reject-card__header[b-l04bbodsdm] { padding: 18px 20px 0; } .reject-card__header span[b-l04bbodsdm] { display: block; color: #e2483b; font-size: 10px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; } .reject-card__header h2[b-l04bbodsdm] { margin: 4px 0 0; color: #16181c; font-size: 18px; font-weight: 800; } .reject-card__body[b-l04bbodsdm] { padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; } .reject-summary[b-l04bbodsdm] { border-radius: 12px; padding: 12px; background: #f5f5f7; } .reject-summary > strong[b-l04bbodsdm] { display: block; margin-bottom: 8px; color: #16181c; font-size: 13px; font-weight: 800; } .reject-summary__grid[b-l04bbodsdm] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .reject-summary__grid > span[b-l04bbodsdm] { min-width: 0; border: 1px solid #e4e4e7; border-radius: 10px; padding: 8px 10px; background: #fff; } .reject-summary__grid small[b-l04bbodsdm] { display: block; margin-bottom: 3px; color: #80858d; font-size: 9px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .reject-summary__grid strong[b-l04bbodsdm] { display: block; color: #16181c; font-size: 12px; font-weight: 800; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; } .reject-field span[b-l04bbodsdm] { display: block; margin-bottom: 6px; color: #80858d; font-size: 10px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; } .reject-field textarea[b-l04bbodsdm] { width: 100%; min-height: 96px; border: 1.5px solid #e4e4e7; border-radius: 12px; padding: 10px 12px; color: #16181c; background: #fff; font: inherit; font-size: 13px; font-weight: 600; resize: vertical; box-sizing: border-box; } .reject-field textarea:focus[b-l04bbodsdm] { border-color: #16181c; outline: none; box-shadow: 0 0 0 3px rgba(22, 24, 28, 0.12); } .reject-card__actions[b-l04bbodsdm] { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 18px; } .reject-btn[b-l04bbodsdm] { min-height: 38px; border: none; border-radius: 999px; padding: 0 18px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity 0.18s, background 0.18s; } .reject-btn--secondary[b-l04bbodsdm] { color: #3c4148; background: #efeff1; } @media (hover: hover) { .reject-btn--secondary:hover[b-l04bbodsdm] { background: #e4e4e7; } } .reject-btn--primary[b-l04bbodsdm] { color: white; background: #e2483b; } @media (hover: hover) { .reject-btn--primary:hover:not(:disabled)[b-l04bbodsdm] { opacity: 0.87; } } .reject-btn--primary:disabled[b-l04bbodsdm] { cursor: not-allowed; opacity: 0.5; } @media (max-width: 760px) { .reject-overlay[b-l04bbodsdm] { padding: 16px; } } /* /Components/Layout/MainLayout.razor.rz.scp.css */ #blazor-error-ui[b-59p6jvtn19] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss[b-59p6jvtn19] { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* Auffangnetz der ErrorBoundary: ersetzt die weiße Seite durch eine ruhige Karte. */ .app-fehler[b-59p6jvtn19] { display: flex; align-items: center; justify-content: center; min-height: 60dvh; padding: 24px; } .app-fehler-karte[b-59p6jvtn19] { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 420px; padding: 32px 28px; text-align: center; border: 1px solid #e6e6e9; border-radius: 18px; background: #fff; color: #16181c; } .app-fehler-karte svg[b-59p6jvtn19] { color: #a1a1aa; } .app-fehler-karte h2[b-59p6jvtn19] { margin: 0; font-size: 17px; font-weight: 650; } .app-fehler-karte p[b-59p6jvtn19] { margin: 0; font-size: 14px; color: #6b7280; } .app-fehler-btn[b-59p6jvtn19] { margin-top: 8px; padding: 9px 18px; border: 0; border-radius: 999px; background: #16181c; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } @media (hover: hover) { .app-fehler-btn:hover[b-59p6jvtn19] { background: #2a2d34; } } /* /Components/Layout/Notifications/NotificationsListRow.razor.rz.scp.css */ .nd-row[b-wvhyhsm7jh] { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid #e4e4e7; border-radius: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; transition: background 0.13s ease, color 0.13s ease; } @media (hover: hover) { .nd-row:hover[b-wvhyhsm7jh] { background: #f7f7f9; } } /* Auswahl wie in ProjectSetup: grauer Fill + schwarzer Balken links, Text bleibt dunkel */ .nd-row--selected[b-wvhyhsm7jh] { background: #efeff1; box-shadow: inset 3px 0 0 #16181c; } @media (hover: hover) { .nd-row--selected:hover[b-wvhyhsm7jh] { background: #efeff1; box-shadow: inset 3px 0 0 #16181c; } } .nd-avatar[b-wvhyhsm7jh] { width: 32px; height: 32px; border-radius: 50%; background: #16181c; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Quicksand', sans-serif; font-size: 12px; font-weight: 700; flex-shrink: 0; } .nd-row-main[b-wvhyhsm7jh] { display: flex; flex-direction: column; min-width: 0; } .nd-row-title[b-wvhyhsm7jh] { font-size: 13px; font-weight: 800; color: #16181c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nd-row-meta[b-wvhyhsm7jh] { font-size: 11px; color: #80858d; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } .nd-row-side[b-wvhyhsm7jh] { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .nd-row-time[b-wvhyhsm7jh] { font-size: 10px; color: #80858d; font-weight: 600; } /* Status-Punkt — semantisch, aber ruhig (kein lautes iOS-Orange/Grün/Rot) */ .nd-row-dot[b-wvhyhsm7jh] { width: 9px; height: 9px; border-radius: 50%; background: #a15c00; } .nd-row--approved .nd-row-dot[b-wvhyhsm7jh] { background: #16a34a; } .nd-row--rejected .nd-row-dot[b-wvhyhsm7jh] { background: #e2483b; } /* /Components/Layout/Notifications/NotificationsModal.razor.rz.scp.css */ /* NotificationsModal scoped CSS — Schwarz-Weiß Redesign (passend zum Header) */ .nd-modal[b-glqlvmiwxv] { position: relative; display: flex; flex-direction: column; font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .nd-header[b-glqlvmiwxv] { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: #fff; } .nd-title[b-glqlvmiwxv] { display: flex; align-items: center; gap: 10px; min-width: 0; } .nd-title-icon[b-glqlvmiwxv] { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: #efeff1; color: #16181c; display: flex; align-items: center; justify-content: center; } .nd-title-back[b-glqlvmiwxv] { display: none; width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: 10px; padding: 0; background: #efeff1; color: #16181c; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } @media (hover: hover) { .nd-title-back:hover[b-glqlvmiwxv] { background: #16181c; color: #fff; } } .nd-title-text[b-glqlvmiwxv] { min-width: 0; } .nd-title-text h2[b-glqlvmiwxv] { margin: 0; color: #16181c; font-size: 16px; font-weight: 800; line-height: 1.2; } .nd-title-sub[b-glqlvmiwxv] { display: block; font-size: 11px; color: #80858d; font-weight: 600; margin-top: 2px; } .nd-body[b-glqlvmiwxv] { display: grid; grid-template-columns: 340px 1fr; min-height: 480px; height: min(620px, calc(100vh - 220px)); border-top: 1px solid #e4e4e7; } .nd-master[b-glqlvmiwxv] { border-right: 1px solid #e4e4e7; background: #fff; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .nd-toolbar[b-glqlvmiwxv] { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .nd-search[b-glqlvmiwxv] { width: 272px; max-width: 100%; height: 36px; display: flex; align-items: center; gap: 8px; background: #f5f5f7; border: 1.5px solid transparent; border-radius: 10px; padding: 0 8px 0 12px; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .nd-search:focus-within[b-glqlvmiwxv], .nd-search--active[b-glqlvmiwxv] { background: #fff; border-color: #16181c; box-shadow: 0 0 0 3px rgba(22, 24, 28, 0.1); } .nd-search-icon[b-glqlvmiwxv] { color: #80858d; flex-shrink: 0; } .nd-search input[b-glqlvmiwxv] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: #16181c; } .nd-search input[b-glqlvmiwxv]::placeholder { color: #80858d; font-weight: 500; } .nd-search-clear[b-glqlvmiwxv] { width: 22px; height: 22px; border: none; border-radius: 50%; padding: 0; background: #efeff1; color: #80858d; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.13s ease, color 0.13s ease; } @media (hover: hover) { .nd-search-clear:hover[b-glqlvmiwxv] { background: #16181c; color: #fff; } } .nd-filter-wrap[b-glqlvmiwxv] { position: relative; } .nd-filter-btn[b-glqlvmiwxv] { position: relative; width: 36px; height: 36px; border: 1px solid #e4e4e7; border-radius: 10px; background: #fff; color: #3c4148; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } @media (hover: hover) { .nd-filter-btn:hover[b-glqlvmiwxv] { background: #efeff1; color: #16181c; } } .nd-filter-btn--open[b-glqlvmiwxv] { background: #16181c; color: #fff; border-color: #16181c; } .nd-filter-dot[b-glqlvmiwxv] { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #16181c; border: 2px solid #fff; } .nd-filter-btn--open .nd-filter-dot[b-glqlvmiwxv] { background: #fff; border-color: #16181c; } .nd-filter-backdrop[b-glqlvmiwxv] { position: fixed; inset: 0; z-index: 120; border: none; padding: 0; background: transparent; } .nd-filter-menu[b-glqlvmiwxv] { position: absolute; top: calc(100% + 8px); right: 0; z-index: 121; width: 220px; display: flex; flex-direction: column; gap: 4px; border: 1px solid #e4e4e7; border-radius: 16px; padding: 6px; background: #fff; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.26), 0 6px 14px -10px rgba(0, 0, 0, 0.12); } .nd-filter-option[b-glqlvmiwxv] { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: none; border-radius: 10px; padding: 0 10px; color: #16181c; background: transparent; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.13s ease, color 0.13s ease; } .nd-filter-option strong[b-glqlvmiwxv] { min-width: 28px; border-radius: 999px; padding: 3px 8px; color: #80858d; background: #efeff1; font-size: 11px; text-align: center; font-weight: 800; } @media (hover: hover) { .nd-filter-option:hover[b-glqlvmiwxv] { background: #efeff1; } } .nd-filter-option--active[b-glqlvmiwxv] { color: #fff; background: #16181c; } @media (hover: hover) { .nd-filter-option--active:hover[b-glqlvmiwxv] { color: #fff; background: #16181c; } } .nd-filter-option--active strong[b-glqlvmiwxv] { color: #16181c; background: #fff; } .nd-error[b-glqlvmiwxv] { margin: 10px 12px 0; padding: 8px 12px; border: 1px solid #f3d0cb; border-radius: 10px; background: #fbeae8; color: #b3392e; font-size: 12px; font-weight: 700; } .nd-list[b-glqlvmiwxv] { flex: 1; overflow-y: auto; padding: 0 0 12px; } .nd-section-head[b-glqlvmiwxv] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; background: #f5f5f7; border-bottom: 1px solid #e4e4e7; } .nd-section-head--with-gap[b-glqlvmiwxv] { border-top: 1px solid #e4e4e7; } .nd-section-label[b-glqlvmiwxv] { font-size: 10px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: #80858d; } .nd-section-count[b-glqlvmiwxv] { font-size: 10px; font-weight: 800; background: #efeff1; color: #3c4148; border-radius: 999px; padding: 2px 8px; } .nd-section-empty[b-glqlvmiwxv] { padding: 14px 14px; font-size: 12px; color: #80858d; font-weight: 600; font-style: italic; border-bottom: 1px solid #e4e4e7; } .nd-detail[b-glqlvmiwxv] { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; } .nd-detail-empty[b-glqlvmiwxv] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; } .nd-detail-empty-icon[b-glqlvmiwxv] { width: 64px; height: 64px; border-radius: 16px; background: #efeff1; color: #b8bcc2; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .nd-detail-empty strong[b-glqlvmiwxv] { font-size: 14px; color: #16181c; font-weight: 800; } .nd-detail-empty span[b-glqlvmiwxv] { font-size: 12px; color: #80858d; } .nd-detail-head[b-glqlvmiwxv] { display: flex; align-items: stretch; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid #e4e4e7; } .nd-detail-head-main[b-glqlvmiwxv] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* ===== Mini-Kalender (Zeitraum des Antrags) — kompakt oben rechts ===== */ .nd-cal[b-glqlvmiwxv] { flex: 0 0 auto; align-self: flex-start; width: 172px; background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; padding: 8px; box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.22); } .nd-cal-head[b-glqlvmiwxv] { display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; margin-bottom: 6px; } .nd-cal-head strong[b-glqlvmiwxv] { text-align: center; font-size: 11px; font-weight: 800; color: #16181c; text-transform: capitalize; } .nd-cal-nav[b-glqlvmiwxv] { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 7px; padding: 0; background: transparent; color: #16181c; cursor: pointer; transition: background 0.13s ease; } @media (hover: hover) { .nd-cal-nav:hover[b-glqlvmiwxv] { background: #efeff1; } } .nd-cal-nav svg[b-glqlvmiwxv] { width: 14px; height: 14px; } .nd-cal-nav-spacer[b-glqlvmiwxv] { width: 22px; height: 22px; } .nd-cal-dow[b-glqlvmiwxv] { display: grid; grid-template-columns: 16px repeat(7, 1fr); margin-bottom: 4px; } .nd-cal-dow span[b-glqlvmiwxv] { text-align: center; font-size: 9px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #80858d; } .nd-cal-grid[b-glqlvmiwxv] { display: grid; grid-template-columns: 16px repeat(7, 1fr); row-gap: 3px; column-gap: 0; } /* Kalenderwochen-Spalte (links), dezent in Grau */ .nd-cal-kw[b-glqlvmiwxv], .nd-cal-dow .nd-cal-kw-head[b-glqlvmiwxv] { display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; letter-spacing: 0.02em; text-transform: none; color: #aab0b8; } .nd-cal-day[b-glqlvmiwxv] { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #3c4148; border-radius: 6px; } .nd-cal-day--weekend[b-glqlvmiwxv] { color: #aeb2b8; } .nd-cal-day--muted[b-glqlvmiwxv] { color: #cfd2d6; } /* In-Range-Tage bilden einen durchgehenden schwarzen Balken (column-gap:0) */ .nd-cal-day--range[b-glqlvmiwxv] { background: #16181c; color: #fff; font-weight: 800; border-radius: 0; } .nd-cal-day--range-start[b-glqlvmiwxv] { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .nd-cal-day--range-end[b-glqlvmiwxv] { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } /* Feiertag: kleiner Punkt unter der Zahl + Hover-Popover mit dem Namen */ .nd-cal-holi[b-glqlvmiwxv] { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #16181c; pointer-events: none; } .nd-cal-day--range .nd-cal-holi[b-glqlvmiwxv] { background: #fff; } .nd-cal-tip[b-glqlvmiwxv] { position: absolute; bottom: calc(100% + 7px); z-index: 60; padding: 4px 8px; border-radius: 7px; background: #16181c; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.45); } /* Öffnungsrichtung je nach Spalte, damit das Popover nicht abgeschnitten wird */ .nd-cal-tip--left[b-glqlvmiwxv] { right: 0; } .nd-cal-tip--right[b-glqlvmiwxv] { left: 0; } .nd-cal-tip--center[b-glqlvmiwxv] { left: 50%; transform: translateX(-50%); } @media (hover: hover) { .nd-cal-day:hover .nd-cal-tip[b-glqlvmiwxv] { opacity: 1; } } .nd-cal-tip[b-glqlvmiwxv]::after { content: ""; position: absolute; top: 100%; border: 4px solid transparent; border-top-color: #16181c; } .nd-cal-tip--left[b-glqlvmiwxv]::after { right: 7px; } .nd-cal-tip--right[b-glqlvmiwxv]::after { left: 7px; } .nd-cal-tip--center[b-glqlvmiwxv]::after { left: 50%; transform: translateX(-50%); } .nd-detail-eyebrow[b-glqlvmiwxv] { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: #80858d; margin-bottom: 6px; } .nd-badge[b-glqlvmiwxv] { font-size: 10px; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.03em; font-weight: 800; } .nd-badge--pending[b-glqlvmiwxv] { background: #f7efe1; color: #a15c00; } .nd-badge--approved[b-glqlvmiwxv] { background: #e9f6ee; color: #16a34a; } .nd-badge--rejected[b-glqlvmiwxv] { background: #fbeae8; color: #e2483b; } .nd-detail h3[b-glqlvmiwxv] { margin: 0; font-size: 22px; font-weight: 800; color: #16181c; line-height: 1.15; overflow-wrap: break-word; word-break: break-word; } /* Nutzer-Block sitzt unten in der linken Spalte — Unterkante bündig mit dem Kalender */ .nd-detail-user[b-glqlvmiwxv] { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; } .nd-avatar[b-glqlvmiwxv] { width: 32px; height: 32px; border-radius: 50%; background: #16181c; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Quicksand', sans-serif; font-size: 12px; font-weight: 700; flex-shrink: 0; } .nd-detail-user .nd-avatar[b-glqlvmiwxv] { width: 36px; height: 36px; font-size: 13px; } .nd-detail-user-info[b-glqlvmiwxv] { line-height: 1.2; } .nd-detail-user-info strong[b-glqlvmiwxv] { font-size: 13px; font-weight: 800; color: #16181c; } .nd-detail-user-info span[b-glqlvmiwxv] { display: block; font-size: 11px; color: #80858d; font-weight: 600; margin-top: 2px; } .nd-detail-body[b-glqlvmiwxv] { flex: 1; overflow-y: auto; padding: 16px 22px; } .nd-detail-grid[b-glqlvmiwxv] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .nd-detail-cell[b-glqlvmiwxv] { background: #f5f5f7; border: 1px solid #e4e4e7; border-radius: 12px; padding: 10px 12px; min-width: 0; } .nd-detail-cell--full[b-glqlvmiwxv] { grid-column: 1 / -1; } .nd-detail-cell small[b-glqlvmiwxv] { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #80858d; margin-bottom: 4px; } .nd-detail-cell strong[b-glqlvmiwxv] { font-size: 14px; font-weight: 800; color: #16181c; word-break: break-word; } /* Notiz vom Antragsteller — neutraler Grau-Callout (monochrom) */ .nd-detail-note[b-glqlvmiwxv] { background: #f5f5f7; border: 1px solid #e4e4e7; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; } .nd-detail-note small[b-glqlvmiwxv] { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #80858d; margin-bottom: 4px; } .nd-detail-note p[b-glqlvmiwxv] { margin: 0; font-size: 13px; color: #3c4148; line-height: 1.4; white-space: pre-wrap; } .nd-detail-rejection[b-glqlvmiwxv] { background: #fbeae8; border: 1px solid #f3d0cb; border-radius: 12px; padding: 10px 12px; } .nd-detail-rejection small[b-glqlvmiwxv] { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #e2483b; margin-bottom: 4px; } .nd-detail-rejection p[b-glqlvmiwxv] { margin: 0; font-size: 13px; color: #b3392e; line-height: 1.4; white-space: pre-wrap; } .nd-detail-footer[b-glqlvmiwxv] { display: flex; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid #e4e4e7; background: #fff; } .nd-action[b-glqlvmiwxv] { flex: 1; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 20px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; } /* Primäre Aktion = Schwarz (kein grüner Akzent mehr) */ .nd-action--approve[b-glqlvmiwxv] { border: none; background: #16181c; color: #fff; } @media (hover: hover) { .nd-action--approve:hover[b-glqlvmiwxv] { background: #26282e; } } .nd-action--reject[b-glqlvmiwxv] { background: #fff; color: #3c4148; border: 1px solid #e4e4e7; } @media (hover: hover) { .nd-action--reject:hover[b-glqlvmiwxv] { color: #e2483b; border-color: #e2483b; background: #fbeae8; } } .nd-detail-decided[b-glqlvmiwxv] { padding: 12px 22px 18px; border-top: 1px solid #e4e4e7; font-size: 12px; color: #80858d; font-weight: 600; text-align: center; } .nd-detail-decided strong[b-glqlvmiwxv] { color: #3c4148; font-weight: 800; } @media (max-width: 760px) { .nd-header[b-glqlvmiwxv] { flex-direction: column; align-items: stretch; gap: 10px; } .nd-toolbar[b-glqlvmiwxv] { width: 100%; } .nd-search[b-glqlvmiwxv] { width: auto; flex: 1; min-width: 0; } .nd-modal--has-selection .nd-title-icon[b-glqlvmiwxv] { display: none; } .nd-modal--has-selection .nd-title-back[b-glqlvmiwxv] { display: inline-flex; } .nd-body[b-glqlvmiwxv] { grid-template-columns: 1fr; position: relative; height: min(620px, calc(100vh - 200px)); } .nd-master[b-glqlvmiwxv] { border-right: none; } .nd-detail-head[b-glqlvmiwxv] { flex-direction: column; } .nd-detail-user[b-glqlvmiwxv] { margin-top: 0; } .nd-cal[b-glqlvmiwxv] { width: 100%; max-width: 220px; } .nd-detail[b-glqlvmiwxv] { position: absolute; inset: 0; background: #fff; transform: translateX(100%); transition: transform 0.2s ease-out; pointer-events: none; border-left: 1px solid #e4e4e7; } .nd-body--has-selection .nd-detail[b-glqlvmiwxv] { transform: translateX(0); pointer-events: auto; } } /* /Components/Layout/ReconnectModal.razor.rz.scp.css */ /* ================================================================ RECONNECT-MODAL — Schwarz-Weiß Redesign (RUEHL.HUB) Verbindungsabbruch des Blazor-Server-Circuits (Deploy/Neustart). Sichtbarkeit der Status-Blöcke steuert das Framework über Klassen am