) */
.sm-content > div > .lp-mc:only-child{margin:-24px -24px 20px !important}
/* moduleLanding: ml3-content hat padding 28px 24px 48px */
.ml3-content > .lp-mc{margin:-28px -24px 20px !important}
.ml3-content > div > .lp-mc:only-child{margin:-28px -24px 20px !important}
@media(max-width:900px){
.ml3-content > .lp-mc,
.ml3-content > div > .lp-mc:only-child{margin:-20px -16px 16px !important}
}
/* Standalone (Pages ohne Sidebar/Wrapper, z.B. orders): nur bottom-margin.
Bleed nach links/rechts aus elternseitigem Padding (max 32px) via
negativer Margin + width-Korrektur — funktioniert für die häufigen
Wrapper org-root (padding 20px), mad-wrap (page--wide padding clamp 20-32px). */
.lp-mc--standalone{
margin:0 -32px 20px !important;
width:calc(100% + 64px);
align-self:stretch;
box-sizing:border-box;
}
@media(max-width:900px){.lp-mc--standalone{margin:0 -16px 16px !important;width:calc(100% + 32px)}}
/* Top-Bleed je nach Parent-Padding (verhindert den dünnen Balken oberhalb
des Covers, der sonst durch das Parent-Padding sichtbar wäre). */
.org-root > .lp-mc--standalone,
.ma-root > .lp-mc--standalone,
.mad-wrap > .lp-mc--standalone,
.jobs-overview > .lp-mc--standalone,
.tc-shell > .lp-mc--standalone{margin-top:-24px !important}
@media(max-width:900px){
.org-root > .lp-mc--standalone,
.ma-root > .lp-mc--standalone,
.mad-wrap > .lp-mc--standalone,
.jobs-overview > .lp-mc--standalone,
.tc-shell > .lp-mc--standalone{margin-top:-18px !important}
}
/* Compact-Variante (L2 "Cover light") — für Modul-Landing-Pages
ohne aussagekräftige KPIs. Reduziert vertikale Höhe und Titelgrösse,
behält Eyebrow + Titel + Hero-Mark für visuelle Konsistenz mit den
vollen Cover-Pages. Siehe docs/technik/design/00-page-skeleton.md
§ Modul-Cover-Header. */
.lp-mc--compact{padding:18px clamp(20px,3vw,40px) 28px}
.lp-mc--compact .lp-mc-title{font-size:clamp(20px,2.1vw,26px)}
.lp-mc--compact .lp-mc-sub{margin-top:4px;font-size:13px}
.lp-mc--compact .lp-mc-orb.fl-hero-mark,
.lp-mc--compact .lp-mc-orb--icon{width:96px;height:96px}
.lp-mc--compact .lp-mc-orb.fl-hero-mark svg,
.lp-mc--compact .lp-mc-orb--icon svg{width:88px;height:88px}
@media(max-width:768px){
.lp-mc--compact{padding:14px 16px 18px}
.lp-mc--compact .lp-mc-orb.fl-hero-mark,
.lp-mc--compact .lp-mc-orb--icon{width:72px;height:72px}
.lp-mc--compact .lp-mc-orb.fl-hero-mark svg,
.lp-mc--compact .lp-mc-orb--icon svg{width:64px;height:64px}
}
/* Punkt-Pattern und Glow-Atmosphäre in sm-content ausblenden, wenn ein Cover
irgendwo (auch verschachtelt) gerendert wird — falls die :has-Selector-
Suppression durch v-if/v-else-Wrapping nicht greift. */
.sm-content:has(.lp-mc)::before,
.sm-content:has(.lp-mc)::after{display:none}
html.dark .lp-mc{
--mc-card:#161b2e;
--mc-card-up:#1b2138;
--mc-hair:rgba(238,241,249,.06);
--mc-text:#eef1f9;
--mc-text-2:#a8b0c8;
--mc-text-3:#727a92;
--mc-glow-a:rgba(110,92,196,.18);
--mc-glow-b:rgba(59,110,208,.14);
}
/* Atmosphären-Glow rechts */
.lp-mc::before{
content:'';position:absolute;inset:-30% -10% -10% 30%;pointer-events:none;
background:
radial-gradient(ellipse 60% 80% at 75% 50%, var(--mc-glow-a) 0%, transparent 70%),
radial-gradient(circle 30% at 88% 35%, color-mix(in srgb,var(--accent) 14%,transparent) 0%, transparent 65%);
filter:blur(8px);z-index:0;
}
/* Vorherige Gold-Akzentlinie (.lp-mc::after) wurde entfernt — wirkte
neben dem reduzierten Hero-Mark gequetscht. Premium-Look lebt jetzt
vom Negativraum statt von Dekor-Linien. */
.lp-mc-inner{
position:relative;z-index:1;
max-width:1400px;margin:0 auto;
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
}
@media(max-width:900px){.lp-mc-inner{grid-template-columns:1fr;gap:14px}}
/* LEFT: Text */
.lp-mc-text{min-width:0}
.lp-mc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;color:var(--mc-text-3);margin-bottom:8px}
.lp-mc-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.lp-mc-eyebrow-sep{color:var(--mc-text-3);opacity:.5;margin:0 2px}
.lp-mc-eyebrow-cur{color:var(--mc-text-2);font-weight:600}
.lp-mc-title{margin:0;font-family:var(--font-display);font-size:clamp(22px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.12;color:var(--mc-text)}
.lp-mc-sub{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--mc-text-2);max-width:60ch}
/* RIGHT: KPIs + Orb */
.lp-mc-right{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
@media(max-width:900px){.lp-mc-right{justify-content:flex-start;gap:18px}}
.lp-mc-kpis{display:flex;align-items:center;gap:24px}
@media(max-width:900px){.lp-mc-kpis{gap:16px}}
.lp-mc-kpi{display:flex;flex-direction:column;align-items:flex-end;gap:4px;line-height:1}
@media(max-width:900px){.lp-mc-kpi{align-items:flex-start}}
.lp-mc-kpi-n{font-family:var(--font-display);font-size:clamp(20px,1.8vw,24px);font-weight:600;color:var(--mc-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lp-mc-kpi-l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mc-text-3);font-weight:600;margin-top:2px}
.lp-mc-kpi--warn .lp-mc-kpi-n{color:var(--amber)}
.lp-mc-kpi--bad .lp-mc-kpi-n{color:var(--red)}
.lp-mc-kpi--good .lp-mc-kpi-n{color:var(--green)}
/* Klickbare KPI-Kachel: ruht als „Chip" (Hairline), hebt sich bei Hover
sichtbar mit Accent-Lift ab — macht den Drill-down auffindbar. */
.lp-mc-kpi--link{cursor:pointer;background:none;margin:0;padding:4px 8px;font:inherit;text-align:inherit;color:inherit;border:1px solid var(--mc-hair);border-radius:var(--radius-sm);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
/* Auf der Jobs-Cover darf der KPI-Streifen umbrechen statt zu clippen
(die Kacheln sind als Chips etwas breiter). */
.jobs-overview .lp-mc-kpis{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
@media (hover:hover){
.lp-mc-kpi--link:hover{background:var(--accent-light);border-color:var(--accent-border);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.lp-mc-kpi--link:hover .lp-mc-kpi-n{color:var(--accent)}
.lp-mc-kpi--link:hover .lp-mc-kpi-l{color:var(--accent)}
}
.lp-mc-kpi--link:active{transform:translateY(0);transition-duration:var(--dur-fast)}
.lp-mc-kpi--link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lp-mc-orb{
position:relative;
width:96px;height:96px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
color:#d4b87a;line-height:0;
}
/* Goldene Halo hinter dem Orb — Wiedererkennung zum Cinematic-Hero (Landing) */
.lp-mc-orb::before{
content:'';position:absolute;inset:-22%;pointer-events:none;z-index:0;
background:radial-gradient(circle, color-mix(in srgb,#d4b87a 32%,transparent) 0%, color-mix(in srgb,#d4b87a 12%,transparent) 35%, transparent 70%);
filter:blur(10px);
opacity:.85;
}
html:not(.dark) .lp-mc-orb::before{opacity:.55}
.lp-mc-orb svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 24px color-mix(in srgb,#d4b87a 40%,transparent)) drop-shadow(0 2px 6px rgba(0,0,0,.25))}
/* Hero-Mark: Haarlinien-Icon mit dezenter Schräge und flachem Offset-Schatten (Letterpress-Look).
Canonical: .fl-hero-mark (siehe docs/technik/design/00-page-skeleton.md § Hero-Mark).
Alias: .lp-mc-orb--icon — bleibt für noch nicht migrierte Pages aktiv. */
.lp-mc-orb.fl-hero-mark,
.lp-mc-orb--icon{width:140px;height:140px}
.lp-mc-orb.fl-hero-mark::before,
.lp-mc-orb--icon::before{display:none}
.lp-mc-orb.fl-hero-mark svg,
.lp-mc-orb--icon svg{
width:128px;height:128px;
stroke-width:.7;
opacity:.9;
color:color-mix(in srgb,#d4b87a 75%,transparent);
transform:rotate(-6deg) translateY(-2px);
transform-origin:60% 60%;
filter:
drop-shadow(3px 5px 0 color-mix(in srgb,#d4b87a 14%,transparent))
drop-shadow(0 1px 0 color-mix(in srgb,#000 25%,transparent));
}
.lp-mc-orb.fl-hero-mark svg *,
.lp-mc-orb--icon svg *{fill:none !important}
@media(max-width:768px){
.lp-mc-orb.fl-hero-mark,
.lp-mc-orb--icon{width:88px;height:88px}
.lp-mc-orb.fl-hero-mark svg,
.lp-mc-orb--icon svg{width:80px;height:80px;stroke-width:.9}
}
@media(prefers-reduced-motion:no-preference){
.lp-mc-orb::before{animation:lp-mc-orb-halo 7s ease-in-out infinite}
}
@keyframes lp-mc-orb-halo{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:.95;transform:scale(1.06)}}
@media(max-width:768px){.lp-mc-orb{width:64px;height:64px}}
@media(max-width:480px){.lp-mc-orb{display:none}}
/* ── Einheitlicher Modul-Landing-Header auf Mobile (ADR-0034) ────
Auf kleinen Viewports reduzieren wir den Modul-Header auf das
Wesentliche: Titel + optionaler Sub-Text. Eyebrow-Breadcrumb,
Orb/Hero-Mark und KPI-Bar werden ausgeblendet — das schafft
Konsistenz zwischen Pages, die coverHeader nutzen (pulse,
wissenszentrum, …) und Pages mit einfachem pageLayout-Titel
(mediengalerie, ki-assistent, …). Best Practice: 1 Zeile
Titel + Sub statt 3-stufige Hierarchie. */
@media(max-width:600px){
.lp-mc{padding:14px 16px 18px;margin-bottom:14px;
-webkit-mask-image:none;mask-image:none}
.sm-content > .lp-mc,
.sm-content > div > .lp-mc:only-child{margin:-16px -16px 14px !important}
.lp-mc-eyebrow{display:none}
.lp-mc-title{font-size:20px;line-height:1.2;letter-spacing:-.01em}
.lp-mc-sub{font-size:13px;margin-top:4px;max-width:100%}
.lp-mc-right{display:none}
.lp-mc::before{display:none}
}
/* Einheit: einfacher pageLayout-Header (mediengalerie etc.) bekommt
auf Mobile ebenfalls eine konsistente Titel-Optik (20px h1, klare
Hierarchie). Wirkt nur auf das fallback-h1 im pageLayout
(kein .lp-mc-Cover). */
@media(max-width:600px){
/* Simple pageLayout-Header (Pages ohne cover-Header, z.B.
mediengalerie, ki-assistent): einheitliche 20px-Titel-Optik. */
main.page--wide > div:first-child > h1,
main.page--narrow > div:first-child > h1,
main.page--mid > div:first-child > h1,
main.page--full > div:first-child > h1,
.sm-content-header .sm-content-title{font-size:20px !important;font-weight:600;letter-spacing:-.01em}
}
/* Tablet/Mobile: kompakter, Orb ggf. weg, KPIs horizontal scrollbar */
@media(max-width:768px){
.lp-mc{padding:18px 16px 22px}
.lp-mc-inner{gap:12px}
.lp-mc-title{font-size:clamp(20px,5.5vw,26px);line-height:1.15}
.lp-mc-sub{font-size:12.5px;line-height:1.45;max-width:none}
.lp-mc-right{width:100%;gap:14px;justify-content:space-between}
.lp-mc-kpis{flex:1;overflow-x:auto;scrollbar-width:none;gap:14px;padding-bottom:2px}
.lp-mc-kpis::-webkit-scrollbar{display:none}
.lp-mc-kpi-n{font-size:18px}
.lp-mc-kpi-l{font-size:9.5px}
}
@media(max-width:480px){
.lp-mc{padding:16px 14px 18px}
.lp-mc::after{left:14px;right:14px}
.lp-mc-orb{display:none} /* unter 480px: Orb weglassen, Platz für KPIs */
.lp-mc-eyebrow{font-size:9.5px;letter-spacing:.18em}
.lp-mc-title{font-size:clamp(18px,5vw,22px)}
.lp-mc-sub{font-size:12px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
}
@media(prefers-reduced-motion:no-preference){
.lp-mc-eyebrow,.lp-mc-title,.lp-mc-sub,.lp-mc-kpi,.lp-mc-orb{opacity:0;transform:translateY(8px);animation:lp-hero-rise var(--dur-emphasized) var(--ease-emphasized) forwards}
.lp-mc-eyebrow{animation-delay:30ms}
.lp-mc-title{animation-delay:80ms}
.lp-mc-sub{animation-delay:130ms}
.lp-mc-orb{animation-delay:80ms}
.lp-mc-kpi:nth-child(1){animation-delay:160ms}
.lp-mc-kpi:nth-child(2){animation-delay:200ms}
.lp-mc-kpi:nth-child(3){animation-delay:240ms}
}
/* ── Schnellstart Premium-Rail (Phase 5 — Editorial Mosaic) ──
Eigene Sektion direkt nach dem Bento-Grid. Tiles teilen die
Neumorph-Materialität der Hero-Sat-Cards (gradient surface,
soft shadow, gold accent on hover). Theme-aware via gleiche
--hc-*-Tokens wie der Cinematic-Hero. */
.lp-qs{
--hc-card:#ffffff;
--hc-card-up:#fefcf7;
--hc-hair:rgba(11,15,24,.08);
--hc-text:#0e1018;
--hc-text-2:#363b48;
--hc-text-3:#5d6376;
max-width:1440px;margin:14px auto 0;padding:0 clamp(14px,2.5vw,32px);
}
html.dark .lp-qs{
--hc-card:#161b2e;
--hc-card-up:#1b2138;
--hc-hair:rgba(238,241,249,.06);
--hc-text:#f5f7fd;
--hc-text-2:#c8cee0;
--hc-text-3:#9aa2bc;
}
.lp-qs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.lp-qs-head-text{min-width:0;display:flex;flex-direction:column;gap:6px}
.lp-qs-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.lp-qs-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.lp-qs-title{margin:0;font-family:var(--font-display);font-size:clamp(18px,1.7vw,22px);font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.2}
.lp-qs-edit{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--text-3);font-weight:500;padding:6px 0;border-bottom:1px solid transparent;transition:color var(--dur-fast),border-color var(--dur-fast)}
.lp-qs-edit:hover{color:var(--accent);border-bottom-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.lp-qs-edit svg{width:13px;height:13px}
/* Schnellstart innerhalb eines Stage-Panels: 2-Spalten-Grid, alle Tiles
gleichzeitig sichtbar (kein nested horizontal scroll im Carousel-Panel). */
.lp-qs-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:1200px){
.lp-bento-card--qs .lp-qs-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
.lp-qs-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.lp-qs-tile{
position:relative;
background:linear-gradient(135deg,var(--hc-card-up) 0%,var(--hc-card) 100%);
border:1px solid var(--hc-hair);
border-radius:var(--r);
padding:10px 14px;
display:flex;flex-direction:row;align-items:center;gap:12px;
cursor:pointer;text-decoration:none;color:var(--text);
transition:transform var(--dur-emphasized) var(--ease-emphasized),
box-shadow var(--dur-emphasized) var(--ease-emphasized),
border-color var(--dur-emphasized) var(--ease-emphasized);
box-shadow:0 6px 16px -10px rgba(11,18,32,.12),inset 0 1px 0 0 rgba(255,255,255,.4);
min-height:56px;
outline:none;
}
html.dark .lp-qs-tile{box-shadow:0 8px 20px -12px rgba(0,0,0,.4),inset 0 1px 0 0 color-mix(in srgb,var(--text) 8%,transparent)}
@media(hover:hover){
.lp-qs-tile:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 35%,var(--hc-hair));box-shadow:0 12px 26px -14px rgba(11,18,32,.18)}
html.dark .lp-qs-tile:hover{box-shadow:0 12px 26px -14px rgba(0,0,0,.5)}
}
.lp-qs-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lp-qs-tile-icon{
width:32px;height:32px;border-radius:var(--r);
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent) 0%,color-mix(in srgb,var(--accent) 8%,transparent) 100%);
border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
display:inline-flex;align-items:center;justify-content:center;
color:var(--accent);flex-shrink:0;
}
.lp-qs-tile-icon svg{width:16px;height:16px}
.lp-qs-tile-label{
flex:1;min-width:0;
font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text);
letter-spacing:-.005em;line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lp-qs-tile-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:20px;height:20px;padding:0 7px;border-radius:var(--r);
background:color-mix(in srgb,var(--accent) 18%,transparent);
color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.02em;
border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
font-variant-numeric:tabular-nums;flex-shrink:0;
}
.lp-qs-tile-arrow{
color:var(--text-3);flex-shrink:0;
transition:color var(--dur-fast),transform var(--dur-fast);
}
.lp-qs-tile:hover .lp-qs-tile-arrow{color:var(--accent);transform:translateX(2px)}
.lp-qs-empty{
display:inline-flex;align-items:center;gap:8px;
background:transparent;border:1px dashed var(--hc-hair);
border-radius:var(--r);padding:14px 18px;cursor:pointer;
font-family:inherit;font-size:13px;color:var(--text-3);
transition:all var(--dur-fast);
}
.lp-qs-empty:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--hc-hair));color:var(--accent)}
@media(prefers-reduced-motion:no-preference){
.lp-qs-tile{opacity:0;transform:translateY(8px);animation:lp-hero-rise var(--dur-emphasized) var(--ease-emphasized) forwards}
.lp-qs-tile:nth-child(1){animation-delay:40ms}
.lp-qs-tile:nth-child(2){animation-delay:90ms}
.lp-qs-tile:nth-child(3){animation-delay:140ms}
.lp-qs-tile:nth-child(4){animation-delay:190ms}
.lp-qs-tile:nth-child(5){animation-delay:240ms}
.lp-qs-tile:nth-child(6){animation-delay:290ms}
.lp-qs-tile:nth-child(7){animation-delay:340ms}
.lp-qs-tile:nth-child(8){animation-delay:390ms}
}
/* ── Scroll-Reveal-Layer (Phase 5) ──
Modern: animation-timeline: view() in Chrome/Edge/Safari 17+.
Aelteren Browsern wird wegen @supports gar nichts versteckt — der
Content erscheint einfach statisch. */
@supports (animation-timeline:view()){
@media(prefers-reduced-motion:no-preference){
.lp-reveal{opacity:0;transform:translateY(24px);animation:lp-reveal-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
}
@keyframes lp-reveal-rise{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
.lp-hc-eyebrow,.lp-hc-title,.lp-hc-sub,.lp-hc-actions,.lp-hc-pips{opacity:0;transform:translateY(10px);animation:lp-hero-rise var(--dur-emphasized) var(--ease-emphasized) forwards}
.lp-hc-eyebrow{animation-delay:40ms}
.lp-hc-title{animation-delay:100ms}
.lp-hc-sub{animation-delay:160ms}
.lp-hc-actions{animation-delay:220ms}
.lp-hc-pips{animation-delay:280ms}
}
@keyframes lp-hero-rise{to{opacity:1;transform:translateY(0)}}
/* Tages-Briefing — Glass-Card (Hero-Ersatz) */
.lp-briefing{position:relative;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);padding:20px 24px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.lp-briefing::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,transparent) 0%,transparent 55%);pointer-events:none}
/* Glass-Variante: wenn ein Banner-Bild aktiv ist, überlappt das Briefing das Banner */
.lp-briefing--glass{
margin-top:-72px;
background:color-mix(in srgb,var(--surface) 78%,transparent);
-webkit-backdrop-filter:blur(20px) saturate(160%);
backdrop-filter:blur(20px) saturate(160%);
border:1px solid color-mix(in srgb,var(--surface) 60%,transparent);
box-shadow:0 12px 32px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.35) inset;
z-index:2;
}
.lp-briefing--glass::before{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent) 0%,transparent 65%)}
.lp-briefing-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;position:relative;z-index:1;flex-wrap:wrap}
.lp-briefing-greeting{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.lp-briefing-hello{font-size:clamp(20px,2.4vw,28px);font-weight:700;color:var(--text);letter-spacing:-.4px;line-height:1.2}
.lp-briefing-hello strong{color:var(--accent);font-weight:800}
.lp-briefing-date{font-size:12px;color:var(--text-3);font-weight:500}
.lp-briefing-inbox-link{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-full);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent);font-size:12px;font-weight:600;text-decoration:none;flex-shrink:0;transition:background var(--dur-fast),border-color var(--dur-fast)}
@media(hover:hover){.lp-briefing-inbox-link:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:var(--accent)}}
.lp-briefing-weather{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);flex-shrink:0}
.lp-briefing-weather-icon{font-size:16px;line-height:1}
.lp-briefing-weather-temp{font-size:13px;font-weight:700;color:var(--text-2)}
/* Body: zweispaltig — Briefing-Lines links, Mini-Timeline rechts */
.lp-briefing-body{display:block;position:relative;z-index:1}
/* Section-Header der entschlackten Briefing-Karte (Phase 4) */
.lp-briefing-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;position:relative;z-index:1}
.lp-briefing-section-title{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.lp-briefing-section-link{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600}
.lp-briefing-section-link:hover{text-decoration:underline}
.lp-briefing-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.lp-briefing-line{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-sm);transition:background var(--dur-fast);font-size:13px;line-height:1.45;color:var(--text-2);border-left:3px solid transparent}
.lp-briefing-line--info{border-left-color:var(--blue)}
.lp-briefing-line--attention{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 5%,transparent)}
.lp-briefing-line--positive{border-left-color:var(--green)}
.lp-briefing-line--actionable{cursor:pointer}
@media(hover:hover){.lp-briefing-line--actionable:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface-2))}}
.lp-briefing-line--actionable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lp-briefing-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--surface-2);color:var(--text-3)}
.lp-briefing-line--attention .lp-briefing-icon{background:var(--amber-bg);color:var(--amber)}
.lp-briefing-line--positive .lp-briefing-icon{background:var(--green-bg);color:var(--green)}
.lp-briefing-line--info .lp-briefing-icon{background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--blue)}
.lp-briefing-text{flex:1;min-width:0;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-briefing-text strong{color:var(--text);font-weight:700}
.lp-briefing-arrow{font-size:18px;color:var(--text-3);flex-shrink:0;line-height:1}
.lp-briefing-inbox{flex-shrink:0;width:26px;height:26px;border-radius:var(--r-sm);background:transparent;border:1px solid transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
.lp-briefing-line:hover .lp-briefing-inbox,.lp-briefing-line:focus-within .lp-briefing-inbox{opacity:1}
.lp-briefing-inbox:hover{background:var(--surface-2);color:var(--accent);border-color:var(--border)}
@media(hover:none){.lp-briefing-inbox{opacity:1}}
/* Hero rechte Spalte — Mini-Timeline */
.lp-briefing-aside{display:flex;flex-direction:column;gap:8px;min-width:0;border-left:1px solid color-mix(in srgb,var(--border) 60%,transparent);padding-left:20px}
@media(max-width:900px){.lp-briefing-aside{border-left:none;border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);padding-left:0;padding-top:12px}}
.lp-briefing-aside-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lp-briefing-aside-title{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px}
.lp-briefing-aside-link{font-size:11px;color:var(--accent);text-decoration:none;font-weight:600}
.lp-briefing-aside-link:hover{text-decoration:underline}
.lp-hero-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lp-hero-timeline-item{display:grid;grid-template-columns:auto 3px 1fr;gap:10px;align-items:center;padding:6px 8px;border-radius:var(--r-sm);transition:background var(--dur-fast)}
.lp-hero-timeline-item--actionable{cursor:pointer}
@media(hover:hover){.lp-hero-timeline-item--actionable:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}}
.lp-hero-timeline-time{font-size:11px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:38px}
.lp-hero-timeline-bar{height:100%;min-height:22px;border-radius:var(--r-xs);align-self:stretch}
.lp-hero-timeline-bar--accent{background:var(--accent)}
.lp-hero-timeline-bar--amber{background:var(--amber)}
.lp-hero-timeline-bar--violet{background:var(--violet)}
.lp-hero-timeline-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.lp-hero-timeline-subject{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-hero-timeline-meta{font-size:10px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-hero-timeline-empty{font-size:12px;color:var(--text-3);padding:8px 0}
@media(max-width:640px){
.lp-briefing{padding:16px}
.lp-briefing-line{padding:8px 10px;font-size:12px}
.lp-briefing-text{white-space:normal}
}
/* KI-Assistent — inline prominent (Notion-AI / Copilot-Stil) */
/* AI-Bar als zentrale Command-Bar (Phase 6 — modernize-hub-landing).
Zentriert, Glas-Surface mit Akzent-Glow, schwebende Optik. */
.lp-ai-bar{position:relative;max-width:760px;margin:8px auto 4px;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));border-radius:var(--r-lg);padding:6px 8px 6px 18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 24px rgba(11,18,32,.06),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent);transition:box-shadow var(--dur-emphasized) var(--ease-emphasized),border-color var(--dur-emphasized) var(--ease-emphasized),border-radius var(--dur-emphasized) var(--ease-emphasized)}
.lp-ai-bar::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 32%,transparent) 0%,color-mix(in srgb,var(--violet) 28%,transparent) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity var(--dur-emphasized) var(--ease-emphasized);pointer-events:none}
.lp-ai-bar:focus-within::before,.lp-ai-bar--expanded::before{opacity:1}
.lp-ai-bar:focus-within,.lp-ai-bar--expanded{box-shadow:0 12px 36px rgba(11,18,32,.10),0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);border-radius:var(--r-lg)}
.lp-ai-bar-input-row{display:flex;align-items:center;gap:12px;min-height:42px}
.lp-ai-bar--expanded .lp-ai-bar-input-row{align-items:flex-start}
.lp-ai-bar-icon{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent) 0%,color-mix(in srgb,var(--violet) 22%,transparent) 100%);color:var(--accent)}
.lp-ai-bar-input{flex:1;min-width:0;resize:none;background:transparent;border:none;outline:none;font:inherit;color:var(--text);font-size:14px;line-height:1.5;padding:8px 0;max-height:100px;overflow-y:auto}
.lp-ai-bar-input::placeholder{color:var(--text-3);font-style:normal}
.lp-ai-bar-submit{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--accent-gradient);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-fast),box-shadow var(--dur-fast)}
.lp-ai-bar-submit:disabled{background:var(--text-3);cursor:not-allowed;opacity:.55}
@media(hover:hover){.lp-ai-bar-submit:not(:disabled):hover{transform:scale(1.08);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent)}}
.lp-ai-bar-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:lp-ai-spin .8s linear infinite}
@keyframes lp-ai-spin{to{transform:rotate(360deg)}}
.lp-ai-bar-close{flex-shrink:0;color:var(--text-3)}
.lp-ai-bar-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 4px 50px;justify-content:center}
.lp-ai-bar:not(.lp-ai-bar--expanded):not(:focus-within) .lp-ai-bar-suggestions{display:none}
.lp-ai-bar:focus-within .lp-ai-bar-suggestions,.lp-ai-bar--expanded .lp-ai-bar-suggestions{display:flex;justify-content:flex-start}
.lp-ai-bar-suggestion{padding:4px 12px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--border);font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
@media(hover:hover){.lp-ai-bar-suggestion:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));border-color:var(--accent);color:var(--accent)}}
.lp-ai-bar-messages{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding:8px 0 0;border-top:1px solid var(--border);margin-top:4px}
.lp-ai-bar-msg{padding:8px 12px;border-radius:var(--r-md);font-size:13px;line-height:1.5;max-width:88%}
.lp-ai-bar-msg--user{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text);align-self:flex-end}
.lp-ai-bar-msg--assistant{background:var(--surface-2);color:var(--text);align-self:flex-start;border:1px solid var(--border)}
.lp-ai-bar-msg--assistant p{margin:0 0 6px}
.lp-ai-bar-msg--assistant p:last-child{margin-bottom:0}
.lp-ai-bar-msg--assistant code{background:var(--surface);padding:1px 5px;border-radius:var(--r-xs);font-size:12px}
.lp-ai-bar-msg--error{background:var(--red-bg);color:var(--red);align-self:flex-start;font-size:12px}
@media(max-width:640px){.lp-ai-bar-suggestions{padding-left:0}}
/* Landing KI-Assistent-Card — eigene Bento-Card (rechts neben Mein Tag).
Senden oeffnet das Floating-Panel; daher kein Verlauf in dieser Card. */
.lp-ai-bar-card{padding:18px 20px;gap:14px}
.lp-ai-bar-card .lp-ai-bento-header{display:flex;align-items:center;gap:12px;flex-shrink:0}
.lp-ai-bar-card .lp-ai-bar-icon{width:32px;height:32px;flex-shrink:0}
.lp-ai-bar-card .lp-ai-bento-header-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-ai-bar-card .lp-ai-bento-title{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.2}
.lp-ai-bar-card .lp-ai-bento-sub{font-size:12.5px;color:var(--text-3);line-height:1.4}
.lp-ai-bar-card .lp-ai-bar-input-row{display:flex;align-items:center;gap:10px;min-height:42px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:4px 6px 4px 14px}
.lp-ai-bar-card .lp-ai-bar-input{flex:1;min-width:0;resize:none;background:transparent;border:none;outline:none;font:inherit;color:var(--text);font-size:14px;line-height:1.5;padding:6px 0;max-height:80px}
.lp-ai-bar-card .lp-ai-bar-input::placeholder{color:var(--text-3)}
.lp-ai-bar-card .lp-ai-bar-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.lp-ai-bar-card .lp-ai-bar-suggestion{padding:5px 12px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--border);font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
@media(hover:hover){.lp-ai-bar-card .lp-ai-bar-suggestion:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));border-color:var(--accent);color:var(--accent)}}
.lp-ai-bar-card .lp-ai-bar-reset{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color var(--dur-fast),border-color var(--dur-fast)}
@media(hover:hover){.lp-ai-bar-card .lp-ai-bar-reset:hover{color:var(--accent);border-color:var(--accent)}}
.lp-ai-bar-card .lp-ai-bar-messages{max-height:360px}
/* Hero-Variante: Header links, Eingabe + Chips/Messages rechts.
Bei aktivem Chat (lp-ai-bar-card--chat) klappt rechte Spalte auf volle Breite. */
.lp-ai-bar-card--hero{display:grid;grid-template-columns:minmax(180px,220px) 1fr;align-items:center;gap:20px}
.lp-ai-bar-card--hero .lp-ai-bento-header{align-self:center}
.lp-ai-bar-card--hero .lp-ai-bento-title{font-size:20px}
.lp-ai-bar-card--hero .lp-ai-bar-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.lp-ai-bar-card--hero .lp-ai-bar-input-row{min-height:46px}
.lp-ai-bar-card--hero .lp-ai-bar-input{font-size:15px}
.lp-ai-bar-card--hero .lp-ai-bar-suggestions{margin-top:0}
.lp-ai-bar-card--hero.lp-ai-bar-card--chat{grid-template-columns:1fr}
.lp-ai-bar-card--hero.lp-ai-bar-card--chat .lp-ai-bento-header{margin-bottom:4px}
@media(max-width:720px){
.lp-ai-bar-card--hero{grid-template-columns:1fr;gap:12px}
}
/* Hauptzeile + Sekundärzone (neue Grids).
Phase 3: Pulse zog in eine eigene Editorial-Section um. Hauptzeile enthaelt
nur noch Schnellzugriff -> single-column. */
.lp-main-row{display:flex;flex-direction:column;gap:16px}
.lp-secondary{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch}
@media(max-width:900px){.lp-secondary{grid-template-columns:1fr}}
/* Pulse — kompakte 3-Kachel-Reihe (statt 2/3-Featured) */
.lp-pulse-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.lp-pulse-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.lp-pulse-row{grid-template-columns:1fr}}
/* Hero V2 — DEPRECATED (bleibt für andere Pages, Landing nutzt lp-briefing) */
.lp-hero-v2{position:relative;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);overflow:hidden;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:120px}
.lp-hero-v2::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 6%,transparent) 0%,transparent 60%);pointer-events:none}
.lp-hero-v2--img::before{background:linear-gradient(90deg,rgba(15,23,42,.62) 0%,rgba(15,23,42,.18) 70%)}
.lp-hero-v2--img .lp-hero-badge,.lp-hero-v2--img .lp-hero-greeting,.lp-hero-v2--img .lp-hero-date{color:#fff !important}
.lp-hero-v2--img .lp-hero-greeting strong{color:rgba(255,255,255,.92) !important}
.lp-hero-v2--img .lp-chip{background:rgba(255,255,255,.14) !important;color:#fff !important;border-color:rgba(255,255,255,.22) !important}
.lp-hero-v2--img .lp-chip-count{color:#fff !important}
.lp-hero-content{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1;flex:1;min-width:0}
.lp-hero-badge{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.lp-hero-greeting{font-size:clamp(18px,2.2vw,26px);font-weight:700;color:var(--text);letter-spacing:-.4px;margin:0;line-height:1.2}
.lp-hero-greeting strong{color:var(--accent);font-weight:800}
.lp-hero-date{font-size:12px;color:var(--text-2);font-weight:500;margin-bottom:8px}
.lp-hero-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lp-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r-full);font-size:11px;font-weight:600;text-decoration:none;transition:opacity var(--dur-fast);cursor:default;border:1px solid transparent;white-space:nowrap}
a.lp-chip{cursor:pointer}
a.lp-chip:hover{opacity:.78}
.lp-chip-count{font-size:13px;font-weight:800;line-height:1}
.lp-chip--amber{background:var(--amber-bg);color:var(--amber);border-color:rgba(217,119,6,.18)}
.lp-chip--violet{background:rgba(124,58,237,.08);color:var(--violet);border-color:rgba(124,58,237,.18)}
.lp-chip--blue{background:rgba(37,99,235,.08);color:var(--blue);border-color:rgba(37,99,235,.18)}
.lp-chip--green{background:var(--green-bg);color:var(--green);border-color:rgba(22,163,74,.18)}
.lp-chip--muted{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
.lp-hero-orb{flex-shrink:0;opacity:.5;transition:opacity var(--dur);width:100px;height:100px;display:flex;align-items:center;justify-content:center}
.lp-hero-v2:hover .lp-hero-orb{opacity:.72}
/* Full-Bleed Hero — background-image mit konfigurierbarer Höhe */
.lp-shell{display:block} /* neutraler Wrapper ohne max-width oder padding */
.lp-hero-fullbleed{
/* Reset Card-Styles */
border-radius:0;border:none;
/* Background-Image via Inline-Style (heroStyle), diese Props setzen das Verhalten */
background-size:cover;background-repeat:no-repeat;background-color:var(--accent);
/* Override lp-hero-v2 flex-Ausrichtung: Content unten links */
align-items:flex-end;justify-content:flex-start;
padding:0 40px 20px;min-height:0;
}
/* Höhen-Varianten */
.lp-hero-fullbleed--s{height:120px}
.lp-hero-fullbleed--m{height:160px}
.lp-hero-fullbleed--l{height:210px}
.lp-hero-fullbleed--xl{height:280px}
/* Content über dem Gradient */
.lp-hero-fullbleed .lp-hero-content{position:relative;z-index:2;padding-top:0;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;row-gap:4px;column-gap:0}
.lp-hero-fullbleed .lp-hero-badge{display:none}
.lp-hero-fullbleed .lp-hero-greeting{width:100%;font-size:clamp(16px,2vw,22px);margin-bottom:0}
.lp-hero-fullbleed .lp-hero-date{margin-bottom:0;margin-right:10px;font-size:11px;white-space:nowrap;flex-shrink:0;line-height:1}
.lp-hero-fullbleed .lp-hero-chips{flex-wrap:nowrap;gap:6px}
/* Oberer Gradient für Nav-Lesbarkeit */
.lp-hero-top-grad{
position:absolute;top:0;left:0;right:0;height:100px;
background:linear-gradient(to bottom,rgba(0,0,0,.42) 0%,transparent 100%);
pointer-events:none;z-index:1;
}
/* Overlay-Intensität: übersteuert lp-hero-v2--img::before */
.lp-hero-fullbleed.lp-hero--overlay-light::before{background:linear-gradient(90deg,rgba(15,23,42,.32) 0%,rgba(15,23,42,.06) 70%)}
.lp-hero-fullbleed.lp-hero--overlay-medium::before{background:linear-gradient(90deg,rgba(15,23,42,.60) 0%,rgba(15,23,42,.16) 70%)}
.lp-hero-fullbleed.lp-hero--overlay-strong::before{background:linear-gradient(90deg,rgba(15,23,42,.82) 0%,rgba(15,23,42,.38) 70%)}
/* Ankündigungen */
.lp-announce{display:flex;flex-direction:column;gap:8px}
.lp-announce-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);border-left-width:3px}
.lp-announce-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.lp-announce-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.lp-announce-text{font-size:13px;color:var(--text-2);line-height:1.5}
/* Abschnitts-Header */
.lp-section{display:flex;flex-direction:column;gap:10px}
.lp-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.lp-section-title{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.lp-section-link{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600;flex-shrink:0}
.lp-section-link:hover{text-decoration:underline}
/* Pulse — Editoriales Layout (Phase 3 — modernize-hub-landing).
Eigene Section ausserhalb der Hauptzeile, asymmetrisches 2/1-Grid,
Display-Headline für das Featured, prominentere Cards, lift+zoom on hover. */
.lp-pulse-editorial{display:flex;flex-direction:column;gap:12px}
.lp-pulse-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.lp-pulse-section-title-wrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.lp-pulse-section-rule{width:48px;height:3px;border-radius:var(--r);background:var(--accent-gradient)}
.lp-pulse-section-title{font-family:var(--font-display);font-size:var(--display-md);font-weight:600;letter-spacing:var(--display-tracking);line-height:1.1;color:var(--text);margin:0}
.lp-pulse-section-link{font-size:13px;color:var(--accent);text-decoration:none;font-weight:600;flex-shrink:0;display:inline-flex;align-items:center;gap:4px;transition:transform var(--dur-fast)}
@media(hover:hover){.lp-pulse-section-link:hover{transform:translateX(2px)}}
.lp-pulse-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:stretch}
.lp-pulse-layout--single{grid-template-columns:1fr}
/* Featured: Magazine-Split (Bild LINKS horizontal, Text RECHTS) — kompakt ~160px hoch */
.lp-pulse-featured{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:row;min-height:160px;transition:box-shadow var(--dur-emphasized) var(--ease-emphasized),transform var(--dur-emphasized) var(--ease-emphasized)}
@media(hover:hover){.lp-pulse-featured:hover{box-shadow:0 8px 22px rgba(0,0,0,.10);transform:translateY(-2px)}}
.lp-pulse-featured-img{position:relative;width:42%;flex-shrink:0;overflow:hidden;background:var(--surface-2);min-height:0}
.lp-pulse-featured-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-emphasized)}
@media(hover:hover){.lp-pulse-featured:hover .lp-pulse-featured-img img{transform:scale(1.04)}}
.lp-pulse-featured-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px;flex:1;background:var(--surface);justify-content:center;min-width:0}
/* Overlay-Variante wird im Magazine-Split nicht mehr benoetigt — Body sitzt separat rechts.
Die Klasse wird trotzdem akzeptiert (Backward-Compat) aber ohne Overlay-Effekt. */
.lp-pulse-featured-body--overlay{position:static;inset:auto;background:var(--surface);padding:16px 20px}
.lp-pulse-featured-body--overlay .lp-pulse-featured-title{color:var(--text)}
.lp-pulse-featured-body--overlay .lp-pulse-featured-excerpt{color:var(--text-2)}
.lp-pulse-featured-title{font-family:var(--font-display);font-size:clamp(16px,1.4vw,20px);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--text);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-pulse-featured-excerpt{font-size:13px;color:var(--text-2);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-pulse-badge{display:inline-flex;padding:3px 8px;border-radius:var(--r-full);background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));color:var(--accent);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;width:fit-content;flex-shrink:0}
.lp-pulse-side{display:flex;flex-direction:column;gap:10px;min-height:0}
.lp-pulse-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:row;flex:1;min-height:0;transition:box-shadow var(--dur-emphasized) var(--ease-emphasized),transform var(--dur-emphasized) var(--ease-emphasized)}
@media(hover:hover){.lp-pulse-card:hover{box-shadow:0 6px 14px rgba(0,0,0,.08);transform:translateY(-1px)}}
.lp-pulse-card-img{width:38%;flex-shrink:0;overflow:hidden;background:var(--surface-2)}
.lp-pulse-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-emphasized)}
@media(hover:hover){.lp-pulse-card:hover .lp-pulse-card-img img{transform:scale(1.04)}}
.lp-pulse-card-body{padding:10px 12px;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:center;min-width:0}
.lp-pulse-card-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.01em}
.lp-pulse-card-excerpt{font-size:11px;color:var(--text-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:1600px){.lp-pulse-featured{min-height:180px}.lp-pulse-featured-title{font-size:clamp(18px,1.3vw,22px)}}
@media(max-width:1024px){.lp-pulse-layout{grid-template-columns:1fr}.lp-pulse-side{flex-direction:row;min-height:0}.lp-pulse-card{flex:1}}
@media(max-width:640px){.lp-pulse-featured,.lp-pulse-card{flex-direction:column;min-height:auto}.lp-pulse-featured-img{width:100%;height:140px}.lp-pulse-card-img{width:100%;height:100px}.lp-pulse-side{flex-direction:column}}
/* Standard Panel */
/* Panels — Soft-Card (Elevation statt Borderline) */
.lp-panel{background:var(--surface);border-radius:var(--r-md);padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.06),0 0 0 1px color-mix(in srgb,var(--border) 55%,transparent);display:flex;flex-direction:column;gap:10px}
.lp-panel-head{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-bottom:8px;border-bottom:1px solid var(--border)}
.lp-panel-icon{width:22px;height:22px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);font-size:12px}
.lp-panel-title{font-size:13px;font-weight:700;color:var(--text);flex:1}
.lp-panel-link{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600;flex-shrink:0}
.lp-panel-link:hover{text-decoration:underline}
.lp-panel-body{flex:1;display:flex;flex-direction:column}
.lp-panel-empty{padding:12px 0;text-align:center;color:var(--text-3);font-size:12px;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}
/* Mitte: Meine Arbeit + Termine */
.lp-top-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch}
@media(max-width:900px){.lp-top-grid{grid-template-columns:1fr}}
.lp-mid-grid{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:16px;align-items:stretch}
@media(max-width:900px){.lp-mid-grid{grid-template-columns:1fr}}
/* Kompakte Filter-Pills im Panel-Head (statt riesiger Counter-Boxen) */
.lp-panel-head--with-pills{flex-wrap:wrap;gap:6px}
/* Editorial Section-Head Variante (Phase 6 — section-sprache vereinheitlichen).
Akzent-Linie + Display-Headline analog zur Pulse-Section.
Auf Panels anwenden via class="lp-panel-head lp-panel-head--editorial". */
.lp-panel-head--editorial{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 0 12px;border-bottom:none}
.lp-panel-head--editorial::before{content:'';position:absolute;top:0;left:0;width:48px;height:3px;border-radius:var(--r);background:var(--accent-gradient)}
.lp-panel-head--editorial .lp-panel-icon{display:none}
.lp-panel-head--editorial .lp-panel-title{font-family:var(--font-display);font-size:var(--display-md);font-weight:600;letter-spacing:var(--display-tracking);line-height:1.1;color:var(--text);flex:1}
.lp-work-pills{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;order:0}
.lp-work-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);font-size:11px;font-weight:600;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
@media(hover:hover){.lp-work-pill:hover{background:color-mix(in srgb,var(--accent) 8%,var(--surface-2))}}
.lp-work-pill--active{background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:var(--accent);color:var(--accent)}
.lp-work-pill-count{font-size:12px;font-weight:800;line-height:1;color:var(--text-3)}
.lp-work-pill-label{font-size:11px;font-weight:600}
.lp-work-pill--amber .lp-work-pill-count{color:var(--amber)}
.lp-work-pill--violet .lp-work-pill-count{color:var(--violet)}
.lp-work-pill--blue .lp-work-pill-count{color:var(--blue)}
.lp-work-pill--active .lp-work-pill-count{color:var(--accent)}
/* Alte Work-Stats — bleibt für Kompatibilität, nicht mehr verwendet */
.lp-work-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:12px;flex-shrink:0}
.lp-work-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 8px;background:var(--surface);transition:background var(--dur-fast);cursor:pointer;user-select:none}
@media(hover:hover){.lp-work-stat:hover:not(.lp-work-stat--active){background:var(--surface-2)}}
.lp-work-stat--active{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.lp-work-stat-count{font-size:22px;font-weight:800;line-height:1;color:var(--text-3)}
.lp-work-stat-count--amber{color:var(--amber)}
.lp-work-stat-count--violet{color:var(--violet)}
.lp-work-stat-count--blue{color:var(--blue)}
.lp-work-stat-label{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;text-align:center}
.lp-work-items{display:flex;flex-direction:column;flex:1}
.lp-work-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);cursor:pointer;transition:color var(--dur-fast)}
.lp-work-item:first-child{border-top:none}
@media(hover:hover){.lp-work-item:hover .lp-work-name{color:var(--accent)}}
.lp-work-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.lp-work-dot--amber{background:var(--amber)}
.lp-work-dot--violet{background:var(--violet)}
.lp-work-dot--blue{background:var(--blue)}
.lp-work-dot--muted{background:var(--border)}
.lp-work-more{font-size:11px;color:var(--accent);text-decoration:none;padding:6px 0;display:block;text-align:center;flex-shrink:0}
.lp-work-more:hover{text-decoration:underline}
.lp-work-name{font-size:12px;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-work-arrow{font-size:16px;color:var(--text-3);flex-shrink:0;line-height:1}
/* Kalender-Termine */
.lp-cal-item{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-top:1px solid color-mix(in srgb,var(--border) 50%,transparent);cursor:pointer}
.lp-cal-item:first-child{border-top:none}
.lp-cal-bar{flex-shrink:0;width:3px;align-self:stretch;border-radius:var(--r-xs)}
.lp-cal-body{flex:1;min-width:0}
.lp-cal-title{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-cal-meta{font-size:11px;color:var(--text-3);margin-top:1px}
.lp-cal-day-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);padding:6px 0 2px}
.lp-cal-day-label:first-child{padding-top:0}
.lp-cal-day-label + .lp-cal-item{border-top:none}
/* Unten: Schnellzugriff + Geburtstage */
/* Quick-Access Glas-Tiles (Phase 6 — modernize-hub-landing).
Premium-Tiles mit Glass-Surface + Gradient-Icon-Backdrops + Lift on hover.
Phase 8: horizontale Tile-Variante (Icon links, Label rechts), ~68px Höhe. */
.lp-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1}
.lp-quick-tile{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--surface) 78%,transparent);-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);border:1px solid color-mix(in srgb,var(--border) 80%,transparent);text-decoration:none;color:var(--text);transition:transform var(--dur-emphasized) var(--ease-emphasized),box-shadow var(--dur-emphasized) var(--ease-emphasized),border-color var(--dur-emphasized) var(--ease-emphasized);cursor:pointer;min-height:64px;overflow:hidden}
.lp-quick-tile::before{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--tile-accent,var(--accent)) 50%,transparent 100%);opacity:0;transition:opacity var(--dur-emphasized) var(--ease-emphasized)}
@media(hover:hover){.lp-quick-tile:hover{transform:translateY(-2px);box-shadow:0 8px 18px color-mix(in srgb,var(--tile-accent,var(--accent)) 16%,rgba(11,18,32,.06));border-color:color-mix(in srgb,var(--tile-accent,var(--accent)) 35%,var(--border))}}
@media(hover:hover){.lp-quick-tile:hover::before{opacity:1}}
@media(hover:hover){.lp-quick-tile:hover .lp-quick-icon-wrap{background:linear-gradient(135deg,color-mix(in srgb,var(--tile-accent,var(--accent)) 28%,transparent) 0%,color-mix(in srgb,var(--tile-accent,var(--accent)) 14%,transparent) 100%);transform:scale(1.05)}}
@media(hover:hover){.lp-quick-tile:hover .lp-quick-label{color:var(--tile-accent,var(--accent))}}
@media(hover:hover){.lp-quick-tile--editable:hover .lp-quick-remove{opacity:1}}
.lp-quick-icon-wrap{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--tile-accent,var(--accent)) 18%,transparent) 0%,color-mix(in srgb,var(--tile-accent,var(--accent)) 8%,transparent) 100%);flex-shrink:0;transition:background var(--dur-emphasized) var(--ease-emphasized),transform var(--dur-emphasized) var(--ease-emphasized)}
.lp-quick-icon{display:flex;align-items:center;justify-content:center;color:var(--tile-accent,var(--accent))}
.lp-quick-icon svg{width:18px;height:18px;display:block;flex-shrink:0}
.lp-quick-label{font-size:13px;font-weight:600;color:var(--text);text-align:left;line-height:1.25;flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--dur-fast);letter-spacing:-.01em}
.lp-quick-edit-btn{color:var(--text-3);border-color:transparent;background:transparent;margin-left:auto}
.lp-quick-edit-btn:hover{color:var(--accent);background:var(--accent-light)}
/* Empfehlungs-Kacheln (suggested) — visuell unterschieden, "Tipp"-Badge, Pin-Action */
.lp-quick-tile--suggested{background:transparent;border-style:dashed;border-color:color-mix(in srgb,var(--border) 80%,transparent)}
.lp-quick-tile--suggested .lp-quick-icon-wrap{opacity:.75}
.lp-quick-tile--suggested .lp-quick-label{color:var(--text-2);font-weight:500}
.lp-quick-badge{position:absolute;top:4px;right:4px;font-size:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);background:var(--surface);padding:1px 5px;border-radius:var(--r-full);border:1px solid var(--border)}
.lp-quick-count{flex-shrink:0;min-width:22px;height:22px;padding:0 7px;font-size:12px;font-weight:700;line-height:22px;text-align:center;color:#fff;background:var(--accent);border-radius:var(--r-full);box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.lp-quick-pin{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:var(--r-sm);background:transparent;border:1px solid transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
@media(hover:hover){.lp-quick-tile:hover .lp-quick-pin{opacity:1}}
@media(hover:none){.lp-quick-pin{opacity:1}}
.lp-quick-pin:hover{background:var(--surface);color:var(--accent);border-color:var(--border)}
.lp-quick-remove{position:absolute;top:4px;right:4px;opacity:0;width:18px;height:18px;border-radius:var(--r-full);background:var(--surface-3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-3);transition:opacity var(--dur-fast),background var(--dur-fast),color var(--dur-fast);padding:0}
.lp-quick-remove:hover{background:var(--red,#e53e3e);color:#fff;border-color:transparent}
/* ═══════════════════════════════════════════════════════════════════════════
BENTO COCKPIT v2 — holistisches Re-Design (Phase 7 — modernize-hub-landing)
Sektions-Kontrast (Dark-Light-Dark) · Smart-Header · Sticky AI-FAB ·
Bottom-Anchor "Diese Woche" · Live-Signale · Cinemagraph Hero.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Dark-Section Wrapper (full-bleed) ──
Lebt direkt in .lp-shell (nicht in .lp-page), nutzt 100% Viewport-Breite.
Innere Content-Begrenzung via .lp-section-inner. */
.lp-section--dark{position:relative;background:linear-gradient(135deg,var(--surface-ink) 0%,var(--surface-ink-soft) 100%);color:var(--on-ink);padding:clamp(28px,3.5vw,44px) clamp(20px,4vw,48px);overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.lp-section--dark::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 24%,rgba(86,198,255,.14) 0%,transparent 55%),radial-gradient(circle at 82% 88%,rgba(43,123,214,.12) 0%,transparent 50%);pointer-events:none}
.lp-section-inner{position:relative;z-index:1;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
/* Editorial Section-Head Variante für Dark-Sections (heller Text + helle Akzent-Linie) */
.lp-section--dark .lp-panel-head--editorial .lp-panel-title{color:var(--on-ink)}
.lp-section--dark .lp-panel-head--editorial::before{background:var(--accent-gradient)}
.lp-section--dark .lp-panel-link,.lp-section--dark .lp-quick-edit-btn{color:var(--on-ink-muted)}
.lp-section--dark .lp-quick-edit-btn:hover{color:var(--on-ink);background:rgba(255,255,255,.08)}
/* Quick-Access auf Dark-Surface (überschreibt Glass-Tile-Hellvariante) */
.lp-section--dark .lp-quick-tile{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:var(--on-ink)}
@media(hover:hover){.lp-section--dark .lp-quick-tile:hover{background:rgba(255,255,255,.08);box-shadow:0 10px 28px color-mix(in srgb,var(--tile-accent,var(--accent)) 28%,rgba(0,0,0,.3));border-color:color-mix(in srgb,var(--tile-accent,var(--accent)) 50%,rgba(255,255,255,.1))}}
.lp-section--dark .lp-quick-label{color:var(--on-ink)}
.lp-section--dark .lp-quick-tile--suggested{background:transparent;border-color:rgba(255,255,255,.12)}
.lp-section--dark .lp-quick-tile--suggested .lp-quick-label{color:var(--on-ink-muted)}
.lp-section--dark .lp-quick-badge{background:rgba(255,255,255,.1);color:var(--on-ink-muted);border-color:rgba(255,255,255,.14)}
/* ── Bottom-Anchor "Diese Woche bei Fastlog" ── */
.lp-weekly{display:flex;flex-direction:column;gap:16px}
.lp-weekly-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.lp-weekly-grid{grid-template-columns:1fr}}
.lp-weekly-card{position:relative;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);padding:18px 20px;display:flex;flex-direction:column;gap:8px;min-height:140px;overflow:hidden;transition:box-shadow var(--dur-emphasized) var(--ease-emphasized),transform var(--dur-emphasized) var(--ease-emphasized)}
@media(hover:hover){.lp-weekly-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.07);transform:translateY(-2px)}}
.lp-weekly-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.lp-weekly-trend{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.1;margin-top:auto}
.lp-weekly-trend-delta{font-size:13px;color:var(--green);font-weight:600}
.lp-weekly-trend-delta--neg{color:var(--red)}
.lp-sparkline{width:100%;height:48px;display:block}
.lp-sparkline path.area{fill:url(#lpSparkAreaGrad)}
.lp-sparkline path.line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp-sparkline circle.tip{fill:var(--accent);r:3.5}
.lp-weekly-avatars{display:flex;align-items:center;gap:-8px;margin-top:auto}
.lp-weekly-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;border:2px solid var(--surface);margin-left:-8px;background:linear-gradient(135deg,var(--accent) 0%,var(--violet) 100%)}
.lp-weekly-avatar:first-child{margin-left:0}
.lp-weekly-names{font-size:13px;color:var(--text-2);line-height:1.4}
.lp-weekly-card--tip{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 6%,var(--surface)) 0%,var(--surface) 60%)}
.lp-weekly-card--tip::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--accent-gradient)}
.lp-weekly-tip{font-size:14px;color:var(--text);line-height:1.5;font-style:italic}
.lp-weekly-tip-icon{font-size:18px;line-height:1}
/* ── Live-Signale ── */
.lp-pulse-new-dot{position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:50%;background:#56C6FF;box-shadow:0 0 0 3px rgba(86,198,255,.25);z-index:2}
@media(prefers-reduced-motion:no-preference){.lp-pulse-new-dot{animation:lp-pulse-glow 2.2s ease-in-out infinite}}
@keyframes lp-pulse-glow{0%,100%{box-shadow:0 0 0 0 rgba(86,198,255,.6)}50%{box-shadow:0 0 0 8px rgba(86,198,255,0)}}
/* ── Smart-Header (kondensiert beim Scrollen) ──
Trigger: body.lp-scrolled wird gesetzt von landingScrollFx.js sobald
> 260px gescrollt. Nur Landing-Page setzt diese Klasse — andere Pages
bleiben unverändert. */
body.lp-scrolled .spa-header{padding-top:6px;padding-bottom:6px;box-shadow:0 4px 16px rgba(11,18,32,.06)}
body.lp-scrolled .spa-header .spa-logo img{height:22px;transition:height var(--dur-emphasized) var(--ease-emphasized)}
.spa-header,.spa-header .spa-logo img{transition:padding var(--dur-emphasized) var(--ease-emphasized),height var(--dur-emphasized) var(--ease-emphasized),box-shadow var(--dur-emphasized) var(--ease-emphasized)}
/* ── Floating KPI-Pills (Smart-Header-Erweiterung, fixed unter dem Header) ──
Erscheinen via body.lp-kpi-visible ab ~360px Scroll. Pure Anzeige —
nutzt vorhandene counts-Daten der Landing-Page. */
.lp-kpi-floating{position:fixed;top:62px;right:24px;display:flex;gap:8px;z-index:90;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--dur-emphasized) var(--ease-emphasized),transform var(--dur-emphasized) var(--ease-emphasized)}
body.lp-kpi-visible .lp-kpi-floating{opacity:1;transform:translateY(0);pointer-events:auto}
.lp-kpi-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));border-radius:var(--r-full);font-size:12px;font-weight:600;color:var(--text);text-decoration:none;box-shadow:0 4px 14px rgba(11,18,32,.06);transition:transform var(--dur-fast),box-shadow var(--dur-fast)}
@media(hover:hover){.lp-kpi-pill:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(11,18,32,.10)}}
.lp-kpi-pill-num{font-family:var(--font-display);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
@media(max-width:900px){.lp-kpi-floating{display:none}}
/* ═══════════════════════════════════════════════════════════════════════════
COCKPIT-BENTO v3 (Phase 9 — 2-Column-Dashboard-Layout, kompakt)
Main-Column (links 62%) trägt Briefing-Strip + Pulse.
Right-Rail (rechts 38%, sticky) trägt AI-Bento + Quick-Dock + Weekly-Mini.
═══════════════════════════════════════════════════════════════════════════ */
.lp-cockpit{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1100px){.lp-cockpit{grid-template-columns:1fr}}
.lp-cockpit-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.lp-cockpit-rail{display:flex;flex-direction:column;gap:10px;min-width:0;position:sticky;top:78px}
@media(max-width:1100px){.lp-cockpit-rail{position:static}}
/* Briefing-Card "Daily Brief" — kompakte Status-Card mit Eyebrow + Action-Reihen
statt floatender Pills. Wirkt anchored statt isoliert. */
.lp-cockpit .lp-briefing{padding:0;background:transparent;border:none;overflow:visible}
.lp-cockpit .lp-briefing::before,.lp-cockpit .lp-briefing-section-head{display:none}
.lp-cockpit .lp-briefing-body{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;position:relative}
.lp-cockpit .lp-briefing-body::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-gradient)}
.lp-cockpit .lp-briefing-lines{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:0}
.lp-cockpit .lp-briefing-lines::before{content:'TAGES-BRIEFING';display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--text-3);padding:10px 16px 4px;text-transform:uppercase}
.lp-cockpit .lp-briefing-line{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:0;font-size:13px;line-height:1.35;color:var(--text-2);border-left:none;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);transition:background var(--dur-fast),padding-left var(--dur-fast);cursor:pointer;position:relative}
.lp-cockpit .lp-briefing-line:first-of-type{border-top:1px solid var(--border)}
@media(hover:hover){.lp-cockpit .lp-briefing-line:hover{background:color-mix(in srgb,var(--accent) 5%,transparent);padding-left:20px}}
.lp-cockpit .lp-briefing-line::after{content:'›';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:14px;opacity:0;transition:opacity var(--dur-fast),transform var(--dur-fast)}
@media(hover:hover){.lp-cockpit .lp-briefing-line:hover::after{opacity:1;transform:translateY(-50%) translateX(2px);color:var(--accent)}}
.lp-cockpit .lp-briefing-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.lp-cockpit .lp-briefing-icon svg{width:15px;height:15px}
.lp-cockpit .lp-briefing-line--info .lp-briefing-icon{color:var(--blue)}
.lp-cockpit .lp-briefing-line--attention .lp-briefing-icon{color:var(--amber)}
.lp-cockpit .lp-briefing-line--positive .lp-briefing-icon{color:var(--green)}
.lp-cockpit .lp-briefing-text{display:flex;align-items:baseline;gap:5px;flex:1;min-width:0}
.lp-cockpit .lp-briefing-text strong{font-family:var(--font-display);font-weight:700;color:var(--text);font-size:13.5px;flex-shrink:0}
.lp-cockpit .lp-briefing-text strong+span{color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-cockpit .lp-briefing-arrow{display:none}
.lp-cockpit .lp-briefing-inbox{display:none}
/* AI-Bento Card (rechtes Rail, prominent, Gradient-Border via mask-composite) */
.lp-ai-bar--bento{max-width:none;margin:0;padding:16px 18px;flex-direction:column;background:var(--surface);border:1px solid transparent;border-radius:var(--r-lg);box-shadow:0 4px 14px rgba(11,18,32,.05);gap:10px;-webkit-backdrop-filter:none;backdrop-filter:none}
.lp-ai-bar--bento::before{content:'';position:absolute;inset:0;padding:1.5px;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 60%,transparent) 0%,color-mix(in srgb,var(--violet) 50%,transparent) 50%,color-mix(in srgb,var(--accent) 30%,transparent) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;opacity:1}
.lp-ai-bar--bento:focus-within{border-radius:var(--r-lg);box-shadow:0 10px 28px rgba(11,18,32,.10)}
.lp-ai-bento-header{display:flex;align-items:center;gap:10px}
.lp-ai-bento-header-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.lp-ai-bento-title{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.2}
.lp-ai-bento-sub{font-size:11.5px;color:var(--text-3);line-height:1.3}
.lp-ai-bar--bento .lp-ai-bar-icon{width:34px;height:34px}
.lp-ai-bar--bento .lp-ai-bar-input-row{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:6px 10px 6px 12px;align-items:center;transition:border-color var(--dur-fast)}
.lp-ai-bar--bento .lp-ai-bar-input-row:focus-within{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.lp-ai-bar--bento .lp-ai-bar-input{font-size:13px;padding:4px 0;max-height:60px}
.lp-ai-bar--bento .lp-ai-bar-submit{width:30px;height:30px}
.lp-ai-bar--bento .lp-ai-bar-suggestions,.lp-ai-bar--bento .lp-ai-bar-messages{position:absolute;left:14px;right:14px;top:100%;margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;box-shadow:0 14px 36px rgba(11,18,32,.12);z-index:25}
.lp-ai-bar--bento .lp-ai-bar-suggestions{padding:10px 12px;gap:6px;justify-content:flex-start}
.lp-ai-bar--bento .lp-ai-bar-messages{max-height:320px;overflow-y:auto;border-top:1px solid var(--border)}
.lp-ai-bar--bento .lp-ai-bar-suggestion{padding:3px 9px;font-size:11px;background:transparent}
/* Right-Rail-Panel-Basis */
.lp-rail-panel{position:relative;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.lp-rail-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lp-rail-title{font-size:10.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.lp-rail-link{font-size:11px;color:var(--accent);text-decoration:none;font-weight:600}
.lp-rail-link:hover{text-decoration:underline}
/* Quick-Access — Compact-Dock-Variante im Right-Rail */
.lp-quick-dock{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.lp-quick-dock .lp-quick-tile{min-height:48px;padding:8px 10px;gap:8px;border-radius:var(--r-md)}
.lp-quick-dock .lp-quick-icon-wrap{width:26px;height:26px;border-radius:var(--r-sm)}
.lp-quick-dock .lp-quick-icon svg{width:14px;height:14px}
.lp-quick-dock .lp-quick-label{font-size:11.5px;-webkit-line-clamp:1;font-weight:600}
.lp-quick-dock .lp-quick-badge,.lp-quick-dock .lp-quick-pin,.lp-quick-dock .lp-quick-remove{display:none}
/* Weekly-Mini (Trend + Birthdays + Tip in einer kompakten Card) */
.lp-weekly-mini{display:flex;flex-direction:column;gap:10px}
.lp-weekly-mini-trend{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lp-weekly-mini-trend-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.lp-weekly-mini-trend-num{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--text);line-height:1;letter-spacing:-.01em}
.lp-weekly-mini-trend-num em{font-style:normal;color:var(--green);font-size:13px;font-weight:600;margin-left:6px}
.lp-weekly-mini-trend-num em.neg{color:var(--red)}
.lp-weekly-mini-trend-label{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.lp-weekly-mini .lp-sparkline{height:34px;width:96px;flex-shrink:0}
.lp-weekly-mini-row{display:flex;align-items:center;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.lp-weekly-mini-row .lp-weekly-avatar{width:24px;height:24px;font-size:9.5px;margin-left:-6px}
.lp-weekly-mini-row .lp-weekly-avatar:first-child{margin-left:0}
.lp-weekly-mini-row-text{font-size:12px;color:var(--text-2);line-height:1.35;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-weekly-mini-tip{font-size:12px;color:var(--text-2);line-height:1.45;font-style:italic;padding-top:8px;border-top:1px dashed var(--border)}
.lp-weekly-mini-tip-icon{margin-right:4px;font-style:normal}
/* (Quiet-Hero hat keinen Fade-Streifen mehr — Strip ist nur ~92px hoch
und schliesst mit feiner Hairline ab, kein harter Übergang nötig.) */
/* ═══════════════════════════════════════════════════════════════════════════
BENTO-GRID v1 (Phase 10 — asymmetrisches Wow-Layout)
12-Spalten-Grid:
Quick (col 1-7) | Calendar (col 8-12, rowspan 2)
AI (col 1-7) |
Pulse (col 1-12, kompakt 3 Karten)
═══════════════════════════════════════════════════════════════════════════ */
.lp-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:14px;align-items:stretch}
.lp-bento-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0;overflow:hidden;box-shadow:0 1px 4px rgba(11,18,32,.04),0 0 0 1px color-mix(in srgb,var(--border) 30%,transparent)}
.lp-bento-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 7%,transparent) 0%,transparent 55%);opacity:.85}
.lp-bento-card>*{position:relative;z-index:1}
/* Row 1: Pulse (volle Breite, enthält Featured + Headlines + Schnellzugriff) */
.lp-bento-card--pulse{grid-column:1 / -1;grid-row:1}
/* Row 2: AI (7) | Mein Tag (5) */
.lp-bento-card--ai{grid-column:span 7;grid-row:2}
.lp-bento-card--day{grid-column:span 5;grid-row:2}
@media(max-width:1100px){
.lp-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
.lp-bento-card--day,.lp-bento-card--pulse,.lp-bento-card--ai{grid-column:1 / -1;grid-row:auto}
}
/* Bento-Card Header — Eyebrow + Display-Title */
.lp-bento-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-shrink:0}
.lp-bento-head-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-bento-eyebrow{font-size:10.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em}
.lp-bento-title{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.2;margin:0}
.lp-bento-link{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600;flex-shrink:0;transition:transform var(--dur-fast)}
@media(hover:hover){.lp-bento-link:hover{transform:translateX(2px)}}
.lp-bento-action{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);font:inherit;font-size:11.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
@media(hover:hover){.lp-bento-action:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}}
.lp-bento-action svg{flex-shrink:0}
.lp-bento-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:12.5px;padding:24px 8px;text-align:center}
.lp-bento-empty-btn{background:none;border:none;cursor:pointer;color:var(--accent);font:inherit;font-size:12.5px;font-weight:600}
/* Bento-Quick — 4-spaltige Tile-Matrix (innerhalb der Karte) */
.lp-bento-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;flex:1}
@media(max-width:760px){.lp-bento-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Bento-Card Quick — leichter Akzent-Hauch oben */
.lp-bento-card--quick::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent) 0%,var(--violet) 100%);opacity:.85}
/* ── Mein Tag — Briefing + Kalender in einem Panel ── */
.lp-bento-card--day{gap:10px}
.lp-day-briefing{display:flex;flex-direction:column;flex-shrink:0}
.lp-day-briefing .lp-briefing-lines{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:0;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;position:relative}
.lp-day-briefing .lp-briefing-lines::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-gradient)}
.lp-day-briefing .lp-briefing-line{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 16px;font-size:12.5px;line-height:1.35;color:var(--text-2);border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);cursor:pointer;transition:background var(--dur-fast);position:relative}
.lp-day-briefing .lp-briefing-line:first-of-type{border-top:none}
@media(hover:hover){.lp-day-briefing .lp-briefing-line:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}}
.lp-day-briefing .lp-briefing-icon{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.lp-day-briefing .lp-briefing-line--info .lp-briefing-icon{color:var(--blue)}
.lp-day-briefing .lp-briefing-line--attention .lp-briefing-icon{color:var(--amber)}
.lp-day-briefing .lp-briefing-line--positive .lp-briefing-icon{color:var(--green)}
.lp-day-briefing .lp-briefing-text{display:flex;align-items:baseline;gap:5px;flex:1;min-width:0;overflow:hidden}
.lp-day-briefing .lp-briefing-text strong{font-family:var(--font-display);font-weight:700;color:var(--text);font-size:13px;flex-shrink:0}
.lp-day-briefing .lp-briefing-text strong+span{color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-day-briefing .lp-briefing-arrow{color:var(--text-3);font-size:14px;flex-shrink:0}
.lp-day-cal{display:flex;flex-direction:column;flex:1;min-height:0}
.lp-day-cal-head{padding:6px 0 4px}
.lp-day-cal-eyebrow{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em}
.lp-day-empty{padding:14px 4px;text-align:center;color:var(--text-3);font-size:12.5px}
.lp-day-cal-list{display:flex;flex-direction:column;gap:0;flex:1;overflow:hidden}
.lp-day-cal-list .lp-cal-day-label{font-family:var(--font-display);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);padding:8px 0 4px;display:flex;align-items:center;gap:8px}
.lp-day-cal-list .lp-cal-day-label:first-child{padding-top:0}
.lp-day-cal-list .lp-cal-day-label::after{content:'';flex:1;height:1px;background:linear-gradient(to right,color-mix(in srgb,var(--border) 70%,transparent),transparent)}
.lp-day-cal-list .lp-cal-day-label--today{color:var(--accent)}
.lp-day-cal-list .lp-cal-day-label--today::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.lp-day-cal-list .lp-cal-item{display:flex;align-items:flex-start;gap:10px;padding:7px 10px;margin:0 -10px;border-top:none;border-radius:var(--r-md);transition:background var(--dur-fast);cursor:pointer}
@media(hover:hover){.lp-day-cal-list .lp-cal-item:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}}
.lp-day-cal-list .lp-cal-bar{width:3px;border-radius:var(--r-xs);align-self:stretch}
.lp-day-cal-list .lp-cal-title{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-day-cal-list .lp-cal-meta{font-size:11px;color:var(--text-3);margin-top:1px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-cal-join{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-full);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent);font:inherit;font-size:10.5px;font-weight:700;cursor:pointer;transition:background var(--dur-fast)}
@media(hover:hover){.lp-cal-join:hover{background:var(--accent);color:#fff;border-color:var(--accent)}}
.lp-cal-join svg{flex-shrink:0}
/* Bento-Card AI — übersteuert lp-ai-bar--bento (positioniert sich als bento-card) */
.lp-bento-card--ai{padding:18px 20px}
.lp-bento-card--ai.lp-ai-bar--bento::before{inset:0;padding:1.5px;border-radius:var(--r-lg)}
/* Pulse-Card: kompakteres Padding + kleineres Header */
.lp-bento-card--pulse{padding:12px 16px;gap:10px}
.lp-bento-card--pulse .lp-bento-title{font-size:15px}
/* Pulse-Card: gleiches Padding wie AI-Card darunter, damit Featured & AI bündig sind */
.lp-bento-card--pulse{padding:18px 20px;gap:12px}
.lp-bento-card--pulse .lp-bento-title{font-size:15px}
/* ── Fastlog Pulse — Editorial Mosaic: Featured + 2 Side ──
Schnellzugriff ist in eine eigene .lp-qs-Sektion nach dem Bento ausgezogen. */
.lp-pulse-stack{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;flex:1;min-height:0;overflow:hidden}
.lp-pulse-stack--single{grid-template-columns:1fr}
/* Schnellzugriff-Strip in der Pulse-Spalte 3 */
.lp-pulse-quick{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden;padding-top:2px}
.lp-pulse-quick-head{display:flex;align-items:center;gap:8px;padding:0 2px 4px}
.lp-pulse-quick-head .lp-pulse-side-eyebrow{flex:1;padding:0}
.lp-pulse-quick-head .lp-pulse-side-eyebrow::after{display:none}
.lp-pulse-quick-edit{flex-shrink:0;width:20px;height:20px;border-radius:var(--r-sm);background:transparent;border:1px solid var(--border);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
@media(hover:hover){.lp-pulse-quick-edit:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}}
.lp-pulse-quick-list{display:flex;flex-direction:column;gap:4px;min-height:0;overflow:hidden}
.lp-pulse-quick-tile{min-height:0;padding:6px 10px;gap:10px;border-radius:var(--r-sm);background:transparent;border:1px solid transparent;margin:0 -6px}
.lp-pulse-quick-tile .lp-quick-icon-wrap{width:26px;height:26px;border-radius:var(--r-sm)}
.lp-pulse-quick-tile .lp-quick-icon svg{width:14px;height:14px}
.lp-pulse-quick-tile .lp-quick-label{font-size:12px;-webkit-line-clamp:1;font-weight:600}
@media(hover:hover){.lp-pulse-quick-tile:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--accent) 6%,transparent);border-color:transparent}}
@media(hover:hover){.lp-pulse-quick-tile:hover .lp-quick-icon-wrap{transform:none}}
@media(max-width:900px){
.lp-pulse-quick-list{flex-direction:row;flex-wrap:wrap}
.lp-pulse-quick-tile{flex:1 1 calc(50% - 4px);min-width:0;margin:0}
}
.lp-pulse-feat,.lp-pulse-side-card{position:relative;border-radius:var(--r-md);overflow:hidden;background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:row;min-height:84px;transition:box-shadow var(--dur-emphasized) var(--ease-emphasized),transform var(--dur-emphasized) var(--ease-emphasized),border-color var(--dur-emphasized) var(--ease-emphasized);box-shadow:inset 0 1px 0 0 color-mix(in srgb,var(--text) 4%,transparent)}
/* Gold-Akzent links am Featured-Artikel als premium Marker */
.lp-pulse-feat::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,#e9d6a8,#d4b87a);border-radius:0 var(--r) var(--r) 0;z-index:1;opacity:.8}
html.dark .lp-pulse-feat,html.dark .lp-pulse-side-card{box-shadow:inset 0 1px 0 0 color-mix(in srgb,var(--text) 7%,transparent),0 8px 20px -8px rgba(0,0,0,.35)}
@media(hover:hover){.lp-pulse-feat:hover,.lp-pulse-side-card:hover{box-shadow:0 12px 28px -8px rgba(11,18,32,.18),inset 0 1px 0 0 color-mix(in srgb,var(--text) 7%,transparent);transform:translateY(-2px);border-color:color-mix(in srgb,#d4b87a 45%,var(--border))}}
@media(hover:hover){html.dark .lp-pulse-feat:hover,html.dark .lp-pulse-side-card:hover{box-shadow:0 18px 38px -10px rgba(0,0,0,.55),inset 0 1px 0 0 color-mix(in srgb,var(--text) 9%,transparent)}}
.lp-pulse-feat-img{position:relative;width:38%;flex-shrink:0;overflow:hidden;background:var(--surface-2)}
.lp-pulse-side-img{position:relative;width:38%;flex-shrink:0;overflow:hidden;background:var(--surface-2)}
.lp-pulse-feat-img img,.lp-pulse-side-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-emphasized)}
@media(hover:hover){.lp-pulse-feat:hover .lp-pulse-feat-img img,.lp-pulse-side-card:hover .lp-pulse-side-img img{transform:scale(1.05)}}
.lp-pulse-feat-img--placeholder,.lp-pulse-side-img--placeholder{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface-2)) 0%,color-mix(in srgb,var(--violet) 10%,var(--surface-2)) 100%)}
.lp-pulse-feat-body{padding:10px 16px;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:center;min-width:0;overflow:hidden}
.lp-pulse-side-body{padding:8px 12px;display:flex;flex-direction:column;gap:3px;flex:1;justify-content:center;min-width:0;overflow:hidden}
.lp-pulse-feat-title{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--text);line-height:1.25;letter-spacing:-.01em;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-pulse-side-title{font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--text);line-height:1.25;letter-spacing:-.01em;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-pulse-feat-excerpt{font-size:11.5px;color:var(--text-2);line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* Side-Spalte: Eyebrow + 2 flache, gestapelte Cards (Magazine-Sidebar-Pattern) */
.lp-pulse-side-list{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden;padding-top:2px}
.lp-pulse-side-eyebrow{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.14em;padding:0 2px 4px;display:flex;align-items:center;gap:8px}
.lp-pulse-side-eyebrow::after{content:'';flex:1;height:1px;background:linear-gradient(to right,color-mix(in srgb,var(--border) 70%,transparent),transparent)}
.lp-pulse-side-list .lp-pulse-side-card{min-height:0;flex:0 0 auto;background:transparent;border:none;border-radius:var(--r-sm);padding:6px;margin:0 -6px}
@media(hover:hover){.lp-pulse-side-list .lp-pulse-side-card:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);transform:none;box-shadow:none;border-color:transparent}}
.lp-pulse-side-list .lp-pulse-side-img{width:48px;height:48px;flex-shrink:0;border-radius:var(--r-sm);align-self:center}
.lp-pulse-side-list .lp-pulse-side-body{padding:0 4px 0 12px;gap:3px;justify-content:center}
.lp-pulse-side-list .lp-pulse-side-title{font-size:12.5px;-webkit-line-clamp:2;line-height:1.3}
.lp-pulse-side-list .lp-pulse-badge{align-self:flex-start}
.lp-bento-card--pulse .lp-pulse-badge{font-size:8.5px;padding:2px 6px}
.lp-pulse-feat .lp-pulse-new-dot,.lp-pulse-side-card .lp-pulse-new-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);z-index:2}
@media(max-width:900px){
.lp-pulse-stack{grid-template-columns:1fr}
}
@media(max-width:480px){
.lp-pulse-feat,.lp-pulse-side-card{flex-direction:column}
.lp-pulse-feat-img,.lp-pulse-side-img{width:100%;height:80px}
.lp-pulse-side-list{grid-template-columns:1fr}
}
/* Briefing-Strip — eigenständig (ohne lp-cockpit-Wrapper jetzt) */
.lp-page>.lp-briefing{padding:0;background:transparent;border:none;overflow:visible}
.lp-page>.lp-briefing .lp-briefing-section-head{display:none}
.lp-page>.lp-briefing .lp-briefing-body{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;position:relative}
.lp-page>.lp-briefing .lp-briefing-body::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-gradient)}
.lp-page>.lp-briefing .lp-briefing-lines{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:0}
.lp-page>.lp-briefing .lp-briefing-lines::before{content:'TAGES-BRIEFING';display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--text-3);padding:10px 16px 4px;text-transform:uppercase}
.lp-page>.lp-briefing .lp-briefing-line{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:0;font-size:13px;line-height:1.35;color:var(--text-2);border-left:none;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);transition:background var(--dur-fast),padding-left var(--dur-fast);cursor:pointer;position:relative}
.lp-page>.lp-briefing .lp-briefing-line:first-of-type{border-top:1px solid var(--border)}
@media(hover:hover){.lp-page>.lp-briefing .lp-briefing-line:hover{background:color-mix(in srgb,var(--accent) 5%,transparent);padding-left:20px}}
.lp-page>.lp-briefing .lp-briefing-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.lp-page>.lp-briefing .lp-briefing-icon svg{width:15px;height:15px}
.lp-page>.lp-briefing .lp-briefing-line--info .lp-briefing-icon{color:var(--blue)}
.lp-page>.lp-briefing .lp-briefing-line--attention .lp-briefing-icon{color:var(--amber)}
.lp-page>.lp-briefing .lp-briefing-line--positive .lp-briefing-icon{color:var(--green)}
.lp-page>.lp-briefing .lp-briefing-text{display:flex;align-items:baseline;gap:5px;flex:1;min-width:0}
.lp-page>.lp-briefing .lp-briefing-text strong{font-family:var(--font-display);font-weight:700;color:var(--text);font-size:13.5px;flex-shrink:0}
.lp-page>.lp-briefing .lp-briefing-text strong+span{color:var(--text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-page>.lp-briefing .lp-briefing-arrow{display:none}
.lp-page>.lp-briefing .lp-briefing-inbox{display:none}
/* (Quiet-Hero: keine Cockpit-spezifische Höhen-Override mehr nötig — der
Strip ist überall gleich kompakt.) */
/* ── Sticky AI-Command-FAB ──
Mini-Pill bottom-right, erscheint sobald die Original-AI-Bar das
Viewport nach oben verlassen hat (Toggle via body.lp-ai-fab-visible).
Klick öffnet das floating AI-Panel (vorhandene Komponente). */
.lp-ai-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--accent-gradient);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent),0 0 0 6px color-mix(in srgb,var(--accent) 8%,transparent);z-index:80;opacity:0;transform:scale(.4);pointer-events:none;transition:opacity var(--dur-emphasized) var(--ease-emphasized),transform var(--dur-emphasized) var(--ease-emphasized),box-shadow var(--dur-fast)}
body.lp-ai-fab-visible .lp-ai-fab{opacity:1;transform:scale(1);pointer-events:auto}
@media(prefers-reduced-motion:no-preference){body.lp-ai-fab-visible .lp-ai-fab{animation:lp-ai-fab-pulse 3s ease-in-out infinite 1s}}
@keyframes lp-ai-fab-pulse{0%,100%{box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent),0 0 0 6px color-mix(in srgb,var(--accent) 8%,transparent)}50%{box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 45%,transparent),0 0 0 14px color-mix(in srgb,var(--accent) 0%,transparent)}}
@media(hover:hover){.lp-ai-fab:hover{transform:scale(1.06)}}
.lp-ai-fab svg{width:24px;height:24px}
@media(max-width:640px){.lp-ai-fab{width:48px;height:48px;bottom:16px;right:16px}}
/* (Ken-Burns auf full-bleed Hero entfällt — Cinematic-Hero nutzt das
Tenant-Bild nur als gedämpfte Backdrop ohne Drift-Animation.) */
/* ═══════════════════════════════════════════════════════════════════════════
SECTION-ANCHOR-NAV + VERTIKALE PREMIUM-SECTIONS (Phase 7).
Reihenfolge gem. User-Priorität:
01 Schnellstart → 02 Pulse → 03 Kalender → 04 KI (optional)
Anker-Chips am Top zum Direkt-Springen, alle Sektionen ganzflächig.
═══════════════════════════════════════════════════════════════════════════ */
.lp-sec-nav{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin:14px 0 4px;
padding:8px 0;
}
.lp-sec-nav-prefix{
font-family:var(--font-display);font-size:12px;font-weight:600;
color:var(--text-2);letter-spacing:.04em;text-transform:uppercase;
margin-right:2px;opacity:.75;
}
.lp-sec-nav-arrow{
color:var(--text-3,var(--text-2));opacity:.55;
transition:transform var(--dur-fast),opacity var(--dur-fast);
}
.lp-sec-nav-chip:hover .lp-sec-nav-arrow{opacity:1;transform:translateY(1px)}
.lp-sec-nav-chip{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;border-radius:var(--r);
background:var(--surface);
border:1px solid var(--border);
color:var(--text-2);text-decoration:none;
font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:-.005em;
line-height:1;
box-shadow:0 6px 14px -10px rgba(11,18,32,.16),inset 0 1px 0 0 rgba(255,255,255,.5);
transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);
}
.lp-sec-nav-chip .lp-sec-nav-num{
font-family:var(--font-display);font-size:11px;font-weight:700;
color:var(--accent);letter-spacing:.04em;
background:color-mix(in srgb,var(--accent) 14%,transparent);
padding:3px 7px;border-radius:var(--r);
min-width:24px;text-align:center;
}
@media(hover:hover){
.lp-sec-nav-chip:hover{
color:var(--text);transform:translateY(-1px);
border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
box-shadow:0 12px 22px -10px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 1px 0 0 rgba(255,255,255,.55);
}
}
.lp-sec-nav-chip--muted{opacity:.7}
.lp-sec-nav-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Vertikale grosse Sektionen */
.lp-sections{
display:flex;flex-direction:column;gap:40px;
margin-bottom:24px;
}
@media(max-width:640px){.lp-sections{gap:24px;margin-bottom:16px}}
/* Premium-Flow-Section: keine sichtbaren Panels mehr — nur Eyebrow + Inhalt.
Die Sektionen tragen sich selbst, Karten gibt es nur dort wo sie
inhaltlich nötig sind (Pulse-Highlight, Schnellstart-Tiles, Job-Cards). */
.lp-sec{
position:relative;
background:transparent;
border:none;
border-radius:0;
padding:8px 4px 12px;
box-shadow:none;
scroll-margin-top:96px;
}
.lp-sec::after{content:none}
.lp-sec > *{position:relative;z-index:1}
/* Trenn-Hairline vor jeder Section (ausser der ersten) — sehr dezent,
ersetzt den ehemaligen Card-Rahmen als Strukturgeber. */
.lp-sec + .lp-sec{margin-top:8px;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
/* Source-Order entspricht jetzt der Priorität — kein zusätzliches order: nötig. */
/* Section-Heads: grosses Display-Lettering mit Eyebrow */
.lp-sec .lp-bento-head,
.lp-sec .lp-qs-head{margin-bottom:18px}
.lp-sec .lp-bento-title,
.lp-sec .lp-qs-title{font-family:var(--font-display);font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0}
.lp-sec .lp-bento-eyebrow,
.lp-sec .lp-qs-eyebrow{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.14em}
/* Schnellstart: 4-Spalten Grid, grosszügig */
.lp-sec--qs .lp-qs-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.lp-sec--qs .lp-qs-rail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.lp-sec--qs .lp-qs-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Pulse: Featured + bis zu 6 Side-Cards in 2-Spalten-Grid */
.lp-sec--pulse .lp-pulse-stack{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:900px){.lp-sec--pulse .lp-pulse-stack{grid-template-columns:1fr}}
.lp-sec--pulse .lp-pulse-side-list{
display:grid;grid-template-columns:1fr;gap:10px;
max-height:none;overflow:visible;padding:0;
-webkit-mask-image:none;mask-image:none;
}
@media(min-width:1200px){.lp-sec--pulse .lp-pulse-side-list{grid-template-columns:repeat(1,1fr)}}
/* Kalender-Section: Briefing-Spalte links, Kalender-Spalte rechts */
.lp-sec--kalender .lp-day-briefing,
.lp-sec--kalender .lp-day-cal{padding-top:6px}
@media(min-width:900px){
.lp-sec--kalender .lp-bento-head + .lp-day-briefing,
.lp-sec--kalender .lp-day-briefing{margin-bottom:18px}
}
/* ── Launch-Cockpit (Variante A): Schnellstart + KI-Assistent nebeneinander, above the fold ── */
.lp-launch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start}
.lp-launch--solo{grid-template-columns:1fr}
@media(max-width:1100px){.lp-launch{grid-template-columns:1fr;gap:32px}}
/* keine Trenn-Hairline/kein Stack-Margin zwischen den beiden Cockpit-Spalten.
padding-top bleibt bei 8px (NICHT 0): der Adjacent-Sibling-Selektor trifft
die zweite Spalte (KI) und hat hoehere Spezifitaet als
.lp-launch > .lp-sec{padding-top:8px} — sonst startet der KI-Kopf 8px hoeher
als der Schnellstart-Kopf (beide Spalten muessen exakt gleich hoch beginnen). */
.lp-launch > .lp-sec + .lp-sec{margin-top:0;padding-top:8px;border-top:none}
/* Schnellstart im Cockpit: kompaktes 2x2 statt 1x4 */
.lp-launch .lp-sec--qs .lp-qs-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ohne KI (solo): Schnellstart wieder grosszügig über die volle Breite */
.lp-launch--solo .lp-sec--qs .lp-qs-rail{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:760px){.lp-launch .lp-sec--qs .lp-qs-rail,.lp-launch--solo .lp-sec--qs .lp-qs-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* KI-Card im Cockpit: identischer Block-Flow wie die Schnellstart-Spalte
(Kopf oben, Eingabe darunter). KEIN Grid — Grid würde die Kopf-Zeile
(min-height + margin-bottom) anders sizen als der Block-Flow links und so
einen Versatz erzeugen. Kein eigenes padding-top -> erbt die 8px von
.lp-launch > .lp-sec, damit der Kopf exakt auf gleicher Höhe startet. */
.lp-launch .lp-ai-bar-card--hero{display:block}
/* Beide Spalten exakt aufeinander ausrichten: gleiches Top-Padding, gleiche
Kopf-Höhe + gleicher Body-Start, gleiche Gesamthöhe (stretch). */
.lp-launch{align-items:stretch}
.lp-launch > .lp-sec{padding-top:8px}
/* Beide Spaltenköpfe nutzen denselben Standard-Header (.lp-bento-head):
gleiche Kopf-Höhe + gleicher Body-Start, sodass das Eingabefeld exakt
auf der Kachel-Linie der Schnellstart-Spalte beginnt. */
.lp-launch .lp-sec--qs .lp-bento-head,
.lp-launch .lp-ai-bar-card--hero .lp-bento-head{min-height:54px;margin-bottom:16px}
/* Chat aktiv: Kopf kompakter, damit der Verlauf mehr Raum bekommt. */
.lp-launch .lp-ai-bar-card--hero.lp-ai-bar-card--chat .lp-bento-head{min-height:0;margin-bottom:10px}
.lp-launch .lp-ai-bar-card--hero .lp-ai-bar-suggestions{margin-top:auto}
/* ── Phone: App-Launcher-Grid für Schnellstart + einklappbare KI-Bar ── */
/* KI eingeklappt: schlanke „Frag die KI …"-Leiste (wie ein Suchfeld),
expandiert bei Tap zur vollen Inline-Karte. Nur auf dem Phone sichtbar
(v-if device.isPhone). */
.lp-ai-collapsed{
display:flex;align-items:center;gap:10px;width:100%;
padding:13px 16px;border-radius:var(--r-full);
background:var(--surface-2);border:1px solid var(--border);
color:var(--text-3);font:inherit;font-size:14px;text-align:left;
cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:border-color var(--dur-fast),background var(--dur-fast);
}
.lp-ai-collapsed:active{background:color-mix(in srgb,var(--accent) 8%,var(--surface-2))}
.lp-ai-collapsed-icon{display:inline-flex;color:var(--accent);flex-shrink:0}
.lp-ai-collapsed-text{flex:1;min-width:0}
@media(max-width:640px){
/* Schnellstart wird zum App-Launcher: grosses Icon-Badge oben,
Label zentriert darunter (2 Zeilen erlaubt), Zähler als Eck-Dot.
Kein Pfeil. Löst das Label-Problem vollständig und liest sich wie
ein nativer Homescreen. */
.lp-launch .lp-sec--qs .lp-qs-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lp-qs-tile{
flex-direction:column;align-items:center;justify-content:flex-start;
text-align:center;gap:8px;padding:12px 6px 10px;min-height:92px;
background:var(--surface);border-color:var(--border);
}
.lp-qs-tile-icon{
width:46px;height:46px;
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--surface)) 0%,color-mix(in srgb,var(--accent) 8%,var(--surface)) 100%);
border-color:color-mix(in srgb,var(--accent) 22%,transparent);
}
.lp-qs-tile-icon svg{width:22px;height:22px}
.lp-qs-tile-label{
flex:none;width:100%;text-align:center;font-size:11.5px;font-weight:600;
white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
line-height:1.2;letter-spacing:-.01em;
}
/* Zähler als kleiner Eck-Dot oben rechts am Icon (Notification-Badge). */
.lp-qs-tile-badge{
position:absolute;top:8px;right:8px;
min-width:18px;height:18px;padding:0 5px;font-size:10px;
background:var(--accent);color:var(--on-accent);border-color:transparent;
border-radius:var(--r-full);
}
.lp-qs-tile-arrow{display:none}
/* gestapeltes Cockpit braucht keine Desktop-Spalten-Ausrichtung mehr.
Zweite Spalte explizit mit gleicher Spezifitaet zuruecksetzen, sonst
gewinnt .lp-launch > .lp-sec + .lp-sec{padding-top:8px} (Desktop). */
.lp-launch > .lp-sec,
.lp-launch > .lp-sec + .lp-sec{padding-top:0}
.lp-launch .lp-sec--qs .lp-bento-head,
.lp-launch .lp-ai-bar-card--hero .lp-bento-head{min-height:0;margin-bottom:12px}
/* KI-Karte (expandiert) kompakter: kleinerer Titel, max. 2 Vorschläge. */
.lp-ai-bar-card{padding:14px;gap:10px}
.lp-sec--ki .lp-bento-title{font-size:18px}
.lp-ai-bar-card .lp-ai-bar-suggestion:nth-child(n+3){display:none}
}
/* ── Hero-CTA „Frag die KI" (Variante B): nutzt .btn.btn-primary, nur Layout-Override ── */
.lp-hc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;align-self:flex-start}
.lp-hc-cta svg{width:16px;height:16px}
/* ── Jobboard-Carousel: horizontale Rail mit kompakten Job-Cards ── */
.lp-jobs-rail{
display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);
gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:4px 2px 12px;
scrollbar-width:thin;
}
@media(min-width:1100px){.lp-jobs-rail{grid-auto-columns:minmax(280px,1fr);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-auto-flow:row;overflow:visible}}
.lp-job-card{
position:relative;display:flex;flex-direction:column;gap:8px;
padding:18px 18px 16px;border-radius:var(--r);
background:var(--surface);
border:1px solid var(--border);
text-decoration:none;color:var(--text);
scroll-snap-align:start;
transition:transform var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast);
min-height:120px;
}
@media(hover:hover){.lp-job-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,var(--border));box-shadow:0 12px 28px -16px rgba(11,18,32,.25)}}
.lp-job-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lp-job-title{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--text);padding-right:20px}
.lp-job-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--text-3);margin-top:auto}
.lp-job-loc{display:inline-flex;align-items:center;gap:4px}
.lp-job-type{padding:2px 8px;border-radius:var(--r-full);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-weight:500;font-size:11px}
.lp-job-badge-new{
position:absolute;top:12px;right:12px;
padding:2px 8px;border-radius:var(--r-full);
background:var(--accent);color:#1a1408;
font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.lp-job-arrow{position:absolute;bottom:14px;right:14px;color:var(--text-3);opacity:.7}
.lp-job-card:hover .lp-job-arrow{color:var(--accent);opacity:1}
/* ═══════════════════════════════════════════════════════════════════════════
ALT — STAGE-CAROUSEL (deprecated — Elemente sind nicht mehr im Template).
Regeln bleiben für rückwärtskompatible Selektoren, applizieren aber nicht.
═══════════════════════════════════════════════════════════════════════════ */
/* Vorheriger Stage-Carousel-Stil — Elemente nicht mehr im Template. */
.lp-stage{
position:relative;
max-width:none;margin:0;padding:0;
}
.lp-stage-rail{
display:flex;flex-direction:row;align-items:stretch;
gap:20px;
overflow-x:auto;overflow-y:visible;
scroll-snap-type:x mandatory;
scroll-padding-left:max(24px,calc((100vw - 1440px) / 2 + 24px));
scroll-padding-right:max(24px,calc((100vw - 1440px) / 2 + 24px));
padding:6px max(24px,calc((100vw - 1440px) / 2 + 24px)) 14px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
}
/* Nativer Scrollbalken wird komplett unterdrückt — Navigation übernehmen
die expliziten Arrow-Buttons + Dots in .lp-stage-nav. */
.lp-stage-rail::-webkit-scrollbar{display:none;width:0;height:0}
/* ── Carousel-Navigation (Arrows + Dots) ── */
.lp-stage-nav{
display:flex;align-items:center;justify-content:center;gap:14px;
padding:14px max(24px,calc((100vw - 1440px) / 2 + 24px)) 6px;
position:relative;z-index:2;
}
.lp-stage-arrow{
flex-shrink:0;width:38px;height:38px;border-radius:50%;
background:var(--surface);border:1px solid var(--border);
color:var(--text-2);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 8px 18px -8px rgba(11,18,32,.18),inset 0 1px 0 0 rgba(255,255,255,.5);
transition:color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
@media(hover:hover){
.lp-stage-arrow:hover:not(:disabled){
color:var(--accent);
border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
box-shadow:0 12px 24px -8px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 1px 0 0 rgba(255,255,255,.55);
transform:translateY(-1px);
}
}
.lp-stage-arrow:disabled{opacity:.35;cursor:not-allowed}
.lp-stage-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lp-stage-dots{
display:inline-flex;align-items:center;gap:8px;
padding:6px 10px;border-radius:var(--r-full);
background:color-mix(in srgb,var(--surface) 70%,transparent);
border:1px solid var(--border);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.lp-stage-dot{
width:8px;height:8px;padding:0;border-radius:50%;border:none;
background:color-mix(in srgb,var(--text-3) 55%,transparent);
cursor:pointer;
transition:background var(--dur-fast),width var(--dur-fast),transform var(--dur-fast);
}
@media(hover:hover){.lp-stage-dot:hover{background:var(--text-2)}}
.lp-stage-dot--active{
background:var(--accent);
width:22px;border-radius:var(--r-full);
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.lp-stage-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:640px){
.lp-stage-nav{gap:10px;padding:10px 16px 4px}
.lp-stage-arrow{width:34px;height:34px}
}
.lp-stage-rail > .lp-bento-card{
flex:0 0 auto;
width:clamp(320px, 60vw, 720px);
scroll-snap-align:start;
min-width:0;
}
.lp-stage-rail > .lp-bento-card--pulse{order:1;width:clamp(360px, 72vw, 900px)}
.lp-stage-rail > .lp-bento-card--day {order:2}
.lp-stage-rail > .lp-bento-card--ai {order:3}
.lp-stage-rail > .lp-bento-card--qs {order:4;width:clamp(360px, 66vw, 820px)}
@media(max-width:1100px){
.lp-stage-rail > .lp-bento-card{width:min(86vw, 640px)}
.lp-stage-rail > .lp-bento-card--pulse,
.lp-stage-rail > .lp-bento-card--qs{width:min(90vw, 740px)}
}
@media(max-width:640px){
.lp-stage-rail{gap:14px;padding:14px 16px 22px;scroll-padding-left:16px;scroll-padding-right:16px}
.lp-stage-rail > .lp-bento-card,
.lp-stage-rail > .lp-bento-card--pulse,
.lp-stage-rail > .lp-bento-card--qs{width:88vw;min-height:auto}
}
/* Lp-Page Padding kompensieren — Stage übernimmt eigene Innenränder */
.lp-page > .lp-stage{margin:0 -24px}
/* ═══════════════════════════════════════════════════════════════════════════
PREMIUM STAGE — Section unterhalb des Cinematic-Heros (Phase 5 polish).
Eigene, polierte Material-Sprache mit Glas-Surfaces, Akzent-Halo am Top,
Carousel-Sensibilität für Pulse und Schnellstart. Theme-aware Tokens.
═══════════════════════════════════════════════════════════════════════════ */
:root{
--lp-stage-card-bg:#ffffff;
--lp-stage-card-up:#fefcf7;
--lp-stage-hair:rgba(11,15,24,.08);
--lp-stage-glow:rgba(166,142,220,.12);
--lp-stage-shadow:0 22px 50px -22px rgba(11,18,32,.20),0 1px 0 0 rgba(255,255,255,.55) inset;
}
html.dark{
--lp-stage-card-bg:#161b2e;
--lp-stage-card-up:#1b2138;
--lp-stage-hair:rgba(238,241,249,.06);
--lp-stage-glow:rgba(110,92,196,.18);
--lp-stage-shadow:0 28px 60px -22px rgba(0,0,0,.55),0 1px 0 0 color-mix(in srgb,#fff 6%,transparent) inset;
}
/* Page-Container blendet weich aus dem Hero in den Surface über */
.lp-page{
position:relative;
}
.lp-page::before{
content:'';position:absolute;left:0;right:0;top:-1px;height:120px;
background:
radial-gradient(ellipse 50% 100% at 50% 0%, var(--lp-stage-glow) 0%, transparent 70%);
pointer-events:none;z-index:0;
}
.lp-page > *{position:relative;z-index:1}
/* Premium-Bento-Card: glasige Surface mit Akzent-Halo am Top-Edge. Ruhiger,
keine grellen Schatten — wirkt wie ein massives Möbelstück, nicht wie
ein UI-Widget. */
.lp-bento{gap:18px}
.lp-bento-card{
background:linear-gradient(180deg,var(--lp-stage-card-up) 0%,var(--lp-stage-card-bg) 100%);
border:1px solid var(--lp-stage-hair);
border-radius:var(--r);
padding:22px 24px;
box-shadow:var(--lp-stage-shadow);
}
.lp-bento-card::after{
background:radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb,var(--accent) 8%,transparent) 0%, transparent 60%);
opacity:.9;
}
.lp-bento-title{font-size:20px;letter-spacing:-.015em}
/* Pulse-Card: Featured + horizontale Carousel-Spalte für Schlagzeilen */
.lp-bento-card--pulse{padding:22px 24px;gap:14px}
.lp-bento-card--pulse .lp-bento-title{font-size:20px}
.lp-pulse-stack{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px}
/* Side-List als vertikale „Pulse-Carousel" mit Snap (im Desktop). Auf engen
Viewports wird daraus eine horizontale Snap-Rail (siehe @media unten). */
.lp-pulse-side-list{
gap:8px;
scroll-snap-type:y proximity;
overflow-y:auto;
max-height:280px;
padding-right:2px;
}
.lp-pulse-side-list::-webkit-scrollbar{width:6px}
.lp-pulse-side-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 30%,transparent);border-radius:var(--r-full)}
.lp-pulse-side-list .lp-pulse-side-card{scroll-snap-align:start}
@media(max-width:900px){
.lp-pulse-stack{grid-template-columns:1fr}
/* Side-Liste wird zur horizontalen Karussell-Rail mit Snap + Peek */
.lp-pulse-side-list{
display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,82%);
gap:10px;overflow-x:auto;overflow-y:hidden;max-height:none;
scroll-snap-type:x mandatory;
padding:4px 4px 12px;
-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
}
.lp-pulse-side-list .lp-pulse-side-card{
scroll-snap-align:start;flex-direction:row;background:linear-gradient(180deg,var(--lp-stage-card-up) 0%,var(--lp-stage-card-bg) 100%);
border:1px solid var(--lp-stage-hair);box-shadow:0 12px 28px -16px rgba(11,18,32,.18);padding:8px;
}
.lp-pulse-side-list .lp-pulse-side-img{width:56px;height:56px}
}
/* Featured-Pulse: kraftvoller Auftritt, gold-Akzent-Akzent-Linie links bleibt */
.lp-pulse-feat{
min-height:160px;
background:linear-gradient(180deg,var(--lp-stage-card-up) 0%,var(--lp-stage-card-bg) 100%);
border-radius:var(--r);
box-shadow:0 14px 36px -16px rgba(11,18,32,.22);
}
.lp-pulse-feat-img{width:46%}
.lp-pulse-feat-body{padding:18px 22px;gap:10px}
.lp-pulse-feat-title{font-size:18px;line-height:1.25;-webkit-line-clamp:3}
.lp-pulse-feat-excerpt{font-size:13px;line-height:1.55;-webkit-line-clamp:2}
/* Phone-Pulse: 1 Lead als Cover (Bild oben, 16:9), Rest als Swipe-Rail
(analog Jobboard, ohne Pfeil-Navigation). Zweite Karte + Desktop-
Karussell sind auf dem Phone via v-if ausgeblendet. Dieser Block steht
bewusst NACH den Desktop-.lp-pulse-feat-Regeln (Quellordnung gewinnt
bei gleicher Spezifität). */
@media(max-width:640px){
.lp-pulse-feat{flex-direction:column;min-height:0}
.lp-pulse-feat-img{width:100%;height:auto;aspect-ratio:16/9}
.lp-pulse-feat-body{padding:12px 16px 16px;gap:6px;justify-content:flex-start}
.lp-pulse-feat-title{font-size:17px;-webkit-line-clamp:2}
.lp-pulse-feat-excerpt{font-size:12.5px;-webkit-line-clamp:2}
.lp-pulse-rail--phone{margin-top:14px}
.lp-pulse-rail--phone .lp-pulse-carousel-card{flex:0 0 160px}
}
/* Mein-Tag und AI: gleiches Premium-Material wie der Pulse-Card */
.lp-bento-card--day{gap:14px}
.lp-bento-card--day .lp-day-briefing .lp-briefing-lines{
background:color-mix(in srgb,var(--surface-2) 65%,transparent);
border:1px solid var(--lp-stage-hair);
border-radius:var(--r);
}
.lp-bento-card--day .lp-day-briefing .lp-briefing-lines::before{
background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 40%,var(--violet)));
width:3px;border-radius:var(--r-full);
}
.lp-bento-card--ai{padding:22px 24px;gap:14px}
.lp-bento-card--ai .lp-ai-bar-input-row{
background:color-mix(in srgb,var(--surface-2) 70%,transparent);
border:1px solid var(--lp-stage-hair);
border-radius:var(--r-full);padding:6px 8px 6px 16px;
}
.lp-bento-card--ai .lp-ai-bar-input-row:focus-within{
border-color:color-mix(in srgb,var(--accent) 45%,var(--lp-stage-hair));
box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent);
}
/* Schnellstart-Header: matched Premium-Bento-Look */
.lp-qs{margin-top:22px}
.lp-qs-title{font-size:22px}
.lp-qs-tile{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
box-shadow:none;
min-height:56px;
}
@media(hover:hover){
.lp-qs-tile:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));box-shadow:0 12px 28px -16px rgba(11,18,32,.25)}
}
/* Reveal-Pulse für Carousel-Items (subtil, nicht spielerisch) */
@media(prefers-reduced-motion:no-preference){
.lp-pulse-side-list .lp-pulse-side-card{opacity:0;transform:translateY(6px);animation:lp-hero-rise var(--dur-emphasized) var(--ease-emphasized) forwards}
.lp-pulse-side-list .lp-pulse-side-card:nth-child(1){animation-delay:40ms}
.lp-pulse-side-list .lp-pulse-side-card:nth-child(2){animation-delay:90ms}
.lp-pulse-side-list .lp-pulse-side-card:nth-child(3){animation-delay:140ms}
.lp-pulse-side-list .lp-pulse-side-card:nth-child(4){animation-delay:190ms}
.lp-pulse-side-list .lp-pulse-side-card:nth-child(5){animation-delay:240ms}
}
/* ═══════════════════════════════════════════════════════════════════════════
HERO ICON-COLUMN (rechte Spalte) — grosse Schnelleinstieg-Chips als Grid
═══════════════════════════════════════════════════════════════════════════ */
.lp-hc-iconcol{
display:flex;align-items:center;justify-content:flex-end;
min-width:0;
}
.lp-hc-iconcol-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
width:100%;max-width:300px;
}
@media(max-width:1100px){.lp-hc-iconcol-grid{max-width:none}}
.lp-hc-iconcol-chip{
position:relative;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:8px;padding:14px 10px;
border-radius:var(--r);
background:color-mix(in srgb,var(--hc-card-up) 14%,transparent);
border:1px solid color-mix(in srgb,var(--hc-text) 14%,transparent);
color:var(--hc-text);
cursor:pointer;font-family:inherit;
-webkit-backdrop-filter:blur(14px) saturate(140%);
backdrop-filter:blur(14px) saturate(140%);
transition:transform var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast);
min-height:80px;
}
@media(hover:hover){
.lp-hc-iconcol-chip:hover{
transform:translateY(-2px);
background:color-mix(in srgb,var(--hc-card-up) 22%,transparent);
border-color:color-mix(in srgb,var(--accent) 55%,transparent);
box-shadow:0 16px 32px -16px color-mix(in srgb,var(--accent) 30%,#000);
}
}
.lp-hc-iconcol-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lp-hc-iconcol-chip-ic{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:var(--r);
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,transparent),color-mix(in srgb,var(--accent) 8%,transparent));
border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
color:var(--accent);
}
.lp-hc-iconcol-chip-ic svg{width:20px;height:20px}
.lp-hc-iconcol-chip-lbl{
font-family:var(--font-display);font-size:12px;font-weight:600;
color:var(--hc-text);letter-spacing:-.005em;line-height:1.1;text-align:center;
}
.lp-hc-iconcol-chip-badge{
position:absolute;top:6px;right:6px;
min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);
background:var(--accent);color:#1a1408;
font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 0 0 2px color-mix(in srgb,var(--hc-ink-1) 80%,transparent);
}
/* Wenn die rechte Iconcol aktiv ist, verschwindet die alte Chip-Row links
(sie wird nicht mehr im Template gerendert). */
@media(max-width:1100px){.lp-hc-iconcol{justify-content:stretch}}
/* ═══════════════════════════════════════════════════════════════════════════
KALENDER 2-SPALTEN-SPLIT (Termine | Aufgaben)
═══════════════════════════════════════════════════════════════════════════ */
.lp-day-briefing--strip{margin-bottom:14px}
.lp-day-briefing--strip .lp-briefing-lines{padding:6px 4px;background:transparent;border:none}
.lp-day-briefing--strip .lp-briefing-lines::before{display:none}
.lp-day-briefing--strip .lp-briefing-line{padding:6px 10px;font-size:12.5px}
.lp-day-split{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:20px;align-items:start;
}
@media(max-width:900px){.lp-day-split{grid-template-columns:1fr;gap:16px}}
.lp-day-col{
background:transparent;
border:none;
border-radius:0;
padding:0;
}
.lp-day-col-head{
display:flex;align-items:center;gap:10px;margin-bottom:10px;
padding-bottom:8px;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent);
}
.lp-day-col-icon{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:var(--r);
background:color-mix(in srgb,var(--accent) 14%,transparent);
color:var(--accent);flex-shrink:0;
}
.lp-day-col-title{
margin:0;flex:1;
font-family:var(--font-display);font-size:15px;font-weight:600;
color:var(--text);letter-spacing:-.005em;
}
.lp-day-col-count{
font-family:var(--font-display);font-size:12px;font-weight:700;
color:var(--text-3);font-variant-numeric:tabular-nums;
padding:2px 9px;border-radius:var(--r-full);background:var(--surface);
border:1px solid var(--border);
}
/* Aufgaben-Liste */
.lp-day-task-list{display:flex;flex-direction:column;gap:6px;min-height:0}
.lp-day-task-item{
display:flex;align-items:center;gap:10px;
padding:8px 4px;border-radius:var(--r);
color:var(--text);text-decoration:none;cursor:pointer;
background:transparent;border:none;
transition:background var(--dur-fast),transform var(--dur-fast);
}
@media(hover:hover){
.lp-day-task-item:hover{
background:color-mix(in srgb,var(--accent) 5%,transparent);
transform:translateX(2px);
}
}
.lp-day-task-bar{flex-shrink:0;width:3px;align-self:stretch;border-radius:var(--r-full);background:var(--accent)}
.lp-day-task-bar--warn{background:var(--amber)}
.lp-day-task-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lp-day-task-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-day-task-meta{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-day-task-pill{
font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
padding:2px 6px;border-radius:var(--r-full);
background:var(--amber-bg);color:var(--amber);
border:1px solid color-mix(in srgb,var(--amber) 25%,transparent);
}
/* ═══════════════════════════════════════════════════════════════════════════
PULSE: FEATURED + SECOND + CAROUSEL
═══════════════════════════════════════════════════════════════════════════ */
.lp-sec--pulse .lp-pulse-stack{
display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
gap:18px;align-items:stretch;
}
@media(max-width:900px){.lp-sec--pulse .lp-pulse-stack{grid-template-columns:1fr}}
.lp-pulse-second{
position:relative;display:flex;flex-direction:column;
border-radius:var(--r);overflow:hidden;cursor:pointer;
background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
border:1px solid var(--border);
box-shadow:0 12px 24px -14px rgba(11,18,32,.18);
transition:box-shadow var(--dur-emphasized) var(--ease-emphasized),transform var(--dur-emphasized) var(--ease-emphasized),border-color var(--dur-emphasized) var(--ease-emphasized);
}
@media(hover:hover){.lp-pulse-second:hover{transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(11,18,32,.22);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}}
.lp-pulse-second-img{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.lp-pulse-second-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-emphasized)}
.lp-pulse-second-img--placeholder{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface-2)) 0%,color-mix(in srgb,var(--violet) 10%,var(--surface-2)) 100%)}
@media(hover:hover){.lp-pulse-second:hover .lp-pulse-second-img img{transform:scale(1.04)}}
.lp-pulse-second-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:8px}
.lp-pulse-second-title{margin:0;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Carousel */
.lp-pulse-carousel{margin-top:18px;position:relative}
.lp-pulse-carousel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.lp-pulse-carousel-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3)}
.lp-pulse-carousel-nav{display:inline-flex;gap:8px}
.lp-pulse-carousel-arrow{
width:34px;height:34px;border-radius:50%;
background:var(--surface);border:1px solid var(--border);
color:var(--text-2);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
transition:color var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
}
@media(hover:hover){.lp-pulse-carousel-arrow:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));transform:translateY(-1px)}}
.lp-pulse-carousel-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lp-pulse-carousel-rail{
display:flex;flex-direction:row;gap:14px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:4px 2px 10px;scrollbar-width:none;
}
.lp-pulse-carousel-rail::-webkit-scrollbar{display:none}
.lp-pulse-carousel-card{
flex:0 0 240px;scroll-snap-align:start;
position:relative;display:flex;flex-direction:column;
border-radius:var(--r);overflow:hidden;cursor:pointer;
background:var(--surface);border:1px solid var(--border);
box-shadow:0 8px 18px -12px rgba(11,18,32,.18);
transition:box-shadow var(--dur-fast),transform var(--dur-fast),border-color var(--dur-fast);
}
@media(hover:hover){.lp-pulse-carousel-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(11,18,32,.22);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}}
.lp-pulse-carousel-img{width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.lp-pulse-carousel-img img{width:100%;height:100%;object-fit:cover;display:block}
.lp-pulse-carousel-img--placeholder{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface-2)) 0%,color-mix(in srgb,var(--violet) 10%,var(--surface-2)) 100%)}
.lp-pulse-carousel-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.lp-pulse-carousel-title{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--text);line-height:1.3;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Favoriten-Picker */
.lp-picker-overlay{position:fixed;inset:0;background:var(--overlay);z-index:1050;display:flex;align-items:center;justify-content:center;padding:16px}
.lp-picker-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg,0 20px 60px rgba(0,0,0,.18));width:100%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.lp-picker-head{display:flex;align-items:center;gap:10px;padding:16px 20px 12px;border-bottom:1px solid var(--border)}
.lp-picker-title{font-size:15px;font-weight:700;color:var(--text)}
.lp-picker-hint{font-size:11px;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full);padding:2px 8px}
.lp-picker-search-wrap{display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border)}
.lp-picker-search{flex:1;border:none;outline:none;background:transparent;font-size:13px;color:var(--text);font-family:var(--font)}
.lp-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 20px;overflow-y:auto;flex:1}
.lp-picker-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 8px;border-radius:var(--r-md);background:var(--surface-2);border:1.5px solid var(--border);cursor:pointer;text-align:center;position:relative;transition:border-color var(--dur-fast),background var(--dur-fast);font-family:var(--font)}
@media(hover:hover){.lp-picker-item:hover{border-color:var(--accent);background:var(--accent-light)}}
.lp-picker-item--active{border-color:var(--accent);background:var(--accent-light)}
.lp-picker-item--disabled{opacity:.4;cursor:not-allowed}
.lp-picker-item--disabled:hover{border-color:var(--border);background:var(--surface-2)}
.lp-picker-item-icon{font-size:20px;line-height:1}
.lp-picker-item-name{font-size:10px;font-weight:600;color:var(--text-2);line-height:1.2;word-break:break-word;max-width:80px}
.lp-picker-item--active .lp-picker-item-name{color:var(--accent)}
.lp-picker-item-check{position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent,#fff);display:flex;align-items:center;justify-content:center}
.lp-birthday-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--border) 50%,transparent)}
.lp-birthday-item:first-child{border-top:none}
.lp-birthday-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;letter-spacing:.5px}
.lp-birthday-info{flex:1;min-width:0}
.lp-birthday-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-birthday-label{font-size:11px;color:var(--text-3);margin-top:1px}
.lp-birthday-today{font-size:10px;font-weight:700;color:var(--amber);background:var(--amber-bg);padding:2px 8px;border-radius:var(--r-full);flex-shrink:0}
/* ── Fastlog Pulse Feed-Page ──────────────────────────────────── */
.pulse-hero-grid{display:grid;grid-template-columns:1fr 280px;gap:12px;height:340px}
@media(max-width:900px){.pulse-hero-grid{grid-template-columns:1fr;height:auto}}
/* Volle Breite (Sparse-Mode): breitere Sekundär-Spalte + höhere
Bühne, damit der Hero auf grossen Screens nicht zu flach wirkt. */
.pulse-feed-wrap--wide .pulse-hero-grid{grid-template-columns:1fr 340px;height:clamp(340px,28vw,420px)}
@media(max-width:900px){.pulse-feed-wrap--wide .pulse-hero-grid{grid-template-columns:1fr;height:auto}}
/* Anzahl-adaptiv: 1 Featured -> volle Breite (keine leere Spalte),
2 Featured -> gleich grosse Hälften statt 1-gross-1-winzig. Ab 3
greift das Standard-Grid (1 gross + 2 klein). */
.pulse-hero-grid--solo,.pulse-feed-wrap--wide .pulse-hero-grid--solo{grid-template-columns:1fr}
.pulse-hero-grid--duo,.pulse-feed-wrap--wide .pulse-hero-grid--duo{grid-template-columns:1fr 1fr}
@media(max-width:900px){.pulse-hero-grid--duo,.pulse-feed-wrap--wide .pulse-hero-grid--duo{grid-template-columns:1fr}}
/* Duo: die einzelne Sekundär-Karte ist gleichwertig zur Haupt-Story
-> grössere Headline + mehr Innenabstand, damit sie die halbe Bühne
füllt statt als Mini-Kachel zu wirken. */
.pulse-hero-grid--duo .pulse-hero-secondary-headline{font-size:18px;-webkit-line-clamp:3}
.pulse-hero-grid--duo .pulse-hero-secondary-content{padding:20px 20px 18px}
.pulse-hero-main{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:linear-gradient(135deg,var(--surface-2),var(--surface));background-size:cover;background-position:center;transition:transform .2s}
.pulse-hero-main:hover{transform:scale(1.005)}
.pulse-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.1) 60%,transparent 100%)}
.pulse-hero-main-content{position:absolute;bottom:0;left:0;right:0;padding:20px 20px 18px;z-index:1}
.pulse-hero-headline{font-size:20px;font-weight:800;color:#fff;margin:8px 0 6px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pulse-hero-lead{font-size:13px;color:rgba(255,255,255,.85);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pulse-hero-meta{font-size:12px;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:4px}
.pulse-hero-secondary{display:flex;flex-direction:column;gap:12px}
.pulse-hero-secondary-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:linear-gradient(135deg,var(--surface-2),var(--surface));background-size:cover;background-position:center;flex:1;transition:transform .2s;min-height:100px;box-shadow:inset 0 0 0 1px var(--border)}
.pulse-hero-secondary-card:hover{transform:scale(1.005)}
.pulse-hero-main--noimg,.pulse-hero-secondary-card--noimg{background:linear-gradient(135deg,var(--ph-tint,var(--surface-2)),color-mix(in srgb,var(--ph-tint,var(--surface)) 62%,#000))}
.pulse-hero-secondary-content{position:absolute;bottom:0;left:0;right:0;padding:12px;z-index:1}
.pulse-hero-secondary-headline{font-size:14px;font-weight:700;color:#fff;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pulse-cat-badge{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;padding:3px 8px;border-radius:var(--r);white-space:nowrap}
.pulse-cat-badge-sm{font-size:9px;padding:2px 6px}
.pulse-cat-follow-btn{margin-left:auto;background:none;border:none;padding:3px 4px;cursor:pointer;color:var(--text-3);border-radius:var(--r);display:inline-flex;align-items:center;opacity:0;transition:opacity .15s,color .15s,background .15s}
.sm-item:hover .pulse-cat-follow-btn{opacity:1}
.pulse-cat-follow-btn.active{opacity:1;color:var(--accent)}
@media(hover:hover){.pulse-cat-follow-btn:hover{color:var(--accent);background:var(--surface-2)}}
@media(hover:none){.pulse-cat-follow-btn{opacity:1}}
.pulse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
@media(max-width:600px){.pulse-grid{grid-template-columns:1fr}}
.pulse-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur);display:flex;flex-direction:column}
@media(hover:hover){.pulse-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 18px 40px var(--accent-light);transform:translateY(-3px)}}
.pulse-card-thumb{height:160px;background:var(--surface-2);background-size:cover;background-position:center;flex-shrink:0}
.pulse-card-thumb-empty{display:flex;align-items:center;justify-content:center}
.pulse-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.pulse-card-headline{font-size:15px;font-weight:700;color:var(--text);margin:0 0 6px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pulse-card-lead{font-size:13px;color:var(--text-2);margin:0 0 10px;line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pulse-card-meta{display:flex;gap:8px;font-size:11px;color:var(--text-3);flex-wrap:wrap;margin-top:auto}
.pulse-card-reactions{display:flex;gap:6px;margin-top:8px}
.pulse-reaction-chip{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--text-2);padding:2px 6px;background:var(--surface-2);border-radius:var(--r)}
/* Real-time Live-Banner */
.pulse-live-banner{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;cursor:pointer;border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--shadow-md);transition:all var(--dur)}
@media(hover:hover){.pulse-live-banner:hover{filter:brightness(1.08)}}
.pulse-live-banner-enter-active,.pulse-live-banner-leave-active{transition:all var(--dur)}
.pulse-live-banner-enter-from,.pulse-live-banner-leave-to{transform:translateY(-100%);opacity:0}
/* Lesezeit-Badge auf Kachel-Bild */
.pulse-card-readtime{position:absolute;bottom:6px;left:8px;font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,.45);border-radius:var(--r-sm);padding:1px 6px;pointer-events:none}
/* Bookmark-Icon auf Kachel */
.pulse-card-bk-btn{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--text-3);padding:2px;border-radius:var(--r-sm);display:flex;align-items:center;opacity:0;transition:opacity var(--dur-fast),color var(--dur-fast)}
.pulse-card-bk-btn.active{opacity:1;color:var(--accent)}
@media(hover:hover){.pulse-card:hover .pulse-card-bk-btn{opacity:1}}
@media(hover:none){.pulse-card-bk-btn{opacity:1}}
/* Aufgeklappter Karten-Body */
.pulse-card-expanded-body{border-top:1px solid var(--border);padding-top:10px;margin-bottom:8px}
.pulse-card-expanded .pulse-card-lead{-webkit-line-clamp:unset;overflow:visible}
/* Expand-Toggle im Meta-Bereich */
.pulse-card-expand-btn{background:none;border:none;cursor:pointer;color:var(--text-3);padding:0 2px;border-radius:var(--r-sm);display:flex;align-items:center;transition:color var(--dur-fast);margin-left:auto}
@media(hover:hover){.pulse-card-expand-btn:hover{color:var(--accent)}}
/* Inline-Reaktions-Button */
.pulse-inline-react-btn{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full);font-size:11px;padding:2px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;color:var(--text-2);transition:all var(--dur-fast)}
@media(hover:hover){.pulse-inline-react-btn:hover{border-color:var(--accent);color:var(--accent)}}
.pulse-inline-react-btn.active{background:var(--accent-light,rgba(99,102,241,.1));border-color:var(--accent);color:var(--accent)}
.pulse-react-lbl{font-size:11px;color:inherit}
.pulse-react-cnt{font-size:10px;font-weight:700;background:var(--surface);border-radius:var(--r);padding:0 4px;color:var(--accent);margin-left:1px}
.pulse-section-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px}
.pulse-featured-label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
/* ── Magazin-Stream Layout (zentrierter Lesefluss) ────────── */
.pulse-feed-wrap{max-width:820px;margin:0 auto}
/* Hero-Inhalt im Default-Mode auf Reading-Width — fluchtet mit
Artikel-Stream (820px). Im Sparse-Mode bleibt die Default-Breite
der pulse-aurora-inner (1180px), passend zur breiteren Wrap. */
.pulse-mc--reading .pulse-aurora-inner{max-width:820px}
/* ── Pulse Notifications-Liste ───────────────────────────── */
.pulse-notif-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer}
.pulse-notif-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;background:transparent;border:1px solid var(--border);transition:background var(--dur-fast)}
.pulse-notif-dot--unread{background:var(--accent);border-color:transparent}
.pulse-notif-body{flex:1;min-width:0}
.pulse-notif-title{font-size:13px;font-weight:600;color:var(--text)}
.pulse-notif-preview{font-size:12px;color:var(--text-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pulse-notif-time{font-size:11px;color:var(--text-3);margin-top:4px}
.pulse-notif-empty{text-align:center;padding:60px 20px;color:var(--text-2);font-size:13px}
/* ── Pulse Scope-Toggle (All / For-Me) ───────────────────── */
.pulse-scope-toggle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.pulse-scope-toggle .btn{border-radius:var(--r-full)}
.pulse-scope-summary{font-size:11px;color:var(--text-3);display:inline-flex;align-items:center;gap:4px}
.pulse-scope-summary svg{vertical-align:-1px}
/* ── Jobboard — Stellenliste ──────────────────────────────── */
.jobs-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px 0}
.jobs-filter-select{padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);font-size:13px;font-family:var(--font);background:var(--surface);color:var(--text);min-width:160px}
@media(max-width:600px){.jobs-filter-select{flex:1 1 100%;min-width:0}}
.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
@media(max-width:600px){.jobs-grid{grid-template-columns:1fr}}
.jobs-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
@media(hover:hover){.jobs-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent-border);transform:translateY(-2px)}}
.jobs-card-header{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.jobs-card-title{font-size:15px;font-weight:700;color:var(--text);margin:0;line-height:1.3}
.jobs-card-lead{font-size:13px;color:var(--text-2);margin:0;line-height:1.5;flex:1}
.jobs-card-meta{display:flex;gap:8px;font-size:12px;color:var(--text-3);flex-wrap:wrap}
.jobs-card-meta span{display:inline-flex;align-items:center}
.jobs-card-meta span+span::before{content:'·';margin-right:8px;opacity:.5}
/* Karten-Fuss unter der Trennlinie: ruhige Meta links (mit Kalender-Glyph), CTA mit Pfeil rechts — Premium-Touch */
/* flex-wrap + nowrap-Datum: in schmalen Grid-Spalten (mehrere Stellen
nebeneinander) bricht der CTA sauber in eine eigene Zeile um, statt
dass das „Seit"-/„Frist"-Datum zweizeilig zerläuft (Positionen-Badge). */
.jobs-card-footer{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--border)}
.jobs-card-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap;flex-shrink:0}
.jobs-card-date::before{content:'';width:13px;height:13px;flex-shrink:0;opacity:.65;background-color:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.jobs-card-apply{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-weight:600}
.jobs-card-apply::after{content:'';width:13px;height:13px;flex-shrink:0;background-color:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform var(--dur-fast) var(--ease-out)}
@media(hover:hover){.jobs-card-apply:hover::after{transform:translateX(3px)}}
/* ── Jobboard: Detail-View ── */
.jobs-detail-badges{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
/* Stellen-Metadaten sind Attribut-Tags, keine Status-Pillen: kantiger
Plattform-Radius (var(--r)) statt voller Pill — moderner, ruhiger.
Sanktionierter Override (nur border-radius) auf der globalen .sm-badge. */
.jobs-detail-badges .sm-badge{border-radius:var(--r)}
.jobs-detail-card{margin-top:var(--sp-4)}
.jobs-detail-lead{font-size:14px;color:var(--text-2);font-style:italic;margin:0 0 var(--sp-4);line-height:1.5}
.jobs-detail-body{font-size:13px;color:var(--text);line-height:1.7;white-space:pre-wrap}
/* ── Jobboard: Detail-Aktionen (PDF-Export) + strukturierte Abschnitte ── */
.jobs-detail-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.jobs-detail-section{margin:0 0 var(--sp-5)}
.jobs-detail-section-title{font-size:15px;font-weight:600;color:var(--text);margin:0 0 var(--sp-2);letter-spacing:-.01em}
.jobs-detail-para{font-size:14px;color:var(--text);line-height:1.7;margin:0 0 var(--sp-2)}
.jobs-detail-list{margin:0;padding-left:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1)}
.jobs-detail-list li{font-size:14px;color:var(--text);line-height:1.6}
.jobs-detail-empty{font-size:13px;color:var(--text-3);font-style:italic;margin:0}
.jobs-detail-applied{margin-bottom:var(--sp-4)}
.jobs-detail-apply-btn{margin-bottom:var(--sp-5)}
.jobs-detail-mysubmission{margin:var(--sp-3) 0 var(--sp-4);font-size:13px}
.jobs-detail-mysubmission summary{cursor:pointer;color:var(--text-2);font-size:12px;padding:var(--sp-1) 0}
.jobs-mysubmission-grid{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) 0 0;color:var(--text-2)}
.jobs-mysubmission-label{font-weight:600;color:var(--text-3);margin-right:6px}
.jobs-mysubmission-motivation p{margin:6px 0 0;white-space:pre-wrap;color:var(--text)}
/* ── Jobboard: Detail-Info-Tiles (Zuständig / Bewerbungsfrist) ── */
.jobs-detail-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3);margin:var(--sp-2) 0 var(--sp-4)}
.jobs-detail-tile{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);transition:border-color .15s,background .15s}
.jobs-detail-tile:hover{border-color:var(--accent);background:var(--surface-3)}
.jobs-detail-tile-avatar{width:40px;height:40px;border-radius:var(--r-full);background:linear-gradient(135deg,var(--accent) 0%,var(--violet,var(--accent)) 100%);color:var(--on-accent,#fff);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;letter-spacing:.5px}
.jobs-detail-tile-icon{width:40px;height:40px;border-radius:var(--r-full);background:var(--accent-light,var(--surface-3));color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.jobs-detail-tile-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.jobs-detail-tile-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3)}
.jobs-detail-tile-value{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.jobs-detail-deadline-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-full);text-transform:none;letter-spacing:0}
.jobs-detail-deadline-badge--ok{background:rgba(34,197,94,.12);color:var(--green,#22c55e)}
.jobs-detail-deadline-badge--soon{background:rgba(245,158,11,.14);color:var(--amber,#f59e0b)}
.jobs-detail-deadline-badge--urgent{background:rgba(239,68,68,.14);color:var(--red,#ef4444)}
.jobs-detail-deadline-badge--expired{background:var(--surface-3);color:var(--text-3);text-decoration:line-through}
/* ── Jobboard: Meine Bewerbungen ── */
.jobs-myapps-list{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3)}
.jobs-myapp-card{padding:var(--sp-3) var(--sp-4)}
.jobs-myapp-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.jobs-myapp-title{font-size:15px;font-weight:600;margin:0;color:var(--text)}
.jobs-myapp-meta{display:flex;flex-wrap:wrap;gap:var(--sp-3);font-size:12px;color:var(--text-2);margin-bottom:var(--sp-2)}
.jobs-myapp-actions{display:flex;gap:var(--sp-2)}
/* ── Jobboard: Fortschritts-Stepper (Bewerber-Sicht) ── */
/* Visuelle Sprache wie der Plattform-Wizard-Stepper (.pa-wiz-step):
nummerierte Accent-Kreise, Gradient-Konnektoren, Ring auf der
aktuellen Stufe. Job-spezifisch bleibt nur die Ausgangs-Färbung
(Zusage grün / Absage rot) auf der Entscheidungs-Stufe. */
.jobs-progress{display:flex;align-items:flex-start;gap:0;margin:var(--sp-3) 0 var(--sp-2)}
.jobs-progress-step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.jobs-progress-step + .jobs-progress-step::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--border);z-index:0}
.jobs-progress-step--done + .jobs-progress-step::before,
.jobs-progress-step--current + .jobs-progress-step::before{background:linear-gradient(to right,var(--accent),var(--border))}
.jobs-progress-step--done::before{background:var(--accent)}
.jobs-progress-step--accepted::before{background:var(--green)}
.jobs-progress-step--rejected::before{background:var(--red)}
.jobs-progress-dot{position:relative;z-index:1;width:28px;height:28px;border-radius:var(--r-full);background:var(--surface);border:2px solid var(--border);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text-3);transition:all var(--dur-fast)}
.jobs-progress-step--done .jobs-progress-dot,
.jobs-progress-step--current .jobs-progress-dot{color:var(--on-accent)}
.jobs-progress-step--current .jobs-progress-dot{box-shadow:0 0 0 4px var(--accent-light)}
.jobs-progress-label{font-size:11px;font-weight:600;color:var(--text-3);line-height:1.3;letter-spacing:.02em}
.jobs-progress-step--done .jobs-progress-label{color:var(--text-2)}
.jobs-progress-step--current .jobs-progress-label{color:var(--accent)}
.jobs-progress-step--accepted .jobs-progress-label{color:var(--green)}
.jobs-progress-step--rejected .jobs-progress-label{color:var(--red)}
/* ── Jobboard: Pipeline-Legende (HR-Sicht) ── */
.jobs-pipeline-legend{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.jobs-pipeline-legend-head{display:flex;flex-direction:column;gap:3px}
.jobs-pipeline-legend-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--accent)}
.jobs-pipeline-hint{font-size:12px;color:var(--text-3);line-height:1.45}
.jobs-pipeline-flow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3)}
.jobs-pipeline-steps{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.jobs-pipeline-step{display:inline-flex;align-items:center;gap:var(--sp-2);position:relative;padding-right:calc(var(--sp-4) + var(--sp-3))}
.jobs-pipeline-step:last-child{padding-right:0}
.jobs-pipeline-step:not(:last-child)::after{content:"";position:absolute;right:var(--sp-3);top:50%;transform:translateY(-50%);width:var(--sp-4);height:2px;background:var(--border);border-radius:var(--r-full)}
.jobs-pipeline-node{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-full);flex-shrink:0;background:var(--stage-color);color:var(--on-accent);font-size:12px;font-weight:700;box-shadow:var(--shadow-sm)}
.jobs-pipeline-label{font-size:13px;font-weight:600;color:var(--text-1)}
.jobs-pipeline-fork{width:1px;height:22px;background:var(--border);flex-shrink:0}
.jobs-pipeline-outcomes{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2)}
.jobs-pipeline-outcome{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border)}
.jobs-pipeline-outcome .jobs-pipeline-label{color:var(--text-2)}
.jobs-pipeline-outcome-dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--stage-color);flex-shrink:0}
.jobs-pipeline-outcome--accepted{background:var(--green-bg)}
.jobs-pipeline-outcome--accepted .jobs-pipeline-label{color:var(--green)}
.jobs-pipeline-outcome--rejected{background:var(--red-bg)}
.jobs-pipeline-outcome--rejected .jobs-pipeline-label{color:var(--red)}
/* ── Jobboard: Empty State ── */
.jobs-empty{text-align:center;padding:60px 24px;color:var(--text-3)}
.jobs-empty-icon{display:flex;justify-content:center;margin-bottom:var(--sp-3);color:var(--border)}
.jobs-empty-title{font-size:15px;font-weight:600;color:var(--text-2);margin-bottom:var(--sp-2)}
.jobs-empty-sub{font-size:13px}
/* ── Jobboard: Loading ── */
.jobs-loading{display:flex;flex-direction:column;align-items:center;padding:80px 24px;color:var(--text-3);gap:var(--sp-3)}
.jobs-loading-label{font-size:13px}
.jobs-spinner-center{display:flex;justify-content:center;padding:60px}
/* ── Jobboard: Header-Row ── */
.jobs-hr-header{display:flex;align-items:center}
.jobs-hr-header .sm-content-title{flex:1}
/* ── Jobboard: Analytics ── */
.jobs-analytics{display:flex;flex-direction:column;gap:var(--sp-5)}
.jobs-analytics-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3)}
.jobs-kpi-card{display:flex;flex-direction:column;gap:var(--sp-2)}
.jobs-kpi-card .kpi-value{font-size:24px;line-height:1.1;margin-top:0}
.jobs-kpi-head{display:flex;align-items:center;gap:var(--sp-2)}
.jobs-kpi-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--accent);flex-shrink:0}
.jobs-analytics-section{display:flex;flex-direction:column;gap:var(--sp-4)}
.jobs-analytics-section-title-main{font-size:14px;font-weight:700;color:var(--text);margin:0;padding:0 var(--sp-1)}
.jobs-analytics-block{display:flex;flex-direction:column;gap:var(--sp-2)}
.jobs-analytics-section-head{display:flex;align-items:baseline;gap:var(--sp-2);padding:0 var(--sp-1)}
.jobs-analytics-section-head .jobs-analytics-section-title{font-size:13px;font-weight:700;color:var(--text);margin:0}
.jobs-analytics-section-head .jobs-analytics-section-hint{font-size:11px;font-weight:500;color:var(--text-3);margin-left:auto}
.jobs-funnel{display:flex;align-items:center;gap:2px;min-width:80px}
.jobs-funnel-seg{height:5px;border-radius:var(--r);flex:1;background:var(--surface-2)}
.jobs-funnel-seg--active{background:var(--accent);opacity:.85}
.jobs-funnel-seg--green{background:var(--green)}
.jobs-funnel-seg--red{background:var(--red)}
.jobs-kpi-total{font-size:15px;font-weight:700;color:var(--text);min-width:32px;text-align:right}
.jobs-stage-val{font-size:13px;color:var(--text-2);min-width:28px;text-align:right}
.jobs-stage-val--zero{color:var(--text-3)}
.jobs-analytics-row{cursor:pointer;transition:background var(--dur-fast)}
.jobs-analytics-row:hover,.jobs-analytics-row:focus{background:var(--surface-2);outline:none}
.jobs-analytics-row:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.jobs-analytics-row--empty{opacity:.65}
.jobs-application-card--highlight{box-shadow:0 0 0 2px var(--accent);transition:box-shadow var(--dur-med)}
/* ── Jobboard: HR-Overview ── */
.jobs-overview{display:flex;flex-direction:column;gap:var(--sp-5)}
.jobs-overview-row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-3)}
/* „Heute / Das braucht deine Aufmerksamkeit" — Handlungs-Block oben. */
.jobs-today-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3)}
.jobs-today-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:var(--r);padding:var(--sp-3) var(--sp-4);font:inherit;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.jobs-today-card--bad{border-left-color:var(--red)}
.jobs-today-card--warn{border-left-color:var(--amber)}
@media (hover:hover){.jobs-today-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}}
.jobs-today-card:active{transform:translateY(0)}
.jobs-today-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jobs-today-card-n{font-family:var(--font-display);font-size:clamp(22px,2vw,28px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.jobs-today-card--bad .jobs-today-card-n{color:var(--red)}
.jobs-today-card--warn .jobs-today-card-n{color:var(--amber)}
.jobs-today-card-l{font-size:13px;color:var(--text-2);font-weight:500}
.jobs-today-card-go{font-size:11px;color:var(--accent);font-weight:600;margin-top:2px}
.jobs-today-empty{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);padding:var(--sp-2) 0}
.jobs-today-empty-dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--green);flex-shrink:0}
@keyframes jobsSectionFlash{0%{background:var(--accent-light)}100%{background:transparent}}
.jobs-section-flash{animation:jobsSectionFlash 1.4s var(--ease-out)}
.jobs-overview-cover-actions{margin-top:var(--sp-3)}
.jobs-overview-newjob{display:inline-flex;align-items:center;gap:6px}
.jobs-overview-newjob svg{width:16px;height:16px}
/* ── Jobboard: Pipeline-Funnel (HR-Cockpit) ── */
.jobs-pipe-funnel{display:flex;align-items:flex-end;gap:var(--sp-2);padding-top:var(--sp-3)}
.jobs-pipe-stage{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.jobs-pipe-stage-n{font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.jobs-pipe-stage-l{font-size:12px;font-weight:600;color:var(--text-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs-pipe-stage-track{width:100%;height:6px;margin-top:3px;background:var(--surface-2);border-radius:var(--r);overflow:hidden}
.jobs-pipe-stage-fill{height:100%;min-width:2px;border-radius:var(--r);transition:width var(--dur-med)}
.jobs-pipe-arrow{flex-shrink:0;color:var(--text-3);font-size:20px;line-height:1;padding-bottom:14px}
.jobs-kpi-sub{font-size:11px;font-weight:500;margin-top:2px;color:var(--text-3)}
.jobs-kpi-sub--warn{color:var(--amber)}
.jobs-kpi-sub--crit{color:var(--red)}
.jobs-kpi-card--warn{border-color:var(--amber)}
.jobs-kpi-card--crit{border-color:var(--red)}
.jobs-overview-more{font-size:11px;color:var(--text-3);padding:var(--sp-1) var(--sp-1) 0}
.jobs-overview-activity{display:flex;align-items:flex-end;gap:6px;height:110px;padding:var(--sp-2) var(--sp-1) 0}
.jobs-overview-activity-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;flex:1;height:100%}
.jobs-overview-activity-val{font-size:11px;font-weight:700;color:var(--text-2);line-height:1;font-variant-numeric:tabular-nums}
.jobs-overview-activity-val--zero{color:var(--text-3);font-weight:500}
.jobs-overview-activity-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.jobs-overview-activity-bar{width:100%;max-width:24px;background:var(--accent);border-radius:var(--r);opacity:.85;min-height:4px}
.jobs-overview-activity-bar--empty{background:var(--surface-2);opacity:1;min-height:3px}
.jobs-overview-activity-label{font-size:10px;color:var(--text-3)}
.jobs-overview-dept{display:flex;flex-direction:column;gap:6px}
.jobs-overview-dept-row{display:grid;grid-template-columns:140px 1fr 32px;align-items:center;gap:var(--sp-2);font-size:12px}
.jobs-overview-dept-label{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs-overview-dept-bar{height:8px;background:var(--surface-2);border-radius:var(--r);overflow:hidden}
.jobs-overview-dept-fill{height:100%;background:var(--accent);opacity:.85}
.jobs-overview-dept-count{text-align:right;font-weight:600;color:var(--text)}
.jobs-overview-highlights{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-2)}
.jobs-overview-highlight{position:relative;text-align:left;padding:var(--sp-2) var(--sp-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:background var(--dur-fast)}
.jobs-overview-highlight:hover{background:var(--surface-2)}
.jobs-overview-highlight-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.jobs-overview-highlight-meta{font-size:11px;color:var(--text-3)}
.jobs-overview-highlight-new{position:absolute;top:6px;right:6px;font-size:9px}
/* ── Jobboard: HR-Stellenliste ── */
.jobs-hr-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.jobs-hr-card{display:flex;flex-direction:column;gap:var(--sp-2)}
.jobs-hr-card-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.jobs-hr-card-row strong{flex:1;min-width:0}
.jobs-hr-card-meta{display:flex;gap:var(--sp-3);font-size:12px;color:var(--text-3);flex-wrap:wrap}
.jobs-hr-card-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;padding-top:var(--sp-2);border-top:1px solid var(--border)}
.jobs-hr-kebab{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;background:transparent;color:var(--text-3);border-radius:var(--r);font-size:18px;line-height:1;cursor:pointer}
.jobs-hr-kebab:hover{background:var(--surface-2);color:var(--text)}
.jobs-hr-menu{position:fixed;z-index:1000;min-width:170px;padding:var(--sp-1);display:flex;flex-direction:column;gap:2px}
.jobs-hr-menu-item{display:block;width:100%;text-align:left;padding:8px 10px;border:none;background:transparent;color:var(--text);border-radius:var(--r);font-size:13px;font-family:inherit;cursor:pointer}
.jobs-hr-menu-item:hover{background:var(--surface-2)}
.jobs-hr-menu-item--danger{color:var(--red)}
.jobs-hr-menu-item--danger:hover{background:var(--red-bg)}
.jobs-apps-toggle{display:flex;gap:var(--sp-1)}
.jobs-kanban-board{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-2)}
.jobs-kanban-col{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);min-height:200px;display:flex;flex-direction:column}
.jobs-kanban-col--over{background:var(--blue-bg);border-color:var(--blue)}
.jobs-kanban-col-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px}
.jobs-kanban-col-body{padding:6px;display:flex;flex-direction:column;gap:6px;flex:1}
.jobs-kanban-empty{padding:8px;text-align:center;font-size:12px}
.jobs-kanban-card{padding:8px 10px;cursor:grab;font-size:12px;display:flex;flex-direction:column;gap:4px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.jobs-kanban-card:active{cursor:grabbing}
.jobs-kanban-card--dragging{opacity:.5}
@media (hover:hover){.jobs-kanban-card:hover:not(.jobs-kanban-card--dragging){transform:translateY(-2px);box-shadow:var(--shadow-md)}}
/* Match-Score als kompakter Ring (Kanban + Liste, Token-Farben) */
.jobs-match-ring{--mp:0;position:relative;width:34px;height:34px;flex-shrink:0;border-radius:var(--r-full);display:grid;place-items:center;background:conic-gradient(var(--mr-c) calc(var(--mp)*1%),var(--mr-bg) 0)}
.jobs-match-ring::before{content:'';position:absolute;inset:3px;border-radius:var(--r-full);background:var(--surface)}
.jobs-match-ring-v{position:relative;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-2)}
.jobs-match-ring--high{--mr-c:var(--green);--mr-bg:var(--green-bg)}
.jobs-match-ring--mid{--mr-c:var(--amber);--mr-bg:var(--amber-bg)}
.jobs-match-ring--low{--mr-c:var(--slate,var(--text-3));--mr-bg:var(--bg-2)}
/* Bewertungs-Signal (Scorecards) auf Karten — Empfehlungs-Tendenz */
.jobs-sc-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:var(--r-full);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.jobs-sc-badge--ok{background:var(--green-bg);color:var(--green)}
.jobs-sc-badge--bad{background:var(--red-bg);color:var(--red)}
.jobs-sc-badge--pending{background:var(--bg-2);color:var(--text-3);font-weight:500}
.jobs-sc-badge-c{opacity:.7;font-weight:500}
.jobs-kanban-select{display:flex;align-items:center;gap:6px;cursor:pointer}
.jobs-kanban-meta{font-size:11px;color:var(--text-3)}
.jobs-kanban-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--text-3);gap:6px}
.jobs-kanban-withdrawn{margin-top:var(--sp-3)}
.jobs-kanban-withdrawn-list{display:flex;flex-direction:column;gap:6px;padding-top:var(--sp-2)}
/* ── Kanban-Ausbau (Phase 3): Karten-Kopf, Indikatoren, Aging, Fold ── */
.jobs-kanban-card-top{display:flex;align-items:center;gap:6px}
/* Initial-Avatar — Identitäts-Parität zur Listenansicht (kompakt) */
.jobs-kanban-avatar{width:22px;height:22px;border-radius:var(--r-full);background:linear-gradient(135deg,var(--accent) 0%,var(--violet,var(--accent)) 100%);color:var(--on-accent,#fff);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9px;letter-spacing:.3px;flex-shrink:0}
/* Footer-Indikatoren (Notizen/Dokument) als monochrome Icons statt Emoji */
.jobs-kanban-ind{display:inline-flex;align-items:center;gap:3px}
.jobs-kanban-name{flex:1;min-width:0;background:none;border:0;padding:0;margin:0;text-align:left;font:inherit;font-weight:700;color:var(--text);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs-kanban-name:hover{text-decoration:underline}
.jobs-kanban-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}
/* Karten-Status-Indikator (→ Odoo kanban_state): klickbarer Punkt */
.jobs-kanban-state{flex:none;width:12px;height:12px;border-radius:50%;border:1px solid var(--border);background:var(--text-4);padding:0;cursor:pointer}
.jobs-kanban-state:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jobs-kanban-state--normal{background:var(--text-4)}
.jobs-kanban-state--ready{background:var(--green);border-color:var(--green)}
.jobs-kanban-state--blocked{background:var(--red);border-color:var(--red)}
/* Triage-Zeile: Priorität / Kategorie / Rang */
.jobs-kanban-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px}
.jobs-kanban-prio{color:var(--amber);letter-spacing:1px;line-height:1}
.jobs-kanban-cat{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-full);background:var(--bg-2);color:var(--text-2);font-weight:700}
.jobs-kanban-cat--A{background:var(--green-bg);color:var(--green)}
.jobs-kanban-cat--B{background:var(--amber-bg);color:var(--amber)}
.jobs-kanban-cat--C{background:var(--bg-2);color:var(--text-3)}
.jobs-kanban-rank{font-weight:700}
/* Aging-Signal: Verweildauer-Badge + linker Akzentstreifen der Karte */
.jobs-kanban-age{font-size:11px;color:var(--text-3)}
.jobs-kanban-age--warn{color:var(--amber);font-weight:700}
.jobs-kanban-age--alert{color:var(--red);font-weight:700}
.jobs-kanban-card--aging-warn{border-left:3px solid var(--amber)}
.jobs-kanban-card--aging-alert{border-left:3px solid var(--red)}
/* A11y-Alternative zum Drag: "Verschieben nach…"-Dropdown */
.jobs-kanban-move{display:block;margin-top:2px}
.jobs-kanban-move-select{width:100%;height:26px;font-size:11px;padding:2px 6px}
/* Fold: eingeklappte (leere) Spalten — Body verbergen, Kopf bleibt Drop-Ziel */
.jobs-kanban-fold{display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%;background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;color:inherit}
.jobs-kanban-fold:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}
.jobs-kanban-col--folded{min-height:0}
.jobs-kanban-col--folded .jobs-kanban-col-body{display:none}
.jobs-batch-bar{position:sticky;bottom:0;background:var(--bg-1);border-top:1px solid var(--border);padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);z-index:5;flex-wrap:wrap}
.jobs-batch-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.jobs-talentpool{display:flex;flex-direction:column;gap:var(--sp-3)}
.jobs-talentpool-search input{max-width:420px}
.jobs-talentpool-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.jobs-talentpool-card{display:flex;flex-direction:column;gap:var(--sp-2)}
.jobs-talentpool-row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.jobs-talentpool-meta{display:flex;gap:var(--sp-3);font-size:12px;color:var(--text-3);flex-wrap:wrap}
.jobs-talentpool-actions{display:flex;gap:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--border)}
.jobs-cf-editor-head{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-2)}
.jobs-cf-rows{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.jobs-cf-row{display:grid;grid-template-columns:1.5fr 1fr 1fr auto 1.5fr auto;gap:6px;align-items:center}
.jobs-cf-req{font-size:12px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.jobs-cf-form{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--border)}
.jobs-cf-form-title{font-size:14px;margin:0 0 4px;color:var(--text-2)}
.jobs-cf-form-row{display:flex;flex-direction:column;gap:4px}
.jobs-match{display:inline-block;padding:2px 6px;border-radius:var(--r);font-size:11px;font-weight:600;line-height:1.4}
.jobs-match-high{background:var(--green-bg);color:var(--green)}
.jobs-match-mid{background:var(--amber-bg);color:var(--amber)}
.jobs-match-low{background:var(--bg-2);color:var(--text-3)}
/* ── Jobboard: Bewerbungs-Admin ── */
.jobs-admin-panel{display:flex;flex-direction:column;gap:var(--sp-4)}
.jobs-admin-header{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.jobs-admin-header h3{margin:0;font-size:16px;font-weight:700;flex:1}
/* Pipeline-Stufen-Filter (Liste): klickbare Chips mit Zählern */
.jobs-stage-filter{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.jobs-stage-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text-2);font-size:13px;font-family:inherit;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.jobs-stage-chip:hover{background:var(--surface-2)}
.jobs-stage-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jobs-stage-chip--active{background:var(--accent-light);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));color:var(--accent);font-weight:600}
.jobs-stage-chip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.jobs-stage-chip-count{font-variant-numeric:tabular-nums;background:var(--surface-3);color:var(--text-3);border-radius:var(--r-full);padding:0 6px;font-size:11px;font-weight:700;min-width:18px;text-align:center}
.jobs-stage-chip--active .jobs-stage-chip-count{background:var(--accent);color:var(--on-accent)}
.jobs-applications-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.jobs-apps-empty-filter{padding:var(--sp-4);text-align:center;color:var(--text-3);font-size:13px}
.jobs-application-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:0;padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.jobs-application-card:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 22%,var(--border))}
/* Statusfarbiger Akzent-Streifen am linken Rand — bindet die Karte an ihre Pipeline-Stufe */
.jobs-application-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--jobs-card-rail,transparent)}
.jobs-application-card[data-status="new"]{--jobs-card-rail:var(--blue)}
.jobs-application-card[data-status="reviewing"]{--jobs-card-rail:var(--amber)}
.jobs-application-card[data-status="interview"]{--jobs-card-rail:var(--purple)}
.jobs-application-card[data-status="accepted"]{--jobs-card-rail:var(--green)}
.jobs-application-card[data-status="rejected"]{--jobs-card-rail:var(--red)}
.jobs-application-card[data-status="withdrawn"]{--jobs-card-rail:var(--slate)}
/* Deep-Link-Highlight muss den neuen Karten-Schatten ueberschreiben */
.jobs-application-card.jobs-application-card--highlight{box-shadow:0 0 0 2px var(--accent),var(--shadow-md)}
.jobs-application-card.jobs-app-hidden{display:none}
/* Avatar in Bewerbungskarten: kompakter + dezenter Akzent-Schein (Premium-Touch) */
.jobs-app-top .jobs-detail-tile-avatar{width:36px;height:36px;font-size:13px;box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 28%,transparent)}
.jobs-app-top .jobs-detail-tile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* Karten-Kopf: Avatar + Identität (Name/E-Mail) + Match/Status rechts */
.jobs-app-top{display:flex;align-items:flex-start;gap:var(--sp-3)}
.jobs-app-ident{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.jobs-app-name{font-size:15px;font-weight:700;line-height:1.3;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs-app-email{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs-app-top-right{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
/* Meta als Mikro-Spalten (Label oben, Wert darunter) — scanbar */
.jobs-app-header{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.jobs-app-header strong{flex:1;min-width:0}
.jobs-app-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2) var(--sp-5);align-items:start;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.jobs-app-meta-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.jobs-app-meta-k{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3)}
.jobs-app-meta-v{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
/* Reassign-Aktion: ruhiger Inline-Text-Link statt klobiger Button (behebt beengte Zeile) */
.jobs-app-reassign{padding:1px 7px;min-height:0;font-size:11px;font-weight:600;color:var(--accent)}
.jobs-app-reassign:hover:not(:disabled){background:var(--accent-light);color:var(--accent)}
/* Sekundär-Zeile: Termin-Info + Dokument */
.jobs-app-secondary{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.jobs-app-interview{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:5px 10px}
.jobs-app-interview--none{color:var(--text-3)}
.jobs-app-actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.jobs-app-actions-spacer{flex:1}
/* Aktions-Hierarchie: Zusage = grün, Absage = ruhiger roter Ghost rechts */
.jobs-app-accept{background:var(--green);color:#fff}
.jobs-app-accept:hover:not(:disabled){opacity:.88}
.jobs-app-reject{color:var(--red)}
.jobs-app-reject:hover:not(:disabled){background:var(--red-bg);color:var(--red)}
.jobs-app-motivation{font-size:13px;color:var(--text-2);cursor:pointer;margin-top:var(--sp-3)}
.jobs-app-motivation summary{padding:var(--sp-1) 0;font-weight:500;color:var(--text-2)}
.jobs-app-motivation p{margin:var(--sp-2) 0 0;white-space:pre-wrap;line-height:1.6}
.jobs-app-doc{padding-top:var(--sp-1)}
.jobs-app-notes{font-size:13px;cursor:pointer;margin-top:var(--sp-2)}
.jobs-app-notes summary{font-weight:500;color:var(--text-2);padding:var(--sp-1) 0}
.jobs-app-notes-list{list-style:none;padding-left:0;margin:var(--sp-2) 0}
.jobs-app-notes-list li{border-left:2px solid var(--accent);padding-left:var(--sp-2);margin-bottom:var(--sp-2)}
.jobs-app-note-meta{font-size:11px;color:var(--text-3);margin-bottom:var(--sp-1)}
.jobs-app-note-body{white-space:pre-wrap;font-size:13px}
.jobs-app-note-add{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.jobs-status-note{font-size:12px;color:var(--text-3);margin-top:var(--sp-1)}
/* ── Jobboard: kompakte Bewerber-Zeile (Liste) ── */
.jobs-app-row{flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.jobs-app-row:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--accent) 22%,var(--border))}
.jobs-app-row .jobs-detail-tile-avatar{width:32px;height:32px;font-size:12px;flex-shrink:0;box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 28%,transparent)}
.jobs-app-row .jobs-detail-tile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.jobs-app-row-ident{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.jobs-app-row .jobs-app-name{font-size:14px}
.jobs-app-row-when{font-size:12px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:2px 8px;white-space:nowrap;flex-shrink:0}
.jobs-app-row-chev{color:var(--text-3);font-size:14px;flex-shrink:0}
/* ── Jobboard: Bewerber-Detailansicht mit Reitern ── */
.jobs-appdetail{display:flex;flex-direction:column;gap:var(--sp-4)}
.jobs-appdetail-hero{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.jobs-appdetail-hero .jobs-detail-tile-avatar{width:48px;height:48px;font-size:16px;flex-shrink:0}
.jobs-appdetail-hero .jobs-detail-tile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.jobs-appdetail-ident{flex:1;min-width:0}
.jobs-appdetail-tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--border)}
.jobs-appdetail-tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:var(--sp-2) var(--sp-3);font:inherit;font-weight:600;font-size:14px;color:var(--text-3);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.jobs-appdetail-tab:hover{color:var(--text-1)}
.jobs-appdetail-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.jobs-appdetail-tab-badge{font-size:11px;padding:0 6px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text-3)}
.jobs-appdetail-docs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.jobs-appdetail-motivation{margin-top:var(--sp-4);font-size:13px;color:var(--text-2)}
.jobs-appdetail-motivation p{margin:var(--sp-2) 0 0;white-space:pre-wrap;line-height:1.6}
/* ── Jobboard: buchbarer Interview-Kalender ── */
.jobs-cal{display:flex;flex-direction:column;gap:var(--sp-3)}
.jobs-cal-toolbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.jobs-cal-mode{display:flex;gap:2px;margin-left:auto}
.jobs-cal-grid{display:flex;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;max-height:560px;overflow-y:auto}
.jobs-cal-axis{flex-shrink:0;width:46px;background:var(--surface-2)}
.jobs-cal-axis-h{height:44px;font-size:10px;color:var(--text-3);text-align:right;padding:2px 6px 0;box-sizing:border-box;border-top:1px solid var(--border)}
.jobs-cal-day{flex:1;min-width:0;border-left:1px solid var(--border)}
.jobs-cal-day-head{position:sticky;top:0;z-index:2;background:var(--surface-2);text-align:center;padding:4px 6px;font-size:12px;color:var(--text-2);border-bottom:1px solid var(--border)}
.jobs-cal-day-head.is-today{color:var(--accent);font-weight:700}
.jobs-cal-col{position:relative}
.jobs-cal-slot{display:block;width:100%;height:22px;border:none;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);background:var(--surface);cursor:pointer;padding:0;margin:0}
.jobs-cal-slot.on-hour{border-top-color:var(--border)}
.jobs-cal-slot:hover:not(:disabled){background:color-mix(in srgb,var(--green) 16%,var(--surface))}
.jobs-cal-slot.is-busy{background:color-mix(in srgb,var(--red) 20%,var(--surface))}
.jobs-cal-slot.is-past{background:var(--surface-2);cursor:not-allowed;opacity:.5}
.jobs-cal-slot.is-sel{background:var(--accent)}
.jobs-cal-people{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-2)}
.jobs-cal-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 9px}
.jobs-cal-chip-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.jobs-cal-chip--hr .jobs-cal-chip-dot{background:var(--purple)}
.jobs-cal-chip--applicant .jobs-cal-chip-dot{background:var(--blue)}
.jobs-cal-chip--interviewer .jobs-cal-chip-dot{background:var(--orange)}
.jobs-cal-chip-nd{color:var(--text-3)}
.jobs-cal-lanes{position:absolute;inset:0;display:flex;gap:1px;pointer-events:none;z-index:1;overflow:hidden}
.jobs-cal-lane{position:relative;flex:1;min-width:0}
.jobs-cal-ev{position:absolute;left:1px;right:1px;border-radius:var(--r);padding:1px 4px;font-size:10px;font-weight:600;overflow:hidden;box-sizing:border-box;line-height:1.3}
.jobs-cal-ev-t{opacity:.8;font-weight:400}
.jobs-cal-ev--hr{background:color-mix(in srgb,var(--purple) 16%,var(--surface));border-left:3px solid var(--purple);color:var(--purple)}
.jobs-cal-ev--applicant{background:color-mix(in srgb,var(--blue) 16%,var(--surface));border-left:3px solid var(--blue);color:var(--blue)}
.jobs-cal-ev--interviewer{background:color-mix(in srgb,var(--orange) 18%,var(--surface));border-left:3px solid var(--orange);color:var(--orange)}
.jobs-cal-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);font-size:11px;color:var(--text-3)}
.jobs-cal-dot{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle;margin-right:3px}
.jobs-cal-dot--free{background:color-mix(in srgb,var(--green) 30%,var(--surface));border:1px solid var(--green)}
.jobs-cal-dot--busy{background:color-mix(in srgb,var(--red) 30%,var(--surface));border:1px solid var(--red)}
.jobs-cal-dot--hr{background:var(--purple)}
.jobs-cal-dot--applicant{background:var(--blue)}
.jobs-cal-dot--interviewer{background:var(--orange)}
.jobs-cal-dot--mine{background:var(--purple)}
.jobs-cal-book{border-top:1px solid var(--border);padding-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3)}
.jobs-cal-book-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-end}
.jobs-cal-picked{flex:1;min-width:160px;display:flex;flex-direction:column;gap:2px}
.jobs-cal-err{background:var(--red-bg);color:var(--red);padding:8px 12px;border-radius:var(--r);font-size:13px}
.jobs-cal-book-actions{display:flex;justify-content:flex-end}
/* ── Jobboard: Interview-Kalender Monatsübersicht ── */
.jobs-month{display:flex;flex-direction:column;gap:var(--sp-2)}
.jobs-month-label{margin-left:8px;font-size:14px}
.jobs-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.jobs-month-wd{text-align:center;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;padding-bottom:2px}
.jobs-month-cell{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:62px;padding:6px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);cursor:pointer;font:inherit;color:inherit;text-align:left}
.jobs-month-cell:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.jobs-month-cell.is-out{background:var(--surface-2);opacity:.5;cursor:default}
.jobs-month-cell.is-past{opacity:.45;cursor:not-allowed}
.jobs-month-cell.is-today{outline:2px solid var(--accent);outline-offset:-2px}
.jobs-month-day{font-size:13px;font-weight:600;color:var(--text)}
.jobs-month-bar{width:100%;height:5px;border-radius:var(--r-full);background:color-mix(in srgb,var(--green) 30%,var(--surface));overflow:hidden}
.jobs-month-bar-fill{display:block;height:100%;background:color-mix(in srgb,var(--red) 55%,var(--surface))}
.jobs-month-ev{position:absolute;top:6px;right:6px;font-size:10px;font-weight:700;color:var(--purple);background:color-mix(in srgb,var(--purple) 14%,var(--surface));border-radius:var(--r-full);padding:0 6px}
/* ── Jobboard: Dokumente-Reiter (Bewerber-Detail) ── */
.jobs-doc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.jobs-doc-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.jobs-doc-name{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs-doc-actions{display:flex;gap:var(--sp-2);flex-shrink:0}
/* ── Jobboard: Stellen-Detail mit Reitern ── */
.jobs-jobdetail-pane{padding-top:var(--sp-3)}
.jobs-jobdetail-toolbar{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.jobs-jobdetail-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-4)}
.jobs-jobdetail-kpi{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.jobs-jobdetail-kpi-n{font-size:22px;font-weight:800;line-height:1;color:var(--text)}
.jobs-jobdetail-kpi-l{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3)}
/* ── Jobboard: Talent-Pool als kompakte Zeilen ── */
.jobs-talentpool-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.jobs-tp-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3)}
.jobs-tp-row .jobs-detail-tile-avatar{width:32px;height:32px;font-size:12px;flex-shrink:0}
.jobs-tp-role{flex-shrink:0;font-size:12px;max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs-tp-retention{flex-shrink:0;font-size:11px;color:var(--text-3);white-space:nowrap}
/* ── Jobboard: Stellen-Kalender (geplante Gespräche) ── */
.jobs-jd-cal-cell{min-height:74px;padding:4px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);display:flex;flex-direction:column;gap:2px;overflow:hidden}
.jobs-jd-cal-cell.is-out{background:var(--surface-2);opacity:.5}
.jobs-jd-cal-cell.is-today{outline:2px solid var(--accent);outline-offset:-2px}
.jobs-jd-cal-ev{display:block;width:100%;text-align:left;border:none;cursor:pointer;background:color-mix(in srgb,var(--purple) 14%,var(--surface));color:var(--purple);border-radius:var(--r);padding:1px 5px;font-family:inherit;font-size:10px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobs-jd-cal-ev:hover{background:color-mix(in srgb,var(--purple) 24%,var(--surface))}
.jobs-jd-cal-ev-t{opacity:.8;font-weight:400}
/* ── Jobboard: Scorecards-Reiter ── */
.jobs-sc-crits{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-1)}
.jobs-sc-crit{font-size:11px;padding:1px 8px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text-2)}
/* ── Jobboard: Bewerbungsstatus-Badges (farbig) ── */
.jobs-app-status{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:700;letter-spacing:.2px}
.jobs-app-status--new{background:var(--blue);color:#fff}
.jobs-app-status--reviewing{background:var(--amber);color:#fff}
.jobs-app-status--interview{background:var(--purple);color:#fff}
.jobs-app-status--accepted{background:var(--green);color:#fff}
.jobs-app-status--rejected{background:var(--red);color:#fff}
.jobs-app-status--withdrawn{background:var(--slate);color:#fff}
/* ── Jobboard: Bewerbungs-Kontext-Panel ── */
.jobs-apply-context{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:13px}
.jobs-apply-context-row{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-1) var(--sp-4);align-items:baseline;padding:2px 0}
.jobs-apply-context-label{color:var(--text-3);white-space:nowrap}
.form-label-optional{font-weight:400;color:var(--text-3)}
/* ── Jobboard: Sidebar-Badge ── */
.jobs-nav-count{margin-left:auto;font-size:11px;padding:1px 6px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text-3)}
.sm-card{background:var(--surface-card,var(--surface));border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px}
/* ── sm-* Standardklassen für Inline-Style-Konsolidierung ──
Ersetzen die in 88+ Pages duplizierten Input-/Layout-Inline-Styles.
Wer ein Standard-Input baut: statt 90-Zeichen-Style.
Siehe docs/technik/design/01-tokens.md (CLAUDE.md §5). */
.sm-input{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r);font-size:13px;background:var(--surface-card,var(--surface));color:var(--text-1);box-sizing:border-box;font-family:var(--font);outline:none;transition:border-color var(--dur-fast)}
.sm-input:focus{border-color:var(--border-focus)}
.sm-input-sm{padding:6px 10px;font-size:12px}
.sm-input-xs{padding:4px 8px;font-size:11px}
.sm-input--inline{width:auto}
.sm-stack{display:flex;flex-direction:column;gap:12px}
.sm-stack-tight{display:flex;flex-direction:column;gap:8px}
.sm-stack-xs{display:flex;flex-direction:column;gap:4px}
.sm-stack-xxs{display:flex;flex-direction:column;gap:2px}
.sm-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sm-row-tight{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sm-card-item{padding:12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
/* Kleines Label/Meta-Text — ersetzt das 80x duplizierte
font-size:11px;color:var(--text-3) Inline-Pattern. */
.sm-label{font-size:11px;color:var(--text-3)}
.sm-label-block{font-size:11px;color:var(--text-3);display:block}
.sm-tiny{font-size:11px}
.sm-muted{color:var(--text-3)}
/* Meta-Text-Varianten: Sekundaer-Text mit kleinerer Schrift +
gedaempfter Farbe. sm-meta=12px (Untertitel/Hint),
sm-meta-xs=10px (Mikro-Hint). Konsolidiert ~50 Inline-Wdh. */
.sm-meta{font-size:12px;color:var(--text-3)}
.sm-meta-xs{font-size:10px;color:var(--text-3)}
.sm-row-wrap{display:flex;flex-wrap:wrap;gap:8px}
.sm-row-wrap-tight{display:flex;flex-wrap:wrap;gap:4px}
/* Horizontaler Flex-Container ohne align-items (free-baseline) —
Pendant zu .sm-stack-tight, aber horizontal. 17 Wdh. */
.sm-hstack{display:flex;gap:8px}
/* Sekundaer-Text-Variante mit Mittelgrau (text-2) — 19 Wdh. */
.sm-meta-2{font-size:12px;color:var(--text-2)}
/* Monospace-Atomic (Codes/IDs) — 16 Wdh. */
.sm-mono{font-family:monospace}
/* Section-Header (kleine Caps mit text-3). 15 Wdh. */
.sm-section-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3)}
/* Status-/Badge-Pill — Basis-Form, Farben kommen inline per Kontext.
Konsolidiert das 8x duplizierte font-size:11px;padding:1px 6px;
border-radius:var(--r-full)-Pattern. */
.sm-pill{display:inline-block;padding:1px 6px;border-radius:var(--r-full);font-size:11px;font-weight:600;line-height:1.4}
/* Haupt-Feed (Sparse-Mode): volle Breite — fluchtet mit dem Cover-
Header (lp-mc-inner, max-width 1400). Empfohlene Artikel stehen
über die ganze Breite oben (.pulse-featured-block), darunter teilt
.pulse-feed-body den Raum in Artikel-Stream + Themen-Panel. */
.pulse-feed-wrap--wide{max-width:1400px}
.pulse-feed-body--with-aside{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
@media(max-width:1100px){.pulse-feed-body--with-aside{grid-template-columns:1fr}.pulse-side-panel{position:static}}
/* ── Pulse-Hero (Editorial, Self-Service-KI-Assistent-Pattern) ──
Transparenter Hintergrund + Aurora-Drift, grosse Display-Headline
mit Gradient-Namen, Orb rechts, Wave als Footer-Element. */
.pulse-aurora{position:relative;width:auto;max-width:none;overflow:hidden;border-radius:0;background:transparent;color:var(--text);border:none;box-shadow:none;padding:clamp(20px,2.8vw,36px) 0 clamp(10px,1.4vw,18px);isolation:isolate;margin:-24px -24px 18px}
@media(max-width:600px){.pulse-aurora{margin:-16px -16px 18px;padding:clamp(18px,5vw,26px) 0 clamp(10px,2vw,14px)}}
.pulse-aurora::before{content:'';position:absolute;inset:0 -5% -40% -5%;z-index:-2;opacity:0;pointer-events:none;background:
radial-gradient(42% 55% at 14% 28%,color-mix(in srgb,var(--accent) 55%,transparent) 0%,transparent 65%),
radial-gradient(50% 60% at 92% 18%,color-mix(in srgb,#8a5bff 40%,transparent) 0%,transparent 65%),
radial-gradient(48% 58% at 78% 100%,color-mix(in srgb,#ff8a5b 32%,transparent) 0%,transparent 65%),
radial-gradient(58% 78% at 0% 100%,color-mix(in srgb,#00c8b4 28%,transparent) 0%,transparent 65%);
filter:blur(10px) saturate(110%);animation:pulse-aurora-drift 22s ease-in-out infinite alternate}
html.dark .pulse-aurora::before{opacity:0}
.pulse-aurora::after{content:'';position:absolute;inset:0 -5% -10% -5%;z-index:-1;opacity:0;pointer-events:none;background:
radial-gradient(60% 80% at 28% 32%,color-mix(in srgb,var(--text) 6%,transparent) 0%,transparent 60%),
radial-gradient(70% 90% at 82% 68%,color-mix(in srgb,var(--text) 4%,transparent) 0%,transparent 65%);
filter:blur(28px) saturate(105%);mix-blend-mode:soft-light}
@keyframes pulse-aurora-drift{
0%{transform:translate3d(-2%,-1%,0) scale(1.02)}
50%{transform:translate3d(2%,1%,0) scale(1.06)}
100%{transform:translate3d(-1%,2%,0) scale(1.02)}
}
.pulse-aurora-inner{position:relative;max-width:1180px;margin:0 auto;padding:0 clamp(24px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:120px}
.pulse-aurora-col{position:relative;z-index:1;flex:1;min-width:0;max-width:680px}
.pulse-aurora-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-full,9999px);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent) 14%,transparent));border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);font-size:10px;font-weight:700;color:var(--accent);letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px}
.pulse-aurora-eyebrow svg{color:var(--accent);width:11px;height:11px}
.pulse-aurora-title{font-family:var(--font-display);font-size:clamp(18px,2.2vw,26px);line-height:1.18;letter-spacing:var(--display-tracking,-0.02em);font-weight:600;color:var(--text);margin:0 0 6px;text-align:left}
.pulse-aurora-name{background:var(--accent-gradient,linear-gradient(135deg,#004A97 0%,#2B7BD6 60%,#56C6FF 100%));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.pulse-aurora-sub{margin:0 0 12px;max-width:48ch;text-align:left;font-size:12.5px;color:var(--text-2);line-height:1.5}
.pulse-aurora-sub strong{color:var(--text);font-weight:600}
.pulse-aurora-wave{display:flex;align-items:flex-end;gap:3px;height:26px;padding:0;max-width:280px}
.pulse-aurora-wave-bar{width:5px;border-radius:var(--r);background:linear-gradient(to top,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 70%,transparent));opacity:.6;transition:height .4s var(--ease-out,ease),opacity .3s}
.pulse-aurora-wave-bar.is-today{opacity:1;background:linear-gradient(to top,var(--accent),color-mix(in srgb,var(--accent) 40%,#fff));box-shadow:0 0 14px color-mix(in srgb,var(--accent) 50%,transparent);animation:pulse-aurora-today 2.2s ease-in-out infinite}
@keyframes pulse-aurora-today{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}
.pulse-aurora-illus{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:clamp(110px,13vw,150px);height:clamp(110px,13vw,150px);pointer-events:none;opacity:.85;z-index:0}
.pulse-aurora-orb{position:relative;z-index:2;color:var(--accent);line-height:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pulse-aurora-orb svg{width:100%;height:100%;display:block;overflow:visible;max-width:140px;max-height:140px}
.pulse-aurora-orb-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120%;height:120%;border-radius:50%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 28%,transparent) 0%,color-mix(in srgb,var(--accent) 12%,transparent) 40%,transparent 72%);filter:blur(28px);opacity:.7;pointer-events:none;animation:pulse-aurora-glow 6s ease-in-out infinite}
@keyframes pulse-aurora-glow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}}
@media(max-width:900px){
.pulse-aurora-inner{flex-direction:column;align-items:flex-start;gap:12px;min-height:0}
.pulse-aurora-illus{width:96px;height:96px;align-self:flex-end;margin-top:-24px}
}
@media(max-width:600px){
.pulse-aurora-illus{display:none}
.pulse-aurora-wave{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.pulse-aurora::before,.pulse-aurora-orb-glow,.pulse-aurora-wave-bar.is-today{animation:none}}
/* ── Pulse-Hero Magazine-Cover ───────────────────────────────
Editorial-Display-Typo links (Was gibt's Neues / im Pulse?),
rotierender Headline-Ticker rechts. Erbt Aurora-Drift
(.pulse-aurora::before) und Bleed-Margin von .pulse-aurora.
Kein Rahmen, nur Bottom-Divider mit Aurora-Verlauf. */
.pulse-mc{padding:clamp(20px,2.6vw,28px) 0 clamp(14px,1.8vw,20px)}
.pulse-mc-inner{position:relative;z-index:1;align-items:center;gap:clamp(18px,2.4vw,28px);min-height:0}
.pulse-mc-col{flex:1 1 auto;min-width:0;max-width:none}
/* Ambient-Piktogramm: konzentrische Pulse-Ringe als Watermark */
.pulse-mc-ambient{position:absolute;right:280px;top:50%;transform:translateY(-50%);width:clamp(80px,9vw,110px);height:clamp(80px,9vw,110px);color:var(--accent);opacity:.11;pointer-events:none;z-index:0}
html.dark .pulse-mc-ambient{opacity:.16}
.pulse-mc-ambient svg{width:100%;height:100%;display:block;overflow:visible}
.pulse-mc-ambient-ring{transform-origin:120px 120px;animation:pulse-mc-ring 3.8s ease-out infinite}
.pulse-mc-ambient-ring--1{animation-delay:0s}
.pulse-mc-ambient-ring--2{animation-delay:.9s;opacity:.7}
.pulse-mc-ambient-ring--3{animation-delay:1.8s;opacity:.45}
@keyframes pulse-mc-ring{0%{transform:scale(.85);opacity:0}30%{opacity:1}100%{transform:scale(1.08);opacity:0}}
@media(max-width:900px){.pulse-mc-ambient{right:8%;top:38px;transform:none;width:120px;height:120px;opacity:.07}}
@media(max-width:600px){.pulse-mc-ambient{display:none}}
/* Modernisierter Watermark (Depth-Stack, an die Inhaltsspalte gebunden,
oben angeschnitten, leicht gedreht) für alle Icon-Header. Die animierte
Ring-Variante (Pulse) ist via :not(:has()) ausgenommen und behält ihr
bisheriges, mittig zentriertes Layout. */
.pulse-mc-ambient:not(:has(.pulse-mc-ambient-ring)){right:max(24px,calc(50% - 520px));top:-58px;width:clamp(170px,16vw,230px);height:clamp(170px,16vw,230px);transform:rotate(-16deg)}
.pulse-mc-ambient:not(:has(.pulse-mc-ambient-ring)) svg{filter:drop-shadow(8px 9px 0 color-mix(in srgb,currentColor 50%,transparent)) drop-shadow(16px 18px 0 color-mix(in srgb,currentColor 26%,transparent))}
@media(max-width:900px){.pulse-mc-ambient:not(:has(.pulse-mc-ambient-ring)){right:16px;top:-30px;width:140px;height:140px}}
.pulse-mc--compact .pulse-mc-ambient:not(:has(.pulse-mc-ambient-ring)){top:-44px;width:clamp(130px,12vw,170px);height:clamp(130px,12vw,170px)}
/* Meta-Zeile: Eyebrow */
.pulse-mc-meta{display:flex;align-items:center;gap:14px;margin-bottom:clamp(10px,1.4vw,14px);flex-wrap:wrap}
@keyframes pulse-mc-live{0%{box-shadow:0 0 0 0 rgba(225,29,72,.55)}70%{box-shadow:0 0 0 9px rgba(225,29,72,0)}100%{box-shadow:0 0 0 0 rgba(225,29,72,0)}}
.pulse-mc-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
/* Display-Headline */
.pulse-mc-title{font-family:var(--font-display);margin:0 0 clamp(12px,1.8vw,18px);line-height:1.05;letter-spacing:-.028em;font-weight:800;color:var(--text);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.32em;row-gap:2px}
.pulse-mc-line1{font-size:clamp(22px,2.4vw,32px);color:var(--text)}
.pulse-mc-line2{display:inline-block;font-size:clamp(22px,2.4vw,32px);font-style:italic;font-weight:800;background:linear-gradient(110deg,#004A97 0%,#2B7BD6 35%,#56C6FF 55%,#2B7BD6 75%,#004A97 100%);background-size:220% 100%;background-position:0% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:pulse-mc-sweep 6.5s ease-in-out infinite;padding-right:.15em}
/* Compact-Variante: für Pages mit eigenem Layout, wo der Hero möglichst wenig Platz fressen soll */
.pulse-mc--compact.pulse-mc{padding:clamp(12px,1.6vw,18px) 0 clamp(8px,1.2vw,14px)}
.pulse-mc--compact .pulse-mc-meta{margin-bottom:clamp(4px,.6vw,8px)}
.pulse-mc--compact .pulse-mc-title{margin-bottom:clamp(6px,.8vw,10px)}
.pulse-mc--compact .pulse-mc-line1,.pulse-mc--compact .pulse-mc-line2{font-size:clamp(18px,1.9vw,26px)}
.pulse-mc--compact .pulse-mc-ambient{width:clamp(70px,8vw,100px);height:clamp(70px,8vw,100px)}
.pulse-mc--compact .pulse-mc-divider{margin-top:clamp(8px,1.2vw,12px)}
.pulse-mc--compact .pulse-mc-lead{margin-bottom:clamp(6px,.9vw,10px);font-size:12.5px}
@keyframes pulse-mc-sweep{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
/* Chip-Reihe */
.pulse-mc-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pulse-mc-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full,9999px);background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid color-mix(in srgb,var(--text) 8%,transparent);font-size:12px;font-weight:500;color:var(--text-2);line-height:1;font-variant-numeric:tabular-nums}
.pulse-mc-chip svg{opacity:.6;flex-shrink:0}
.pulse-mc-chip strong{font-weight:700;color:var(--text)}
.pulse-mc-chip--accent{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent)}
.pulse-mc-chip--accent strong{color:var(--accent)}
.pulse-mc-chip-pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent);animation:pulse-mc-live 1.6s ease-out infinite;flex-shrink:0}
.pulse-mc-chip--spark{padding:5px 12px;gap:3px}
.pulse-mc-spark-bar{display:inline-block;width:3px;border-radius:var(--r);background:color-mix(in srgb,var(--accent) 35%,transparent);transition:height .4s var(--ease-out,ease)}
.pulse-mc-spark-bar.is-today{background:var(--accent);box-shadow:0 0 6px color-mix(in srgb,var(--accent) 45%,transparent)}
/* Headline-Ticker rechts — fixe Grösse, skaliert NICHT mit Viewport
(verhindert Item-Overlap auf grossen Monitoren) */
.pulse-mc-ticker{position:relative;flex:0 0 auto;width:280px;align-self:center;display:flex;flex-direction:column;gap:6px;padding:0 0 0 20px;border-left:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.pulse-mc-ticker-label{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);align-self:flex-start}
.pulse-mc-ticker-label svg{color:var(--accent);border-radius:50%}
.pulse-mc-ticker-stack{position:relative;flex:0 0 auto;height:92px;overflow:hidden;--ticker-cycle:12s}
.pulse-mc-ticker-item{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:4px 10px;background:transparent;border:none;text-align:left;cursor:pointer;color:var(--text);opacity:0;transform:translateY(8px);animation:pulse-mc-ticker var(--ticker-cycle) cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--ticker-i) * (var(--ticker-cycle) / var(--ticker-count,3)));border-radius:var(--r);transition:background .2s}
.pulse-mc-ticker-item:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
@keyframes pulse-mc-ticker{
0%{opacity:0;transform:translateY(10px)}
6%,30%{opacity:1;transform:translateY(0)}
36%,100%{opacity:0;transform:translateY(-8px)}
}
.pulse-mc-ticker-cat{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:2px 8px;border-radius:var(--r-full,9999px);line-height:1.4}
.pulse-mc-ticker-headline{font-size:14px;font-weight:600;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pulse-mc-ticker-meta{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
/* Bottom-Divider mit Aurora-Verlauf */
.pulse-mc-divider{position:relative;max-width:1180px;margin:clamp(12px,1.6vw,18px) auto 0;height:1px;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--accent) 35%,transparent) 50%,transparent 100%);padding:0 clamp(24px,4vw,56px)}
/* Variante ohne Bleed-Margin für Pages mit eigenem Layout (wiki-home, mad-wrap, etc.) */
.pulse-mc--no-bleed.pulse-aurora{margin:0 0 18px}
@media(max-width:600px){.pulse-mc--no-bleed.pulse-aurora{margin:0 0 14px}}
/* Ticker-Variante: vertikale Action-Buttons statt rotierender Headlines */
.pulse-mc-ticker--actions{width:auto;max-width:200px;align-self:center}
.pulse-mc-ticker--actions .pulse-mc-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.pulse-mc-ticker--actions .pulse-mc-actions .mad-banner-btn,
.pulse-mc-ticker--actions .pulse-mc-actions .ma-dashboard-btn{width:auto;min-width:120px;white-space:nowrap}
/* Such-Variante: Lead-Paragraph + Such-Bar + Quick-Picks (Wissenszentrum) */
.pulse-mc-lead{margin:0 0 clamp(12px,1.6vw,18px);max-width:60ch;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.pulse-mc-lead strong{color:var(--text);font-weight:700}
.pulse-mc-searchbar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -10px color-mix(in srgb,var(--accent) 28%,transparent);max-width:640px;transition:border-color .15s,box-shadow .15s}
.pulse-mc-searchbar:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 30px -8px color-mix(in srgb,var(--accent) 38%,transparent)}
.pulse-mc-searchbar-icon{flex-shrink:0;color:var(--text-3);display:inline-flex;align-items:center;justify-content:center}
.pulse-mc-searchbar-icon svg{width:16px;height:16px}
.pulse-mc-searchbar-input{flex:1;min-width:0;border:none;background:transparent;outline:none;font-size:14px;color:var(--text);padding:8px 0;font-family:inherit}
/* Reset gegen globalen input[type="text"]-Selektor (höhere Spezifität) */
.pulse-mc-searchbar input.pulse-mc-searchbar-input,
.pulse-mc-searchbar input.pulse-mc-searchbar-input:focus{border:none;background:transparent;box-shadow:none;border-radius:0;padding:8px 0;line-height:1.4}
.pulse-mc-searchbar-send{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r);border:none;background:var(--accent);color:#fff;cursor:pointer;transition:transform .15s,background .15s}
.pulse-mc-searchbar-send:hover:not(:disabled){transform:scale(1.05);background:color-mix(in srgb,var(--accent) 88%,#fff)}
.pulse-mc-searchbar-send:disabled{opacity:.45;cursor:not-allowed}
.pulse-mc-searchbar-send svg{width:14px;height:14px}
.pulse-mc-searchbar-kbd{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;padding:3px 6px;background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:var(--r);font-size:10.5px;font-weight:600;color:var(--text-3);font-family:inherit;line-height:1}
.pulse-mc-searchbar-kbd span{font-feature-settings:"tnum"}
.pulse-mc-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(10px,1.4vw,14px);max-width:640px}
.pulse-mc-pick{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:5px 12px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid color-mix(in srgb,var(--text) 8%,transparent);border-radius:var(--r);color:var(--text-2);cursor:pointer;line-height:1.4;transition:background .15s,border-color .15s,color .15s}
.pulse-mc-pick:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent)}
@media(max-width:900px){
.pulse-mc-inner{flex-direction:column;align-items:flex-start;gap:24px}
.pulse-mc-ticker{width:100%;border-left:none;border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent);padding:18px 0 0}
.pulse-mc-ticker-stack{min-height:96px}
}
@media(max-width:600px){
.pulse-mc-line1,.pulse-mc-line2{font-size:clamp(26px,7.5vw,38px)}
}
@media(prefers-reduced-motion:reduce){
.pulse-mc-chip-pulse,.pulse-mc-ticker-label svg{animation:none}
.pulse-mc-line2{animation:none;background-position:50% 0}
.pulse-mc-ticker-item{animation:none;position:relative;opacity:1;transform:none;inset:auto}
.pulse-mc-ticker-stack{display:flex;flex-direction:column;gap:8px;min-height:0}
}
/* ── Featured-Hero: Ribbon + zarter Glow für Wow-Effekt ── */
.pulse-hero-main::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow var(--dur) var(--ease-out)}
.pulse-hero-main:hover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px var(--accent),0 14px 40px -10px color-mix(in srgb,var(--accent) 45%,transparent)}
.pulse-hero-ribbon{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.78));color:#0b1220;border-radius:var(--r-full,999px);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.pulse-hero-ribbon svg{color:#ff8a5b;animation:pulse-aurora-today 2.2s ease-in-out infinite;transform-origin:center}
/* ── Stream-Karten (Querformat: Bild links, Content rechts) ── */
.pulse-stream{display:flex;flex-direction:column;gap:14px}
.pulse-stream-card{display:grid;grid-template-columns:220px 1fr;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;position:relative}
.pulse-stream-card--unread{border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.pulse-unread-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:2px 7px;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.5px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.pulse-stream-thumb{position:relative;background:var(--surface-2);background-size:cover;background-position:center;min-height:160px}
.pulse-stream-thumb--empty{display:flex;align-items:center;justify-content:center}
/* Mandanten-Fallback-Hero (Logo/eigene URL): eingepasst auf neutralem Grund statt Cover-Crop */
.pulse-stream-thumb--brand{background-color:var(--surface-2)}
.pulse-stream-body{padding:18px 22px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
/* Text-only Karte: kanal-getönte Editorial-Kachel mit dezentem Kanal-Icon. Jede Karte hat damit
dieselbe Anatomie (Bild/Kachel links, Text rechts), sodass Badge & Titel immer an derselben
Stelle beginnen und der Feed schnell abscannbar bleibt. Tint kommt aus --ph-tint (heroBg). */
.pulse-stream-thumb--ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--ph-tint,var(--surface-2)) 14%,var(--surface-2)),color-mix(in srgb,var(--ph-tint,var(--surface-2)) 4%,var(--surface-2)))}
.pulse-stream-thumb-icon{width:52px;height:52px;stroke:var(--ph-tint,var(--text-3));stroke-linecap:round;stroke-linejoin:round;opacity:.42;pointer-events:none}
.pulse-stream-headline{font-size:18px;font-weight:700;color:var(--text);line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.15px}
.pulse-stream-lead{font-size:13.5px;color:var(--text-2);line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pulse-stream-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-3);margin-top:auto;flex-wrap:wrap;padding-top:4px}
.pulse-stream-meta-author{color:var(--text-2);font-weight:500}
.pulse-stream-meta-dot{color:var(--text-3);opacity:.45}
.pulse-stream-card .pulse-card-bk-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:1px solid var(--border);padding:5px;z-index:2}
@media(hover:hover){.pulse-stream-card:hover .pulse-card-bk-btn{opacity:1}}
.pulse-stream-card .pulse-card-expand-btn{margin-left:auto}
.pulse-stream-card .pulse-card-expanded-body{margin:8px -2px 0;border-top:1px solid var(--border);padding:10px 0 0}
@media(max-width:720px){.pulse-stream-card{grid-template-columns:1fr}.pulse-stream-thumb{height:180px;min-height:0}}
/* ── Side-Panel (Sparse-State Hub-Orb + Topics + Notifs) ──── */
.pulse-side-panel{display:flex;flex-direction:column;gap:14px;position:sticky;top:8px}
.pulse-side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px}
.pulse-side-card-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.pulse-side-notif{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;font-size:12.5px;color:var(--text);line-height:1.4}
.pulse-side-notif:last-child{border-bottom:none}
.pulse-side-notif-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:6px;flex-shrink:0}
.pulse-side-notif-dot--read{background:var(--border)}
.pulse-side-topic-list{display:flex;flex-wrap:wrap;gap:6px}
.pulse-side-topic{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);font-size:11.5px;color:var(--text-2);cursor:pointer;transition:all var(--dur-fast)}
@media(hover:hover){.pulse-side-topic:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}}
.pulse-side-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);font-size:12px;color:var(--text-2);cursor:pointer;transition:all var(--dur-fast);font-weight:500}
@media(hover:hover){.pulse-side-tag:hover{border-color:var(--accent);color:var(--accent)}}
.pulse-side-tag--active{background:var(--accent-light,rgba(99,102,241,.12));border-color:var(--accent);color:var(--accent);font-weight:600}
/* ── Sidebar-Header mit Hub-Orb ─────────────────────────── */
.pulse-sm-header{display:flex;align-items:center;gap:10px;padding:14px 14px 8px}
.pulse-sm-orb{flex-shrink:0;color:var(--accent);display:flex;align-items:center;justify-content:center;line-height:0}
.pulse-sm-orb svg{display:block}
.pulse-sm-orb--alert{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 50%,transparent))}
.pulse-sm-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.1px;flex:1;min-width:0}
.pulse-sm-prefs{background:none;border:none;cursor:pointer;color:var(--text-3);padding:4px;border-radius:var(--r-sm);display:flex;align-items:center;transition:color var(--dur-fast)}
@media(hover:hover){.pulse-sm-prefs:hover{color:var(--accent)}}
.pulse-article-view{display:block;max-width:1180px;margin:0 auto}
.pulse-article-nav{display:flex;align-items:center;gap:8px;padding:2px 4px 14px;font-size:13px}
.pulse-article-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;padding:4px 0;font-size:13px;color:var(--text-2);cursor:pointer;transition:color .15s;font-family:inherit}
@media(hover:hover){.pulse-article-back:hover{color:var(--accent)}}
.pulse-article-back-hint{font-size:10px;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:1px 5px;font-family:ui-monospace,monospace;margin-left:2px;line-height:1.4}
.pulse-article-nav-sep{color:var(--text-3);font-size:14px;line-height:1}
.pulse-article-nav-crumb{color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.pulse-article-paper{width:100%;padding:0 28px 40px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
@media(max-width:900px){.pulse-article-paper{padding:0 18px 32px}}
.pulse-article-paper .pd-progress{position:static;margin:0 -28px 0}
@media(max-width:900px){.pulse-article-paper .pd-progress{margin:0 -18px 0}}
.pulse-article-paper .pd-hero{margin:0 -28px 0;width:calc(100% + 56px)}
@media(max-width:900px){.pulse-article-paper .pd-hero{margin:0 -18px 0;width:calc(100% + 36px)}}
.pulse-article-related-slot{margin-top:32px;padding:0 4px}
@media(max-width:900px){.pulse-article-related-slot{margin-top:24px;padding:0}}
/* ── Pulse Mobile (Phone) — Premium App-Reading-View ──────────────
Nur Phone (<=767px). Tablet/Desktop bleiben unveraendert. Ziel:
immersive, randlose Lese-Ansicht nach gaengiger App-Praxis
(Apple News / Medium): Modul-Sidebar weg, "Papier"-Chrome (Rahmen/
Schatten/Radius) entfaellt, App-Topbar mit rundem Zurueck-Button,
grosszuegigere Lese-Typografie. */
@media(max-width:767px){
/* Immersive: Kategorie-Selector-Chip im Lesemodus ausblenden,
damit der Artikel den ganzen Screen einnimmt. */
.pulse-reading-mode .sm-sidebar{display:none}
/* Lese-Bereich randlos: das 16px-Padding der sm-content aufheben,
damit Topbar und Hero bis an die Screen-Kanten reichen. Auch oben
weg, sonst bleibt zwischen App-Header und Topbar ein leerer
(gepunkteter) Streifen stehen. */
.pulse-article-view{max-width:none;margin:0 -16px}
.pulse-reading-mode .sm-content{padding-top:0}
/* App-Topbar: sticky am oberen Rand des Scroll-Containers (.sm-content
mit overflow-y:auto). NICHT top:52px — der globale 52px-Header zählt
hier nicht doppelt, da .sm-content bereits darunter beginnt; sonst
wird die Topbar um ~68px nach unten geschoben und hinterlässt einen
leeren Streifen. Back als runder Icon-Button, Titel zentriert. */
.pulse-article-nav{
position:sticky;top:0;z-index:40;
margin:0;padding:8px 12px;gap:10px;
background:color-mix(in srgb,var(--surface) 88%,transparent);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
}
.pulse-article-back{
width:36px;height:36px;min-width:36px;padding:0;
justify-content:center;flex-shrink:0;
border-radius:var(--r-full);background:var(--surface-2);color:var(--text);
}
.pulse-article-back > span,
.pulse-article-back-hint,
.pulse-article-nav-sep{display:none}
.pulse-article-nav-crumb{
flex:1;text-align:left;font-size:15px;font-weight:600;color:var(--text);
}
/* "Papier" wird zur randlosen Lese-Flaeche: kein Rahmen/Radius/
Schatten, volle Breite, sauberer --surface-Hintergrund. */
.pulse-article-paper{
border:none;border-radius:0;box-shadow:none;
padding:0 16px 32px;background:var(--surface);
}
.pulse-article-paper .pd-progress{margin:0 -16px 0}
.pulse-article-paper .pd-hero{margin:0 -16px 0;width:calc(100% + 32px);height:220px}
.pulse-article-related-slot{padding:0 16px}
}
/* ── Self-Service Portal (ss-*) ── */
.ss-sidebar-count{margin-left:auto;font-size:10px;color:var(--text-3)}
.ss-filter-bar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.ss-filter-bar-label{font-size:11px;font-weight:600;color:var(--text-3)}
.ss-active-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 12px;background:var(--accent-light,rgba(0,74,151,.07));border:1px solid var(--accent);border-radius:var(--r-full);font-size:11px;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:none;transition:background var(--dur) var(--ease-out)}
.ss-active-chip:hover{background:rgba(0,74,151,.13)}
.ss-active-chip--reset{background:transparent;border-color:var(--border);color:var(--text-3)}
.ss-active-chip--reset:hover{border-color:var(--text-3);color:var(--text-2);background:var(--surface-2,rgba(0,0,0,.04))}
.ss-active-chip-x{font-size:10px}
.ss-grid-header{display:flex;flex-direction:column;gap:5px;margin-bottom:20px}
.ss-back-link{font-size:11px;color:var(--text-3);cursor:pointer;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:3px;width:fit-content;transition:color var(--dur) var(--ease-out)}
.ss-back-link:hover{color:var(--accent)}
.ss-grid-title-row{display:flex;align-items:baseline;gap:10px}
.ss-grid-count{font-size:12px;color:var(--text-3);flex-shrink:0}
.ss-icon-wrap{display:flex;align-items:center;justify-content:center;line-height:1}
.ss-icon-wrap svg{width:18px;height:18px;flex-shrink:0}
.ss-icon-wrap--lg svg{width:26px;height:26px}
.ss-store-tile-icon svg{width:22px;height:22px}
.ss-ai-result-icon svg{width:20px;height:20px}
.ss-ai-ctx-chip-icon svg{width:14px;height:14px}
.ss-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
/* ss-card: Layout-Overrides oben auf .platform-card.platform-card--service */
/* ── Self-Service-Karte — Premium „Ruhig & Edel" ──────────────────────
Basis: .platform-card.platform-card--service. Der Akzent kommt aus der
Typ-Farbe via --fl-glow (Tool=amber, Antrag=accent, Auswertung=green):
dezente Gradient-Spine links + neutrales Icon-Medaillon, das beim Hover
die Typ-Farbe annimmt. Zurückhaltend, viel Luft. Nur Tokens, globaler
Radius var(--r) — keine Hex-/Custom-Werte. */
.ss-card{position:relative;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 32%,var(--surface)),var(--surface))}
.ss-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--fl-glow),color-mix(in srgb,var(--fl-glow) 25%,transparent));opacity:.6;transition:opacity var(--dur) var(--ease-out)}
@media (hover:hover){.ss-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--fl-glow) 30%,var(--border));box-shadow:0 18px 40px -24px rgba(0,0,0,.55)}.ss-card:hover::before{opacity:1}}
.ss-card-body{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:18px 18px 4px}
.ss-card-icon{font-size:20px;line-height:1;width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--border);color:color-mix(in srgb,var(--fl-glow) 52%,var(--text-2));transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.ss-card-icon svg{width:21px;height:21px}
.ss-card:hover .ss-card-icon{color:var(--fl-glow);border-color:color-mix(in srgb,var(--fl-glow) 35%,var(--border));background:color-mix(in srgb,var(--fl-glow) 8%,var(--surface-2))}
.ss-card-info{flex:1;min-width:0}
.ss-card-name{font-weight:700;font-size:16px;letter-spacing:-.015em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-card-meta{display:flex;align-items:center;gap:8px;margin-top:5px}
/* Typ-Label als zurückhaltender Kicker — nur in der Grid-Karte; Detail/Report behalten die Pille */
.ss-card .ss-badge{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;padding:0;border-radius:0;color:color-mix(in srgb,var(--fl-glow) 50%,var(--text-3));font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ss-card .ss-badge::before{content:'';width:5px;height:5px;border-radius:var(--r-full);background:var(--fl-glow)}
.ss-card-steps{font-size:11px;color:var(--text-3)}
.ss-card-desc{font-size:13px;color:var(--text-2);line-height:1.6;padding:12px 18px 0;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-card-footer{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px 18px;margin-top:auto;align-items:center}
.ss-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);display:inline-block}
.ss-badge--process{background:var(--accent);color:var(--on-accent,#fff)}
.ss-badge--report{background:var(--green,#16a34a);color:#fff}
.ss-badge--tool{background:var(--amber,#d97706);color:#fff}
.ss-badge--request{background:var(--blue,#0284c7);color:#fff}
.ss-cat-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--r-full);color:#fff;display:inline-block}
.ss-recent-label{font-size:10px;color:var(--text-3);margin-left:auto}
.ss-card-more{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:transparent;border:none;padding:4px 2px;font-size:12px;font-weight:600;color:var(--text-3);cursor:pointer;border-radius:var(--r);font-family:var(--font);transition:color var(--dur) var(--ease-out)}
.ss-card-more::after{content:'\2192';font-size:13px;line-height:1;transition:transform var(--dur) var(--ease-out)}
.ss-card-more:hover{color:var(--fl-glow)}
.ss-card:hover .ss-card-more::after,.ss-card-more:hover::after{transform:translateX(3px)}
.ss-card-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss-recent-label + .ss-card-more{margin-left:0}
.ss-fav-btn{cursor:pointer;font-size:17px;flex-shrink:0;margin-top:1px;color:var(--text-3);opacity:.4;user-select:none;transition:color var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out),transform var(--dur-fast,.12s) var(--ease-spring,ease)}
.ss-fav-btn:hover{opacity:1;color:var(--amber,#d97706)}
.ss-fav-btn--on{color:var(--amber,#d97706);opacity:1}
.ss-fav-btn--on:hover{transform:scale(1.2)}
.ss-empty{text-align:center;padding:72px 20px}
.ss-empty-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--r-lg);background:var(--surface-2,rgba(0,0,0,.05));margin:0 auto 16px}
.ss-empty-icon svg{width:24px;height:24px;color:var(--text-3)}
.ss-empty-title{font-size:15px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.ss-empty-text{font-size:13px;color:var(--text-3);line-height:1.5;max-width:360px;margin:0 auto 16px}
.ss-empty-cta{display:inline-block;padding:8px 20px;background:var(--surface-2,rgba(0,0,0,.04));border:1px solid var(--border);border-radius:var(--r-full);font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;text-decoration:none;transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.ss-empty-cta:hover{border-color:var(--accent);color:var(--accent)}
.ss-fly{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(540px,92vw);max-height:88vh;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg,0 20px 60px rgba(0,0,0,.18));z-index:1001;display:flex;flex-direction:column;animation:ssModalIn var(--dur-slow,.32s) var(--ease-out,ease-out)}
.ss-fly.bottom-sheet{position:static;top:auto;left:auto;transform:none;width:100%;max-width:100vw;max-height:calc(90vh - var(--safe-top));border-radius:var(--r-lg) var(--r-lg) 0 0;animation:bottomSheetUp var(--dur-slow) var(--ease-out)}
.ss-fly-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay);z-index:1000}
.ss-fly-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:14px}
.ss-fly-icon{font-size:30px;line-height:1;width:52px;height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md)}
.ss-fly-icon--process{background:rgba(0,74,151,.07)}
.ss-fly-icon--report{background:rgba(22,163,74,.08)}
.ss-fly-icon--tool{background:rgba(217,119,6,.08)}
.ss-fly-title{font-weight:700;font-size:16px;line-height:1.35}
.ss-fly-close{background:none;border:none;cursor:pointer;font-size:20px;color:var(--text-3);padding:4px;line-height:1;transition:color var(--dur) var(--ease-out);flex-shrink:0}
.ss-fly-close:hover{color:var(--text)}
.ss-fly-body{flex:1;overflow-y:auto;padding:24px}
.ss-fly-desc{font-size:13px;color:var(--text-2);line-height:1.65;margin-bottom:20px}
.ss-fly-hierarchy{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 16px;padding:8px 12px;background:var(--surface-2,rgba(0,0,0,.04));border-radius:var(--r);font-size:11px;line-height:1.4}
.ss-fly-hier-item{color:var(--text-2);font-weight:500}
.ss-fly-hier-item--category{color:var(--text);font-weight:600}
.ss-fly-hier-sep{color:var(--text-3);font-weight:400}
.ss-fly-meta{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.ss-fly-meta li{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-2)}
.ss-fly-meta li>span:first-child{font-size:14px;flex-shrink:0;line-height:1.4}
.ss-fly-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3)}
.ss-sidebar-section-label{padding:10px 10px 2px;font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.ss-sidebar-section-label--top{padding:8px 12px 2px;font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.ss-sidebar-subitem{padding-left:24px;font-size:12px;color:var(--text-2)}
.ss-sidebar-search-wrap{padding:10px 12px 4px}
.ss-sidebar-search-field{position:relative}
.ss-sidebar-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.ss-sidebar-search-input{width:100%;padding:7px 8px 7px 30px;border:1px solid var(--border);border-radius:var(--r);font-size:12px;font-family:var(--font);outline:none;background:var(--surface-2,rgba(0,0,0,.04));box-sizing:border-box;color:var(--text);transition:border-color var(--dur) var(--ease-out)}
.ss-sidebar-search-input:hover{border-color:var(--text-3)}
.ss-sidebar-search-input:focus{border-color:var(--accent)}
.ss-mobile-toolbar{display:flex;align-items:center;gap:6px;padding:8px 0 12px}
.ss-mobile-typechips{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;flex-wrap:nowrap}
.ss-fly-recent{color:var(--text-3)}
.ss-fav-toggle{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;padding:9px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--font);color:var(--text);transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.ss-fav-toggle:hover{border-color:var(--amber,#d97706)}
.ss-fav-toggle--on{background:rgba(217,119,6,.06);border-color:var(--amber,#d97706);color:var(--amber,#d97706)}
.ss-fly-footer{padding:16px 24px;border-top:1px solid var(--border)}
.ss-action-btn{width:100%;padding:13px;border:none;border-radius:var(--r);font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;color:#fff;transition:opacity var(--dur) var(--ease-out),transform var(--dur-fast,.12s) var(--ease-out)}
.ss-action-btn:hover{opacity:.88}
.ss-action-btn:active{transform:scale(.98)}
/* Report-Modal (zentriert, kein Fly-In) */
@keyframes ssModalIn{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ss-modal-backdrop{position:fixed;inset:0;background:var(--overlay);z-index:1000}
.ss-rmodal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(540px,92vw);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg,0 20px 60px rgba(0,0,0,.18));z-index:1001;display:flex;flex-direction:column;max-height:88vh;animation:ssModalIn var(--dur-slow,.32s) var(--ease-out,ease-out)}
.ss-rmodal-header{padding:24px 24px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:16px}
.ss-rmodal-icon{width:52px;height:52px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;background:rgba(22,163,74,.08)}
.ss-rmodal-title{font-size:18px;font-weight:800;line-height:1.3;color:var(--text);margin-bottom:7px}
.ss-rmodal-body{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.ss-rmodal-section{}
.ss-rmodal-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-3);margin-bottom:8px}
.ss-rmodal-desc{font-size:14px;color:var(--text-2);line-height:1.72;margin:0}
.ss-rmodal-chips{display:flex;flex-wrap:wrap;gap:7px}
.ss-rmodal-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);font-size:12px;font-weight:500;color:var(--text-2)}
.ss-rmodal-chip--area{background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.22);color:var(--green,#16a34a)}
.ss-rmodal-recent{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);padding-top:4px}
.ss-rmodal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.ss-rmodal-footer .ss-fav-toggle{width:auto;flex:1;max-width:200px}
.ss-rmodal-footer .ss-action-btn{width:auto;padding:12px 24px;flex-shrink:0}
.ss-action-btn--process{background:var(--accent)}
.ss-action-btn--report{background:var(--green,#16a34a)}
.ss-action-btn--tool{background:var(--amber,#d97706)}
.ss-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay);z-index:1100;display:flex;align-items:center;justify-content:center}
.ss-dialog{background:var(--surface);border-radius:var(--r-lg);padding:28px;width:420px;max-width:90vw;box-shadow:var(--shadow-lg);animation:ssDialogIn var(--dur,.2s) var(--ease-spring,ease-out)}
.ss-dialog-title{font-size:16px;font-weight:700;margin-bottom:18px}
.ss-dialog-field{margin-bottom:16px}
.ss-dialog-label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:5px}
.ss-dialog-input{width:100%;padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--r);font-size:13px;font-family:var(--font);box-sizing:border-box;outline:none;transition:border-color var(--dur) var(--ease-out)}
.ss-dialog-actions{display:flex;gap:8px;justify-content:flex-end}
.ss-btn-primary{padding:8px 20px;border:none;border-radius:var(--r);background:var(--accent);color:var(--on-accent,#fff);cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font);transition:opacity var(--dur) var(--ease-out)}
.ss-btn-primary:hover{opacity:.88}
.ss-btn-primary:disabled{opacity:.5;cursor:default}
.ss-btn-secondary{padding:8px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text-2);cursor:pointer;font-size:13px;font-family:var(--font);transition:border-color var(--dur) var(--ease-out)}
.ss-btn-secondary:hover{border-color:var(--text-3)}
@keyframes ssFlyIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes ssDialogIn{from{transform:translateY(10px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
/* ── Self-Service: KI-App-Store ── */
/* Mode-Toggle */
.ss-root{display:flex;flex-direction:column;height:100%}
.ss-mode-bar{display:flex;align-items:center;justify-content:center;padding:10px 20px;border-bottom:1px solid var(--border);background:var(--surface)}
/* .ss-mode-btn--active wird weiterhin von .ss-quick-pick (Mobile-Typ-Chips) genutzt */
.ss-mode-btn--active{background:var(--bg);border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06))}
/* KI-Modus: Haupt-Layout */
.ss-ai-layout{position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:calc(100vh - 108px);padding-bottom:60px}
/* Hero-Verdichtung: der lp-mc-Header ("Hallo …") traegt den Titel, die
Suchbar sitzt direkt darunter — kein doppelter vertikaler Auftakt. */
.ss-ai-layout > .pulse-mc--search.pulse-aurora{padding-top:0;margin-top:-4px}
/* ─ Wiederverwendbarer Cockpit-Background (für AI-orientierte Pages) ──
Dunkler Verlauf (fix am Viewport, scrollt NICHT mit) + dezentes Dot-
Pattern (scrollt mit dem Inhalt). Opt-in per Klasse — kann auf jedem
Page-Container gesetzt werden, der einen dunklen, immersiven Look
bekommen soll (Self-Service AI-Modus, Wissenszentrum-Suche, …).
Inhalte innerhalb müssen für dunkle Flächen passend gefärbt sein
(siehe Scoped-Overrides weiter unten). */
/* Wenn fl-cockpit-bg direkter Inhalts-Container ist, soll der Hintergrund
randlos bis an die sm-content-Kante reichen (keine Padding-Inseln). */
.sm-content:has(> .fl-cockpit-bg){padding-top:0;padding-left:0;padding-right:0}
.fl-cockpit-bg{position:relative;color:var(--on-ink);background-color:var(--surface-ink);background-image:radial-gradient(ellipse 70% 55% at 18% 22%,rgba(86,198,255,.07) 0%,transparent 60%),radial-gradient(ellipse 65% 60% at 82% 78%,rgba(43,123,214,.06) 0%,transparent 60%),linear-gradient(135deg,var(--surface-ink) 0%,var(--surface-ink-soft) 100%);background-attachment:fixed,fixed,fixed;background-repeat:no-repeat;background-size:cover}
/* Dot-Pattern in zwei Ebenen — oben enger, nach unten grösserer Abstand
und auslaufend (1:1 die Charakteristik, die das Wissenszentrum bislang
via .sm-content::before/::after hatte, hier für dunklen Grund mit
weisser Tönung). Scrollt MIT dem Inhalt. */
.fl-cockpit-bg::before{content:'';position:absolute;left:0;right:0;top:0;height:280px;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(255,255,255,.13) .9px,transparent .9px);background-size:6px 6px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 45%,transparent 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 45%,transparent 100%)}
.fl-cockpit-bg::after{content:'';position:absolute;left:0;right:0;top:0;height:50vh;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:14px 14px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 22%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.35) 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 22%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.35) 72%,transparent 100%)}
.fl-cockpit-bg > *{position:relative;z-index:1}
/* Scoped-Overrides: bestehende Light-Theme-Hero-Shell (Wissenszentrum)
auf dunklen Cockpit-Hintergrund umfärben, damit Text/Inputs lesbar
bleiben — ohne die Light-Variante woanders zu beeinflussen. */
.fl-cockpit-bg .ss-ai-eyebrow{background:rgba(86,198,255,.10);border-color:rgba(86,198,255,.25);color:#9ED9FF}
.fl-cockpit-bg .ss-ai-eyebrow svg{color:#56C6FF}
.fl-cockpit-bg .ss-ai-title{color:var(--on-ink)}
.fl-cockpit-bg .ss-ai-sub{color:var(--on-ink-muted)}
.fl-cockpit-bg .ss-ai-input-wrap{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);box-shadow:none;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.fl-cockpit-bg .ss-ai-input-wrap:focus-within{border-color:rgba(86,198,255,.6);background:rgba(255,255,255,.10);box-shadow:0 0 0 4px rgba(86,198,255,.16)}
.fl-cockpit-bg .ss-ai-input{color:var(--on-ink)}
.fl-cockpit-bg .ss-ai-input::placeholder{color:rgba(255,255,255,.5)}
.fl-cockpit-bg .ss-quick-pick{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--on-ink)}
.fl-cockpit-bg .ss-quick-pick:hover{background:rgba(255,255,255,.11);border-color:rgba(86,198,255,.45);color:var(--on-ink)}
.fl-cockpit-bg .wz-bereich-label{color:rgba(244,247,251,.6)}
.fl-cockpit-bg .wz-wiki-tile{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:var(--on-ink)}
.fl-cockpit-bg .wz-wiki-tile:hover{background:rgba(255,255,255,.09);border-color:rgba(86,198,255,.35)}
.fl-cockpit-bg .wz-wiki-name{color:var(--on-ink)}
.fl-cockpit-bg .wz-wiki-pages{color:rgba(244,247,251,.55)}
.fl-cockpit-bg .sp-lib-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:var(--on-ink)}
.fl-cockpit-bg .sp-lib-card:hover{background:rgba(255,255,255,.09);border-color:rgba(86,198,255,.35)}
.fl-cockpit-bg .sp-lib-card__name{color:var(--on-ink)}
.fl-cockpit-bg .sp-lib-badge{background:rgba(255,255,255,.10);color:rgba(244,247,251,.75);border-color:rgba(255,255,255,.14)}
/* Wissenszentrum-Antwortzustand: q-echo und Followup-Input liegen ausserhalb der Karte */
.fl-cockpit-bg .wz-q-echo{color:rgba(244,247,251,.78)}
.fl-cockpit-bg .wz-followup-input{background:rgba(255,255,255,.07);color:var(--on-ink);border-color:rgba(255,255,255,.18)}
.fl-cockpit-bg .wz-followup-input::placeholder{color:rgba(255,255,255,.5)}
.fl-cockpit-bg .wz-followup-input:focus{border-color:rgba(86,198,255,.6)}
.fl-cockpit-bg .wz-phase-status{color:rgba(244,247,251,.7)}
.fl-cockpit-bg .wz-phase-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--on-ink-muted)}
.fl-cockpit-bg .wz-phase-pill--active{background:rgba(86,198,255,.18);border-color:rgba(86,198,255,.45);color:#9ED9FF}
/* ─ Self-Service Hero v5: AI-Cockpit ──────────────────────────
Kompakter Hero — Background liegt fixed auf .ss-ai-layout, der Hero
selbst ist transparent. KI (Orb) bleibt das Zentrum, alles dezenter. */
/* Self-Service Hero — kontainte Aurora-Card (Stil analog .pulse-aurora):
Page-Bg bleibt Standard (sm-content::before/::after-Dots), die Karte
selbst trägt die radialen Aurora-Akzente + Surface/Border/Shadow. */
.ss-hero-v5{position:relative;width:auto;max-width:none;margin:-24px -24px 22px;overflow:visible;border-radius:0;background:transparent;color:var(--text);border:none;box-shadow:none;padding:clamp(40px,5vw,72px) 0 clamp(18px,2.4vw,28px);isolation:isolate}
.ss-hero-v5::before{content:'';position:absolute;inset:0 -5% -40% -5%;z-index:-2;opacity:.42;pointer-events:none;background:radial-gradient(42% 55% at 14% 28%,color-mix(in srgb,var(--accent) 55%,transparent) 0%,transparent 65%),radial-gradient(50% 60% at 92% 18%,color-mix(in srgb,#8a5bff 40%,transparent) 0%,transparent 65%),radial-gradient(48% 58% at 78% 100%,color-mix(in srgb,#ff8a5b 32%,transparent) 0%,transparent 65%),radial-gradient(58% 78% at 0% 100%,color-mix(in srgb,#00c8b4 28%,transparent) 0%,transparent 65%);filter:blur(10px) saturate(110%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);animation:ssHeroV5Drift 22s ease-in-out infinite alternate}
.ss-hero-v5::after{content:'';position:absolute;inset:0 -5% -10% -5%;z-index:-1;opacity:.5;pointer-events:none;background:radial-gradient(60% 80% at 28% 32%,color-mix(in srgb,var(--text) 6%,transparent) 0%,transparent 60%),radial-gradient(70% 90% at 82% 68%,color-mix(in srgb,var(--text) 4%,transparent) 0%,transparent 65%);filter:blur(28px) saturate(105%);mix-blend-mode:soft-light;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%)}
html.dark .ss-hero-v5::before{opacity:.6}
html.dark .ss-hero-v5::after{opacity:.7;mix-blend-mode:screen}
@keyframes ssHeroV5Drift{0%{transform:translate3d(-2%,-1%,0) scale(1.02)}50%{transform:translate3d(2%,1%,0) scale(1.06)}100%{transform:translate3d(-1%,2%,0) scale(1.02)}}
@media(prefers-reduced-motion:reduce){.ss-hero-v5::before{animation:none}}
.ss-hero-v5-grid,.ss-hero-v5-ambient,.ss-hero-v5-stage{display:none}
.ss-hero-v5-inner{position:static;width:100%;max-width:calc(960px + 24px);margin:0;padding:0 56px;box-sizing:border-box;display:block}
@media(max-width:768px){.ss-hero-v5-inner{padding:0 44px;max-width:calc(960px + 24px)}}
@media(max-width:520px){.ss-hero-v5-inner{padding:0 40px;max-width:calc(960px + 24px)}}
@media(max-width:820px){.ss-hero-v5-inner{gap:0}}
.ss-hero-v5-content{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-right:0}
.ss-hero-v5-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:var(--r-full,9999px);background:linear-gradient(135deg,rgba(0,74,151,.09),rgba(79,140,255,.11));border:1px solid rgba(0,74,151,.16);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.10em;text-transform:uppercase;margin-bottom:14px}
.ss-hero-v5-eyebrow svg{color:var(--accent)}
html.dark .ss-hero-v5-eyebrow{background:rgba(86,198,255,.10);border-color:rgba(86,198,255,.25);color:#9ED9FF}
html.dark .ss-hero-v5-eyebrow svg{color:#56C6FF}
.ss-hero-v5-title{font-family:var(--font-display);font-size:clamp(26px,3.2vw,38px);line-height:1.14;letter-spacing:var(--display-tracking,-0.02em);font-weight:600;color:var(--text);margin:0 0 10px;text-align:left}
.ss-hero-v5-name{background:var(--accent-gradient,linear-gradient(135deg,#004A97 0%,#2B7BD6 60%,#56C6FF 100%));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.ss-hero-v5-sub{margin:0 0 20px;max-width:46ch;text-align:left;font-size:13.5px;color:var(--text-2);line-height:1.55}
.ss-hero-v5-sub strong{color:var(--text);font-weight:600}
/* Rechte Spalte: Orb mit dezentem Glow (analog .ss-ai-illus / .ss-ai-illus-svg im Wissenszentrum) */
.ss-hero-v5-illus{position:absolute;top:50%;left:auto;right:clamp(32px,6vw,120px);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:clamp(200px,22vw,260px);height:clamp(200px,22vw,260px);margin:0;pointer-events:none;opacity:.95;z-index:0}
.ss-hero-v5-orb{position:relative;z-index:2;color:var(--accent);line-height:0}
.ss-hero-v5-orb svg{width:100%;height:100%;display:block;overflow:visible;max-width:240px;max-height:240px}
.ss-hero-v5-orb-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120%;height:120%;border-radius:50%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 28%,transparent) 0%,color-mix(in srgb,var(--accent) 12%,transparent) 40%,transparent 72%);filter:blur(28px);opacity:.7;pointer-events:none;animation:ssHeroV5Glow 6s ease-in-out infinite}
@keyframes ssHeroV5Glow{0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.96)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.ss-hero-v5-orb-glow{animation:none}}
@media(max-width:1280px){.ss-hero-v5-illus{display:none}}
/* AI-Suchleiste — Glassmorphism mit dezentem Glow, voll linksbündig in der Content-Spalte */
.ss-hero-v5-bar-wrap{position:relative;width:100%;max-width:520px;margin-top:0}
.ss-hero-v5-bar-glow{position:absolute;inset:-4px;border-radius:var(--r);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 25%,transparent),color-mix(in srgb,var(--accent) 12%,transparent));filter:blur(14px);opacity:.25;pointer-events:none;animation:ssHeroV5BarGlow 7s ease-in-out infinite}
@keyframes ssHeroV5BarGlow{0%,100%{opacity:.18;transform:scale(.99)}50%{opacity:.32;transform:scale(1.015)}}
@media(prefers-reduced-motion:reduce){.ss-hero-v5-bar-glow{animation:none}}
.ss-hero-v5-bar{position:relative;display:flex;align-items:center;background:var(--surface-card,var(--surface));border:1.5px solid var(--border);border-radius:var(--r);box-shadow:0 2px 8px rgba(0,0,0,.05);transition:border-color .2s,box-shadow .2s}
.ss-hero-v5-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light),0 2px 8px rgba(0,0,0,.05)}
html.dark .ss-hero-v5-bar{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
html.dark .ss-hero-v5-bar:focus-within{background:rgba(255,255,255,.10);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.ss-hero-v5-bar-leading{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none;display:flex;align-items:center}
.ss-hero-v5-bar .ss-hero-v5-bar-input{width:100%;padding:14px 122px 14px 48px;border:none;background:transparent;outline:none;font-size:14.5px;font-family:var(--font);color:var(--text);box-sizing:border-box;border-radius:var(--r)}
.ss-hero-v5-bar .ss-hero-v5-bar-input::placeholder{color:var(--text-3)}
.ss-hero-v5-bar-kbd{position:absolute;right:58px;top:50%;transform:translateY(-50%);display:inline-flex;gap:2px;padding:3px 6px;border-radius:var(--r);background:var(--surface-2,rgba(0,0,0,.05));border:1px solid var(--border);color:var(--text-3);font-size:10.5px;font-weight:600;line-height:1;pointer-events:none;font-family:var(--font);transition:opacity .15s,transform .15s}
.ss-hero-v5-bar-kbd span{padding:0 2px;font-variant-numeric:tabular-nums}
html.dark .ss-hero-v5-bar-kbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.ss-hero-v5-bar:focus-within .ss-hero-v5-bar-kbd{opacity:0;transform:translateY(-50%) scale(.85)}
.ss-hero-v5-bar-send{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 32%,transparent);transition:transform .15s,box-shadow .15s,opacity .15s,background .15s;padding:0}
.ss-hero-v5-bar-send:not(:disabled):hover{transform:translateY(-50%) scale(1.08);background:var(--accent-dark,#003a78);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 45%,transparent)}
.ss-hero-v5-bar-send:active{transform:translateY(-50%) scale(.94)}
.ss-hero-v5-bar-send:disabled{opacity:0;pointer-events:none;transform:translateY(-50%) scale(.7)}
@media(max-width:560px){.ss-hero-v5-bar .ss-hero-v5-bar-input{padding:13px 100px 13px 44px;font-size:14px}}
/* Quick-Picks unter dem Bar — linksbündig in der Content-Spalte */
.ss-hero-v5-picks{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;max-width:520px;margin-top:12px}
.ss-hero-v5-pick{padding:5px 12px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font);transition:border-color .15s,color .15s,background .15s,transform .15s}
.ss-hero-v5-pick:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light,rgba(0,74,151,.05));transform:translateY(-1px)}
/* Stat-Strip — kompakte Glance-Zeile unter dem Hero, volle Inner-Breite */
.ss-hero-v5-stats{position:relative;z-index:1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-start;margin:18px 0 0;padding:14px 56px 0;border-top:1px solid var(--border);width:100%;max-width:calc(960px + 24px);box-sizing:border-box}
@media(max-width:768px){.ss-hero-v5-stats{padding:14px 44px 0}}
@media(max-width:520px){.ss-hero-v5-stats{padding:14px 40px 0}}
.ss-hero-v5-stat{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--text-2);font-size:12px;transition:color .15s}
.ss-hero-v5-stat:hover{color:var(--text)}
.ss-hero-v5-stat-num{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ss-hero-v5-stat-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);animation:ssHeroV5Dot 2s ease-in-out infinite}
.ss-hero-v5-stat-dot--accent{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.ss-hero-v5-stat--urgent{color:var(--amber,#d97706)}
.ss-hero-v5-stat--urgent .ss-hero-v5-stat-num{color:var(--amber,#d97706)}
.ss-hero-v5-stat--urgent .ss-hero-v5-stat-dot{background:var(--amber,#d97706);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber,#d97706) 22%,transparent)}
.ss-hero-v5-stat--urgent:hover{color:var(--amber-dark,#b45309)}
.ss-hero-v5-stat--muted{color:var(--text-3)}
.ss-hero-v5-stat--muted .ss-hero-v5-stat-num{color:var(--text-2);font-size:13.5px}
.ss-hero-v5-stat-arrow{transition:transform .15s}
.ss-hero-v5-stat--urgent:hover .ss-hero-v5-stat-arrow{transform:translateX(3px)}
.ss-hero-v5-stat-spacer{flex:1;min-width:8px}
@keyframes ssHeroV5Dot{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 30%,transparent)}}
@media(prefers-reduced-motion:reduce){.ss-hero-v5-stat-dot{animation:none}}
@media(max-width:560px){.ss-hero-v5-stats{gap:14px}.ss-hero-v5-stat-spacer{display:none}}
@media(max-width:560px){.ss-hero-v5{padding:20px 14px 16px}.ss-hero-v5-title{font-size:clamp(20px,5.5vw,28px)}}
.ss-ai-hero-shell{width:100%;max-width:960px;padding:52px 32px 40px;display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:center}
.ss-ai-hero-content{display:flex;flex-direction:column;align-items:flex-start}
.ss-ai-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:var(--r-full);background:linear-gradient(135deg,rgba(0,74,151,.09),rgba(79,140,255,.11));border:1px solid rgba(0,74,151,.16);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.4px;margin-bottom:16px}
.ss-ai-title{font-size:32px;font-weight:800;color:var(--text);line-height:1.18;margin:0 0 12px;letter-spacing:-.6px}
.ss-ai-sub{font-size:14px;color:var(--text-2);margin:0 0 28px;line-height:1.65;max-width:420px}
.ss-ai-input-wrap{position:relative;width:100%;max-width:520px;background:var(--surface-card,var(--surface));border-radius:var(--r-full,9999px);border:1.5px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.05);transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.ss-ai-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light),0 2px 8px rgba(0,0,0,.05)}
html.dark .ss-ai-input-wrap{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
html.dark .ss-ai-input-wrap:focus-within{border-color:var(--accent);background:rgba(255,255,255,.10);box-shadow:0 0 0 3px var(--accent-light)}
.ss-ai-input{width:100%;padding:15px 52px 15px 22px;border:none;border-radius:var(--r-full,9999px);font-size:15px;font-family:var(--font);outline:none;background:transparent;color:var(--text);box-sizing:border-box}
.ss-ai-input::placeholder{color:var(--text-3)}
.ss-ai-send{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;padding:0;transition:background var(--dur) var(--ease-out),transform var(--dur-fast,.12s) var(--ease-out),opacity var(--dur) var(--ease-out)}
.ss-ai-send:not(:disabled):hover{background:var(--accent-dark);transform:translateY(-50%) scale(1.08)}
.ss-ai-send:active{transform:translateY(-50%) scale(.93)}
.ss-ai-send:disabled{opacity:0;pointer-events:none;cursor:default;transform:translateY(-50%) scale(.7)}
.ss-quick-picks{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.ss-quick-pick{padding:6px 13px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface-card,var(--surface));font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;font-family:var(--font);transition:all var(--dur) var(--ease-out);line-height:1.4}
.ss-quick-pick:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light,rgba(0,74,151,.05))}
/* SVG-Illustration */
.ss-ai-illus{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ss-ai-illus-svg{width:260px;height:260px;color:var(--accent);overflow:visible}
@keyframes ssAiPulse{0%,100%{opacity:.06}50%{opacity:.22}}
@keyframes ssAiFlow{to{stroke-dashoffset:-18}}
.ss-ai-pulse{transform-origin:150px 150px;filter:blur(6px);animation:ssAiPulse 5s ease-in-out infinite;will-change:opacity}
@media(prefers-reduced-motion:reduce){.ss-ai-pulse{animation:none}.ss-ai-flow{animation:none}}
.ss-ai-flow{animation:ssAiFlow 2.4s linear infinite}
/* Hub Orb — Kontext-Hilfsklassen */
.hub-orb-hero{display:flex;align-items:center;justify-content:center}
.hub-orb-decoration{opacity:.35;pointer-events:none;user-select:none}
.hub-orb-empty{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 20px;color:var(--text-3);text-align:center}
.hub-orb-empty p{font-size:14px;max-width:260px;margin:0}
/* Hub Orb — Interaktive Knoten (CSS-only Hover, kein JS erforderlich) */
.hub-orb-interactive .orb-node-halo,.hub-orb-interactive .orb-node-core{transition:opacity var(--dur-fast)}
@media(hover:hover){
.hub-orb-interactive .orb-node:hover .orb-node-halo{opacity:.2!important}
.hub-orb-interactive .orb-node:hover .orb-node-core{opacity:.52!important}
}
.hub-orb-interactive .orb-node[data-clickable]{cursor:pointer}
/* KI-Ergebnis-Liste — Breite folgt dem Plattform-Standard (.page--wide,
1400px), passend zum lp-mc-Cover (max-width 1400). So fluchtet der
Landing-Body kantenbuendig mit dem Bleed-Hero (.ss-root
.pulse-aurora-inner: ebenfalls 1400px + gleiche Inline-Padding-Clamp)
und mit dem Katalog-Modus. */
.ss-ai-body{width:100%;max-width:1400px;margin-inline:auto;padding:0 clamp(20px,2vw,32px);box-sizing:border-box}
/* Self-Service-Bleed-Heros (KI-Suchbar + Katalog-Cover) auf dieselbe
Breite wie lp-mc-Cover/Body ziehen — der globale pulse-aurora-inner
bleibt bei 1180px (Pulse/Wissenszentrum). Nur innerhalb .ss-root. */
.ss-root .pulse-aurora-inner{max-width:1400px;padding-inline:clamp(20px,2vw,32px)}
/* Header-Inhalt (lp-mc-inner: 1400 zentriert, ohne Innen-Padding)
kantenbuendig zum Body bringen: derselbe Innen-Inset wie
.ss-ai-body / page--wide / pulse-aurora-inner (clamp 20/2vw/32).
Nur Self-Service — der globale lp-mc-Cover (WZ, Ticket-Center …)
bleibt unberuehrt. */
.ss-root .lp-mc-inner{padding-inline:clamp(20px,2vw,32px)}
.ss-ai-results-hdr{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ss-ai-results-label{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px}
.ss-ai-results-count{font-size:11px;color:var(--text-3)}
.ss-ai-result-list{display:flex;flex-direction:column;gap:8px;margin-bottom:32px}
/* ss-ai-result: Layout-Overrides oben auf .platform-card.platform-card--row */
.ss-ai-result{gap:14px;padding:14px 18px}
.ss-ai-result-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.ss-ai-result-icon--process{background:rgba(0,74,151,.08);color:var(--accent)}
.ss-ai-result-icon--report{background:rgba(22,163,74,.08);color:var(--green,#16a34a)}
.ss-ai-result-icon--tool{background:rgba(217,119,6,.08);color:var(--amber,#d97706)}
.ss-ai-result-icon--request{background:rgba(2,132,199,.10);color:var(--blue,#0284c7)}
.ss-ai-result-body{flex:1;min-width:0}
.ss-ai-result-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-ai-result-meta{display:flex;align-items:center;gap:6px;margin-top:3px}
.ss-ai-result-desc{font-size:11px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-ai-result-cta{flex-shrink:0;padding:7px 14px;border:none;border-radius:var(--r);font-size:12px;font-weight:700;font-family:var(--font);cursor:pointer;color:#fff;transition:opacity var(--dur) var(--ease-out)}
.ss-ai-result-cta:hover{opacity:.88}
.ss-ai-result-cta--process{background:var(--accent)}
.ss-ai-result-cta--report{background:var(--green,#16a34a)}
.ss-ai-result-cta--tool{background:var(--amber,#d97706)}
.ss-ai-result-cta--request{background:var(--blue,#0284c7)}
.ss-ai-result-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ss-ai-result-fav{background:none;border:none;cursor:pointer;font-size:16px;color:var(--text-3);opacity:.5;padding:4px 6px;line-height:1;transition:color var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out),transform var(--dur-fast,.12s) var(--ease-out)}
.ss-ai-result-fav:hover{opacity:1;color:var(--amber,#d97706)}
.ss-ai-result-fav--on{color:var(--amber,#d97706);opacity:1}
.ss-ai-result-fav--on:hover{transform:scale(1.2)}
.ss-ai-thinking{display:flex;align-items:center;gap:10px;padding:20px 4px;color:var(--text-3);font-size:13px}
.ss-ai-thinking-dots{display:flex;gap:4px}
.ss-ai-thinking-dots span{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.3;animation:ss-thinking-pulse 1.2s ease-in-out infinite}
.ss-ai-thinking-dots span:nth-child(2){animation-delay:.2s}
.ss-ai-thinking-dots span:nth-child(3){animation-delay:.4s}
@keyframes ss-thinking-pulse{0%,80%,100%{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.ss-ai-thinking-dots span{animation:none;opacity:.5}}
.ss-ai-clarification{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;background:var(--surface-2,var(--surface));border:1px solid var(--border);border-radius:var(--r-md);font-size:12px;color:var(--text-2);margin-bottom:12px;line-height:1.5}
.ss-ai-no-match{text-align:center;padding:36px 20px;color:var(--text-3);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ss-ai-no-match strong{font-size:15px;font-weight:600;color:var(--text-2)}
.ss-ai-no-match span{line-height:1.5}
.ss-ai-catalog-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border:1.5px solid var(--accent);border-radius:var(--r-full);background:transparent;color:var(--accent);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--font);transition:all var(--dur) var(--ease-out);margin-top:4px}
.ss-ai-catalog-cta:hover{background:var(--accent-light,rgba(0,74,151,.07));box-shadow:var(--shadow-sm)}
.ss-ai-ctx-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
/* ss-ai-ctx-tile: Layout-Overrides oben auf .platform-card.platform-card--row */
.ss-ai-ctx-tile{gap:10px;padding:12px 16px;font-size:13px;font-weight:500;color:var(--text)}
.ss-ai-ctx-tile:hover{color:var(--accent)}
.ss-ai-ctx-tile-icon{width:28px;height:28px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--surface-2,rgba(0,0,0,.04))}
.ss-ai-ctx-tile-icon svg{width:14px;height:14px}
.ss-ai-ctx-tile-count{margin-left:auto;font-size:11px;color:var(--text-3);flex-shrink:0}
/* KI-Kontext (Favoriten + Zuletzt + Status) */
.ss-ai-context{display:flex;flex-direction:column;gap:28px;margin-bottom:16px}
.ss-ai-ctx-label{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;display:flex;align-items:center;gap:4px}
.ss-ai-ctx-badge{margin-left:auto;background:var(--accent);color:#fff;border-radius:var(--r-full);font-size:10px;font-weight:700;padding:1px 7px;letter-spacing:0}
.ss-ai-ctx-chips{display:flex;gap:8px;flex-wrap:wrap}
/* ss-ai-ctx-chip: Layout-Overrides oben auf .platform-card.platform-card--row (inline-flex statt flex) */
.ss-ai-ctx-chip{display:inline-flex;gap:8px;padding:9px 16px;font-size:12px;font-weight:500;color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm)}
.ss-ai-ctx-chip:hover{color:var(--accent)}
.ss-ai-ctx-chip-icon{width:28px;height:28px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--surface-2,rgba(0,0,0,.04))}
/* Status-Listen (Aufgaben / Laufende Anträge) */
.ss-ai-status-list{display:flex;flex-direction:column;gap:6px}
.ss-ai-status-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);font-size:12px}
.ss-ai-status-item--task{border-left:3px solid var(--amber,#d97706)}
.ss-ai-status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);flex-shrink:0}
.ss-ai-status-dot--active{background:var(--accent)}
.ss-ai-status-name{font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-ai-status-step,.ss-ai-status-meta{font-size:11px;color:var(--text-3);flex-shrink:0;white-space:nowrap}
/* App-Store-Kacheln (Katalog-Modus) */
.ss-store-section{margin:0 0 32px}
.ss-store-section-head{margin:0 0 12px}
/* Kapitel-Titel: identisches Bild wie .ss-zone-title (Akzent-Balken +
16px/700), damit Katalog- und KI-Landing-Modus durchgängig wirken. */
.ss-store-section-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;margin:0;color:var(--text);letter-spacing:-.1px}
.ss-store-section-sub{font-size:13px;color:var(--text-2);margin:4px 0 0 13px}
.ss-store-tile--service{border-left:3px solid var(--accent)}
.ss-store-tile--link{text-decoration:none}
.ss-sidebar-subsection-label{padding:6px 12px 2px;font-size:10px;font-weight:600;color:var(--text-3);letter-spacing:.3px}
.ss-store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
/* ss-store-tile: Layout-Overrides oben auf .platform-card.platform-card--tile */
.ss-store-tile{padding:20px 18px 16px;gap:0}
.ss-store-tile-icon{width:44px;height:44px;border-radius:var(--r-md);background:var(--surface-2,rgba(0,0,0,.05));display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px;transition:background var(--dur)}
.ss-store-tile:hover .ss-store-tile-icon{background:var(--accent-light,rgba(0,74,151,.09))}
.ss-store-tile-name{font-weight:700;font-size:13px;color:var(--text);line-height:1.35;margin-bottom:4px}
.ss-store-tile-count{font-size:11px;color:var(--text-3);margin-top:auto;padding-top:10px}
/* Mobile Katalog Filter */
.ss-mobile-filter-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);font-size:11px;font-weight:600;font-family:var(--font);color:var(--text-2);cursor:pointer;flex-shrink:0;position:relative;transition:all var(--dur) var(--ease-out)}
.ss-mobile-filter-btn svg{width:12px;height:12px}
.ss-mobile-filter-btn--active{border-color:var(--accent);color:var(--accent)}
.ss-mobile-filter-dot{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ss-mobile-filter-sheet{padding-bottom:env(safe-area-inset-bottom,0)}
.ss-mobile-filter-handle{width:36px;height:4px;border-radius:var(--r);background:var(--border);margin:10px auto 4px}
.ss-mobile-filter-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 12px}
.ss-mobile-filter-title{font-weight:700;font-size:15px}
.ss-mobile-filter-section{padding:0 16px 16px}
.ss-mobile-filter-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.ss-mobile-filter-chips{display:flex;gap:6px;flex-wrap:wrap}
/* Responsive KI-Hero */
@media(max-width:820px){
.ss-ai-hero-shell{grid-template-columns:1fr;gap:0;padding:36px 20px 28px}
.ss-ai-illus{display:none}
.ss-ai-body{padding:0 20px}
.ss-ai-input-wrap{max-width:100%}
}
@media(max-width:480px){
.ss-ai-hero-shell{padding:24px 16px 20px}
.ss-ai-title{font-size:24px}
.ss-ai-body{padding:0 16px}
}
/* ════════════════════════════════════════════════════════════════
Self-Service — Modernisierte Landing (v2)
Trends: persönliche Begrüssung, Bento-Grid-Hierarchie, klare
Priorisierung (urgent → laufend → empfohlen/zuletzt → favoriten)
════════════════════════════════════════════════════════════════ */
/* Hero v2 — Single-Focal-Point mit dezentem Orb-Hintergrund */
.ss-ai-hero-shell--v2{position:relative;display:block;max-width:780px;padding:64px 32px 32px;text-align:left;overflow:visible}
.ss-ai-hero-content--centered{position:relative;z-index:2;align-items:flex-start}
.ss-ai-hero-bg{position:absolute;top:-40px;right:-40px;width:340px;height:340px;opacity:.45;pointer-events:none;z-index:1;display:flex;align-items:center;justify-content:center;filter:blur(.3px)}
.ss-ai-hero-bg :deep(svg),.ss-ai-hero-bg svg{transform:scale(.9)}
html.dark .ss-ai-hero-bg{opacity:.32}
.ss-ai-meta-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.ss-ai-date{font-size:11px;color:var(--text-3);text-transform:capitalize;letter-spacing:.2px}
.ss-ai-title--v2{font-size:38px;line-height:1.12;letter-spacing:-.8px;margin:0 0 8px;font-weight:700;color:var(--text)}
.ss-ai-name{background:linear-gradient(135deg,var(--accent),var(--accent-dark,#003a78));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent);font-weight:800}
.ss-ai-sub--v2{font-size:17px;color:var(--text-2);margin:0 0 32px;line-height:1.5;font-weight:400}
/* Input v2 — der klare Focal Point */
.ss-ai-input-wrap--v2{max-width:640px;padding:0;border-radius:var(--r);background:var(--surface);border:1px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.ss-ai-input-wrap--v2:hover{box-shadow:0 6px 32px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.04)}
.ss-ai-input-wrap--v2:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-light),0 8px 32px rgba(0,74,151,.12);transform:translateY(-1px)}
html.dark .ss-ai-input-wrap--v2{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);box-shadow:0 4px 24px rgba(0,0,0,.3)}
html.dark .ss-ai-input-wrap--v2:focus-within{background:rgba(255,255,255,.08)}
.ss-ai-input-leading{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--text-3);display:flex;align-items:center;pointer-events:none;z-index:2}
.ss-ai-input-leading svg{width:18px;height:18px}
.ss-ai-input--v2{padding:18px 60px 18px 50px;font-size:16px;border-radius:var(--r)}
/* Quick-Picks v2 — visuell dezenter */
.ss-quick-picks--v2{margin-top:20px;align-items:center;gap:8px}
.ss-quick-picks-label{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-right:2px}
.ss-quick-picks--v2 .ss-quick-pick{padding:5px 11px;font-size:11.5px;background:transparent;border-color:var(--border)}
/* ── Kontext v2: priorisierte Zonen ── */
.ss-ai-context--v2{display:flex;flex-direction:column;gap:24px;margin-bottom:32px}
/* Priority Card — urgent (Aufgaben) */
.ss-priority-card{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--r);background:var(--surface-card,var(--surface));border:1px solid var(--border);text-decoration:none;color:var(--text);cursor:pointer;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.ss-priority-card:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.ss-priority-card--urgent{background:linear-gradient(135deg,rgba(217,119,6,.08),rgba(217,119,6,.03));border-color:rgba(217,119,6,.25);border-left:4px solid var(--amber,#d97706)}
html.dark .ss-priority-card--urgent{background:linear-gradient(135deg,rgba(217,119,6,.14),rgba(217,119,6,.05));border-color:rgba(217,119,6,.35)}
.ss-priority-card--urgent:hover{border-color:rgba(217,119,6,.45);box-shadow:0 6px 24px rgba(217,119,6,.15)}
.ss-priority-card-icon{width:44px;height:44px;border-radius:var(--r);background:var(--amber,#d97706);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(217,119,6,.3)}
.ss-priority-card-body{flex:1;min-width:0}
.ss-priority-card-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:2px}
.ss-priority-card-desc{font-size:12.5px;color:var(--text-2);line-height:1.4}
.ss-priority-card-arrow{font-size:18px;color:var(--text-3);flex-shrink:0;transition:transform var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.ss-priority-card:hover .ss-priority-card-arrow{transform:translateX(3px);color:var(--amber,#d97706)}
/* Zone — Sektion (Zwischenebene zwischen Priority und Bento) */
.ss-zone{display:flex;flex-direction:column;gap:10px}
.ss-zone--muted{opacity:.92}
.ss-zone-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px 2px}
.ss-zone-title{font-size:16px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.1px;line-height:1.3}
.ss-zone-title--small{font-size:12px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.ss-zone-title-accent{color:var(--accent)}
.ss-zone-count{font-size:11px;font-weight:600;color:var(--text-3);background:var(--surface-2,rgba(0,0,0,.05));padding:2px 9px;border-radius:var(--r-full)}
html.dark .ss-zone-count{background:rgba(255,255,255,.08)}
/* Direktzugriff Typen-Karten — die 4 Service-Typen als lernende Tiles.
Premium-Tile: groessere Icon-Flaeche, Akzent-Topbar beim Hover,
ausgepraegterer Lift. Fuellt bei 1180px-Body sauber 4-spaltig. */
.ss-typecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ss-typecard{position:relative;display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--surface-card,var(--surface));border:1px solid var(--border);border-radius:var(--r);cursor:pointer;text-decoration:none;color:var(--text);overflow:hidden;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.ss-typecard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity var(--dur) var(--ease-out)}
.ss-typecard:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.ss-typecard:hover::before{opacity:.7}
.ss-typecard--request:hover::before{background:linear-gradient(90deg,transparent,var(--blue,#0284c7),transparent)}
.ss-typecard--report:hover::before{background:linear-gradient(90deg,transparent,var(--green,#16a34a),transparent)}
.ss-typecard--tool:hover::before{background:linear-gradient(90deg,transparent,var(--amber,#d97706),transparent)}
html.dark .ss-typecard{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.ss-typecard-icon{width:46px;height:46px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(0,74,151,.08);color:var(--accent);transition:transform var(--dur) var(--ease-out)}
.ss-typecard:hover .ss-typecard-icon{transform:scale(1.06)}
.ss-typecard-icon svg{width:22px;height:22px}
.ss-typecard--request .ss-typecard-icon{background:rgba(2,132,199,.10);color:var(--blue,#0284c7)}
.ss-typecard--report .ss-typecard-icon{background:rgba(22,163,74,.10);color:var(--green,#16a34a)}
.ss-typecard--tool .ss-typecard-icon{background:rgba(217,119,6,.10);color:var(--amber,#d97706)}
.ss-typecard-iconwrap{position:relative;flex-shrink:0}
.ss-typecard-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ss-typecard-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.25}
.ss-typecard-desc{font-size:12px;color:var(--text-2);line-height:1.4}
.ss-typecard-count{position:absolute;top:-6px;right:-6px;box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1;color:var(--text-3);background:var(--surface-2,rgba(0,0,0,.05));border:2px solid var(--surface-card,var(--surface));border-radius:var(--r-full)}
html.dark .ss-typecard-count{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.08)}
/* Landing-Top-Bento — Direktzugriff (primaer) + Laufende Anträge (Rail)
nebeneinander. Ohne laufende Vorgaenge fuellt Direktzugriff die Breite. */
.ss-landing-top{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.ss-landing-top--rail{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
@media(max-width:880px){.ss-landing-top--rail{grid-template-columns:1fr}}
/* Service-Katalog nach Abteilung — Cards mit Service-Liste */
.ss-dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ss-dept-card{display:flex;flex-direction:column;background:var(--surface-card,var(--surface));border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.ss-dept-card:hover{border-color:var(--text-3);box-shadow:0 4px 14px rgba(0,0,0,.05)}
html.dark .ss-dept-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.ss-dept-hdr{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
html.dark .ss-dept-hdr{border-color:rgba(255,255,255,.08)}
.ss-dept-icon{width:28px;height:28px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:rgba(0,74,151,.08);color:var(--accent);flex-shrink:0}
.ss-dept-icon svg{width:14px;height:14px}
.ss-dept-name{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-dept-total{font-size:11px;font-weight:600;color:var(--text-3);background:var(--surface-2,rgba(0,0,0,.05));padding:2px 9px;border-radius:var(--r-full)}
html.dark .ss-dept-total{background:rgba(255,255,255,.08)}
.ss-dept-services{display:flex;flex-direction:column;padding:6px 6px 8px}
.ss-dept-service{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r);cursor:pointer;text-decoration:none;color:var(--text);font-size:12.5px;transition:background var(--dur-fast,.12s) var(--ease-out)}
.ss-dept-service:hover{background:var(--surface-2,rgba(0,0,0,.04))}
html.dark .ss-dept-service:hover{background:rgba(255,255,255,.06)}
.ss-dept-service-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-dept-service-count{font-size:11px;color:var(--text-3);flex-shrink:0}
.ss-dept-service--more{color:var(--accent);font-weight:600}
/* Compact-Variante des Cover-Headers (Self-Service-Landing) */
.lp-mc--compact{padding-bottom:8px}
.lp-mc--compact .lp-mc-title{font-size:clamp(28px,4vw,36px);margin-bottom:4px}
.lp-mc--compact .lp-mc-sub{font-size:14px;color:var(--text-2)}
/* Running list — laufende Anträge */
.ss-running-list{display:flex;flex-direction:column;gap:6px}
.ss-running-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);transition:border-color var(--dur) var(--ease-out)}
.ss-running-item:hover{border-color:var(--text-3)}
.ss-running-pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:ssRunPulse 2s ease-in-out infinite;flex-shrink:0}
@keyframes ssRunPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,74,151,.45)}50%{box-shadow:0 0 0 6px rgba(0,74,151,0)}}
@media(prefers-reduced-motion:reduce){.ss-running-pulse{animation:none}}
.ss-running-body{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ss-running-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-running-step{font-size:11.5px;color:var(--text-3)}
/* Bento — Empfohlen + Zuletzt nebeneinander */
.ss-bento{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:720px){.ss-bento{grid-template-columns:1fr;gap:16px}}
.ss-bento-cell{padding:18px 18px 14px;background:var(--surface-card,var(--surface));border:1px solid var(--border);border-radius:var(--r);box-shadow:0 1px 3px rgba(0,0,0,.03);transition:box-shadow var(--dur) var(--ease-out)}
.ss-bento-cell:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
html.dark .ss-bento-cell{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
/* Suggest list — Empfehlungs- und Recent-Items */
.ss-suggest-list{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.ss-suggest-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:var(--r);cursor:pointer;text-decoration:none;color:var(--text);transition:background var(--dur-fast,.12s) var(--ease-out),padding var(--dur-fast,.12s)}
.ss-suggest-item:hover{background:var(--surface-2,rgba(0,0,0,.04));padding-left:12px}
html.dark .ss-suggest-item:hover{background:rgba(255,255,255,.06)}
.ss-suggest-icon{width:30px;height:30px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ss-suggest-icon svg{width:14px;height:14px}
.ss-suggest-icon--process{background:rgba(0,74,151,.08);color:var(--accent)}
.ss-suggest-icon--report{background:rgba(22,163,74,.10);color:var(--green,#16a34a)}
.ss-suggest-icon--tool{background:rgba(217,119,6,.10);color:var(--amber,#d97706)}
.ss-suggest-icon--request{background:rgba(2,132,199,.10);color:var(--blue,#0284c7)}
.ss-suggest-name{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-suggest-time{font-size:11px;color:var(--text-3);flex-shrink:0;white-space:nowrap}
.ss-suggest-arrow{color:var(--text-3);font-size:16px;flex-shrink:0;transition:transform var(--dur-fast,.12s) var(--ease-out),color var(--dur-fast,.12s)}
.ss-suggest-item:hover .ss-suggest-arrow{transform:translateX(2px);color:var(--accent)}
/* Leerzustand der Landing — gestalteter Erstnutzer-Hinweis statt leerer Seite */
.ss-landing-empty{display:flex;align-items:center;gap:18px;padding:24px;border:1px dashed var(--border);border-radius:var(--r);background:linear-gradient(135deg,var(--accent-light,rgba(0,74,151,.04)),transparent)}
html.dark .ss-landing-empty{border-color:rgba(255,255,255,.12)}
.ss-landing-empty-icon{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(0,74,151,.08);color:var(--accent)}
.ss-landing-empty-icon svg{width:22px;height:22px}
.ss-landing-empty-body{flex:1;min-width:0}
.ss-landing-empty-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px}
.ss-landing-empty-text{font-size:13px;color:var(--text-2);line-height:1.5;margin:0;max-width:62ch}
.ss-landing-empty-cta{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:9px 18px;border-radius:var(--r);background:var(--accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:background var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.ss-landing-empty-cta:hover{background:var(--accent-dark,#003a78);transform:translateX(2px)}
@media(max-width:600px){.ss-landing-empty{flex-direction:column;align-items:flex-start;text-align:left}}
/* Favoriten v2 — dezente Chip-Reihe */
.ss-fav-chips{display:flex;flex-wrap:wrap;gap:6px}
.ss-fav-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);font-size:12px;color:var(--text-2);cursor:pointer;text-decoration:none;transition:all var(--dur-fast,.12s) var(--ease-out)}
.ss-fav-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light,rgba(0,74,151,.05))}
.ss-fav-chip-star{color:var(--amber,#d97706);font-size:11px;line-height:1}
/* Quickaccess (Erstnutzer-Zustand) */
.ss-quickaccess-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ss-quickaccess-tile{display:flex;align-items:center;gap:10px;padding:14px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur)}
.ss-quickaccess-tile:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 20px rgba(0,74,151,.10)}
.ss-quickaccess-icon{width:32px;height:32px;border-radius:var(--r);background:var(--surface-2,rgba(0,0,0,.04));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ss-quickaccess-name{flex:1;font-size:13px;font-weight:600;color:var(--text)}
.ss-quickaccess-count{font-size:11px;color:var(--text-3);font-weight:600;background:var(--surface-2,rgba(0,0,0,.05));padding:2px 8px;border-radius:var(--r-full)}
/* Responsive Hero v2 */
@media(max-width:820px){
.ss-ai-hero-shell--v2{padding:40px 20px 24px;text-align:left}
.ss-ai-title--v2{font-size:28px}
.ss-ai-sub--v2{font-size:15px;margin-bottom:24px}
.ss-ai-input--v2{padding:15px 56px 15px 46px;font-size:15px}
.ss-ai-hero-bg{display:none}
}
@media(max-width:480px){
.ss-ai-hero-shell--v2{padding:28px 16px 20px}
.ss-ai-title--v2{font-size:24px;letter-spacing:-.5px}
.ss-ai-sub--v2{font-size:14px;margin-bottom:20px}
.ss-quick-picks-label{display:none}
}
/* ════════════════════════════════════════════════════════════════
Self-Service — v3 (Mesh-Gradient, Command-Bar, Bento-Asymmetrie)
Inspirationen: Linear, Raycast, Vercel-Dashboard, Stripe
════════════════════════════════════════════════════════════════ */
/* Hero v3 — Mesh-Gradient */
.ss-ai-hero-shell--v3{position:relative;display:block;max-width:820px;padding:72px 32px 36px;text-align:left;overflow:hidden}
.ss-ai-mesh{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;filter:blur(60px);opacity:.7}
html.dark .ss-ai-mesh{opacity:.5}
.ss-ai-mesh-blob{position:absolute;display:block;border-radius:50%;will-change:transform}
.ss-ai-mesh-blob--1{top:-120px;left:-80px;width:380px;height:380px;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:.22;animation:ssMeshFloat1 18s ease-in-out infinite}
.ss-ai-mesh-blob--2{top:-60px;right:-100px;width:340px;height:340px;background:radial-gradient(circle,var(--green,#16a34a) 0%,transparent 70%);opacity:.12;animation:ssMeshFloat2 22s ease-in-out infinite}
.ss-ai-mesh-blob--3{bottom:-120px;left:30%;width:280px;height:280px;background:radial-gradient(circle,var(--amber,#d97706) 0%,transparent 70%);opacity:.10;animation:ssMeshFloat3 25s ease-in-out infinite}
@keyframes ssMeshFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.08)}}
@keyframes ssMeshFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(.94)}}
@keyframes ssMeshFloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-30px) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.ss-ai-mesh-blob{animation:none}}
/* Eyebrow v3 mit Live-Dot */
.ss-ai-eyebrow--v3{background:rgba(0,74,151,.06);border:1px solid rgba(0,74,151,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html.dark .ss-ai-eyebrow--v3{background:rgba(79,140,255,.12);border-color:rgba(79,140,255,.22)}
.ss-ai-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:ssEbDot 2.4s ease-in-out infinite}
@keyframes ssEbDot{0%,100%{box-shadow:0 0 0 0 rgba(0,74,151,.4)}50%{box-shadow:0 0 0 5px rgba(0,74,151,0)}}
@media(prefers-reduced-motion:reduce){.ss-ai-eyebrow-dot{animation:none}}
.ss-ai-title--v3{font-size:42px;line-height:1.08;letter-spacing:-1px;margin:0 0 6px;font-weight:700;color:var(--text)}
.ss-ai-sub--v3{font-size:17px;color:var(--text-2);margin:0 0 22px;line-height:1.5;font-weight:400}
/* Status-Strip — sofortige Übersicht in einer Zeile */
.ss-status-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.ss-status-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);font-size:12px;font-weight:500;color:var(--text-2);text-decoration:none;transition:all var(--dur) var(--ease-out);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html.dark .ss-status-pill{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.ss-status-pill-num{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.ss-status-pill-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(0,74,151,.15)}
.ss-status-pill--urgent{background:linear-gradient(135deg,rgba(217,119,6,.12),rgba(217,119,6,.05));border-color:rgba(217,119,6,.3);color:var(--amber,#d97706);cursor:pointer}
.ss-status-pill--urgent .ss-status-pill-num{color:var(--amber,#d97706);font-weight:800}
.ss-status-pill--urgent:hover{background:linear-gradient(135deg,rgba(217,119,6,.18),rgba(217,119,6,.08));border-color:rgba(217,119,6,.5);transform:translateY(-1px)}
.ss-status-pill--muted{opacity:.85}
/* Command-Bar — Linear/Raycast-Style mit ⌘K-Hint */
.ss-cmdbar{position:relative;width:100%;max-width:680px;display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 8px 32px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ss-cmdbar:hover{box-shadow:0 12px 36px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.04)}
.ss-cmdbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-light),0 12px 40px rgba(0,74,151,.14);transform:translateY(-1px)}
html.dark .ss-cmdbar{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.4)}
html.dark .ss-cmdbar:focus-within{background:rgba(255,255,255,.08)}
.ss-cmdbar-leading{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--text-3);display:flex;align-items:center;pointer-events:none;z-index:2}
.ss-cmdbar-leading svg{width:18px;height:18px}
.ss-cmdbar-input{width:100%;padding:18px 110px 18px 52px;border:none;border-radius:var(--r);font-size:16px;font-family:var(--font);outline:none;background:transparent;color:var(--text);box-sizing:border-box}
.ss-cmdbar-input::placeholder{color:var(--text-3)}
.ss-cmdbar-kbd{position:absolute;right:58px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:2px;padding:3px 5px;background:var(--surface-2,rgba(0,0,0,.05));border:1px solid var(--border);border-radius:var(--r);font-size:10.5px;font-weight:600;color:var(--text-3);font-family:var(--font);pointer-events:none;line-height:1}
.ss-cmdbar-kbd span{padding:0 3px;font-variant-numeric:tabular-nums}
html.dark .ss-cmdbar-kbd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.ss-cmdbar:focus-within .ss-cmdbar-kbd{opacity:0;transform:translateY(-50%) scale(.8);transition:opacity var(--dur),transform var(--dur)}
.ss-cmdbar-send{right:10px;width:36px;height:36px}
/* Priority Card v3 — mit echtem CTA-Button */
.ss-priority-card-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r);background:var(--amber,#d97706);color:#fff;font-size:12.5px;font-weight:700;flex-shrink:0;box-shadow:0 2px 8px rgba(217,119,6,.25);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.ss-priority-card:hover .ss-priority-card-cta{transform:translateX(2px);box-shadow:0 4px 14px rgba(217,119,6,.4)}
/* Zone v3 — Header mit Akzent-Balken */
.ss-zone-title{display:flex;align-items:center;gap:10px}
.ss-zone-title-bar{display:inline-block;width:3px;height:14px;border-radius:var(--r);background:var(--text-3);flex-shrink:0}
.ss-zone-title-bar--accent{background:linear-gradient(180deg,var(--accent),var(--accent-dark,#003a78))}
.ss-zone-link{font-size:12px;color:var(--text-3);text-decoration:none;font-weight:500;transition:color var(--dur)}
.ss-zone-link:hover{color:var(--accent)}
.ss-zone-hint{font-size:11px;color:var(--text-3);font-weight:400}
/* Running list v3 — als Link mit Progress-Bar */
.ss-running-item{cursor:pointer;text-decoration:none;color:var(--text);position:relative;overflow:hidden;transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur)}
.ss-running-item:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 4px 16px rgba(0,74,151,.08)}
.ss-running-meta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:2px}
.ss-running-progress{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;background:var(--surface-2,rgba(0,0,0,.04));padding:1px 7px;border-radius:var(--r-full)}
html.dark .ss-running-progress{background:rgba(255,255,255,.06)}
.ss-running-bar{height:3px;background:var(--surface-2,rgba(0,0,0,.06));border-radius:var(--r-full);margin-top:8px;overflow:hidden}
html.dark .ss-running-bar{background:rgba(255,255,255,.06)}
.ss-running-bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-dark,#003a78));border-radius:var(--r-full);transition:width .6s var(--ease-out)}
.ss-running-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:18px;opacity:0;transition:opacity var(--dur),transform var(--dur)}
.ss-running-item:hover .ss-running-arrow{opacity:1;transform:translateY(-50%) translateX(3px);color:var(--accent)}
/* Bento v3 — asymmetrisch (Empfohlen 2/3, Zuletzt 1/3) */
.ss-bento--asym{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;align-items:start}
.ss-bento--single{display:grid;grid-template-columns:1fr;gap:16px}
@media(max-width:820px){.ss-bento--asym{grid-template-columns:1fr}}
.ss-bento-cell--primary{padding:20px 22px 16px;border-radius:var(--r);background:var(--surface-card,var(--surface));border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.04);position:relative;transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur);overflow:hidden}
.ss-bento-cell--primary::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity var(--dur) var(--ease-out)}
.ss-bento-cell--primary:hover{box-shadow:0 8px 24px rgba(0,0,0,.07)}
.ss-bento-cell--primary:hover::before{opacity:.7}
.ss-bento-cell--secondary{padding:18px 18px 14px;border-radius:var(--r);background:var(--surface-card,var(--surface));border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.03);transition:box-shadow var(--dur),border-color var(--dur)}
.ss-bento-cell--secondary:hover{box-shadow:0 4px 14px rgba(0,0,0,.05)}
html.dark .ss-bento-cell--primary,html.dark .ss-bento-cell--secondary{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
/* Suggest items v3 — Primary mit Hover-CTA, Secondary kompakter */
.ss-suggest-item{position:relative;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:var(--r)}
.ss-suggest-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ss-suggest-desc{font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.ss-suggest-cta{font-size:11.5px;font-weight:600;color:var(--accent);opacity:0;transform:translateX(-4px);transition:opacity var(--dur-fast,.12s) var(--ease-out),transform var(--dur-fast,.12s);flex-shrink:0;align-self:center;white-space:nowrap}
.ss-suggest-item:hover .ss-suggest-cta{opacity:1;transform:translateX(0)}
.ss-suggest-list--compact{gap:1px}
.ss-suggest-item--compact{padding:8px 10px;align-items:center;gap:10px}
.ss-suggest-item--compact .ss-suggest-name{font-size:12.5px;font-weight:500}
/* Type-Dot — kompakter Indikator für Tools/Reports/Processes */
.ss-type-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block;box-shadow:0 0 0 3px rgba(0,74,151,.08)}
.ss-type-dot--process{background:var(--accent);box-shadow:0 0 0 3px rgba(0,74,151,.10)}
.ss-type-dot--report{background:var(--green,#16a34a);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.ss-type-dot--tool{background:var(--amber,#d97706);box-shadow:0 0 0 3px rgba(217,119,6,.12)}
.ss-type-dot--request{background:var(--blue,#0284c7);box-shadow:0 0 0 3px rgba(2,132,199,.12)}
/* Favoriten v3 — kompakte Chips mit Type-Dot statt Stern */
.ss-fav-chip{padding:6px 12px 6px 10px;gap:7px}
.ss-fav-chip:hover .ss-type-dot{box-shadow:0 0 0 4px rgba(0,74,151,.15)}
/* Verfeinerte Responsive für v3 */
@media(max-width:820px){
.ss-ai-hero-shell--v3{padding:44px 20px 26px}
.ss-ai-title--v3{font-size:30px}
.ss-ai-sub--v3{font-size:15px;margin-bottom:20px}
.ss-cmdbar-input{padding:15px 100px 15px 48px;font-size:15px}
.ss-status-strip{margin-bottom:22px}
}
@media(max-width:480px){
.ss-ai-hero-shell--v3{padding:28px 16px 20px}
.ss-ai-title--v3{font-size:24px;letter-spacing:-.6px}
.ss-ai-sub--v3{font-size:14px;margin-bottom:18px}
.ss-cmdbar-input{padding:14px 56px 14px 44px;font-size:14px}
.ss-cmdbar-kbd{display:none}
.ss-cmdbar-input{padding-right:56px}
.ss-priority-card{flex-wrap:wrap}
.ss-priority-card-cta{width:100%;justify-content:center;margin-top:4px}
}
/* ════════════════════════════════════════════════════════════════
Self-Service — v4 (Spotlight/Command-Center)
Kein Greeting (vermeidet Doppelung zur Hub-Landing), reine
Action-Surface. Inspiration: Raycast, Apple Spotlight, Linear ⌘K
════════════════════════════════════════════════════════════════ */
.ss-spotlight{width:100%;max-width:960px;padding:16px 32px 28px;margin:0 auto;display:flex;flex-direction:column;gap:20px;box-sizing:border-box}
/* Topbar — schmaler Page-Context, kein Hero-Titel */
.ss-spotlight-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:4px;flex-wrap:wrap}
.ss-spotlight-lead{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--text-2);min-width:0}
.ss-spotlight-mark{width:24px;height:24px;border-radius:var(--r);background:linear-gradient(135deg,var(--accent),var(--accent-dark,#003a78));color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(0,74,151,.22)}
.ss-spotlight-page{font-weight:700;color:var(--text);font-size:13px}
.ss-spotlight-sep{color:var(--text-3);opacity:.5;font-weight:300}
.ss-spotlight-question{color:var(--text-2);font-weight:400}
.ss-spotlight-stats{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.ss-spotlight-stats strong{color:var(--text);font-weight:700}
.ss-spotlight-stats-sep{opacity:.5}
/* Search-Karte — die eigentliche Hero-Komponente, mit weichem Glow */
/* Spotlight-Card: rein layouten — kein Card-Chrome mehr, die Suchleiste trägt sich selbst */
.ss-spotlight-card{position:relative;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}
html.dark .ss-spotlight-card{background:transparent;border:none;box-shadow:none}
/* Centered-Cmdbar: trägt nun selbst Background + subtilen Border (statt heavy Card) */
.ss-cmdbar--centered{background:color-mix(in srgb,var(--surface-2) 84%,transparent);border:1px solid var(--border);border-radius:var(--r);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.ss-cmdbar--centered:hover{border-color:var(--text-3);box-shadow:none}
.ss-cmdbar--centered:focus-within{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light,rgba(0,74,151,.14));transform:none}
html.dark .ss-cmdbar--centered{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
html.dark .ss-cmdbar--centered:hover{border-color:rgba(255,255,255,.18)}
html.dark .ss-cmdbar--centered:focus-within{background:rgba(255,255,255,.07);border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,140,255,.20)}
.ss-cmdbar--centered .ss-cmdbar-input{padding:14px 110px 14px 48px;font-size:15px;font-weight:500}
.ss-cmdbar--centered .ss-cmdbar-input::placeholder{font-weight:400;color:var(--text-3)}
/* Picks-Reihe: flache Inline-Chips unter der Suchleiste — kein Separator-Border mehr */
.ss-spotlight-picks{display:flex;align-items:center;gap:10px;padding:14px 4px 0;flex-wrap:wrap;border-top:none;margin-top:0}
.ss-spotlight-picks-label{font-size:10.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.ss-spotlight-picks-row{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.ss-spotlight-pick{padding:5px 11px;border-radius:var(--r);border:1px solid var(--border);background:transparent;font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;font-family:var(--font);transition:all var(--dur-fast,.12s) var(--ease-out);line-height:1.3;white-space:nowrap}
.ss-spotlight-pick:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light,rgba(0,74,151,.05));transform:translateY(-1px)}
/* Glance-Bar — kompakte Status-Summary unter der Karte */
.ss-spotlight-glance{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 4px}
.ss-glance-item{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r);background:transparent;border:1px solid var(--border);font-size:12px;color:var(--text-2);text-decoration:none;transition:all var(--dur-fast,.12s) var(--ease-out)}
.ss-glance-num{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;font-size:13px}
.ss-glance-label{font-weight:500}
.ss-glance-dot{width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.ss-glance-dot--active{background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:ssGlancePulse 2.2s ease-in-out infinite}
@keyframes ssGlancePulse{0%,100%{box-shadow:0 0 0 0 rgba(0,74,151,.4)}50%{box-shadow:0 0 0 5px rgba(0,74,151,0)}}
@media(prefers-reduced-motion:reduce){.ss-glance-dot--active{animation:none}}
.ss-glance-arrow{color:var(--text-3);font-size:14px;transition:transform var(--dur) var(--ease-out),color var(--dur)}
.ss-glance-item--urgent{background:linear-gradient(135deg,rgba(217,119,6,.10),rgba(217,119,6,.03));border-color:rgba(217,119,6,.28);cursor:pointer}
.ss-glance-item--urgent .ss-glance-num{color:var(--amber,#d97706)}
.ss-glance-item--urgent:hover{background:linear-gradient(135deg,rgba(217,119,6,.16),rgba(217,119,6,.06));border-color:rgba(217,119,6,.5);transform:translateY(-1px)}
.ss-glance-item--urgent:hover .ss-glance-arrow{transform:translateX(3px);color:var(--amber,#d97706)}
.ss-glance-item--muted{opacity:.85}
/* Responsive */
@media(max-width:820px){
.ss-spotlight{padding:14px 20px 24px;gap:16px}
.ss-spotlight-topbar{flex-direction:column;align-items:flex-start;gap:6px}
.ss-spotlight-question{display:none}
.ss-cmdbar--centered .ss-cmdbar-input{padding:15px 100px 15px 48px;font-size:15px}
}
@media(max-width:480px){
.ss-spotlight{padding:10px 14px 20px}
.ss-spotlight-stats{font-size:11px;gap:6px;flex-wrap:wrap}
.ss-cmdbar--centered .ss-cmdbar-input{padding:14px 56px 14px 44px;font-size:14px}
.ss-spotlight-picks{padding-left:8px;padding-right:8px}
.ss-spotlight-picks-label{display:none}
}
/* ── Responsive ── */
@media(max-width:900px){
.spa-nav{display:none}
.spa-header{padding:0 12px;gap:8px}
/* Header-Toolbar mobil entschlacken: nur Suche, Scan, Notifications + Avatar.
Sekundäre Aktionen (KI, App Store, Hilfe, Page-Access, Feedback, Presence)
sind über Command-Palette/Drawer bzw. Desktop erreichbar. */
.tb-actions .tb-hide-mobile{display:none !important}
.pm-menu{width:calc(100vw - 32px);right:-8px}
.notif-panel{width:calc(100vw - 32px);right:-8px}
.notif-toast{min-width:auto;max-width:calc(100vw - 32px)}
/* Sidebar → horizontaler Pill-Tab-Streifen */
.spa-page-layout{flex-direction:column;min-height:auto}
.sm-sidebar{
width:100%;min-width:0;max-height:none;border-right:none;border-bottom:1px solid var(--border);
padding:8px 12px;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;gap:6px;
position:sticky;top:52px;z-index:50;
background:var(--surface);
}
.sm-header{display:none}
.sm-item{
white-space:nowrap;border-bottom:none;padding:8px 14px;font-size:13px;
min-height:40px;border-radius:var(--r-full);
background:transparent;transition:background var(--dur-fast),color var(--dur-fast);
flex-shrink:0;
}
.sm-item::before{display:none}
.sm-item:hover{background:var(--surface-2)}
.sm-item.active{background:var(--accent);color:var(--on-accent);font-weight:600}
.sm-item.active:hover{background:var(--accent)}
.sm-item.active .sm-nav-icon{color:var(--on-accent)}
.sm-content{padding:16px}
.sm-group-toggle{display:none}
.sm-group-items{max-height:none !important;display:flex;flex-direction:row;overflow-x:auto;gap:6px}
.sm-group-items .sm-item{white-space:nowrap;border-bottom:none;padding:8px 14px;font-size:13px;min-height:40px;border-radius:var(--r-full)}
.sm-group-items .sm-item::before{display:none}
/* Zen-Mode mobile */
.zen-stepper{display:none}
.zen-content{max-width:100%;padding:16px 16px 80px}
.zen-mobile-dots{display:flex}
.zen-mobile-bottom{display:flex}
.zen-header{padding:10px 12px;gap:8px}
.zen-header-title{font-size:13px}
.zen-fly-panel{width:100%;max-width:100%}
.lp-page{padding:16px 16px 48px}
.lp-hero-v2{padding:16px;min-height:auto}
.lp-hero-fullbleed{padding:0 16px 16px}
.lp-hero-fullbleed--s{height:96px}
.lp-hero-fullbleed--m{height:130px}
.lp-hero-fullbleed--l{height:170px}
.lp-hero-fullbleed--xl{height:210px}
.lp-hero-greeting{font-size:18px}
.lp-hero-orb{display:none}
/* Globaler Mobile-Hide für Marken-Orbs (CLAUDE-MOBILE: keine Orbs auf Phone).
Pages, die das Orb explizit behalten wollen (z.B. Login-Hero), setzen
opts.mobileKeep=true → data-mobile-keep="true". */
.fl-hub-orb:not([data-mobile-keep]){display:none !important}
.lp-hero-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lp-hero-chips::-webkit-scrollbar{display:none}
.lp-top-grid,.lp-mid-grid,.lp-main-row,.lp-secondary{grid-template-columns:1fr !important}
/* Pulse: Single Featured-Artikel auf Phone, Full-Width-Block */
.lp-pulse-layout,.lp-pulse-layout--single{display:block !important;height:auto !important;max-width:100%;overflow:hidden}
.lp-pulse-featured{width:100%;max-width:100%;height:auto !important}
.lp-pulse-featured-img{aspect-ratio:16/9;flex:none;min-height:0;max-height:none}
.lp-pulse-featured-body{padding:14px 16px 16px}
.lp-pulse-featured-body--overlay{padding:32px 16px 16px}
.lp-pulse-featured-title{font-size:15px}
/* Quick-Zugriff: 4 Spalten → 2×N */
.lp-quick-grid{grid-template-columns:repeat(2,1fr) !important}
.lp-picker-grid{grid-template-columns:repeat(2,1fr)}
.lp-picker-modal{max-width:100%;max-height:90vh}
.lp-quick-remove{opacity:1}
/* Meine Arbeit Statistiken kompakter */
.lp-work-stat-count{font-size:18px}
}
@media(max-width:600px){
.sm-item{padding:7px 12px;font-size:12px;min-height:36px}
.spa-drawer{max-width:min(75vw,300px)}
}
@media(prefers-reduced-motion:reduce){
.spa-drawer,.spa-drawer-overlay{transition:none}
}
/* ── Dark Mode ── */
html.dark{
color-scheme:dark;
--bg:#1c2430;--surface:#232e3d;--surface-2:#2b3848;--surface-3:#232e3d;
--surface-card:rgba(35,46,61,.58);
--border:#3a4e62;--border-focus:#4a8fcc;
--accent:#4a8fcc;--accent-light:rgba(74,143,204,.14);--accent-dark:#3878ad;
--text:#dbe5f0;--text-1:#dbe5f0;--text-2:#a8bdd0;--text-3:#859bb0;--text-4:#5b6f85;
--green:#4ade80;--green-bg:rgba(74,222,128,.08);
--amber:#fbbf24;--amber-bg:rgba(251,191,36,.08);
--red:#f87171;--red-bg:rgba(248,113,113,.08);
--blue:#60a5fa;--violet:#a78bfa;--cyan:#22d3ee;
--on-accent:#fff;--text-inverse:#fff;
--shadow-sm:0 1px 3px rgba(0,0,0,.2);
--shadow:0 2px 8px rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.14);
--shadow-md:0 6px 20px rgba(0,0,0,.26),0 2px 6px rgba(0,0,0,.18);
/* Landing-page token overrides */
--bg-page:#111827;--bg-widget:#1f2937;--bg-secondary:#374151;--bg-active:rgba(24,95,165,.18);
--badge-blue-bg:rgba(24,95,165,.22);--badge-green-bg:rgba(59,109,17,.22);--badge-green-text:#86c15a;
/* Identity-Center Tier-Farben (Dark) */
--tier-1-bg:rgba(59,130,246,.18);--tier-1-border:#3b82f6;--tier-1-text:#93c5fd;
--tier-2-bg:rgba(16,185,129,.18);--tier-2-border:#10b981;--tier-2-text:#6ee7b7;
--tier-3-bg:rgba(245,158,11,.18);--tier-3-border:#f59e0b;--tier-3-text:#fcd34d;
--tier-4-bg:rgba(139,92,246,.18);--tier-4-border:#8b5cf6;--tier-4-text:#c4b5fd;
}
html.dark .spa-header{
background:rgba(28,36,48,.72);
border-bottom:1px solid rgba(91,181,255,.10);
box-shadow:0 1px 0 rgba(91,181,255,.04),0 10px 28px -18px rgba(91,181,255,.12);
}
html.dark .spa-nav a,html.dark .spa-nav-drop-btn{color:var(--text-2)}
html.dark .spa-nav a:hover,html.dark .spa-nav-drop-btn:hover{
background:var(--accent-light);color:var(--accent);
}
html.dark .spa-nav a.active{background:transparent;color:var(--accent)}
html.dark .spa-nav a.active::after{
background:var(--accent);
box-shadow:0 0 6px rgba(91,181,255,.35);
}
html.dark .pm-trigger:hover{box-shadow:0 0 0 3px var(--accent-light)}
html.dark .hp-header-btn{color:var(--text-2)}
html.dark .hp-header-btn:hover{color:var(--accent);background:var(--accent-light)}
html.dark .cp-header-trigger{color:var(--text-2)}
html.dark .cp-header-trigger:hover{color:var(--accent);background:var(--accent-light)}
html.dark .notif-bell-btn:hover{background:var(--accent-light)}
html.dark .spa-drawer-overlay{background:var(--overlay)}
.pm-dark-row{
display:flex;align-items:center;justify-content:space-between;
padding:8px 10px;border-radius:var(--r);
}
/* ── Standard Table ── */
/* overflow:clip statt overflow:hidden — clippt Radius genauso, erlaubt aber position:sticky in Kinderelementen */
.spa-tbl-wrap{border:1px solid var(--border);border-radius:var(--r-md);overflow:clip;background:var(--surface)}
.spa-tbl{width:100%;border-collapse:collapse;font-size:13px;line-height:1.45}
.spa-tbl thead{position:sticky;top:52px;z-index:10}
.spa-tbl thead tr{background:var(--surface-2);border-bottom:1px solid var(--border)}
/* Wenn Tabelle in .sm-content liegt, hat dieses seinen eigenen Scroll-Container → top:0 */
.sm-content .spa-tbl thead{top:0}
.spa-tbl th{padding:12px 14px;text-align:left;font-weight:600;color:var(--text-2);font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.spa-tbl th.sortable{cursor:pointer;user-select:none}
.spa-tbl th.sortable:hover{color:var(--accent)}
.spa-tbl td{padding:14px 14px;vertical-align:middle}
.spa-tbl tbody tr{--fl-glow:var(--accent);position:relative;border-bottom:1px solid var(--border);transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.spa-tbl tbody tr:nth-child(even){background:var(--surface-2)}
@media (hover:hover){.spa-tbl tbody tr:hover{background:color-mix(in srgb,var(--fl-glow) 6%,transparent);box-shadow:inset 0 0 0 1px var(--fl-glow),inset 3px 0 0 var(--fl-glow),0 4px 12px color-mix(in srgb,var(--fl-glow) 12%,transparent);transform:scale(1.008);z-index:1}}
.spa-tbl tbody tr.clickable{cursor:pointer}
.spa-tbl tbody tr.clickable:focus-visible{outline:none;background:color-mix(in srgb,var(--fl-glow) 8%,transparent);box-shadow:inset 0 0 0 2px var(--fl-glow),inset 3px 0 0 var(--fl-glow)}
.spa-tbl tbody tr.spa-tbl-row-active,.spa-tbl tbody tr.spa-tbl-row-active:hover{background:var(--accent-light);border-left:2px solid var(--accent)}
.spa-tbl .spa-tbl-empty{padding:32px;text-align:center;color:var(--text-3);font-size:13px}
.spa-tbl-foot{font-size:11px;color:var(--text-3);margin-top:8px;text-align:right}
/* Inline-Edit-Zellen in der Pricing-Übersicht */
.ov-edit-cell:hover{background:var(--accent-light);border-color:var(--border-focus) !important;border-radius:var(--r)}
/* Filter-Zeile im Header */
.spa-tbl thead tr.spa-tbl-filters{background:var(--surface)}
.spa-tbl thead tr.spa-tbl-filters th{padding:6px 12px;border-bottom:1px solid var(--border)}
.spa-tbl-filter{width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:var(--r);font-size:11px;font-family:var(--font);outline:none;background:var(--surface);color:var(--text);box-sizing:border-box}
.spa-tbl-filter:focus{border-color:var(--accent)}
select.spa-tbl-filter{padding:4px 6px}
/* ── Compact Modus (Density-Toggle, z.B. Ticketing-Listen) ── */
.spa-tbl--compact{font-size:11px;line-height:1.25}
.spa-tbl--compact th{padding:4px 8px;font-size:10px}
.spa-tbl--compact td{padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spa-tbl--compact .spa-tbl-empty{padding:14px;font-size:12px}
.spa-tbl--compact .sd-status-pill,.spa-tbl--compact .sd-prio-pill{padding:1px 6px;font-size:9px;gap:3px}
.spa-tbl--compact .sd-flow-node-dot{width:6px;height:6px}
.spa-tbl--compact .badge,.spa-tbl--compact .pill,.spa-tbl--compact .chip{padding:1px 6px;font-size:9px}
.spa-tbl--compact .avatar,.spa-tbl--compact .avatar-sm{width:18px;height:18px;font-size:9px}
.spa-tbl--compact thead tr.spa-tbl-filters th{padding:3px 8px}
.spa-tbl--compact .spa-tbl-filter{padding:2px 6px;font-size:10px}
.tbl-density-toggle{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3)}
.tbl-density-toggle .btn{padding:3px 10px;font-size:11px;line-height:1.2}
/* ── Standard Table — Mobile-Responsive (ADR-0034) ──────────────
spa-tbl-wrap clippt per Default (overflow:clip), damit der
border-radius sauber bleibt. Auf Mobile-Viewport setzen wir
horizontal-scroll und reduzieren Padding/Font, damit Tabellen
mit vielen Spalten nicht den Viewport sprengen. Pages, die
mobil eine Card-Variante bevorzugen, können das per
v-if="isMobile" lokal lösen — der Default funktioniert ohne
Page-Code-Änderung. */
@media (max-width:900px){
.spa-tbl-wrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
.spa-tbl{font-size:12px}
.spa-tbl th{padding:8px 10px;font-size:10px}
.spa-tbl td{padding:10px 10px}
.spa-tbl thead{position:relative;top:auto}
/* Buttons in Tabellen-Zellen sollen Touch-tauglich sein */
.spa-tbl td .btn-icon,.spa-tbl td .btn-sm{min-height:36px;min-width:36px}
}
/* ── Verantwortungen / Responsibilities ─────────────────────────
Page-Namespace: ersetzt wiederholte Inline-Styles im
responsibilities-template. Single-Radius/Spacing-Scale/Tokens. */
.resp-av{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--text-1);font-size:10px;font-weight:600;border:1px solid var(--border);cursor:pointer;overflow:hidden;transition:transform var(--dur-fast) var(--ease-out)}
.resp-av:hover{transform:scale(1.1)}
.resp-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.resp-av--a{width:34px;height:34px;background:var(--accent-light);color:var(--accent);border:2px solid var(--accent);font-size:11px;font-weight:700}
.resp-av--a:hover{transform:scale(1.08)}
.resp-av-cell{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.resp-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.resp-seg-btn{padding:8px 16px;border:none;background:transparent;color:var(--text-1);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.resp-seg-btn.active{background:var(--accent);color:var(--on-accent)}
.resp-flabel{display:block;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.resp-no-a{display:inline-block;padding:2px 8px;background:var(--red-bg);color:var(--red);border-radius:var(--r-full);font-size:10px;font-weight:700;white-space:nowrap}
.resp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.resp-reassign-grid{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:599px){.resp-grid-2,.resp-reassign-grid{grid-template-columns:1fr}}
.resp-editor-head{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px}
@media (max-width:799px){.resp-editor-head{grid-template-columns:1fr 1fr}}
@media (max-width:499px){.resp-editor-head{grid-template-columns:1fr}}
.resp-raci-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:799px){.resp-raci-grid{grid-template-columns:1fr 1fr}}
@media (max-width:499px){.resp-raci-grid{grid-template-columns:1fr}}
.resp-section-toggle{width:100%;padding:8px 12px;background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--r);font-size:12px;color:var(--text-2);cursor:pointer;text-align:left;font-family:var(--font);display:flex;align-items:center;gap:8px}
.resp-section-toggle:hover{border-color:var(--accent);color:var(--accent)}
.resp-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.resp-section-close{background:none;border:none;color:var(--text-3);font-size:14px;cursor:pointer;padding:2px 8px;line-height:1;font-family:var(--font)}
.resp-section-close:hover{color:var(--text-1)}
/* Übersicht-Tab + geteilte Helfer */
.resp-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.resp-toolbar--lg{margin-bottom:20px}
.resp-search{flex:1;min-width:160px;max-width:360px}
.resp-gaps{margin-bottom:16px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.resp-gaps-head{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;user-select:none}
.resp-gaps-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent-light);color:var(--accent);font-size:16px;font-weight:700;flex-shrink:0}
.resp-gaps-body{padding:4px 16px 12px;border-top:1px solid var(--border)}
.resp-gaps-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.resp-gaps-row{padding:8px 4px;font-size:12px;color:var(--text-1);border-top:1px solid var(--border);cursor:pointer;border-radius:var(--r)}
.resp-gaps-row:hover{background:var(--surface-2)}
.resp-mini-tbl{width:100%;border-collapse:collapse;font-size:13px}
.resp-row-click{cursor:pointer}
.resp-row-click:hover{background:var(--surface-2)}
.resp-person-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:8px;cursor:pointer;border-bottom:1px dashed transparent}
.resp-person-link:hover{border-bottom-color:var(--accent)}
.resp-subj{margin-bottom:24px;padding:8px 12px;border:1px solid transparent;border-radius:var(--r-md)}
.resp-subj.clickable{cursor:pointer}
.resp-subj.clickable:hover{border-color:var(--border);background:var(--surface-2)}
.resp-chips{display:flex;flex-wrap:wrap;gap:8px}
.resp-rolechip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full);font-size:12px}
.resp-badge{display:inline-block;padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.resp-badge--pending{background:var(--accent-light);color:var(--accent)}
.resp-badge--approved{background:var(--green-bg);color:var(--green)}
.resp-badge--rejected{background:var(--red-bg);color:var(--red)}
.resp-meta-pill{display:inline-block;padding:2px 8px;font-size:11px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full)}
.resp-stats{display:flex;align-items:center;gap:6px;margin-bottom:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);flex-wrap:wrap;font-size:12px}
.resp-stat{display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;color:var(--text-1);background:transparent;border:1px solid transparent;border-radius:var(--r);font-family:inherit}
button.resp-stat{cursor:pointer}
.resp-stat--active{background:var(--accent-light)}
.resp-stat-num{font-size:15px;font-weight:700}
.resp-stat-sep{color:var(--border)}
.resp-jump{position:sticky;top:0;z-index:5;background:var(--surface);margin:-4px -4px 12px;padding:8px 4px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.resp-jump-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-right:4px}
.resp-jump-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full);font-size:11px;font-weight:600;cursor:pointer;color:var(--text-1);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resp-group{margin-bottom:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);scroll-margin-top:60px}
.resp-group-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.resp-group-chevron{display:inline-block;color:var(--text-3);font-size:10px;transition:transform var(--dur-fast) var(--ease-out);width:10px;text-align:center}
.resp-group-chevron.collapsed{transform:rotate(-90deg)}
.resp-count{font-size:11px;color:var(--text-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);padding:1px 9px;font-weight:600}
.resp-hm-wrap{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:auto;max-height:70vh}
.resp-hm{border-collapse:separate;border-spacing:0;font-size:11px;width:auto;min-width:100%}
.resp-hm th.resp-hm-corner{position:sticky;top:0;left:0;z-index:3;background:var(--surface-2);padding:8px 10px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);min-width:160px}
.resp-hm th.resp-hm-act{position:sticky;top:0;z-index:2;background:var(--surface-2);padding:6px 4px;border-bottom:1px solid var(--border);font-size:10px;color:var(--text-3);font-weight:600;writing-mode:vertical-rl;transform:rotate(180deg);min-width:28px;max-width:28px;height:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resp-hm td.resp-hm-name{position:sticky;left:0;background:var(--surface);padding:6px 10px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text-1);min-width:160px;cursor:pointer}
.resp-hm td.resp-hm-cell{padding:0;text-align:center;font-size:9px;font-weight:700;border-bottom:1px solid var(--border);min-width:28px;max-width:28px;height:28px;cursor:pointer}
.resp-hm-legend{margin-top:8px;font-size:11px;color:var(--text-3);display:flex;gap:16px;flex-wrap:wrap}
.resp-hm-sw{display:inline-block;width:10px;height:10px;vertical-align:middle;margin-right:4px}
.resp-dd{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-md);z-index:10;max-height:220px;overflow-y:auto;margin-top:4px}
.resp-dd-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px}
.resp-dd-item:hover{background:var(--surface-2)}
.resp-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);font-size:12px;color:var(--text-1)}
.resp-tag-x{background:none;border:none;cursor:pointer;color:var(--text-3);font-size:12px;line-height:1;padding:0}
.resp-tag--accent{background:var(--accent-light);border-color:var(--accent);color:var(--accent);font-weight:600}
.resp-tag--accent .resp-tag-x{color:var(--accent)}
.resp-pop{width:280px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:16px;font-family:var(--font);animation:spa-fade-in .14s ease-out}
.resp-pop-av{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--accent-light);color:var(--accent);font-size:15px;font-weight:700;border:2px solid var(--accent);overflow:hidden;flex-shrink:0}
.resp-pop-av img{width:100%;height:100%;object-fit:cover}
.resp-tiles-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.resp-tile{padding:12px;background:var(--surface-2);border-radius:var(--r);text-align:center}
.resp-tile-num{font-size:20px;font-weight:700}
.resp-tile-label{font-size:11px;color:var(--text-2)}
.resp-logbox{max-height:160px;overflow-y:auto;padding:8px 10px;background:var(--surface-2);border-radius:var(--r);font-size:12px;color:var(--text-2);font-family:monospace;line-height:1.5}
.resp-logbox--err{background:var(--red-bg);color:var(--red);max-height:120px}
.resp-mini-head{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.resp-subcard{margin-bottom:12px;padding:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)}
.resp-hitcard{margin-bottom:8px;padding:12px;background:var(--surface-2);border-radius:var(--r-md);font-size:12px}
.resp-sev{display:inline-block;padding:1px 8px;border-radius:var(--r);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.resp-reqcard{margin-bottom:12px;padding:16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.resp-reject-box{margin-top:8px;padding:8px 10px;background:var(--red-bg);border-left:3px solid var(--red);font-size:12px;color:var(--text-1)}
.resp-reassign-l{padding:16px 18px}
.resp-reassign-r{padding:16px 18px;background:var(--surface-2);min-height:300px;display:flex;flex-direction:column}
.resp-rolepill{padding:4px 12px;border:1px solid;border-radius:var(--r-full);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font)}
.resp-warnbox{margin-bottom:12px;padding:10px 12px;background:var(--amber-bg);border-left:3px solid var(--amber);border-radius:var(--r-md);font-size:12px;color:var(--text-1)}
.resp-filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;background:linear-gradient(135deg,var(--accent-light),transparent);border:1px solid var(--accent);border-radius:var(--r-full);font-size:12px;color:var(--accent);font-weight:600}
.resp-filter-chip-av{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:700}
/* ── Responsibilities · Übersicht: KPI-Streifen, Workload-Bar, Personen-Karten ── */
.resp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media (max-width:799px){.resp-kpis{grid-template-columns:repeat(2,1fr)}}
.resp-kpi{padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);min-height:64px;display:flex;flex-direction:column;justify-content:center}
.resp-kpi--click{cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast)}
.resp-kpi--click:hover{background:var(--surface-2);border-color:var(--accent)}
.resp-kpi--warn{border-left:3px solid var(--amber);background:var(--amber-bg)}
.resp-kpi--warn .resp-kpi-num{color:var(--amber)}
.resp-kpi-num{font-size:22px;font-weight:700;color:var(--text-1);line-height:1.1}
.resp-kpi-label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.resp-workload{margin-bottom:16px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md)}
.resp-workload-head{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.resp-wl-row{display:grid;grid-template-columns:140px 1fr 32px;align-items:center;gap:10px;padding:4px 0;cursor:pointer;border-radius:var(--r)}
.resp-wl-row:hover{background:var(--surface-2)}
.resp-wl-name{font-size:12px;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.resp-wl-track{height:8px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden}
.resp-wl-bar{height:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,transparent));border-radius:var(--r-full);transition:width var(--dur-base)}
.resp-wl-count{font-size:11px;font-weight:700;color:var(--text-2);text-align:right}
.resp-pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:899px){.resp-pgrid{grid-template-columns:1fr}}
.resp-pcard{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden;transition:border-color var(--dur-fast)}
.resp-pcard:hover{border-color:var(--accent)}
.resp-pcard--open{border-color:var(--accent)}
.resp-pcard-head{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;user-select:none}
.resp-pcard-av{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--accent-light);color:var(--accent);font-size:12px;font-weight:700}
.resp-pcard-meta{flex:1;min-width:0}
.resp-pcard-name{font-size:14px;font-weight:700;color:var(--text-1);cursor:pointer;border-bottom:1px dashed transparent;display:inline-block}
.resp-pcard-name:hover{border-bottom-color:var(--accent)}
.resp-pcard-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.resp-pcard-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full);font-size:10px}
.resp-pcard-chip strong{font-weight:700}
.resp-pcard-total{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 8px;background:var(--accent);color:var(--on-accent);border-radius:var(--r-full);font-size:11px;font-weight:700}
.resp-pcard-caret{flex-shrink:0;width:14px;text-align:center;color:var(--text-3);font-size:11px}
.resp-pcard-body{padding:4px 12px 10px;border-top:1px solid var(--border)}
/* KPI-Grid: KPI-Streifen + Donut nebeneinander */
.resp-kpi-grid{display:grid;grid-template-columns:1fr 280px;gap:12px;margin-bottom:16px}
@media (max-width:899px){.resp-kpi-grid{grid-template-columns:1fr}}
.resp-kpi-grid > .resp-kpis{margin-bottom:0}
/* Workload-Bar stacked Segmente */
.resp-wl-stack{height:100%;display:flex;border-radius:var(--r-full);overflow:hidden}
.resp-wl-seg{height:100%}
.resp-wl-seg:first-child{border-top-left-radius:var(--r-full);border-bottom-left-radius:var(--r-full)}
.resp-wl-seg:last-child{border-top-right-radius:var(--r-full);border-bottom-right-radius:var(--r-full)}
/* Rollen-Donut */
.resp-donut-card{padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);display:flex;flex-direction:column}
.resp-donut-wrap{display:flex;align-items:center;gap:12px;flex:1}
.resp-donut-svg{width:100px;height:100px;flex-shrink:0}
.resp-donut-legend{flex:1;display:flex;flex-direction:column;gap:2px;font-size:11px;min-width:0}
.resp-donut-leg{display:grid;grid-template-columns:10px 22px 1fr 30px;align-items:center;gap:6px}
.resp-donut-dot{width:10px;height:10px;border-radius:2px}
.resp-donut-leg-role{font-weight:700}
.resp-donut-leg-count{color:var(--text-1);text-align:right}
.resp-donut-leg-pct{color:var(--text-3);text-align:right}
/* Subject-Gruppen (Nach Tätigkeit) */
.resp-sgroup{margin-bottom:16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.resp-sgroup-head{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;user-select:none;background:var(--surface-2);font-size:13px;font-weight:700;color:var(--text-1)}
.resp-sgroup-head:hover{background:color-mix(in srgb,var(--accent) 5%,var(--surface-2))}
.resp-sgroup-title{flex:1}
.resp-sgroup-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 7px;background:var(--accent-light);color:var(--accent);border-radius:var(--r-full);font-size:11px;font-weight:700}
.resp-sgroup-body{padding:6px 14px 10px}
/* Heatmap Personen × Rollen */
.resp-heatmap-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md)}
.resp-heatmap{width:100%;border-collapse:collapse;font-size:12px;min-width:480px}
.resp-heatmap th{padding:8px 6px;background:var(--surface-2);font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:10px;color:var(--text-2);text-align:center;border-bottom:1px solid var(--border)}
.resp-heatmap td{padding:0;text-align:center;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.resp-heatmap-name{text-align:left !important;padding:8px 12px !important;font-weight:600;color:var(--text-1);white-space:nowrap;min-width:140px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.resp-heatmap-rolehd{min-width:42px}
.resp-heatmap-cell{height:34px;font-weight:700;transition:transform var(--dur-fast)}
.resp-heatmap-cell:hover{transform:scale(1.05)}
.resp-heatmap-total{padding:8px 12px !important;font-weight:700;color:var(--text-1);background:var(--surface-2);min-width:50px}
/* ── Data Table (CSM-Admin) ── */
.data-table-wrap{border:1px solid var(--border);border-radius:var(--r-md);overflow:clip}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table thead{position:sticky;top:52px;z-index:10}
.sm-content .data-table thead{top:0}
.data-table thead tr{background:var(--surface-2);border-bottom:1px solid var(--border)}
.data-table th{padding:10px 12px;text-align:left;font-weight:600;color:var(--text-2);font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.data-table td{padding:10px 12px;border-bottom:1px solid var(--border)}
.data-table tbody tr{transition:background var(--dur-fast)}
.data-table tbody tr:nth-child(even){background:var(--surface-2)}
.data-table tbody tr:hover{background:var(--accent-light)}
/* ── SortableJS DnD Styles ────────────────────────── */
.sortable-ghost{opacity:.35;background:var(--accent-light) !important;border:2px dashed var(--accent) !important;border-left-width:3px !important}
.sortable-drag{box-shadow:var(--shadow-lg);opacity:.95}
.sortable-chosen{cursor:grabbing !important}
/* ── Ticketing Backlog DnD ──────────────────────── */
.tk-drag-handle{cursor:grab;color:var(--text-3);font-weight:700;letter-spacing:-2px;text-align:center;user-select:none;padding:0 4px;line-height:1}
.tk-drag-handle:hover{color:var(--accent);background:var(--accent-light)}
.tk-drag-handle:active{cursor:grabbing}
/* fallbackOnBody: Drag-Clone wird ans angehängt - pointer-events
müssen aus, damit der darunter liegende Drop-Container erkannt wird. */
.tk-bl-dragging .sortable-drag,.tk-bl-dragging .sortable-fallback{pointer-events:none}
.tk-backlog-items-group{transition:background-color .1s}
.tk-backlog-items-group.tk-bl-over{background:var(--accent-light);outline:2px solid var(--accent);outline-offset:-2px}
.tk-bl-source{opacity:.5}
/* ── Ticketing Rich-Text Editor / View ──────────── */
.tk-desc-editor,.tk-desc-view{box-sizing:border-box}
.tk-desc-editor h1,.tk-desc-view h1{font-size:1.35em;font-weight:700;margin:.5em 0 .2em;line-height:1.25}
.tk-desc-editor h2,.tk-desc-view h2{font-size:1.15em;font-weight:700;margin:.5em 0 .2em;line-height:1.3}
.tk-desc-editor h3,.tk-desc-view h3{font-size:1.05em;font-weight:700;margin:.4em 0 .15em;line-height:1.35}
.tk-desc-editor p,.tk-desc-view p{margin:.35em 0}
.tk-desc-editor ul,.tk-desc-view ul,.tk-desc-editor ol,.tk-desc-view ol{padding-left:1.4em;margin:.35em 0}
.tk-desc-editor li,.tk-desc-view li{margin:.15em 0}
.tk-desc-editor blockquote,.tk-desc-view blockquote{margin:.5em 0;padding:4px 12px;border-left:3px solid var(--accent);color:var(--text-2);background:rgba(99,102,241,.05);border-radius:0 var(--r) var(--r) 0}
.tk-desc-editor pre,.tk-desc-view pre{margin:.5em 0;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);font-size:12px;font-family:monospace;white-space:pre-wrap;overflow-x:auto;line-height:1.55}
.tk-desc-editor code,.tk-desc-view code{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:1px 5px;font-size:12px;font-family:monospace}
/* .tk-card — Legacy-Alias, nutzt jetzt --fl-glow (Fallback: --tk-c → --accent) */
.tk-card{--fl-glow:var(--tk-c,var(--accent));transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
@media(hover:hover){.tk-card:hover{box-shadow:0 0 0 1px var(--fl-glow),0 8px 20px color-mix(in srgb,var(--fl-glow) 14%,transparent);transform:translateY(-2px)}}
.tk-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--fl-glow),0 8px 20px color-mix(in srgb,var(--fl-glow) 18%,transparent)}
/* ── Ticketing Board Karten ──────────────────────── */
.tk-board-card{transition:box-shadow var(--dur-fast),transform var(--dur-fast)}
.tk-board-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.tk-board-card:active{cursor:grabbing}
/* ── Ticketing Projekt-Karten ────────────────────── */
.tk-proj-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tk-proj-search-wrap{position:relative;flex:1;min-width:200px;max-width:420px}
.tk-proj-search-wrap > svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.tk-proj-search{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--border);border-radius:var(--r);font-size:13px;font-family:var(--font);outline:none;background:var(--surface);box-sizing:border-box;transition:border-color var(--dur-fast)}
.tk-proj-search:focus{border-color:var(--accent)}
.tk-proj-density{display:inline-flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface);flex-shrink:0}
.tk-proj-density button{background:none;border:none;padding:7px 10px;font-size:12px;font-family:var(--font);color:var(--text-3);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background var(--dur-fast),color var(--dur-fast)}
.tk-proj-density button:hover{color:var(--text)}
.tk-proj-density button.active{background:var(--accent-light);color:var(--accent);font-weight:600}
.tk-proj-density button + button{border-left:1px solid var(--border)}
.tk-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tk-proj-grid--compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tk-proj-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 16px 14px;cursor:pointer;transition:transform var(--dur-fast),box-shadow var(--dur-fast),border-color var(--dur-fast);overflow:hidden;display:flex;flex-direction:column}
.tk-proj-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--tk-proj-accent,var(--accent));opacity:.9}
.tk-proj-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.tk-proj-card--compact{padding:13px 14px 12px}
.tk-proj-card--compact .tk-proj-desc{display:none}
.tk-proj-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.tk-proj-key{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r);font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--tk-proj-accent,var(--accent));text-transform:uppercase}
.tk-proj-card--compact .tk-proj-key{width:34px;height:34px;font-size:11px}
.tk-proj-title{min-width:0;flex:1;padding-right:22px}
.tk-proj-name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.tk-proj-sub{font-size:11px;color:var(--text-3);margin-top:2px}
.tk-proj-edit{position:absolute;top:9px;right:9px;background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px;border-radius:var(--r-sm);line-height:0;opacity:0;transition:opacity var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
.tk-proj-card:hover .tk-proj-edit{opacity:1}
.tk-proj-edit:hover{background:var(--surface-2,var(--border));color:var(--text)}
@media (any-pointer:coarse){.tk-proj-edit{opacity:.7}}
.tk-proj-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tk-proj-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--r-full);line-height:1.7;letter-spacing:.01em}
.tk-proj-tag-dot{width:6px;height:6px;border-radius:var(--r-full);display:inline-block}
.tk-proj-tag--betrieb{background:var(--surface-2,#eef1f5);color:var(--text-2)}
.tk-proj-tag--betrieb .tk-proj-tag-dot{background:var(--text-3)}
.tk-proj-tag--eigenstaendig{background:rgba(24,95,165,.10);color:var(--accent-blue,var(--blue,#185FA5))}
.tk-proj-tag--eigenstaendig .tk-proj-tag-dot{background:var(--blue,#185FA5)}
.tk-proj-tag--projekt{background:rgba(124,58,237,.10);color:var(--violet,#7c3aed)}
.tk-proj-tag--projekt .tk-proj-tag-dot{background:var(--violet,#7c3aed)}
.tk-proj-tag--lock{background:rgba(217,119,6,.10);color:var(--amber,#b45309)}
.tk-proj-tag--lock .tk-proj-tag-dot{background:var(--amber,#d97706)}
.tk-proj-desc{font-size:12px;color:var(--text-2);margin-bottom:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tk-proj-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-3);padding-top:10px;border-top:1px solid var(--border);margin-top:auto;gap:10px}
.tk-proj-lead{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.tk-proj-lead > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-proj-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--r-full);background:var(--violet,#7c3aed);color:#fff;font-size:9px;font-weight:700;flex-shrink:0}
.tk-proj-issues{display:inline-flex;align-items:baseline;gap:4px;flex-shrink:0}
.tk-proj-issues-num{font-size:14px;font-weight:700;color:var(--accent)}
.tk-proj-issues-label{font-size:11px;color:var(--text-3)}
.tk-proj-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.tk-proj-row{display:grid;grid-template-columns:38px minmax(0,2fr) minmax(0,1.2fr) auto auto 28px;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--dur-fast);position:relative}
.tk-proj-row:last-child{border-bottom:none}
.tk-proj-row:hover{background:var(--accent-light)}
.tk-proj-row .tk-proj-key{width:32px;height:32px;font-size:11px}
.tk-proj-row-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-proj-row-sub{font-size:11px;color:var(--text-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-proj-row-tags{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden}
.tk-proj-row-issues{font-size:14px;font-weight:700;color:var(--accent);text-align:right;min-width:36px;line-height:1.1}
.tk-proj-row-issues small{display:block;font-size:10px;font-weight:500;color:var(--text-3)}
.tk-proj-row .tk-proj-edit{position:static;opacity:.5}
.tk-proj-row:hover .tk-proj-edit{opacity:1}
@media (max-width:768px){
.tk-proj-grid,.tk-proj-grid--compact{grid-template-columns:1fr}
.tk-proj-row{grid-template-columns:32px minmax(0,1fr) auto 28px;gap:10px}
.tk-proj-row > .tk-proj-row-tags,
.tk-proj-row > .tk-proj-row-lead{display:none}
}
/* ── Ticketing Timeline / Roadmap ────────────────── */
.tk-tl-wrap{overflow-x:auto;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);max-height:calc(100vh - 220px)}
.tk-tl-inner{min-width:max-content;position:relative}
.tk-tl-header{display:flex;border-bottom:2px solid var(--border);background:var(--surface-2);position:sticky;top:0;z-index:10}
.tk-tl-label-col{width:240px;flex-shrink:0;border-right:2px solid var(--border);padding:0}
.tk-tl-label-header{width:240px;flex-shrink:0;border-right:2px solid var(--border);background:var(--surface-2);padding:8px 12px;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.tk-tl-months{display:flex;flex:1}
.tk-tl-month{border-right:1px solid var(--border);padding:8px 0;text-align:center;font-size:11px;font-weight:600;color:var(--text-3);flex-shrink:0;position:relative}
.tk-tl-month.current{color:var(--accent);font-weight:700}
.tk-tl-row{display:flex;align-items:stretch;border-bottom:1px solid var(--border);min-height:44px}
.tk-tl-row:last-child{border-bottom:none}
.tk-tl-row:hover .tk-tl-row-label{background:var(--accent-light)}
.tk-tl-row-label{width:240px;flex-shrink:0;border-right:2px solid var(--border);padding:10px 12px;display:flex;align-items:center;gap:6px;cursor:pointer;transition:background var(--dur-fast);background:var(--surface)}
.tk-tl-row-label.epic{font-weight:700;font-size:13px}
.tk-tl-row-label.child{font-size:12px;padding-left:28px;color:var(--text-2);background:var(--surface-2)}
.tk-tl-row-label:hover{background:var(--accent-light)}
.tk-tl-row-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.tk-tl-row-key{font-size:10px;color:var(--text-3);flex-shrink:0}
.tk-tl-chart{flex:1;position:relative;background:var(--surface)}
.tk-tl-chart.child-bg{background:var(--surface-2)}
.tk-tl-grid-line{position:absolute;top:0;bottom:0;width:1px;background:var(--border);pointer-events:none}
.tk-tl-grid-line.month-start{background:color-mix(in srgb,var(--border) 100%,transparent)}
.tk-tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--red);pointer-events:none;z-index:3}
.tk-tl-today::before{content:'Heute';position:absolute;top:4px;left:4px;font-size:9px;font-weight:700;color:var(--red);white-space:nowrap;letter-spacing:.04em}
.tk-tl-bar{position:absolute;top:50%;transform:translateY(-50%);height:20px;border-radius:var(--r);cursor:pointer;transition:filter var(--dur-fast),box-shadow var(--dur-fast);min-width:4px;z-index:2;display:flex;align-items:center;overflow:hidden}
.tk-tl-bar.epic-bar{height:26px;border-radius:var(--r-md)}
.tk-tl-bar.child-bar{height:16px;opacity:.85}
.tk-tl-bar:hover{filter:brightness(1.12);box-shadow:var(--shadow)}
.tk-tl-bar-fill{height:100%;border-radius:inherit;opacity:.35}
.tk-tl-bar-label{font-size:10px;font-weight:600;color:#fff;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1}
.tk-tl-milestone{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:12px;height:12px;cursor:pointer;z-index:2}
.tk-tl-milestone:hover{filter:brightness(1.2)}
.tk-tl-controls{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tk-tl-zoom-btn{padding:5px 12px;border:1px solid var(--border);border-radius:var(--r);font-size:12px;background:none;cursor:pointer;font-family:var(--font);color:var(--text-2);transition:all var(--dur-fast)}
.tk-tl-zoom-btn.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
.tk-tl-empty{padding:48px 24px;text-align:center;color:var(--text-3);font-size:13px}
.tk-tl-legend{display:flex;align-items:center;gap:16px;font-size:11px;color:var(--text-3);flex-wrap:wrap}
.tk-tl-legend-item{display:flex;align-items:center;gap:5px}
.tk-tl-legend-dot{width:10px;height:10px;border-radius:var(--r);flex-shrink:0}
/* Sprint Planning Cards */
.tk-sprint-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 20px;margin-bottom:12px}
.tk-sprint-card.tk-sprint-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tk-sprint-card.tk-sprint-completed{opacity:.65}
.tk-sprint-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tk-sprint-name{font-size:15px;font-weight:700;flex:1;min-width:0}
.tk-sprint-meta{font-size:11px;color:var(--text-3)}
.tk-sprint-progress{height:6px;background:var(--border);border-radius:var(--r-full);overflow:hidden;margin:8px 0}
.tk-sprint-progress-fill{height:100%;border-radius:inherit;background:var(--accent);transition:width var(--dur)}
.tk-sprint-stats{display:flex;gap:16px;font-size:12px;color:var(--text-3);margin-top:6px;flex-wrap:wrap}
.tk-sprint-stat{display:flex;align-items:center;gap:4px}
.tk-sprint-actions{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.tk-milestone-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px}
.tk-milestone-diamond{width:14px;height:14px;transform:rotate(45deg);background:var(--amber);border-radius:var(--r);flex-shrink:0}
.tk-milestone-diamond.achieved{background:var(--green)}
.tk-planning-section-title{font-size:12px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin:20px 0 10px}
/* ── Plan-Modul: Hill / Timeline / Board / Drawer ─────────────── */
.plan-page{display:flex;flex-direction:column;height:100%;min-height:0}
.plan-header{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
.plan-views{display:inline-flex;background:var(--surface-2);border-radius:var(--r);padding:3px;gap:2px}
.plan-view-btn{padding:6px 14px;font-size:13px;font-weight:600;border:none;background:transparent;color:var(--text-2);border-radius:calc(var(--r) - 2px);cursor:pointer}
.plan-view-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.plan-filters{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.plan-filters .sm-input{max-width:180px}
/* Health-KPI-Chips im Header */
.plan-health-chips{display:inline-flex;gap:4px}
.plan-health-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);font-size:12px;font-weight:600;color:var(--text-1);cursor:pointer;transition:background .12s,border-color .12s}
.plan-health-chip:hover{background:var(--surface)}
.plan-health-chip.active{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 1px var(--accent) inset}
.plan-health-dot{width:8px;height:8px;border-radius:50%}
/* Filter-Reset-Chip */
.plan-filter-reset{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:transparent;border:1px dashed var(--border);border-radius:var(--r);font-size:12px;color:var(--text-2);cursor:pointer}
.plan-filter-reset:hover{background:var(--surface-2);color:var(--text-1)}
.plan-filter-reset-count{background:var(--accent);color:#fff;padding:0 6px;border-radius:var(--r);font-size:11px;font-weight:700;line-height:1.5}
/* Stale-Badge auf Board-Card-Meta */
.plan-card-stale{font-size:11px}
.plan-card-stale--fresh{color:var(--text-3)}
.plan-card-stale--medium{color:var(--amber)}
.plan-card-stale--high{color:var(--red);font-weight:700}
.plan-card-stale--none{color:var(--text-3);font-style:italic}
.plan-loading{padding:60px;text-align:center;color:var(--text-3)}
.plan-empty{padding:80px 24px;text-align:center;max-width:480px;margin:0 auto}
.plan-empty-title{font-size:16px;font-weight:700;margin-bottom:8px}
.plan-empty-text{font-size:13px;color:var(--text-2);margin-bottom:18px}
/* Progress-Lanes */
.plan-progress{flex:1;display:flex;flex-direction:column;padding:18px 24px 28px;overflow:auto;gap:14px}
.plan-progress-legend{position:relative;height:18px;margin:0 64px 0 24px}
.plan-progress-legend-step{position:absolute;transform:translateX(-50%);font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.plan-progress-list{display:flex;flex-direction:column;gap:8px}
.plan-progress-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px 14px;cursor:pointer;transition:box-shadow .14s,transform .14s,border-color .14s;display:flex;flex-direction:column;gap:10px}
.plan-progress-row:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-1px)}
.plan-progress-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.plan-progress-row--status-shipped{opacity:.85}
.plan-progress-row--status-cancelled{opacity:.55}
.plan-progress-head{display:flex;align-items:center;gap:10px;font-size:13px}
.plan-progress-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px var(--surface)}
.plan-progress-title{font-weight:600;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex-shrink:1}
.plan-progress-status{display:inline-flex;align-items:center;padding:2px 9px;font-size:11px;font-weight:700;border:1px solid;border-radius:var(--r-full);background:var(--surface);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
.plan-progress-meta{flex:1;min-width:0;font-size:11px;color:var(--text-3);display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center;overflow:hidden}
.plan-progress-meta-sep{color:var(--text-3);opacity:.6}
.plan-progress-stale--fresh{color:var(--text-3)}
.plan-progress-stale--medium{color:var(--amber)}
.plan-progress-stale--high{color:var(--red);font-weight:700}
.plan-progress-stale--none{color:var(--text-3);font-style:italic}
.plan-progress-pct{font-size:12px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:42px;text-align:right}
.plan-progress-track{position:relative;height:10px;background:var(--surface-2);border-radius:var(--r-full);overflow:visible}
.plan-progress-tick{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--border);transform:translateX(-50%);pointer-events:none}
.plan-progress-fill{position:absolute;top:0;bottom:0;left:0;border-radius:var(--r-full);transition:width .18s ease-out;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.plan-progress-handle{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 1px var(--border);transform:translate(-50%,-50%);cursor:grab;touch-action:none;transition:transform .12s,box-shadow .12s}
.plan-progress-handle:hover{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 2px 8px rgba(0,0,0,.22),0 0 0 1px var(--border)}
.plan-progress-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}
@media (max-width:720px){
.plan-progress{padding:12px 14px 20px}
.plan-progress-legend{margin:0 28px}
.plan-progress-head{flex-wrap:wrap;row-gap:6px}
.plan-progress-meta{flex-basis:100%;order:5}
.plan-progress-pct{order:4}
}
/* Premium Progress: KPI-Strip + grouped sections */
.plan-kpi-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:4px}
.plan-kpi{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;display:flex;flex-direction:column;gap:2px;transition:border-color .14s,box-shadow .14s,transform .14s;overflow:hidden}
.plan-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--text-3);opacity:.6}
.plan-kpi--ok::before{background:var(--green)}
.plan-kpi--warn::before{background:var(--amber)}
.plan-kpi--risk::before{background:var(--red)}
.plan-kpi--avg::before{background:var(--accent)}
.plan-kpi--total::before{background:var(--indigo,#6366f1)}
.plan-kpi--stale::before{background:var(--slate,#64748b)}
.plan-kpi--alert::before{background:var(--red)}
.plan-kpi[role="button"]{cursor:pointer}
.plan-kpi[role="button"]:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.06);transform:translateY(-1px)}
.plan-kpi--active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.plan-kpi-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.plan-kpi-value{font-size:26px;font-weight:700;color:var(--text-1);line-height:1.1;font-variant-numeric:tabular-nums}
.plan-kpi--ok .plan-kpi-value{color:var(--green)}
.plan-kpi--warn .plan-kpi-value{color:var(--amber)}
.plan-kpi--risk .plan-kpi-value{color:var(--red)}
.plan-kpi--alert .plan-kpi-value{color:var(--red)}
.plan-kpi-unit{font-size:14px;font-weight:600;color:var(--text-3);margin-left:2px}
.plan-kpi-sub{font-size:11px;color:var(--text-3);margin-top:2px}
.plan-kpi-bar{height:4px;background:var(--surface-2);border-radius:var(--r-full);margin-top:8px;overflow:hidden}
.plan-kpi-bar-fill{height:100%;background:var(--accent);border-radius:var(--r-full);transition:width .25s ease-out}
@media (max-width:1100px){.plan-kpi-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.plan-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-kpi-value{font-size:22px}}
.plan-progress-groups{display:flex;flex-direction:column;gap:18px}
.plan-progress-group{display:flex;flex-direction:column;gap:8px}
.plan-progress-group-head{display:flex;align-items:center;gap:10px;padding:4px 2px}
.plan-progress-group-bar{display:inline-block;width:3px;height:14px;border-radius:var(--r)}
.plan-progress-group-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.plan-progress-group-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 6px;font-size:11px;font-weight:700;color:var(--text-3);background:var(--surface-2);border-radius:var(--r-full)}
.plan-progress-group--shipped .plan-progress-group-title,
.plan-progress-group--cancelled .plan-progress-group-title{color:var(--text-3)}
.plan-progress-group--cancelled .plan-progress-list{opacity:.7}
.plan-progress-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:10px;font-weight:700;color:#fff;letter-spacing:.02em;flex-shrink:0;box-shadow:0 0 0 2px var(--surface);font-variant-numeric:tabular-nums}
.plan-progress-chip{display:inline-flex;align-items:center;padding:1px 7px;font-size:10px;font-weight:700;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.04em}
/* Timeline */
.plan-timeline{flex:1;overflow:auto;padding:16px}
.plan-timeline-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:10px;min-height:100%}
.plan-q{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:10px}
.plan-q--today{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg,rgba(37,99,235,.08))}
.plan-q-head{font-size:13px;font-weight:700;color:var(--text);padding-bottom:6px;border-bottom:1px solid var(--border)}
.plan-q-section{display:flex;flex-direction:column;gap:4px}
.plan-q-section-label{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.plan-q-empty{font-size:11px;color:var(--text-3);font-style:italic}
/* Gantt */
.plan-graph-wrap{padding:18px 24px;display:flex;flex-direction:column;gap:10px}
.plan-graph-warning{background:var(--red-bg);color:var(--red);border:1px solid var(--red);border-radius:var(--r);padding:8px 12px;font-size:13px;font-weight:600}
.plan-graph-canvas{height:70vh;min-height:420px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.plan-graph-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--text-3)}
.plan-graph-legend-item--cycle{color:var(--red)}
.plan-graph-legend-item--hint{font-style:italic}
.plan-gantt{padding:18px 24px;display:flex;flex-direction:column;gap:6px;overflow-x:auto}
.plan-gantt-head{display:flex;align-items:stretch;gap:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);border-bottom:1px solid var(--border);padding-bottom:6px;position:sticky;top:0;background:var(--surface);z-index:1}
.plan-gantt-head-title{flex:0 0 200px;padding:6px 8px}
.plan-gantt-head-track{flex:1;display:grid;grid-template-columns:repeat(8,1fr)}
.plan-gantt-head-cell{padding:6px 8px;text-align:left;border-left:1px dashed var(--border)}
.plan-gantt-head-cell--today{color:var(--accent)}
.plan-gantt-rows{display:flex;flex-direction:column;gap:4px}
.plan-gantt-row{display:flex;align-items:stretch;gap:0;cursor:pointer;border-radius:var(--r);transition:background .12s}
.plan-gantt-row:hover{background:var(--surface-2)}
.plan-gantt-row:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.plan-gantt-row-title{flex:0 0 200px;padding:8px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-1);overflow:hidden}
.plan-gantt-row-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.plan-gantt-row-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-gantt-row-track{flex:1;display:grid;grid-template-columns:repeat(8,1fr);position:relative;min-height:32px;align-items:center}
.plan-gantt-row-track>.plan-gantt-bar{position:relative;height:20px;border-radius:var(--r);margin:0 4px;overflow:visible;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.plan-gantt-bar--cancelled{opacity:.5;background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,.15) 4px,rgba(0,0,0,.15) 8px)}
.plan-gantt-bar-fill{height:100%;background:rgba(255,255,255,.3);border-radius:var(--r) 0 0 var(--r)}
.plan-gantt-bar-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.18);cursor:help}
.plan-init-bar{position:relative;padding:6px 8px;background:var(--surface-2);border:1px solid var(--border);border-left-width:3px;border-radius:var(--r);font-size:12px;cursor:pointer;overflow:hidden;transition:box-shadow .12s,background .12s}
.plan-init-bar--linked{box-shadow:0 0 0 2px var(--accent);background:var(--surface)}
.plan-init-conflict{position:absolute;top:-4px;left:-4px;width:14px;height:14px;background:var(--red);color:#fff;border-radius:50%;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:help}
.plan-init-bar:hover{background:var(--surface)}
.plan-init-fill{position:absolute;inset:0;opacity:.18;pointer-events:none}
.plan-init-title{position:relative;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-init-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%}
.plan-sprint-chip{display:inline-block;padding:3px 7px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-full);font-size:11px;color:var(--text-2);cursor:help;transition:box-shadow .12s,background .12s,color .12s}
.plan-sprint-chip--linked{box-shadow:0 0 0 2px var(--accent);background:var(--surface);color:var(--text-1)}
.plan-cap-cell{padding:8px;border-radius:var(--r);text-align:center;font-size:13px;font-weight:600;color:var(--text)}
/* Board */
.plan-board{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:18px;overflow:auto}
.plan-col{display:flex;flex-direction:column;gap:10px;background:var(--surface-2);border-radius:var(--r);padding:12px;transition:background .12s,box-shadow .12s}
.plan-col--drophover{background:var(--surface);box-shadow:0 0 0 2px var(--accent) inset}
.plan-col-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--text);padding:0 4px 8px;border-bottom:1px solid var(--border)}
.plan-col-count{padding:1px 7px;background:var(--surface);border-radius:var(--r-full);font-size:11px;color:var(--text-2)}
.plan-col-empty{padding:18px;text-align:center;font-size:12px;color:var(--text-3);font-style:italic}
.plan-card{background:var(--surface);border:1px solid var(--border);border-left-width:4px;border-radius:var(--r);padding:10px 12px;cursor:grab;display:flex;flex-direction:column;gap:6px;touch-action:none;user-select:none}
.plan-card:active{cursor:grabbing}
.plan-card--expanded{cursor:default}
.plan-card--expanded:active{cursor:default}
.plan-card--selected{box-shadow:0 0 0 2px var(--accent) inset;background:var(--surface-2)}
.plan-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Bulk-Toolbar */
.plan-bulk-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;margin:0 0 12px;background:var(--surface);border:1px solid var(--accent);border-radius:var(--r);flex-wrap:wrap}
.plan-bulk-count{font-size:13px;font-weight:700;color:var(--text-1)}
.plan-bulk-hint{font-size:11px;color:var(--text-3)}
.plan-bulk-bar .sm-input{max-width:200px}
.plan-card-title{display:flex;align-items:center;gap:6px}
.plan-card-title-text{flex:1;font-size:13px;font-weight:600}
.plan-card-quick-btn{width:28px;height:28px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);border-radius:var(--r);cursor:pointer;font-size:15px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity .12s,background .12s}
.plan-card:hover .plan-card-quick-btn,.plan-card-quick-btn.active,.plan-card:focus-within .plan-card-quick-btn{opacity:1}
@media (hover:none){.plan-card-quick-btn{opacity:1}}
.plan-card-quick-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.plan-card-quick-form{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border);user-select:auto}
.plan-card-quick-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.plan-card:hover{box-shadow:0 1px 4px rgba(0,0,0,.08)}
.plan-card-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.plan-card-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.plan-card-meta{font-size:11px;color:var(--text-3);display:flex;gap:4px;flex-wrap:wrap}
.plan-card-fill-track{height:3px;background:var(--surface-2);border-radius:var(--r);overflow:hidden}
.plan-card-fill{height:100%;border-radius:var(--r);transition:width .2s}
/* Drawer */
.plan-drawer-backdrop{position:fixed;inset:0;background:var(--overlay);z-index:50}
.plan-drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--surface);border-left:1px solid var(--border);box-shadow:-4px 0 16px rgba(0,0,0,.08);z-index:51;display:flex;flex-direction:column;animation:spa-slide-in var(--dur) var(--ease-out)}
.plan-drawer--phone{top:auto;left:0;right:0;bottom:0;width:100%;max-height:90vh;border-left:0;border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg);box-shadow:0 -4px 24px rgba(0,0,0,.18);padding-bottom:var(--safe-bottom,0px);animation:bottomSheetUp var(--dur-slow) var(--ease-out)}
.plan-drawer--phone::before{content:"";display:block;width:36px;height:4px;border-radius:var(--r);background:var(--border);margin:10px auto 0}
.plan-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.plan-drawer-title{font-size:16px;font-weight:700}
.plan-drawer-body{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:24px}
.plan-drawer-section h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:0 0 10px}
.plan-drawer-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plan-drawer-meta label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.plan-drawer-meta>div>div{font-size:14px;font-weight:600;margin-top:2px}
.plan-drawer-outcome,.plan-drawer-desc{margin-top:14px}
.plan-drawer-outcome label,.plan-drawer-desc label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:4px}
.plan-drawer-outcome>div,.plan-drawer-desc>div{font-size:13px;line-height:1.5;white-space:pre-wrap}
.plan-drawer-danger{margin-top:auto;padding-top:18px;border-top:1px solid var(--border)}
.plan-update-form{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.plan-update-row{display:flex;gap:8px;align-items:center}
.plan-update-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.plan-update{padding:10px 12px;background:var(--surface-2);border-radius:var(--r);border:1px solid var(--border)}
.plan-update-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);margin-bottom:6px}
.plan-update-dot{width:8px;height:8px;border-radius:50%}
.plan-update-text{font-size:13px;line-height:1.5;white-space:pre-wrap}
.plan-update-empty{font-size:12px;color:var(--text-3);font-style:italic;padding:14px}
/* Drawer-Tabs */
.plan-drawer-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:-4px 0 16px}
.plan-drawer-tab{background:transparent;border:0;padding:8px 12px;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.plan-drawer-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
/* Tickets-Tab */
.plan-tickets-summary{font-size:13px;color:var(--text-2);margin-bottom:14px}
.plan-tickets-group{margin-bottom:14px}
.plan-tickets-group-head{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:6px}
.plan-tickets-group-count{background:var(--surface-2);color:var(--text-2);padding:1px 8px;border-radius:var(--r);font-size:11px}
.plan-tickets-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.plan-ticket{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);font-size:12px;cursor:pointer;transition:background .15s}
.plan-ticket:hover{background:var(--surface)}
.plan-ticket-key{font-family:var(--font-mono,monospace);font-size:11px;color:var(--text-3);min-width:64px}
.plan-ticket-title{flex:1;color:var(--text-1)}
.plan-ticket-project{font-size:10px;color:var(--text-3);background:var(--surface);padding:2px 6px;border-radius:var(--r)}
/* Initiative-Backlinks im Ticket-Detail */
.ticket-init-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ticket-init-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);font-size:12px;color:var(--text-1);cursor:pointer;text-decoration:none}
.ticket-init-chip:hover{background:var(--surface)}
.ticket-init-chip-dot{width:8px;height:8px;border-radius:50%}
.ticket-init-chip-via{font-size:10px;color:var(--text-3)}
/* Modal */
.plan-modal-backdrop{position:fixed;inset:0;background:var(--overlay);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;animation:spa-fade-in var(--dur) var(--ease-out)}
.plan-modal{background:var(--surface);border-radius:var(--r-lg);width:min(440px,100%);max-height:90vh;overflow:auto;display:flex;flex-direction:column;box-shadow:var(--shadow-md);animation:spa-modal-in var(--dur) var(--ease-out)}
.plan-modal--phone{position:fixed;left:0;right:0;bottom:0;width:100%;max-width:none;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg);max-height:90vh;padding-bottom:var(--safe-bottom,0px);animation:bottomSheetUp var(--dur-slow) var(--ease-out)}
.plan-modal-backdrop:has(.plan-modal--phone){padding:0;align-items:flex-end}
.plan-modal-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.plan-modal-head h3{margin:0;font-size:15px;font-weight:700}
.plan-modal-close{background:none;border:0;font-size:20px;color:var(--text-3);cursor:pointer;padding:2px 8px;border-radius:var(--r);line-height:1}
.plan-modal-close:hover{background:var(--surface-2);color:var(--text-1)}
.plan-modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.plan-modal-body label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.plan-modal-hint{text-transform:none;letter-spacing:0;color:var(--text-2);font-weight:600;margin-left:6px}
.plan-modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.sm-btn--xs{padding:2px 6px;font-size:11px}
@media (max-width:900px){
.plan-board{grid-template-columns:1fr}
.plan-timeline-grid{grid-auto-columns:minmax(160px,1fr)}
.plan-header{padding:10px 14px;gap:8px}
.plan-filters{width:100%}
.plan-filters .sm-input{max-width:none;flex:1 1 calc(50% - 4px);min-width:0}
.plan-health-chips{order:1}
.plan-card{padding:12px 14px;gap:8px}
.plan-card-title{font-size:14px;line-height:1.3}
.plan-card-meta{font-size:12px}
.plan-bulk-bar{padding:12px;flex-direction:column;align-items:stretch}
.plan-bulk-bar .sm-input{max-width:none;width:100%}
}
.tk-backlog-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:6px;font-size:12px}
/* ── Ticketing Planning — Moderne Roadmap ── */
.rd-sidebar-section{padding:12px 16px 4px;font-size:10px;font-weight:800;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em}
.rd-proj-dot{width:8px;height:8px;border-radius:var(--r-full);flex-shrink:0;display:inline-block}
.rd-search-input{width:100%;box-sizing:border-box;font-size:12px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);font-family:var(--font)}
.rd-search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
/* Toolbar */
.rd-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0;gap:12px;flex-wrap:wrap}
.rd-toolbar-nav{display:flex;align-items:center;gap:6px}
.rd-nav-btn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r)}
.rd-period-label{font-size:13px;font-weight:700;color:var(--text);min-width:180px;text-align:center}
.rd-today-btn{padding:3px 10px;font-size:11px;border-radius:var(--r-full)}
.rd-filter-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-light);padding:3px 8px;border-radius:var(--r-full)}
.rd-count-badge{font-size:11px;color:var(--text-3)}
/* Canvas */
.rd-canvas-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);position:relative;flex:1;min-height:200px;scrollbar-width:none;-ms-overflow-style:none}
.rd-canvas-wrap::-webkit-scrollbar{display:none}
.rd-svg{display:block;font-family:var(--font)}
/* Legende */
.rd-legend{display:flex;align-items:center;gap:20px;padding:10px 16px;flex-wrap:wrap;border-top:1px solid var(--border);flex-shrink:0}
.rd-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2)}
.rd-legend-bar{display:inline-block;width:20px;height:8px;border-radius:var(--r);flex-shrink:0}
.rd-legend-diamond{display:inline-block;width:10px;height:10px;transform:rotate(45deg);border-radius:var(--r);flex-shrink:0}
/* Tooltip */
.rd-tooltip{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.07);padding:12px 14px;min-width:200px;max-width:260px;pointer-events:none;z-index:100;font-size:12px}
.rd-tooltip-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:7px;line-height:1.3}
.rd-tt-dot{width:10px;height:10px;border-radius:var(--r-full);flex-shrink:0;display:inline-block}
.rd-tt-diamond{width:10px;height:10px;transform:rotate(45deg);border-radius:var(--r);flex-shrink:0;display:inline-block}
.rd-tooltip-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 0;color:var(--text-2)}
.rd-tooltip-label{color:var(--text-3);font-size:11px;flex-shrink:0}
.rd-tooltip-progress{display:flex;align-items:center;gap:8px;padding:6px 0 4px}
.rd-tt-track{flex:1;height:5px;background:var(--border);border-radius:var(--r-full);overflow:hidden}
.rd-tt-fill{height:100%;border-radius:inherit;transition:width var(--dur)}
.rd-tt-pct{font-size:11px;font-weight:700;color:var(--text-2);flex-shrink:0;min-width:28px;text-align:right}
.rd-tt-status{font-size:10px;font-weight:700;padding:1px 7px;border-radius:var(--r-full)}
.rd-tt-status--active{background:rgba(37,99,235,.1);color:#2563eb}
.rd-tt-status--completed{background:var(--green-bg);color:var(--green)}
.rd-tt-status--planned{background:var(--surface-3);color:var(--text-3)}
/* Empty State */
.rd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;text-align:center}
.rd-empty-icon{opacity:.35}
.rd-empty-title{font-size:15px;font-weight:700;color:var(--text);margin:0}
.rd-empty-sub{font-size:13px;color:var(--text-2);margin:0;max-width:360px}
/* ═══════════════════════════════════════════════════════════════════
Mobile Foundation — Phase 0
Touch-Targets, Safe-Area, Drawer-Fix, Mobile-spezifische Regeln
═══════════════════════════════════════════════════════════════════ */
/* ── Safe Area (Notch-Phones: iPhone X+) ── */
:root{
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
--safe-left:env(safe-area-inset-left,0px);
--safe-right:env(safe-area-inset-right,0px);
}
/* ── Touch-Targets (Apple HIG: min 44×44px) ──────────────────────
any-pointer:coarse → greift auch bei Dual-Input Geräten
(Touch-Laptop mit angeschlossener Maus, Surface, etc.).
pointer:coarse allein würde nur den primären Pointer prüfen
und bei angesteckter Maus auf fine wechseln → Touch-Targets
würden verschwinden obwohl der Touchscreen noch da ist. */
@media(any-pointer:coarse){
.sm-item{min-height:44px}
.spa-nav a,.spa-nav button{min-height:44px;padding:10px 14px}
.spa-drawer-nav a{min-height:44px;padding:12px 20px}
button,select,input[type="checkbox"],input[type="radio"]{min-height:44px}
.spa-hamburger{min-width:44px;min-height:44px}
*{-webkit-tap-highlight-color:transparent}
/* Lesbarkeit: 11px-Texte in interaktiven Elementen auf 12px,
damit Button-/Chip-/Tab-Labels auf Mobile besser lesbar sind. */
.ai-chip,.ai-clear-btn,.ai-avatar,.ai-no-voice,
.btn.btn-sm,.pm-badge,.kpi-card-label{font-size:12px}
}
/* ── SPA-Modal (globales Modal-Popup, zentriert) ──────────────────
Wiederverwendbares Modal-Popup-Set für alle Pages, die das
`spa-modal-*`-Klassen-Schema nutzen (z. B. Self-Service
Anfrage-Modal, Change-Catalog). Verhalten orientiert sich am
bewährten `.pa-360-modal`-Pattern. */
.spa-modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.55);
z-index:2000;display:flex;align-items:center;justify-content:center;
padding:var(--space-4);
animation:spa-fade-in var(--dur) var(--ease-out);
}
.spa-modal{
background:var(--surface);
border-radius:var(--r-lg);
box-shadow:0 20px 60px rgba(0,0,0,.25);
width:100%;max-width:560px;
max-height:calc(100vh - 80px);
display:flex;flex-direction:column;overflow:hidden;
animation:spa-modal-pop var(--dur) var(--ease-out);
}
.spa-modal-header{
padding:var(--space-3) var(--space-4);
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
flex-shrink:0;
}
.spa-modal-header h3{font-size:15px;font-weight:700;margin:0;color:var(--text-1)}
.spa-modal-close{
background:none;border:none;font-size:20px;line-height:1;
cursor:pointer;color:var(--text-3);
padding:4px 8px;border-radius:var(--r);
transition:background var(--dur-fast),color var(--dur-fast);
}
.spa-modal-close:hover{background:var(--surface-2);color:var(--text-1)}
.spa-modal-body{padding:var(--space-4);overflow-y:auto;flex:1}
.spa-modal-footer{
padding:var(--space-3) var(--space-4);
border-top:1px solid var(--border);
display:flex;gap:var(--space-2);justify-content:flex-end;align-items:center;
flex-shrink:0;
}
@media(max-width:600px){
.spa-modal{
max-width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;
align-self:flex-end;max-height:90vh;
}
.spa-modal-overlay{align-items:flex-end;padding:0}
}
/* ── Modal-Content-Bottom-Padding ────────────────────────────────
Sticky Modal-Footer (Submit-Buttons) verdeckt sonst die letzten
Form-Felder auf Mobile. Page-Pattern: Modal-Body bekommt unten
genug Luft, damit der Footer "freischwebt". */
@media(max-width:767px){
.modal-body,.spa-modal-body,.fly-in-content{padding-bottom:max(64px,env(safe-area-inset-bottom,0))}
}
/* ── Hover Guards ────────────────────────────────────────────────
Problem: Auf reinen Touch-Geräten "klebt" :hover nach dem Tap
— der Hover-State bleibt bis der User woanders hintippt.
Loesung: Hover-Effekte nur anwenden wenn echtes Hovering moeglich.
hover:hover → Maus/Trackpad vorhanden (Desktop, Touch-Laptop mit Maus)
hover:none → Reines Touch-Gerät (Phone, Tablet ohne Maus)
Wichtig: any-hover:hover würde auch Touch-Laptops matchen die
gerade im Tablet-Modus sind — hover:hover ist praeziser für
den aktuell aktiven Input. */
/* Tabellen-Rows: Hover nur mit Maus */
@media(hover:none){
.spa-tbl tbody tr:hover{background:inherit}
.spa-tbl tbody tr:nth-child(even):hover{background:var(--surface-2)}
.data-table tbody tr:hover{background:inherit}
.data-table tbody tr:nth-child(even):hover{background:var(--surface-2)}
/* Aktives Feedback statt Hover — kurzer visueller Touch-Feedback */
.spa-tbl tbody tr:active{background:var(--accent-light)}
.data-table tbody tr:active{background:var(--accent-light)}
}
/* Navigation: Hover nur mit Maus */
@media(hover:none){
.spa-nav a:hover,.spa-nav-drop-btn:hover{background:inherit;color:inherit}
.sm-item:hover{background:inherit;color:inherit}
.sm-item:hover::before{background:transparent}
.pm-trigger:hover{box-shadow:none}
.spa-hamburger:hover{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
/* Active-State als Touch-Feedback */
.spa-nav a:active,.spa-nav-drop-btn:active{background:var(--accent-light);color:var(--accent)}
.sm-item:active{background:var(--accent-light);color:var(--accent)}
}
/* Cards und interaktive Elemente: Hover nur mit Maus */
@media(hover:none){
.mobile-card:hover{border-color:var(--border);box-shadow:none}
.mobile-card:active{border-color:var(--accent);box-shadow:var(--shadow-sm)}
}
/* CSS Custom Property für JS-Zugriff auf Hover-Faehigkeit */
@media(hover:hover){:root{--can-hover:1}}
@media(hover:none){:root{--can-hover:0}}
/* ── Phone (< 768px) ── */
@media(max-width:767px){
/* Header: kompakter + Safe-Area */
.spa-header{padding-top:var(--safe-top)}
.spa-logo img{height:28px}
/* Drawer: breiterer Touch-Bereich */
.spa-drawer{width:85vw;max-width:320px;padding-top:var(--safe-top)}
.spa-drawer-head{padding:16px 20px}
/* Tabellen: horizontal scrollbar */
.spa-tbl-wrap,.data-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spa-tbl,.data-table{min-width:600px}
/* Custom-Tabellen in Modulen: horizontal scrollbar Container + Mindestbreite.
Gilt für Pages die eigene Table-Klassen haben (sda-, lp-, tk-), ohne
dass jede Page individuell refactored werden muss. */
.sda-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.sda-table tbody,.sda-table thead{display:table;width:100%;min-width:560px}
/* Fly-In → Fullscreen Bottom-Sheet */
.fly-in{
width:100vw !important;max-width:100vw !important;
height:calc(100vh - 52px - var(--safe-top)) !important;
top:calc(52px + var(--safe-top)) !important;right:0 !important;
border-radius:0 !important;
}
/* Custom Side-Flyouts (Pages ohne openFlyIn): als Bottom-Sheet anzeigen,
damit auf Phone kein 520px-Panel an der rechten Seite steht. */
.sda-flyout{
top:auto !important;right:0 !important;left:0 !important;bottom:0 !important;
width:100% !important;max-width:100% !important;
max-height:calc(92vh - var(--safe-top)) !important;
border-radius:var(--r-lg) var(--r-lg) 0 0 !important;
box-shadow:0 -4px 24px rgba(0,0,0,.12) !important;
animation:bottomSheetUp var(--dur-slow) var(--ease-out) !important;
padding-bottom:var(--safe-bottom) !important;
}
/* Custom Modals (Service-Desk, CRM etc.): responsive, mehr Höhe nutzen */
.sd-modal{width:100% !important;max-width:100vw !important;max-height:92vh !important;
border-radius:var(--r-lg) var(--r-lg) 0 0 !important;margin-top:auto;
animation:bottomSheetUp var(--dur-slow) var(--ease-out)}
.sd-overlay{align-items:flex-end !important;padding:0 !important}
/* KPI-Grids kompakter, damit sie nicht zu viel Platz verbrauchen */
.sd-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px}
/* Filter-Bars: Search nimmt volle Breite, Select kompakter */
.sd-filters{gap:6px}
.sd-search,.sd-filter-select{flex:1 1 auto;min-width:0}
.sd-search{min-width:140px}
/* Content-Bereich: Safe-Area */
.spa-app{padding-bottom:var(--safe-bottom)}
/* Command Palette Trigger: nur Icon */
.cp-trigger-text,.cp-trigger-kbd{display:none}
/* iOS Zoom-Prevention: Inputs < 16px triggern iOS-Auto-Zoom beim Fokus.
Nur font-size erhöhen, Padding beibehalten damit Layout stabil bleibt. */
input[type="text"],input[type="number"],input[type="email"],input[type="tel"],
input[type="url"],input[type="password"],input[type="search"],input[type="date"],
input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],
input:not([type]),select,textarea,.spa-input,
.sd-search,.sd-filter-select,.sd-form-input,.sd-form-textarea,
.sda-form-input,.sda-form-textarea,.sda-form-select{
font-size:16px !important;
}
}
/* ── Tablet (768px – 1023px) ── */
@media(min-width:768px) and (max-width:1023px){
.spa-header{padding-top:var(--safe-top)}
/* Fly-In: breiter als Phone, aber nicht Desktop-breit */
.fly-in{width:min(480px,85vw) !important}
}
/* ── Mobile Bottom-Bar (Schnellzugriff) ── */
.mobile-bottom-bar{
display:none;position:fixed;bottom:0;left:0;right:0;
height:calc(56px + var(--safe-bottom));
padding-bottom:var(--safe-bottom);
background:var(--surface);
border-top:1px solid var(--border);
z-index:100;
justify-content:space-around;align-items:center;
}
.mobile-bottom-bar a,.mobile-bottom-bar button{
display:flex;flex-direction:column;align-items:center;gap:2px;
padding:6px 12px;border:none;background:none;
font-size:10px;color:var(--text-3);text-decoration:none;
min-width:56px;min-height:44px;justify-content:center;
cursor:pointer;
}
.mobile-bottom-bar a.active,.mobile-bottom-bar button.active{color:var(--accent)}
.mobile-bottom-bar a.active .bb-icon,.mobile-bottom-bar button.active .bb-icon{transform:translateY(-1px)}
.mobile-bottom-bar .bb-icon{font-size:20px;line-height:1;transition:transform var(--dur-fast)}
.mobile-bottom-bar .bb-badge{
position:absolute;top:2px;right:50%;transform:translateX(14px);
background:var(--red);color:#fff;font-size:9px;font-weight:700;
padding:0 5px;border-radius:var(--r-full);min-width:14px;
text-align:center;line-height:14px;
}
.mobile-bottom-bar a,.mobile-bottom-bar button{position:relative}
/* "Mehr"-Button: subtile Betonung, da er Zugang zu allem Weiteren gibt */
.mobile-bottom-bar .bb-more{color:var(--text-2)}
.mobile-bottom-bar .bb-more .bb-icon{
background:var(--surface-2);border-radius:var(--r);
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
font-size:16px;transition:background var(--dur-fast),color var(--dur-fast);
}
.mobile-bottom-bar .bb-more.active{color:var(--accent)}
.mobile-bottom-bar .bb-more.active .bb-icon{background:var(--accent);color:var(--on-accent);transform:none}
@media(max-width:767px){
.mobile-bottom-bar{display:flex}
/* Platz für Bottom-Bar schaffen */
.spa-app{padding-bottom:calc(56px + var(--safe-bottom))}
/* Breadcrumbs auf Phone verstecken — Platz sparen, Kontext via Tabs/Header */
#spaBreadcrumbSlot{display:none !important}
#spaBreadcrumb{display:none !important}
}
/* ── Sidebar-Tabs Scroll-Indikator (Mobile) ── */
@media(max-width:900px){
.sm-sidebar{
/* Rechts Platz lassen für den "Alle anzeigen"-Button (Overflow-Menü).
Der JS-Enhancer injiziert einen sticky Button an der rechten Seite,
wenn die Tabs überlaufen. */
padding-right:52px;
/* Scrollbar auf Mobile verstecken (Pill-Look) */
scrollbar-width:none;
}
.sm-sidebar::-webkit-scrollbar{display:none}
/* Aktiven Tab in den Viewport scrollen — wird per JS gesteuert */
.sm-item{scroll-snap-align:start}
.sm-sidebar{scroll-snap-type:x mandatory;scroll-behavior:smooth}
/* Sticky-Shadow: wenn Content unter der Sidebar durchscrollt,
optische Trennung durch leichten Schlagschatten. */
.sm-sidebar{box-shadow:0 4px 8px -6px rgba(15,23,42,.18)}
}
html.dark .sm-sidebar{box-shadow:0 4px 10px -6px rgba(0,0,0,.45)}
/* ── sm-sidebar Overflow-Button ("Alle anzeigen") ──
Ein kompakter Sticky-Button am rechten Rand der Horizontal-Pills,
der ein Bottom-Sheet mit allen Tabs öffnet. Löst das Problem der
verdeckten Pills bei Pages mit vielen Bereichen. */
.sm-sidebar-more-holder{
position:sticky;right:0;top:0;bottom:0;flex-shrink:0;
display:flex;align-items:center;
padding-left:8px;margin-left:auto;
background:linear-gradient(to right,transparent,var(--surface) 28%);
height:100%;z-index:2;
pointer-events:none; /* durchlässig, nur Button fängt Klicks */
}
.sm-sidebar-more{
pointer-events:auto;
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;min-width:40px;
border-radius:var(--r-full);
border:1px solid var(--border);
background:var(--surface);color:var(--text-2);
cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);
font-family:var(--font);
box-shadow:var(--shadow-sm);
}
.sm-sidebar-more:hover{background:var(--accent-light);color:var(--accent);border-color:var(--accent)}
.sm-sidebar-more:active{transform:scale(0.94)}
html.dark .sm-sidebar-more-holder{background:linear-gradient(to right,transparent,var(--surface) 28%)}
/* ── sm-sidebar Bottom-Sheet (Tab-Auswahl) ── */
.sm-sidebar-sheet-overlay{
position:fixed;inset:0;z-index:310;
background:rgba(0,0,0,0);
display:flex;align-items:flex-end;justify-content:center;
transition:background var(--dur) var(--ease-out);
padding-bottom:env(safe-area-inset-bottom,0);
}
.sm-sidebar-sheet-overlay.open{background:var(--overlay)}
.sm-sidebar-sheet{
width:100%;max-width:560px;
background:var(--surface);
border-radius:var(--r-lg) var(--r-lg) 0 0;
max-height:min(80vh,640px);
display:flex;flex-direction:column;
transform:translateY(100%);
transition:transform var(--dur-slow) var(--ease-out);
padding-bottom:env(safe-area-inset-bottom,0);
box-shadow:0 -8px 32px rgba(0,0,0,.18);
}
.sm-sidebar-sheet-overlay.open .sm-sidebar-sheet{transform:translateY(0)}
.sm-sidebar-sheet-handle{
width:36px;height:4px;border-radius:var(--r);
background:var(--border);margin:10px auto 6px;flex-shrink:0;
}
.sm-sidebar-sheet-header{
padding:6px 20px 12px;
font-size:12px;font-weight:700;color:var(--text-3);
text-transform:uppercase;letter-spacing:.5px;
border-bottom:1px solid var(--border);flex-shrink:0;
}
.sm-sidebar-sheet-list{
flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0;
}
.sm-sidebar-sheet-item{
display:flex;align-items:center;gap:10px;
width:100%;padding:14px 20px;min-height:52px;
background:none;border:none;text-align:left;
font-family:var(--font);font-size:15px;font-weight:500;
color:var(--text);cursor:pointer;
border-bottom:1px solid var(--border);
transition:background var(--dur-fast);
}
.sm-sidebar-sheet-item:last-child{border-bottom:none}
.sm-sidebar-sheet-item:active{background:var(--accent-light)}
.sm-sidebar-sheet-item.active{color:var(--accent);font-weight:700;background:var(--accent-light)}
.sm-sidebar-sheet-item.active::after{
content:'';margin-left:auto;
width:18px;height:18px;border-radius:var(--r-full);
background:var(--accent);flex-shrink:0;
/* Checkmark über Mask */
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
-webkit-mask-size:contain;mask-size:contain;
color:transparent;
}
/* Icons/Badges aus dem original sm-item sinnvoll im Sheet anzeigen */
.sm-sidebar-sheet-item .sm-nav-icon{width:22px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3)}
.sm-sidebar-sheet-item.active .sm-nav-icon{color:var(--accent)}
.sm-sidebar-sheet-item > span[style*="margin-left:auto"],
.sm-sidebar-sheet-item > span[style*="margin-left: auto"]{
/* Counts und Badges aus dem original Tab — Farbe abmildern fürs Sheet */
font-size:12px;color:var(--text-3);font-weight:600;
}
/* ── Phone (≤767px): sm-sidebar als Selector-Chip ──
Statt horizontaler Pill-Strip wird auf Phone genau EIN Chip
angezeigt, der den aktiven Tab spiegelt (Label + optionale Badge
+ Caret). Tap öffnet das bestehende Bottom-Sheet zur Auswahl.
Pattern: iOS Files / Outlook / Apple Photos. Vorteil: kein Clipping,
variable Tab-Anzahl egal, aktiver Zustand voll sichtbar. */
@media(max-width:767px){
.sm-sidebar{
/* Layout zurücksetzen — kein Horizontal-Scroll, keine Snap-Points,
kein padding-right für entfallenen More-Button. */
flex-direction:row;flex-wrap:nowrap;
overflow:visible;
padding:8px 12px;gap:0;
padding-right:12px;
scroll-snap-type:none;
}
.sm-sidebar::-webkit-scrollbar{display:none}
/* Alle ursprünglichen Sidebar-Inhalte ausblenden — der Selector-Chip
(per JS injiziert) übernimmt die Anzeige. Items bleiben im DOM,
damit Vue-Bindings und item.click() im Sheet weiter funktionieren. */
.sm-sidebar > .sm-item,
.sm-sidebar > .sm-header,
.sm-sidebar > .sm-section-label,
.sm-sidebar > .sm-group-toggle,
.sm-sidebar > .sm-group-items,
.sm-sidebar > .sm-sidebar-more-holder{
display:none !important;
}
/* Generische direkte Kinder (Search-Box, Aktions-Wrapper) ebenfalls
ausblenden — nur der Selector-Wrap bleibt sichtbar. */
.sm-sidebar > div:not(.sm-sidebar-selector-wrap):not(.sm-content){
display:none !important;
}
.sm-sidebar-selector-wrap{
flex:1;min-width:0;display:flex;
}
.sm-sidebar-selector{
display:flex;align-items:center;gap:10px;
width:100%;min-height:44px;
padding:8px 14px;
border:1px solid var(--border);
border-radius:var(--r-full);
background:var(--surface-2);color:var(--text);
font-family:var(--font);font-size:14px;font-weight:600;
cursor:pointer;text-align:left;
transition:background var(--dur-fast),border-color var(--dur-fast);
}
.sm-sidebar-selector:active{
background:var(--accent-light);border-color:var(--accent);
}
.sm-sidebar-selector-icon{
display:inline-flex;align-items:center;justify-content:center;
color:var(--accent);flex-shrink:0;width:18px;height:18px;
}
.sm-sidebar-selector-icon svg{width:18px;height:18px}
.sm-sidebar-selector-label{
flex:1;min-width:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sm-sidebar-selector-badge{
font-size:11px;font-weight:700;
padding:2px 8px;border-radius:var(--r-full);
background:var(--accent);color:#fff;flex-shrink:0;
line-height:1.4;
}
.sm-sidebar-selector-badge--neutral{
background:var(--surface-3);color:var(--text-2);
}
.sm-sidebar-selector-caret{
flex-shrink:0;color:var(--text-3);
display:inline-flex;align-items:center;
}
}
/* ── Mobile Card-Ansicht (Alternative zu Tabellen) ── */
.mobile-card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);padding:14px 16px;
margin-bottom:8px;cursor:pointer;
transition:box-shadow var(--dur-fast),border-color var(--dur-fast);
}
.mobile-card:active{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.mobile-card-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mobile-card-title{font-weight:600;font-size:14px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-card-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:12px;color:var(--text-2)}
.mobile-card-label{color:var(--text-3)}
.mobile-card-value{font-weight:500;text-align:right}
.mobile-card-grid{display:flex;flex-direction:column}
.mobile-card-grid > .mobile-card{margin-bottom:8px}
/* Phone-Landscape: 2-spaltiges Card-Grid (iPhone SE/Mini-Range, ≥568px breit, <768) */
@media(orientation:landscape) and (min-width:568px) and (max-width:767px){
.mobile-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-card-grid > .mobile-card{margin-bottom:0}
}
/* ── Bottom-Sheet (Mobile Alternative zu FlyIn) ── */
.bottom-sheet-overlay{
position:fixed;inset:0;background:var(--overlay);z-index:200;
display:flex;align-items:flex-end;justify-content:center;
}
.bottom-sheet{
background:var(--surface);width:100%;max-width:100vw;
max-height:calc(90vh - var(--safe-top));
border-radius:var(--r-lg) var(--r-lg) 0 0;
overflow-y:auto;-webkit-overflow-scrolling:touch;
padding-bottom:var(--safe-bottom);
animation:bottomSheetUp var(--dur-slow) var(--ease-out);
}
.bottom-sheet-handle{
width:36px;height:4px;border-radius:var(--r-xs);background:var(--border);
margin:10px auto 6px;
}
@keyframes bottomSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* ── Mobile Segmented Control (<=4 Tabs) ── */
.mobile-segmented{
display:flex;gap:0;padding:4px;margin:0 12px 12px;
background:var(--surface-2);border-radius:var(--r-md);
border:1px solid var(--border);
}
.mobile-segmented-item{
flex:1;display:flex;align-items:center;justify-content:center;gap:4px;
padding:8px 6px;border-radius:var(--r);border:none;background:none;
font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;
font-family:var(--font);transition:all var(--dur-fast);
white-space:nowrap;min-height:36px;position:relative;
}
.mobile-segmented-item.active{
background:var(--surface);color:var(--accent);font-weight:700;
box-shadow:var(--shadow-sm);
}
.mobile-segmented-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-full);
font-size:9px;font-weight:700;line-height:1;
background:var(--red);color:#fff;
}
.mobile-segmented-badge.subtle{background:var(--text-3);color:#fff}
/* ── Mobile View-Selector (5+ Tabs) ── */
.mobile-view-selector{
display:flex;align-items:center;justify-content:space-between;
padding:10px 16px;margin:0 12px 8px;
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
cursor:pointer;min-height:44px;
transition:border-color var(--dur-fast);
}
.mobile-view-selector:active{border-color:var(--accent)}
.mobile-view-selector-label{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.mobile-view-selector-icon{font-size:16px}
.mobile-view-selector-chevron{font-size:12px;color:var(--text-3);transition:transform var(--dur-fast)}
.mobile-view-selector-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);
font-size:10px;font-weight:700;background:var(--accent);color:var(--on-accent);
}
/* ── Tab-Sheet (Bottom-Sheet für View-Selector) ── */
.tab-sheet-item{
display:flex;align-items:center;gap:12px;
padding:14px 20px;cursor:pointer;
transition:background var(--dur-fast);
min-height:48px;border-bottom:1px solid var(--border);
}
.tab-sheet-item:active{background:var(--accent-light)}
.tab-sheet-item.active{color:var(--accent);font-weight:600}
.tab-sheet-item-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.tab-sheet-item-label{flex:1;font-size:14px}
.tab-sheet-item-badge{
margin-left:auto;font-size:11px;font-weight:600;color:var(--text-3);
}
.tab-sheet-item-check{color:var(--accent);font-size:16px;margin-left:auto;flex-shrink:0}
.tab-sheet-separator{
padding:10px 20px 4px;font-size:10px;font-weight:700;
color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;
border-bottom:1px solid var(--border);
}
/* ── Mobile FAB (Floating Action Button) ── */
.mobile-fab{
display:none;position:fixed;z-index:90;
right:16px;bottom:calc(72px + var(--safe-bottom));
width:56px;height:56px;border-radius:50%;border:none;
background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);
color:var(--on-accent);font-size:24px;font-weight:700;
box-shadow:0 4px 12px rgba(0,74,151,.35);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:transform var(--dur-fast),box-shadow var(--dur-fast);
}
.mobile-fab:active{transform:scale(0.92);box-shadow:0 2px 6px rgba(0,74,151,.25)}
@media(max-width:767px){.mobile-fab{display:flex}}
@media(min-width:768px){.mobile-fab{display:none}}
/* ── Mobile Filter-Bar Helper (Phone: vertikales Stacking) ──
Pages mit Filter-Toolbar fügen .mobile-filter-bar als Klasse zum
Container hinzu. Auf <768px stapeln Inputs/Selects/Buttons untereinander
in voller Breite mit min-height:40px (Touch-tauglich). */
@media(max-width:767px){
.mobile-filter-bar,
.crm-filter-bar{
flex-direction:column;align-items:stretch;gap:8px;
}
.mobile-filter-bar > input,
.mobile-filter-bar > select,
.mobile-filter-bar > .btn,
.mobile-filter-bar > button{
width:100%;min-width:0;max-width:none;min-height:40px;
box-sizing:border-box;
}
.mobile-filter-bar > .btn,
.mobile-filter-bar > button{
justify-content:center;
}
}
/* ── Skeleton-Loader (Pages:
während Fetch) ── */
.skeleton{
background:linear-gradient(90deg,var(--surface-2) 0%,var(--border) 40%,var(--surface-2) 80%);
background-size:200% 100%;
animation:skeleton-shimmer 1.4s ease-in-out infinite;
border-radius:var(--r);
}
.skeleton-line{height:14px;margin:8px 0;width:100%}
.skeleton-line.short{width:48%}
.skeleton-line.title{height:20px;width:62%;margin-bottom:14px}
.skeleton-card{height:96px;border-radius:var(--r-md);margin-bottom:12px}
.skeleton-chip{display:inline-block;width:78px;height:24px;border-radius:var(--r-full);margin-right:6px}
@keyframes skeleton-shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
@media(prefers-reduced-motion:reduce){
.skeleton{animation:none;opacity:.6}
}
/* ── Mobile Dashboard Patterns ── */
/* KPI Scroll-Chips: horizontale kompakte Metriken */
.mobile-kpi-strip{
display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
padding:12px;scroll-snap-type:x mandatory;
}
.mobile-kpi-chip{
flex-shrink:0;scroll-snap-align:start;
display:flex;flex-direction:column;align-items:center;gap:2px;
padding:10px 16px;min-width:90px;
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
position:relative;overflow:hidden;
}
.mobile-kpi-chip::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--accent);
}
.mobile-kpi-chip-value{font-size:22px;font-weight:800;color:var(--text);line-height:1}
.mobile-kpi-chip-label{font-size:9px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.3px;text-align:center}
/* Klappbare Dashboard-Sektionen */
.mobile-dash-section{
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
margin-bottom:8px;overflow:hidden;
}
.mobile-dash-section-header{
display:flex;align-items:center;justify-content:space-between;
padding:12px 16px;cursor:pointer;min-height:44px;
transition:background var(--dur-fast);
}
.mobile-dash-section-header:active{background:var(--accent-light)}
.mobile-dash-section-title{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.mobile-dash-section-chevron{font-size:12px;color:var(--text-3);transition:transform var(--dur-fast)}
.mobile-dash-section-chevron.open{transform:rotate(180deg)}
.mobile-dash-section-body{padding:0 16px 16px}
/* ── KI-Assistent Widget (Panel/Overlay) ─────────────────────────────
Auslöser sitzt im Header-Toolbar (.tb-iconbtn) — kein Floating-FAB
mehr, der zuvor Seiten-Aktionen (z.B. Speichern) verdeckte. */
.fl-lifecycle-banner{position:fixed;top:0;left:0;right:0;z-index:10000;display:flex;align-items:center;justify-content:center;gap:10px;padding:calc(6px + var(--safe-top,0px)) 16px 6px;background:var(--red,#dc2626);color:#fff;font-size:13px;font-weight:600;font-family:var(--font);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.fl-ai-panel{position:fixed;right:0;top:0;bottom:0;width:min(560px,42vw);min-width:400px;max-width:100vw;background:var(--surface);border-left:1px solid var(--border);box-shadow:-6px 0 32px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:909;transform:translateX(110%);transition:transform .25s cubic-bezier(.4,0,.2,1);pointer-events:none}
.fl-ai-panel.open{transform:none;pointer-events:auto}
@media(min-width:1400px){.fl-ai-panel{width:640px}}
@media(max-width:767px){.fl-ai-panel{top:auto;bottom:0;right:0;left:0;width:100%;min-width:0;max-height:90vh;border-left:none;border-top:1px solid var(--border);border-radius:var(--r) var(--r) 0 0;transform:translateY(110%)}.fl-ai-panel.open{transform:none}}
.fl-ai-overlay{position:fixed;inset:0;background:var(--overlay);z-index:908;opacity:0;transition:opacity .25s;pointer-events:none}
.fl-ai-overlay.open{opacity:1;pointer-events:auto}
.fl-ai-header{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0}
.fl-ai-header-icon{width:28px;height:28px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fl-ai-header-title{flex:1;font-size:15px;font-weight:700}
.fl-ai-btn-sm{width:30px;height:30px;border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:var(--r,6px);color:var(--text-3);font-size:13px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;flex-shrink:0}
.fl-ai-btn-sm:hover{border-color:var(--accent);color:var(--accent)}
.fl-ai-close{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:var(--r,6px);color:var(--text-3);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;flex-shrink:0}
.fl-ai-close:hover{background:var(--surface-2,var(--bg));color:var(--text)}
.fl-ai-chips{display:flex;gap:6px;padding:10px 16px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-shrink:0}
.fl-ai-chips::-webkit-scrollbar{display:none}
.fl-ai-chip{border:1px solid var(--border);background:var(--surface);color:var(--text-2,var(--text));border-radius:var(--r-full,9999px);padding:5px 12px;font-size:12px;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s;flex-shrink:0}
.fl-ai-chip:hover{border-color:var(--accent);color:var(--accent)}
.fl-ai-chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
@media(any-pointer:coarse){.fl-ai-chip{min-height:32px;padding:6px 14px}}
.ai-voice-btn{width:38px;height:38px;border-radius:var(--r-md,8px);border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,border-color .15s;color:var(--text-3)}
.ai-voice-btn:hover{border-color:var(--accent);color:var(--accent)}
.ai-voice-btn.listening{background:color-mix(in srgb, var(--red) 12%, transparent);border-color:var(--red);color:var(--red);animation:ai-pulse 1s infinite}
@keyframes ai-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 30%, transparent)}50%{box-shadow:0 0 0 6px transparent}}
/* ── KI-Assistent Chat (shared — Floating Widget + Chat Page) ────── */
.ai-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.ai-msg{display:flex;gap:10px;align-items:flex-start;animation:ai-msg-in .18s ease}
.ai-msg.user{flex-direction:row-reverse}
@keyframes ai-msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ai-bubble{max-width:78%;padding:11px 15px;border-radius:var(--r);font-size:14px;line-height:1.55;word-break:break-word}
.ai-bubble.user{background:var(--accent);color:var(--on-accent,#fff);border-bottom-right-radius:4px}
.ai-bubble.assistant{background:var(--surface-2,var(--surface));border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px}
.ai-bubble.error{background:color-mix(in srgb,var(--red) 10%,transparent);border:1px solid var(--red);color:var(--red)}
.ai-bubble p{margin:0 0 8px}.ai-bubble p:last-child{margin-bottom:0}
.ai-bubble ul,.ai-bubble ol{margin:4px 0 8px 18px;padding:0}.ai-bubble li{margin-bottom:2px}
.ai-bubble strong{font-weight:700}
.ai-bubble h1,.ai-bubble h2,.ai-bubble h3,.ai-bubble h4,.ai-bubble h5,.ai-bubble h6{margin:10px 0 6px;font-weight:700;line-height:1.3}
.ai-bubble h1{font-size:18px}.ai-bubble h2{font-size:16px}.ai-bubble h3{font-size:15px}.ai-bubble h4,.ai-bubble h5,.ai-bubble h6{font-size:14px}
.ai-bubble h1:first-child,.ai-bubble h2:first-child,.ai-bubble h3:first-child{margin-top:0}
.ai-bubble hr{border:none;border-top:1px solid var(--border);margin:10px 0}
.ai-md-table{border-collapse:collapse;margin:8px 0;font-size:13px;width:100%;display:block;overflow-x:auto}
.ai-md-table th,.ai-md-table td{border:1px solid var(--border);padding:5px 9px;text-align:left;vertical-align:top}
.ai-md-table th{background:var(--surface-2,rgba(0,0,0,.04));font-weight:700}
.ai-md-table tr:nth-child(even) td{background:color-mix(in srgb,var(--border) 18%,transparent)}
.ai-bubble code{font-family:monospace;font-size:12px;background:rgba(0,0,0,.06);padding:1px 4px;border-radius:var(--r)}
.ai-code-block{background:rgba(0,0,0,.06);padding:8px;border-radius:var(--r);font-family:monospace;font-size:12px;overflow-x:auto;white-space:pre-wrap;margin:4px 0}
.ai-searched{margin-top:8px;font-size:11px;color:var(--text-3);border-top:1px dashed var(--border);padding-top:4px}
.ai-feedback{display:flex;align-items:center;gap:4px;margin-top:6px}
.ai-fb-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--border);border-radius:var(--r);background:transparent;color:var(--text-3);cursor:pointer;transition:color var(--dur-fast),border-color var(--dur-fast)}
.ai-fb-btn:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.ai-fb-btn:disabled{cursor:default;opacity:.55}
.ai-fb-btn.active{color:var(--accent);border-color:var(--accent);opacity:1}
.ai-fb-thanks{font-size:11px;color:var(--text-3);margin-left:4px}
.ai-live-status{font-size:11px;color:var(--text-3);margin-left:8px;white-space:nowrap}
.ai-searched + .ai-activity{border-top:none;margin-top:2px;padding-top:0}
.ai-activity{margin-top:6px;font-size:11px;color:var(--text-3);border-top:1px dashed var(--border);padding-top:4px}
.ai-activity summary{cursor:pointer;list-style:none;user-select:none;outline:none}
.ai-activity summary::-webkit-details-marker{display:none}
.ai-activity summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.ai-activity[open] summary::before{transform:rotate(90deg)}
.ai-activity-list{list-style:none;margin:4px 0 0;padding:0}
.ai-activity-list li{display:flex;justify-content:space-between;gap:8px;padding:1px 0}
.ai-activity-name{font-family:monospace}
.ai-activity-name.err{color:var(--red)}
.ai-activity-dur{color:var(--text-3);font-variant-numeric:tabular-nums}
.ai-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:2px}
.ai-avatar.assistant{background:var(--accent);color:var(--on-accent,#fff)}
.ai-avatar.user{background:var(--surface-3,var(--border));color:var(--text-2)}
.ai-typing{display:flex;gap:4px;align-items:center;padding:4px 2px}
.ai-typing-dot{width:7px;height:7px;border-radius:50%;background:var(--text-3);animation:ai-dot .9s infinite}
.ai-typing-dot:nth-child(2){animation-delay:.15s}.ai-typing-dot:nth-child(3){animation-delay:.3s}
@keyframes ai-dot{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1);opacity:1}}
.ai-input-bar{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface);display:flex;gap:8px;align-items:flex-end;flex-shrink:0}
.ai-textarea{flex:1;resize:none;border:1px solid var(--border);border-radius:var(--r-md,8px);padding:9px 12px;font-size:14px;font-family:var(--font,inherit);color:var(--text);background:var(--surface-2,#f8fafc);outline:none;max-height:120px;overflow-y:auto;transition:border-color .15s;line-height:1.45}
.ai-textarea:focus{border-color:var(--accent)}
.ai-send-btn{width:38px;height:38px;border-radius:var(--r-md,8px);border:none;background:var(--accent);color:var(--on-accent,#fff);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
.ai-send-btn:disabled{opacity:.4;cursor:not-allowed}
.ai-suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.ai-suggestion{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-full,9999px);padding:6px 14px;font-size:12px;color:var(--text-2,var(--text));cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s;text-align:left}
.ai-suggestion:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.ai-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:32px 20px;text-align:center;gap:10px}
.ai-empty-icon{width:52px;height:52px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:2px}
.ai-empty-title{font-size:16px;font-weight:700;color:var(--text)}
.ai-empty-sub{font-size:13px;color:var(--text-3);max-width:300px;line-height:1.5}
/* ── Landing KI-Assistent Widget ─────────────────────────────────── */
.lp-ai-widget{display:flex;flex-direction:column}
.lp-ai-msgs{flex:1;overflow-y:auto;max-height:240px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.lp-ai-msg{display:flex;gap:8px;align-items:flex-start;animation:ai-msg-in .18s ease}
.lp-ai-msg.user{flex-direction:row-reverse}
.lp-ai-bubble{max-width:85%;padding:8px 12px;border-radius:var(--r-lg);font-size:13px;line-height:1.45;word-break:break-word}
.lp-ai-bubble.user{background:var(--accent);color:var(--on-accent,#fff);border-bottom-right-radius:var(--r-sm)}
.lp-ai-bubble.assistant{background:var(--surface-2,var(--bg));border:1px solid var(--border);color:var(--text);border-bottom-left-radius:var(--r-sm)}
.lp-ai-bubble.error{background:color-mix(in srgb,var(--red) 8%,transparent);border:1px solid var(--red);color:var(--red)}
.lp-ai-bubble p{margin:0 0 6px}.lp-ai-bubble p:last-child{margin-bottom:0}
.lp-ai-bubble ul,.lp-ai-bubble ol{margin:3px 0 6px 16px;padding:0}.lp-ai-bubble li{margin-bottom:2px}
.lp-ai-bubble strong{font-weight:700}
.lp-ai-avatar{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent,#fff);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:2px}
.lp-ai-typing{display:flex;gap:3px;align-items:center;padding:2px 0}
.lp-ai-dot{width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:ai-dot .9s infinite}
.lp-ai-dot:nth-child(2){animation-delay:.15s}.lp-ai-dot:nth-child(3){animation-delay:.3s}
.lp-ai-empty{display:flex;align-items:center;justify-content:center;padding:20px 14px;color:var(--text-3);font-size:12px;text-align:center}
.lp-ai-suggestions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px}
/* .lp-ai-chip ergänzt .btn.btn-sm.btn-secondary — nur Pill-Overrides */
.lp-ai-chip{border-radius:var(--r-full);padding:4px 8px;white-space:nowrap}
@media(hover:hover){.lp-ai-chip:hover{border-color:var(--accent);color:var(--accent)}}
@media(any-pointer:coarse){.lp-ai-chip{min-height:36px}}
.lp-ai-input-bar{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:6px;align-items:flex-end;flex-shrink:0}
.lp-ai-textarea{flex:1;resize:none;border:1px solid var(--border);border-radius:var(--r-md);padding:7px 10px;font-size:13px;font-family:var(--font);color:var(--text);background:var(--surface-2);outline:none;max-height:80px;overflow-y:auto;transition:border-color var(--dur-fast);line-height:1.4}
.lp-ai-textarea:focus{border-color:var(--accent)}
/* .lp-ai-send ergänzt .btn.btn-primary.btn-icon — nur Icon-Grösse und Radius-Override */
.lp-ai-send{border-radius:var(--r-md);font-size:14px;flex-shrink:0}
.lp-ai-send:disabled{opacity:.4}
/* ── Moderne Rollen-Darstellung ── */
/* Outline-Style Badges statt farbige Kreise */
.role-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--r-md);
border: 1.5px solid var(--border);
background: var(--surface);
font-size: 13px;
font-weight: 500;
color: var(--text);
transition: all var(--dur-fast);
cursor: default;
white-space: nowrap;
position: relative;
}
.role-badge:hover {
border-color: var(--accent);
background: var(--accent-light);
color: var(--accent);
}
/* Rollencode als Sekundärtext */
.role-badge-code {
font-size: 11px;
color: var(--text-3);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* Moderne Listen von Rollen */
.role-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0;
}
/* Rollen-Karte (für Admin-Oberflächen) */
.role-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
transition: all var(--dur-fast);
cursor: pointer;
}
.role-card:hover {
border-color: var(--accent);
background: var(--accent-light);
box-shadow: var(--shadow-sm);
}
.role-card-header {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.role-card-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.role-card-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.role-card-meta {
font-size: 12px;
color: var(--text-3);
}
/* Minimaler Accent-Line (statt Farbkreis) */
.role-accent-line {
width: 3px;
height: 100%;
border-radius: var(--r-full);
background: var(--accent);
flex-shrink: 0;
}
/* Action-Buttons neben Rollen */
.role-actions {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.role-action-btn {
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface-2);
color: var(--text-2);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all var(--dur-fast);
white-space: nowrap;
}
.role-action-btn:hover {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
.role-action-btn.danger {
color: var(--red);
border-color: var(--red);
}
.role-action-btn.danger:hover {
background: var(--red);
color: #fff;
border-color: var(--red);
}
/* ── Feedback Widget ──────────────────────────────────────────────── */
.fb-overlay{position:fixed;inset:0;background:var(--overlay);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:spa-fade-in var(--dur,.2s) var(--ease-out,ease-out)}
.fb-card{width:100%;max-width:580px;max-height:88vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg,12px);box-shadow:0 16px 48px rgba(0,0,0,.24);overflow:hidden}
@media(max-width:767px){.fb-overlay{padding:0;align-items:flex-end}.fb-card{max-height:96vh;border-radius:var(--r) var(--r) 0 0}}
.fb-card-header{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.fb-card-title{font-size:14px;font-weight:700;color:var(--text);margin-right:auto}
.fb-card-body{padding:18px 20px;overflow-y:auto;flex:1}
.fb-scope-hint{font-size:12px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-md,8px);padding:10px 12px;margin-bottom:14px;line-height:1.55}
.fb-scope-hint strong{color:var(--text);font-weight:700}
.fb-type-btn{flex:1;padding:8px 4px;border:1px solid var(--border);border-radius:var(--r-md,8px);background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s;text-align:center;font-family:inherit}
.fb-type-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(8,145,178,.08)}
.fb-type-btn:hover:not(.active){border-color:var(--text-3)}
.fb-step-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .3s}
.fb-step-dot.done{background:var(--green)}
.fb-step-dot.active{background:var(--accent)}
.fb-ai-field{width:100%;box-sizing:border-box;padding:8px 11px;border:1px solid var(--border);border-radius:var(--r-md,8px);font-size:13px;font-family:inherit;background:var(--surface-2);color:var(--text);resize:none;line-height:1.5}
.fb-ai-field:focus{outline:none;border-color:var(--accent)}
.fb-shot-zone{border:1.5px dashed var(--border);border-radius:var(--r-md,8px);padding:14px;text-align:center;font-size:12px;color:var(--text-3);background:var(--surface-2);cursor:pointer;transition:border-color .15s,color .15s;margin-top:10px;line-height:1.5}
.fb-shot-zone:hover{border-color:var(--accent);color:var(--accent)}
.fb-shot-zone strong{color:var(--text-2);font-weight:600}
.fb-shot-preview{position:relative;margin-top:10px;border:1px solid var(--border);border-radius:var(--r-md,8px);overflow:hidden;background:var(--surface-3)}
.fb-shot-preview img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain}
.fb-shot-remove{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);color:#fff;border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.fb-shot-remove:hover{background:rgba(0,0,0,.8)}
.fb-success-check{width:48px;height:48px;border-radius:50%;background:rgba(5,150,105,.12);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 12px}
/* ── Kurznotizen (Quick Notes) ── */
.qn-card{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-left-width:4px;border-radius:var(--r-md,8px);background:var(--surface);transition:opacity var(--dur-fast)}
.qn-cat-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}
.qn-delete-btn{background:none;border:1px solid var(--border);color:var(--text-3);width:28px;height:28px;border-radius:var(--r-full,999px);font-size:18px;line-height:1;cursor:pointer;flex-shrink:0;transition:all var(--dur-fast)}
.qn-delete-btn:hover{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.qn-cat-red {border-left-color:var(--red)} .qn-cat-dot.qn-cat-red {background:var(--red)}
.qn-cat-blue {border-left-color:var(--blue)} .qn-cat-dot.qn-cat-blue {background:var(--blue)}
.qn-cat-green {border-left-color:var(--green)} .qn-cat-dot.qn-cat-green {background:var(--green)}
.qn-cat-yellow {border-left-color:var(--yellow)} .qn-cat-dot.qn-cat-yellow {background:var(--yellow)}
.qn-cat-violet {border-left-color:var(--violet)} .qn-cat-dot.qn-cat-violet {background:var(--violet)}
.qn-cat-gray {border-left-color:var(--slate)} .qn-cat-dot.qn-cat-gray {background:var(--slate)}
/* ── Profil-Seite ── */
.prof-wrap{max-width:680px;margin:0 auto;padding:32px 20px}
.prof-layout{display:flex;flex-direction:column;gap:16px}
/* Hero */
.prof-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px 24px;display:flex;gap:24px;align-items:flex-start}
.prof-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.prof-avatar{width:80px;height:80px;border-radius:var(--r-full);background:var(--accent);display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid var(--border);box-shadow:var(--shadow-sm)}
.prof-avatar-img{width:100%;height:100%;object-fit:cover}
.prof-initials{font-size:24px;font-weight:700;color:#fff}
.prof-photo-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.prof-photo-hint{font-size:10px;color:var(--text-3);text-align:center}
.prof-identity{flex:1;min-width:0;padding-top:4px}
.prof-name{font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.2}
.prof-method{font-size:12px;color:var(--text-3);margin-bottom:12px}
.prof-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.prof-role-chip{display:inline-block;padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:700;color:#fff}
/* Karten */
.prof-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.prof-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.prof-card-title{font-size:13px;font-weight:700;color:var(--text)}
.prof-card-sub{font-size:11px;color:var(--text-3);margin-top:2px}
.prof-card-desc{padding:12px 20px 0;font-size:12px;color:var(--text-2);line-height:1.5}
/* Admin-Karte: roter Akzent wenn Admin-Modus aktiv */
.prof-admin-card{padding-bottom:16px}
.prof-admin-card>div:last-child{padding:0 20px}
.prof-admin-card--active{border-left:3px solid var(--red);background:linear-gradient(to right,rgba(220,38,38,0.04),var(--surface) 200px)}
/* Suche */
.prof-search{padding:5px 10px;border:1px solid var(--border);border-radius:var(--r-full);font-size:12px;font-family:var(--font);color:var(--text);background:var(--surface-2);outline:none;width:160px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.prof-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
/* Gruppen-Grid */
.prof-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 20px}
.prof-group-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);transition:border-color var(--dur-fast),background var(--dur-fast)}
.prof-group-card:hover{border-color:var(--accent-border);background:var(--accent-light)}
.prof-group-icon{width:28px;height:28px;border-radius:var(--r-sm);background:var(--accent-light);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.prof-group-name{flex:1;font-size:12px;font-weight:500;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof-group-type{flex-shrink:0;font-size:10px;font-weight:600;color:var(--text-3);background:var(--surface-3);border-radius:var(--r-sm);padding:2px 6px;white-space:nowrap}
/* Zustände */
.prof-placeholder,.prof-empty{padding:24px 20px;font-size:12px;color:var(--text-3);text-align:center}
.prof-alert{padding:12px 20px;font-size:12px;line-height:1.5}
.prof-alert--warn{color:var(--amber);background:var(--amber-bg)}
.prof-alert--info{color:var(--blue);background:var(--blue-bg);border-radius:var(--r)}
/* Benachrichtigungen */
/* Kanal-/Zustell-/Ticket-Karten sind Formular-Steuerungen und werden auf
eine Formular-Breite gedeckelt (sonst zerren die 3-Spalten-Grids die
Kacheln auf einer breiten Anzeige leer auseinander). Die Feinsteuerungs-
Themenliste (.prof-notif-topics) bleibt bewusst voll-breit (ausserhalb
dieses Wrappers). */
.prof-notif-col{display:flex;flex-direction:column;gap:16px;max-width:900px}
.prof-notif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 20px 20px}
.prof-notif-grid--col{grid-template-columns:1fr}
.prof-notif-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:2px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}
.prof-notif-opt.active{border-color:var(--accent);background:var(--accent-light)}
.prof-notif-opt svg{color:var(--text-3);flex-shrink:0;transition:color var(--dur-fast)}
.prof-notif-opt.active svg{color:var(--accent)}
.prof-notif-label{font-size:12px;font-weight:600;color:var(--text);transition:color var(--dur-fast)}
.prof-notif-opt.active .prof-notif-label{color:var(--accent)}
.prof-notif-desc{font-size:11px;color:var(--text-3);margin-top:1px}
/* Benachrichtigungen pro Thema — Premium-Listen-Look (analog Modul-Übersicht ml3-srow/member) */
.prof-notif-topics{padding:0 0 4px}
.prof-ntopic{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 20px;border-bottom:1px solid var(--border);transition:background var(--dur-fast)}
.prof-ntopic:hover{background:var(--surface-2)}
.prof-ntopic-btn{display:flex;align-items:center;gap:13px;flex:1 1 220px;min-width:0;background:none;border:none;padding:0;cursor:pointer;color:var(--text);text-align:left;font:inherit}
.prof-ntopic-tile{width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;background:color-mix(in srgb,var(--topic-color,var(--accent)) 14%,var(--surface-2));color:var(--topic-color,var(--accent))}
.prof-ntopic-tile svg{display:block}
.prof-ntopic-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.prof-ntopic-name{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.prof-ntopic-sub{font-size:12px;color:var(--text-3)}
.prof-ntopic-chips{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.prof-ntopic-badge{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-full);border:1px solid var(--border);color:var(--text-3)}
.prof-ntopic-chev{background:none;border:none;padding:2px;cursor:pointer;color:var(--text-3);display:flex;align-items:center;flex-shrink:0}
.prof-nsrc{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 20px 10px 74px;border-bottom:1px solid var(--border);transition:background var(--dur-fast)}
.prof-nsrc:hover{background:var(--surface-2)}
.prof-nsrc::before{content:"";position:absolute;left:41px;top:0;bottom:0;width:1px;background:var(--border)}
.prof-nsrc-body{display:flex;flex-direction:column;gap:1px;flex:1 1 200px;min-width:0}
.prof-nsrc-name{font-size:13px;font-weight:600;color:var(--text)}
.prof-nsrc-desc{font-size:11.5px;color:var(--text-3)}
/* Schnellzugriff */
.prof-links{padding:8px 12px}
.prof-link{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:var(--r-md);text-decoration:none;color:var(--text);font-size:13px;font-weight:500;transition:background var(--dur-fast),color var(--dur-fast)}
.prof-link:hover{background:var(--accent-light);color:var(--accent)}
.prof-link svg{color:var(--text-3);flex-shrink:0;transition:color var(--dur-fast)}
.prof-link:hover svg{color:var(--accent)}
.prof-link-arrow{margin-left:auto;color:var(--text-3)}
.prof-link--danger:hover{background:var(--red-bg);color:var(--red)}
.prof-link--danger:hover svg{color:var(--red)}
/* Mobil */
@media(max-width:767px){
.prof-wrap{padding:16px 12px}
.prof-hero{flex-direction:column;align-items:center;text-align:center;padding:24px 16px}
.prof-badges{justify-content:center}
.prof-group-grid{grid-template-columns:1fr}
.prof-notif-grid{grid-template-columns:1fr}
.prof-card-head{flex-wrap:wrap;gap:8px}
.prof-search{width:100%}
}
/* ── CRM Workflow-Builder (visual automation editor) ──
Kapselung: Klassen-Prefix wfb-*. Verwendet Design-Tokens
(--surface, --border, --accent, --r, --space-*) — keine
Hex-Werte oder eigene Farben. Layout ist 3-Spalten:
Palette (links) | Canvas (mitte, scrollbar) | Properties (rechts).
*/
.wfb-shell{display:flex;flex-direction:column;height:calc(100vh - 120px);min-height:520px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.wfb-header{display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap}
.wfb-name-input{flex:0 0 220px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r);font-size:13px;font-weight:600;background:var(--surface);color:var(--text-1);font-family:var(--font)}
.wfb-desc-input{flex:1;min-width:160px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r);font-size:12px;background:var(--surface);color:var(--text-2);font-family:var(--font)}
.wfb-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}
.wfb-body{display:flex;flex:1;min-height:0}
.wfb-palette{flex:0 0 200px;border-right:1px solid var(--border);overflow-y:auto;padding:12px 8px;background:var(--surface-2)}
.wfb-palette-section+.wfb-palette-section{margin-top:16px}
.wfb-palette-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--text-3);letter-spacing:.04em;padding:0 6px 6px}
.wfb-palette-item{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:4px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);font-size:12px;color:var(--text-1);cursor:grab;transition:background var(--dur-fast),border-color var(--dur-fast)}
.wfb-palette-item:hover{background:var(--accent-light);border-color:var(--accent)}
.wfb-palette-item:active{cursor:grabbing}
.wfb-palette-icon{width:18px;display:inline-flex;justify-content:center;color:var(--text-2)}
.wfb-palette-name{font-weight:600}
.wfb-trigger .wfb-palette-icon{color:var(--green)}
.wfb-condition .wfb-palette-icon{color:var(--amber)}
.wfb-action .wfb-palette-icon{color:var(--accent)}
.wfb-canvas{position:relative;flex:1;overflow:auto;background:
radial-gradient(circle,var(--border) 1px,transparent 1px) 0 0/24px 24px,
var(--surface)}
.wfb-edges{position:absolute;top:0;left:0;pointer-events:none}
.wfb-edges path{pointer-events:stroke}
.wfb-node{position:absolute;width:220px;min-height:84px;background:var(--surface);border:2px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);user-select:none;cursor:move;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.wfb-node:hover{box-shadow:var(--shadow)}
.wfb-node-trigger{border-color:var(--green)}
.wfb-node-condition{border-color:var(--amber)}
.wfb-node-action{border-color:var(--accent)}
.wfb-node-selected{box-shadow:0 0 0 3px var(--accent-light),var(--shadow);border-color:var(--accent) !important}
.wfb-node-active{box-shadow:0 0 0 3px var(--green-bg),var(--shadow);border-color:var(--green) !important}
.wfb-node-header{display:flex;align-items:center;gap:8px;padding:10px 12px 4px}
.wfb-node-icon{display:inline-flex;font-size:16px;color:var(--text-2)}
.wfb-node-trigger .wfb-node-icon{color:var(--green)}
.wfb-node-condition .wfb-node-icon{color:var(--amber)}
.wfb-node-action .wfb-node-icon{color:var(--accent)}
.wfb-node-title{font-weight:600;font-size:13px;color:var(--text-1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wfb-node-remove{width:18px;height:18px;border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-3);cursor:pointer}
.wfb-node-remove:hover{background:var(--red-bg);color:var(--red)}
.wfb-node-sub{padding:0 12px 10px;font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.wfb-port{position:absolute;width:12px;height:12px;background:var(--surface);border:2px solid var(--text-3);border-radius:var(--r-full);cursor:crosshair;transition:transform var(--dur-fast),border-color var(--dur-fast)}
.wfb-port:hover{transform:scale(1.3);border-color:var(--accent)}
.wfb-port-in{top:-7px;left:50%;margin-left:-6px}
.wfb-port-center{bottom:-7px;left:50%;margin-left:-6px}
.wfb-port-true{bottom:-7px;left:25%;margin-left:-6px;border-color:var(--green)}
.wfb-port-false{bottom:-7px;left:75%;margin-left:-6px;border-color:var(--red)}
.wfb-properties{flex:0 0 280px;border-left:1px solid var(--border);overflow-y:auto;padding:14px 14px 24px;background:var(--surface-2)}
.wfb-properties-empty{font-size:12px;color:var(--text-3);text-align:center;padding:24px 8px}
.wfb-properties-header{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-2);letter-spacing:.04em;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:10px}
.wfb-field-label{display:block;font-size:11px;font-weight:600;color:var(--text-2);margin:10px 0 4px}
.wfb-input{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r);font-size:12px;font-family:var(--font);background:var(--surface);color:var(--text-1)}
.wfb-input:focus{border-color:var(--accent);outline:none}
.wfb-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
.wfb-hint{font-size:11px;color:var(--text-3);margin-top:4px;line-height:1.4}
.wfb-hint code{background:var(--surface);padding:1px 4px;border-radius:var(--r-sm);font-size:10px}
.wfb-test-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.wfb-sim-result{margin-top:10px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:12px}
.wfb-sim-status{font-weight:700}
.wfb-sim-ok{color:var(--green)}
.wfb-sim-no{color:var(--red)}
.wfb-sim-label{font-size:11px;color:var(--text-2);margin-bottom:6px}
.wfb-sim-action{margin-top:6px;padding:6px 8px;background:var(--surface-2);border-radius:var(--r-sm);font-size:11px}
.wfb-sim-action pre{margin:4px 0 0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--text-2)}
@media(max-width:1024px){
.wfb-palette{flex-basis:160px}
.wfb-properties{flex-basis:240px}
}
/* ── Projektauftrag-Dashboard ───────────────────────────────── */
.pa-dash{max-width:1200px;margin:0 auto}
.pa-dash-hero{
background:linear-gradient(135deg,var(--accent-light) 0%,var(--surface) 100%);
border:1px solid var(--border);border-radius:var(--r-lg);
padding:24px;margin-bottom:20px;
}
.pa-dash-hero-title{margin:0 0 6px;font-size:20px;font-weight:700;color:var(--text)}
.pa-dash-hero-sub{font-size:13px;color:var(--text-2);line-height:1.5;margin-bottom:16px}
.pa-dash-hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.pa-dash-section{
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
padding:16px;margin-bottom:16px;
}
.pa-dash-section-title{
display:flex;align-items:center;justify-content:space-between;
font-weight:600;font-size:13px;color:var(--text);margin-bottom:12px;
}
.pa-dash-section-hint{font-size:11px;color:var(--text-3);font-weight:500;text-transform:uppercase;letter-spacing:.3px}
.pa-dash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pa-dash-section--full{grid-column:1 / -1;margin-bottom:0}
.pa-dash-grid > .pa-dash-section{margin-bottom:0}
.pa-dash-status-row{display:flex;gap:8px;flex-wrap:wrap}
.pa-dash-status-chip{border-radius:var(--r-full)}
.pa-dash-empty{font-size:12px;color:var(--text-3);font-style:italic}
.pa-dash-milestone{
display:flex;gap:12px;align-items:center;
padding:8px 0;border-bottom:1px solid var(--border);
}
.pa-dash-milestone:last-child{border-bottom:none}
.pa-dash-milestone-num{font-weight:600;color:var(--text-2);min-width:80px;font-size:12px}
.pa-dash-milestone-title{flex:1;font-size:13px;color:var(--text)}
.pa-dash-milestone-date{color:var(--text-2);font-size:12px;white-space:nowrap}
.pa-dash-budget{font-size:24px;font-weight:700;color:var(--accent)}
@media (max-width:768px){
.pa-dash-grid{grid-template-columns:1fr}
.pa-dash-section--full{grid-column:auto}
.pa-dash-hero{padding:16px}
.pa-dash-hero-title{font-size:17px}
}
/* ── Projektauftrag-KPI-Kacheln ──────────────────────────────── */
.pa-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.pa-kpi{
display:flex;align-items:center;gap:12px;
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
padding:16px;cursor:pointer;text-align:left;font-family:inherit;
transition:border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast);
}
.pa-kpi:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.pa-kpi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pa-kpi.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light) inset}
.pa-kpi-icon{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:var(--r-md);flex-shrink:0;
}
.pa-kpi-body{display:flex;flex-direction:column;min-width:0}
.pa-kpi-label{font-size:11px;color:var(--text-3);text-transform:uppercase;font-weight:600;letter-spacing:.3px}
.pa-kpi-value{font-size:24px;font-weight:700;color:var(--text);line-height:1.1;margin-top:2px}
@media (any-pointer:coarse){
.pa-kpi{min-height:64px}
}
/* Heatmap-Cells für Auslastungs-View */
.pa-heat{text-align:center;font-size:var(--text-sm);font-weight:600}
.pa-heat--low{background:var(--green-bg)}
.pa-heat--med{background:var(--amber-bg)}
.pa-heat--high{background:var(--red-bg)}
.pa-heat--over{background:var(--red-bg);color:var(--red)}
/* KPI-Icon Farb-Varianten (Token-basiert) */
.pa-kpi-icon--accent{background:var(--accent-light);color:var(--accent)}
.pa-kpi-icon--blue{background:var(--blue-bg);color:var(--blue)}
.pa-kpi-icon--red{background:var(--red-bg);color:var(--red)}
.pa-kpi-icon--green{background:var(--green-bg);color:var(--green)}
.pa-kpi-icon--amber{background:var(--amber-bg);color:var(--amber)}
@media (max-width:520px){
.pa-kpi-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.pa-kpi{padding:12px;gap:8px}
.pa-kpi-icon{width:32px;height:32px}
.pa-kpi-value{font-size:20px}
}
/* ── Orders Premium-Übersicht (KPI-Kacheln + Sankey) ───────────── */
.ord-overview{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}
.ord-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}
.ord-kpi-card{position:relative;display:flex;flex-direction:column;gap:6px;min-height:120px;padding:16px 16px 8px}
.ord-kpi-card .kpi-value{font-size:26px;line-height:1.1;margin-top:2px}
.ord-kpi-unit{font-size:14px;font-weight:500;color:var(--text-2);margin-left:4px}
.ord-kpi-delta{font-size:11px;color:var(--text-3);display:flex;gap:6px;align-items:center}
.ord-kpi-delta.pos{color:var(--green)}
.ord-kpi-delta.neg{color:var(--red)}
.ord-kpi-delta-unit{color:var(--text-3);font-weight:500}
.ord-kpi-spark{height:36px;width:100%;margin-top:auto}
.ord-flow-card{padding:16px}
.ord-flow-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.ord-flow-meta{font-size:12px;color:var(--text-3)}
.ord-flow-chart{height:260px;width:100%}
@media (max-width:520px){
.ord-kpi-card{min-height:104px;padding:12px}
.ord-kpi-card .kpi-value{font-size:22px}
.ord-flow-chart{height:220px}
}
/* ── Projektauftrag-Analytics ────────────────────────────────── */
.pa-analytics-kpis{
display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:var(--space-3);margin-bottom:var(--space-4);
}
.pa-analytics-kpis .kpi-card{display:flex;flex-direction:column;justify-content:flex-end;min-height:84px}
.pa-analytics-kpi--budget .kpi-value{font-size:20px;color:var(--text);line-height:1.2}
.pa-analytics-status-row{display:flex;gap:var(--space-2);flex-wrap:wrap}
.pa-analytics-status-chip{border-radius:var(--r-full)}
.pa-analytics-empty{color:var(--text-3);font-size:13px}
.pa-analytics-milestones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pa-analytics-milestone{
display:flex;align-items:center;gap:var(--space-3);
padding:var(--space-2) 0;border-top:1px solid var(--border);
}
.pa-analytics-milestone:first-child{border-top:none}
.pa-analytics-milestone-num{
font-weight:600;color:var(--text-2);min-width:80px;
font-variant-numeric:tabular-nums;flex-shrink:0;
}
.pa-analytics-milestone-body{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.pa-analytics-milestone-title{color:var(--text);font-weight:500}
.pa-analytics-milestone-sub{color:var(--text-3);font-size:12px}
.pa-analytics-milestone-date{
color:var(--text-2);font-size:13px;
font-variant-numeric:tabular-nums;flex-shrink:0;
}
@media (max-width:520px){
.pa-analytics-milestone-num{min-width:auto}
}
/* ── Projektauftrag-Wizard ───────────────────────────────────── */
.pa-wiz{display:flex;flex-direction:column;min-height:calc(100vh - 140px);max-width:980px;margin:0 auto}
.pa-wiz-header{display:flex;align-items:center;gap:12px;padding:0 0 16px;border-bottom:1px solid var(--border);margin-bottom:24px}
.pa-wiz-title{margin:0;font-size:18px;font-weight:700;flex:1;color:var(--text)}
.pa-wiz-subtitle{font-size:12px;color:var(--text-3);font-weight:500;margin-top:2px}
/* Stepper */
.pa-wiz-stepper{display:flex;align-items:flex-start;gap:0;margin-bottom:32px;padding:8px 0}
.pa-wiz-step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;color:inherit;min-width:0}
.pa-wiz-step:disabled{cursor:not-allowed;opacity:.6}
.pa-wiz-step + .pa-wiz-step::before{
content:'';position:absolute;top:14px;right:50%;width:100%;height:2px;
background:var(--border);z-index:0;
}
.pa-wiz-step.is-done + .pa-wiz-step::before,
.pa-wiz-step.is-current + .pa-wiz-step::before{background:linear-gradient(to right,var(--accent),var(--border))}
.pa-wiz-step.is-done::before{background:var(--accent) !important}
.pa-wiz-step-num{
width:30px;height:30px;border-radius:var(--r-full);background:var(--surface);
border:2px solid var(--border);color:var(--text-3);
display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
position:relative;z-index:1;transition:all var(--dur-fast);
}
.pa-wiz-step:hover:not(:disabled) .pa-wiz-step-num{border-color:var(--text-3);color:var(--text-2)}
.pa-wiz-step.is-current .pa-wiz-step-num{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px var(--accent-light)}
.pa-wiz-step.is-done .pa-wiz-step-num{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pa-wiz-step.has-error .pa-wiz-step-num{border-color:var(--red);color:var(--red);background:var(--surface)}
.pa-wiz-step-label{
margin-top:8px;font-size:11px;font-weight:600;color:var(--text-3);
text-align:center;line-height:1.3;letter-spacing:.02em;
max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pa-wiz-step.is-current .pa-wiz-step-label{color:var(--accent)}
.pa-wiz-step.is-done .pa-wiz-step-label{color:var(--text-2)}
/* Step-Content */
.pa-wiz-step-pane{padding:0 0 32px;animation:paWizFadeIn .25s var(--ease-out)}
@keyframes paWizFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pa-wiz-step-head{margin-bottom:24px}
.pa-wiz-step-head h3{margin:0 0 4px;font-size:20px;font-weight:700;color:var(--text)}
.pa-wiz-step-head p{margin:0;font-size:13px;color:var(--text-3);line-height:1.5}
.pa-wiz-section{margin-bottom:24px}
.pa-wiz-section-title{
display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;
}
.pa-wiz-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.pa-wiz-grid-2{grid-template-columns:1fr}}
.pa-wiz-field{display:flex;flex-direction:column}
.pa-wiz-field label{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.pa-wiz-field .req{color:var(--red);margin-left:2px}
.pa-wiz-hint{font-size:11px;color:var(--text-3);margin-top:4px;line-height:1.4}
.pa-wiz-error{font-size:11px;color:var(--red);margin-top:4px;font-weight:500}
/* Repeatable card (Team-Member, Meilenstein, RACI etc.) */
.pa-wiz-row{
display:flex;gap:10px;align-items:flex-start;padding:12px;background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:8px;
}
.pa-wiz-row > *{margin:0}
.pa-wiz-row-spacer{flex:1}
.pa-wiz-row-remove{
width:28px;height:28px;border-radius:var(--r-full);background:transparent;
border:1px solid var(--border);color:var(--text-3);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
transition:all var(--dur-fast);
}
.pa-wiz-row-remove:hover{border-color:var(--red);color:var(--red);background:var(--red-bg,var(--surface))}
.pa-wiz-empty{
padding:24px;text-align:center;color:var(--text-3);font-size:13px;
border:1.5px dashed var(--border);border-radius:var(--r-md);background:var(--surface-2);
}
.pa-wiz-add{margin-top:8px}
/* Summary (last step) */
.pa-wiz-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.pa-wiz-summary{grid-template-columns:1fr}}
.pa-wiz-summary-card{
background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
padding:14px 16px;
}
.pa-wiz-summary-card.is-warn{border-color:var(--amber);background:var(--surface-2)}
.pa-wiz-summary-label{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.pa-wiz-summary-value{font-size:14px;color:var(--text);line-height:1.5;word-break:break-word}
.pa-wiz-summary-value.is-empty{color:var(--text-3);font-style:italic}
/* RACI Tabelle */
.pa-wiz-raci{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.pa-wiz-raci th{
text-align:left;padding:8px 6px;font-size:11px;font-weight:700;color:var(--text-3);
text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);
}
.pa-wiz-raci th.center{text-align:center}
.pa-wiz-raci td{padding:6px;border-bottom:1px solid var(--border);vertical-align:top}
.pa-wiz-raci .pa-wiz-raci-cell{width:64px}
.pa-wiz-raci .pa-wiz-raci-cell input{text-align:center;width:100%}
/* Footer Action-Bar */
.pa-wiz-footer{
display:flex;align-items:center;gap:12px;padding:16px 0;
border-top:1px solid var(--border);margin-top:auto;
position:sticky;bottom:0;background:var(--bg,var(--surface));z-index:5;
}
.pa-wiz-footer-spacer{flex:1}
.pa-wiz-progress-text{font-size:12px;color:var(--text-3);font-weight:500}
/* .pa-wiz im Modal (z.B. SwissSalary-Import) statt als Vollseite:
kein Vollhöhen-Stretch (sonst klafft eine Lücke über dem Footer)
und der Footer sitzt bündig im Panel statt als Sticky-Leiste mit
abweichendem Seiten-Hintergrund. Vollseiten-Wizards (Projektauftrag)
bleiben unberührt. */
.pa-wiz--modal{min-height:0;max-width:none;margin:0}
.pa-wiz--modal .pa-wiz-footer{position:static;margin-top:16px;background:transparent}
/* Mobile: Stepper compact */
@media(max-width:640px){
.pa-wiz-stepper{margin-bottom:20px}
.pa-wiz-step-label{display:none}
.pa-wiz-step-pane{padding-bottom:24px}
.pa-wiz-step-head h3{font-size:17px}
.pa-wiz-summary-card{padding:12px}
}
/* Projektauftrag-Liste: bessere Abstände + Hover-Highlight für klickbare Zeilen */
.projectCharter-table th,
.projectCharter-table td{padding:12px 12px;vertical-align:middle}
.projectCharter-table thead th{
font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);
border-bottom:2px solid var(--border);padding-top:8px;padding-bottom:8px
}
.projectCharter-row{transition:background var(--dur-fast,.12s)}
.projectCharter-row:hover{background:var(--surface-2,rgba(0,0,0,.03))}
/* 360°-Übersicht — Hub-konforme Sub-Komponenten */
.pa-360{display:flex;flex-direction:column;gap:24px}
/* Header */
.pa-360-head{
display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
padding-bottom:16px;border-bottom:1px solid var(--border);
}
.pa-360-head-meta{flex:1;min-width:240px}
.pa-360-head-idrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pa-360-head-id{
font-family:var(--font-mono,ui-monospace,monospace);
font-size:12px;color:var(--text-2);font-weight:600;letter-spacing:.02em
}
.pa-360-head-title{
margin:6px 0 14px 0;font-size:24px;font-weight:800;line-height:1.25;color:var(--text)
}
/* Metadaten als Label/Value-Grid — bessere Lesbarkeit & klare Hierarchie */
.pa-360-head-grid{
margin:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:14px 24px;
}
.pa-360-meta{display:flex;flex-direction:column;gap:5px;min-width:0}
.pa-360-meta-label{
font-size:10.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-3)
}
.pa-360-meta-value{
font-size:14px;font-weight:600;color:var(--text);
line-height:1.3;min-width:0
}
.pa-360-meta-person{display:flex;align-items:center;gap:8px}
.pa-360-meta-avatar{
width:26px;height:26px;font-size:10px;flex-shrink:0
}
.pa-360-meta-text{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pa-360-meta-num{font-variant-numeric:tabular-nums}
.pa-360-head-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Status-Workflow Steps (Hub-Pattern) */
.pa-360-flow{
display:flex;align-items:flex-start;
padding:8px 0;overflow-x:auto;
gap:0;
}
.pa-360-flow-step{
flex:1;min-width:90px;display:flex;flex-direction:column;align-items:center;
position:relative;font-size:12px;color:var(--text-2);
}
.pa-360-flow-num{
width:28px;height:28px;border-radius:var(--r-full);
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:700;
background:var(--surface-2);color:var(--text-3);
border:1px solid var(--border);
transition:all var(--dur-fast);
}
.pa-360-flow-step.is-done .pa-360-flow-num{
background:var(--green-bg,rgba(76,175,80,.12));color:var(--green);border-color:var(--green)
}
.pa-360-flow-step.is-current .pa-360-flow-num{
background:var(--accent);color:#fff;border-color:var(--accent);
box-shadow:0 0 0 4px var(--accent-light,rgba(33,150,243,.15));
}
.pa-360-flow-step.is-current .pa-360-flow-label{color:var(--text);font-weight:600}
.pa-360-flow-label{margin-top:6px;text-align:center;line-height:1.2}
.pa-360-flow-step:not(:last-child)::after{
content:'';position:absolute;top:14px;left:calc(50% + 18px);right:calc(-50% + 18px);
height:2px;background:var(--border);
}
.pa-360-flow-step.is-done:not(:last-child)::after{background:var(--green)}
/* Status-Aktionen & Freigabe */
.pa-360-status-actions{
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:12px;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r);padding:12px 16px;
}
.pa-360-status-actions-block{display:flex;flex-direction:column;gap:8px;min-width:0}
.pa-360-status-actions-label{
font-size:11px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--text-3);
}
.pa-360-status-actions-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pa-360-sign-pill{
display:inline-flex;align-items:center;gap:8px;
padding:4px 10px 4px 12px;
border:1px solid var(--border);border-radius:var(--r-full);
background:var(--surface-2,rgba(0,0,0,.02));
font-size:12px;
}
.pa-360-sign-pill.is-signed{
border-color:var(--green);background:var(--green-bg,rgba(76,175,80,.10));
}
.pa-360-sign-pill-role{font-weight:600;color:var(--text-2)}
.pa-360-sign-pill-state{color:var(--green);font-weight:600}
/* Verlinktes Ticketing-Projekt */
.pa-360-linked-project{
display:flex;align-items:center;gap:12px;
}
.pa-360-linked-key{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:var(--r-sm);
background:var(--violet);color:#fff;
font-size:11px;font-weight:700;flex-shrink:0;
letter-spacing:.04em;
}
.pa-360-linked-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.pa-360-linked-name{font-size:14px;font-weight:600;color:var(--text)}
.pa-360-linked-meta{font-size:12px;color:var(--text-3)}
/* Meilensteine */
.pa-360-milestones{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:6px;
}
.pa-360-milestone{
display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;
padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);
background:var(--surface);
font-size:13px;
}
.pa-360-milestone-marker{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;border-radius:var(--r-full);
background:var(--surface-2,rgba(0,0,0,.04));
color:var(--amber);font-size:12px;font-weight:700;
}
.pa-360-milestone.is-done{background:var(--green-bg,rgba(76,175,80,.06));border-color:var(--green)}
.pa-360-milestone.is-done .pa-360-milestone-marker{background:var(--green);color:#fff}
.pa-360-milestone.is-done .pa-360-milestone-title{color:var(--text-2);text-decoration:line-through}
.pa-360-milestone.is-overdue{border-color:var(--red)}
.pa-360-milestone.is-overdue .pa-360-milestone-marker{color:var(--red)}
.pa-360-milestone.is-overdue .pa-360-milestone-date{color:var(--red);font-weight:600}
.pa-360-milestone-title{color:var(--text);font-weight:500;min-width:0}
.pa-360-milestone-date{color:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums}
/* KPI-Strip */
.pa-360-kpis{
display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:12px;
}
/* Tabs (Hub-typisch: Underline) */
.pa-360-tabs{
display:flex;gap:4px;border-bottom:1px solid var(--border);
overflow-x:auto;
margin-bottom:0;
}
.pa-360-tab{
display:inline-flex;align-items:center;gap:6px;
padding:10px 14px;
background:transparent;border:none;
color:var(--text-2);font-size:13px;font-weight:500;
cursor:pointer;white-space:nowrap;
border-bottom:2px solid transparent;
transition:color var(--dur-fast),border-color var(--dur-fast);
}
.pa-360-tab:hover{color:var(--text)}
.pa-360-tab.is-active{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
/* Tab-Pane Container */
.pa-360-pane{padding-top:20px;display:flex;flex-direction:column;gap:var(--space-4)}
.pa-360-pane > h3{
margin:0 0 12px 0;font-size:14px;font-weight:700;
color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;
}
.pa-360-pane > h3 + h3{margin-top:24px}
/* Sub-Section Label innerhalb einer Pane (z.B. PROJEKTZIEL, NOTIZEN) */
.pa-360-section-label{
font-size:11px;font-weight:700;letter-spacing:.05em;
color:var(--text-2);text-transform:uppercase;
margin-bottom:var(--space-1);
}
/* Reusable Card-Pattern für Sektionen ohne KPI-Charakter */
.pa-360-card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);padding:16px;
}
/* Info-Card (gerahmter Text-Block für Ziel/Ausgangslage/Notizen) */
.pa-360-info-card{
padding:var(--space-3);background:var(--surface);
border:1px solid var(--border);border-radius:var(--r);
white-space:pre-line;min-height:60px;color:var(--text);
}
.pa-360-info-card-empty{color:var(--text-3);font-style:italic}
/* Info-Grid (Auftraggeber/PL/Stellv./Rapportierung) */
.pa-360-info-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--space-3);
}
.pa-360-info-item{
padding:var(--space-3);background:var(--surface);
border:1px solid var(--border);border-radius:var(--r);
display:flex;flex-direction:column;gap:2px;
}
.pa-360-info-item-label{
font-size:11px;font-weight:700;letter-spacing:.05em;
color:var(--text-2);text-transform:uppercase;
}
.pa-360-info-item-value{font-weight:600;color:var(--text)}
.pa-360-info-item-sub{font-size:12px;color:var(--text-3)}
/* 2-Spalten-Layout für Übersicht-Pane */
.pa-360-pane-grid{
display:grid;gap:var(--space-4);
grid-template-columns:1fr 1fr;
}
@media(max-width:768px){
.pa-360-pane-grid{grid-template-columns:1fr}
}
.pa-360-pane-grid-full{grid-column:1 / -1}
/* Toolbar innerhalb einer Pane (z.B. Ticket-Suche, Risiko-Header) */
.pa-360-pane-toolbar{
display:flex;gap:var(--space-2);align-items:center;
flex-wrap:wrap;margin-bottom:var(--space-2);
}
.pa-360-pane-toolbar > h3{margin:0}
.pa-360-pane-toolbar-spacer{margin-left:auto}
/* Team-Karten */
.pa-360-team-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:var(--space-2);
}
.pa-360-team-card{
padding:var(--space-2) var(--space-3);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
}
.pa-360-team-name{font-weight:600;color:var(--text)}
.pa-360-team-role{font-size:12px;color:var(--text-2)}
.pa-360-team-pos{font-size:11px;color:var(--text-3)}
/* Audit-Liste */
.pa-360-audit-list{display:flex;flex-direction:column;gap:var(--space-1)}
.pa-360-audit-item{
display:flex;gap:var(--space-3);padding:var(--space-2) var(--space-3);
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r);align-items:flex-start;
}
.pa-360-audit-time{
font-family:var(--font-mono,ui-monospace,monospace);
font-size:11px;color:var(--text-2);min-width:140px;
}
.pa-360-audit-body{flex:1;min-width:0}
.pa-360-audit-action{font-weight:600;font-size:13px;color:var(--text)}
.pa-360-audit-detail{font-size:12px;color:var(--text-2);margin-top:2px}
.pa-360-audit-meta{
font-size:11px;color:var(--text-3);text-align:right;
white-space:nowrap;flex-shrink:0;
}
.pa-360-audit-actor{font-style:italic}
/* Dokumente-Upload */
.pa-360-doc-form-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:var(--space-2);margin-bottom:var(--space-2);
}
@media(max-width:600px){
.pa-360-doc-form-grid{grid-template-columns:1fr}
}
.pa-360-doc-hint{
font-size:11px;color:var(--text-3);margin-top:var(--space-1);
}
.pa-360-doc-uploading{
margin-top:var(--space-2);color:var(--blue);font-size:13px;
}
.pa-360-doc-dropzone{
display:flex;align-items:center;justify-content:center;gap:14px;
padding:24px 16px;margin-top:var(--space-2);
border:2px dashed var(--border);border-radius:var(--r-md);
background:var(--surface);color:var(--text-2);
cursor:pointer;
transition:border-color var(--dur-fast),background var(--dur-fast);
}
.pa-360-doc-dropzone:hover{border-color:var(--accent);background:var(--surface-2,rgba(33,150,243,.04))}
.pa-360-doc-dropzone.is-drag-active{
border-color:var(--accent);border-style:solid;
background:var(--accent-bg,rgba(33,150,243,.08));
}
.pa-360-doc-dropzone.is-uploading{cursor:wait;opacity:.7}
.pa-360-doc-dropzone-icon{
width:44px;height:44px;border-radius:var(--r-full);
display:flex;align-items:center;justify-content:center;
background:var(--accent-bg,rgba(33,150,243,.08));
color:var(--accent);font-size:22px;font-weight:700;
flex-shrink:0;
}
.pa-360-doc-dropzone-text{display:flex;flex-direction:column;gap:2px}
.pa-360-doc-dropzone-text strong{color:var(--text);font-size:14px;font-weight:600}
.pa-360-doc-dropzone-text span{font-size:12px;color:var(--text-3)}
/* Audit-Toolbar */
.pa-360-audit-toolbar{
display:flex;gap:12px;flex-wrap:wrap;align-items:center;
margin-bottom:var(--space-3);
}
.pa-360-audit-toolbar > .form-control{flex:1;min-width:200px}
.pa-360-audit-filter-group{display:flex;gap:4px;flex-shrink:0}
/* Kosten-Pane */
.pa-360-cost-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--space-3);
}
.pa-360-cost-note{
font-size:12px;color:var(--text-2);margin-top:var(--space-1);
}
.pa-360-cost-total{border:2px solid var(--blue)}
.pa-360-cost-split{margin-top:var(--space-4)}
.pa-360-cost-split-head{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
margin-bottom:8px;
}
.pa-360-cost-split-title{
font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--text-3);
}
.pa-360-cost-split-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.pa-360-cost-split-legend-item{display:inline-flex;align-items:center;gap:6px}
.pa-360-cost-split-swatch{display:inline-block;width:10px;height:10px;border-radius:var(--r-sm)}
.pa-360-cost-split-bar{
display:flex;height:32px;border-radius:var(--r);overflow:hidden;
background:var(--surface-2,rgba(0,0,0,.04));
}
.pa-360-cost-split-segment{
display:flex;align-items:center;justify-content:center;
color:#fff;font-size:12px;font-weight:600;
transition:width var(--dur);
}
.pa-360-cost-split-segment.pa-360-cost-split-intern{background:var(--blue)}
.pa-360-cost-split-segment.pa-360-cost-split-extern{background:var(--violet)}
.pa-360-cost-split-swatch.pa-360-cost-split-intern{background:var(--blue)}
.pa-360-cost-split-swatch.pa-360-cost-split-extern{background:var(--violet)}
.pa-360-cost-hours{
display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:var(--space-2);margin-top:var(--space-4);
padding-top:var(--space-3);border-top:1px solid var(--border);
}
.pa-360-cost-hours-item{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r);padding:10px 14px;
}
.pa-360-cost-hours-value{
font-size:18px;font-weight:700;color:var(--text);
font-variant-numeric:tabular-nums;
}
.pa-360-cost-hours-label{font-size:11px;color:var(--text-3);margin-top:2px}
/* Risiken-Pane */
.pa-360-risk-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:var(--space-4);margin-bottom:var(--space-4);
}
@media(max-width:900px){
.pa-360-risk-grid{grid-template-columns:1fr}
}
.pa-360-risk-status-list{
display:flex;flex-direction:column;gap:var(--space-2);
}
.pa-360-risk-status-row{
display:flex;align-items:center;gap:var(--space-2);
}
.pa-360-risk-status-row > span:nth-child(2){flex:1}
.pa-360-risk-status-dot{
display:inline-block;width:12px;height:12px;border-radius:var(--r);
}
.pa-360-risk-status-total{
border-top:1px solid var(--border);
padding-top:var(--space-2);font-weight:600;
}
/* Timeline-Legende */
.pa-360-timeline-axis{
display:flex;justify-content:space-between;
font-size:11px;color:var(--text-2);
margin-bottom:var(--space-1);
}
.pa-360-timeline-legend{
margin-top:var(--space-3);font-size:11px;color:var(--text-2);
display:flex;gap:var(--space-3);flex-wrap:wrap;
}
.pa-360-timeline-legend-item{
display:inline-flex;align-items:center;gap:4px;
}
.pa-360-timeline-legend-swatch{
display:inline-block;width:12px;height:12px;border-radius:var(--r);
}
.pa-360-timeline-empty{
text-align:center;color:var(--text-3);padding:var(--space-3);
}
/* Burndown-Legende */
.pa-360-burndown-legend{
margin-top:var(--space-2);font-size:11px;color:var(--text-2);
display:flex;gap:var(--space-3);flex-wrap:wrap;
}
.pa-360-burndown-legend-line{
display:inline-block;width:24px;height:2px;
}
.pa-360-burndown-legend-line-dashed{
background:var(--text-3);
border-top:1px dashed var(--text-3);
}
/* RACI-Hinweis */
.pa-360-raci-hint{
margin-top:var(--space-2);font-size:11px;color:var(--text-3);
}
/* Empty-Zustand */
.pa-360-empty{
padding:32px 16px;text-align:center;color:var(--text-3);
background:var(--surface);border:1px dashed var(--border);
border-radius:var(--r-md);
}
/* ── Modern Timeline (Prismatic Gantt) ────────────────── */
.pa-tl2{--tl-lw:150px;position:relative;user-select:none}
/* Stats header */
.pa-tl2-header{
display:flex;align-items:stretch;
margin-bottom:var(--space-4);
background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--r-md);overflow:hidden;
}
.pa-tl2-stat{
flex:1;padding:12px 16px;
display:flex;flex-direction:column;align-items:center;gap:3px;
border-right:1px solid var(--border);min-width:0;
}
.pa-tl2-stat-val{
font-size:20px;font-weight:700;line-height:1;
font-variant-numeric:tabular-nums;
}
.pa-tl2-stat-lbl{
font-size:10px;color:var(--text-2);
text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
}
.pa-tl2-progress-wrap{
flex:2;padding:10px 20px;
display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.pa-tl2-progress-bar{
height:8px;background:var(--border);border-radius:var(--r);overflow:hidden;
}
.pa-tl2-progress-fill{
height:100%;border-radius:var(--r);
background:linear-gradient(90deg,var(--blue) 0%,var(--green) 100%);
transition:width .8s cubic-bezier(.22,1,.36,1);
}
.pa-tl2-progress-meta{
display:flex;justify-content:space-between;
font-size:10px;color:var(--text-2);
}
/* Background layer (month lines + today) */
.pa-tl2-bg{
position:absolute;
left:var(--tl-lw);right:0;top:0;bottom:0;
pointer-events:none;overflow:visible;z-index:0;
}
.pa-tl2-month-stripe{
position:absolute;top:0;bottom:0;
border-left:1px solid var(--border);opacity:.6;
}
.pa-tl2-month-lbl{
position:absolute;top:0;left:4px;
font-size:9px;color:var(--text-3);
text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.pa-tl2-today-line{
position:absolute;top:0;bottom:0;width:2px;
background:var(--blue);
animation:pa-tl2-glow 2s ease-in-out infinite;
z-index:4;
}
.pa-tl2-today-pip{
position:absolute;top:0;left:50%;
transform:translateX(-50%);
background:var(--blue);color:#fff;
font-size:9px;font-weight:700;
padding:2px 7px;border-radius:var(--r);
letter-spacing:.05em;white-space:nowrap;
}
.pa-tl2-today-pip::after{
content:'';
position:absolute;top:100%;left:50%;transform:translateX(-50%);
border:4px solid transparent;border-top-color:var(--blue);
}
@keyframes pa-tl2-glow{
0%,100%{box-shadow:0 0 6px rgba(96,165,250,.5)}
50%{box-shadow:0 0 14px rgba(96,165,250,.9),0 0 28px rgba(96,165,250,.3)}
}
/* Rows wrapper */
.pa-tl2-rows-wrap{
position:relative;padding-top:18px;
}
/* Row */
.pa-tl2-row{
display:flex;align-items:center;
height:40px;margin-bottom:4px;
animation:pa-tl2-in .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pa-tl2-in{
from{opacity:0;transform:translateX(-8px)}
to{opacity:1;transform:none}
}
/* Label column */
.pa-tl2-label-col{
width:var(--tl-lw);min-width:var(--tl-lw);
display:flex;align-items:center;gap:8px;
padding-right:12px;overflow:hidden;
border-radius:var(--r-sm) 0 0 var(--r-sm);
transition:background .15s;
}
.pa-tl2-row:hover .pa-tl2-label-col{background:var(--surface-2)}
.pa-tl2-avt{
width:26px;height:26px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:9px;font-weight:700;color:#fff;letter-spacing:.02em;
}
.pa-tl2-avt-todo{background:var(--amber)}
.pa-tl2-avt-in_progress{background:var(--blue)}
.pa-tl2-avt-done{background:var(--green)}
.pa-tl2-lbl-inner{overflow:hidden;flex:1}
.pa-tl2-lbl-key{font-size:10px;color:var(--text-2);font-weight:700;letter-spacing:.03em;display:block}
.pa-tl2-lbl-name{font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
/* Track + bar */
.pa-tl2-track{flex:1;position:relative;height:40px;z-index:1}
.pa-tl2-bar{
position:absolute;height:26px;top:7px;
border-radius:var(--r);display:flex;align-items:center;
overflow:hidden;cursor:default;
transition:box-shadow .2s,filter .15s,top .15s;
min-width:6px;
}
.pa-tl2-bar:hover{top:5px;filter:brightness(1.08)}
.pa-tl2-bar-todo{background:linear-gradient(90deg,#b45309 0%,#f59e0b 100%);box-shadow:0 1px 6px rgba(217,119,6,.25)}
.pa-tl2-bar-todo:hover{box-shadow:0 4px 18px rgba(245,158,11,.55)}
.pa-tl2-bar-in_progress{background:linear-gradient(90deg,#1e40af 0%,#60a5fa 100%);box-shadow:0 1px 6px rgba(37,99,235,.25)}
.pa-tl2-bar-in_progress:hover{box-shadow:0 4px 18px rgba(96,165,250,.55)}
.pa-tl2-bar-done{background:linear-gradient(90deg,#166534 0%,#4ade80 100%);box-shadow:0 1px 6px rgba(22,163,74,.25)}
.pa-tl2-bar-done:hover{box-shadow:0 4px 18px rgba(74,222,128,.55)}
.pa-tl2-bar-in_progress::after{
content:'';position:absolute;inset:0;
background:repeating-linear-gradient(-55deg,transparent,transparent 6px,rgba(255,255,255,.07) 6px,rgba(255,255,255,.07) 12px);
}
.pa-tl2-bar-txt{
position:relative;z-index:1;padding:0 10px;
font-size:10px;font-weight:600;color:rgba(255,255,255,.92);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Tooltip */
.pa-tl2-tip{
position:absolute;bottom:calc(100% + 10px);
left:50%;transform:translateX(-50%) translateY(4px);
min-width:190px;max-width:260px;
background:var(--text-1);color:#fff;
padding:10px 12px;border-radius:var(--r-md);
box-shadow:0 8px 28px rgba(0,0,0,.28);
font-size:12px;line-height:1.45;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .15s,transform .15s;
z-index:30;white-space:nowrap;
}
.pa-tl2-tip::after{
content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
border:5px solid transparent;border-top-color:var(--text-1);
}
.pa-tl2-bar:hover .pa-tl2-tip{
opacity:1;visibility:visible;
transform:translateX(-50%) translateY(0);
}
/* Milestones row */
.pa-tl2-ms-row{display:flex;margin-top:10px;margin-bottom:4px}
.pa-tl2-ms-spacer{width:var(--tl-lw);min-width:var(--tl-lw)}
.pa-tl2-ms-track{flex:1;position:relative;height:30px}
.pa-tl2-ms{
position:absolute;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;
cursor:default;z-index:2;
}
.pa-tl2-ms-gem{
width:14px;height:14px;transform:rotate(45deg);border-radius:var(--r);
transition:transform .2s,box-shadow .2s;
}
.pa-tl2-ms-open .pa-tl2-ms-gem{background:var(--amber);box-shadow:0 0 8px rgba(251,191,36,.5)}
.pa-tl2-ms-done .pa-tl2-ms-gem{background:var(--green);box-shadow:0 0 8px rgba(74,222,128,.5)}
.pa-tl2-ms:hover .pa-tl2-ms-gem{transform:rotate(45deg) scale(1.4)}
.pa-tl2-ms-title{
position:absolute;top:20px;
font-size:9px;color:var(--text-2);white-space:nowrap;
opacity:0;transition:opacity .15s;
}
.pa-tl2-ms:hover .pa-tl2-ms-title{opacity:1}
/* Axis + Legend */
.pa-tl2-axis{
display:flex;justify-content:space-between;
margin-left:var(--tl-lw);margin-top:4px;
font-size:10px;color:var(--text-3);font-variant-numeric:tabular-nums;
}
.pa-tl2-legend{
margin-top:var(--space-4);
display:flex;gap:var(--space-4);flex-wrap:wrap;
font-size:11px;color:var(--text-2);
padding-top:var(--space-3);border-top:1px solid var(--border);
}
.pa-tl2-legend-item{display:flex;align-items:center;gap:6px}
.pa-tl2-legend-pill{width:24px;height:8px;border-radius:var(--r);flex-shrink:0}
.pa-tl2-legend-pill-todo{background:linear-gradient(90deg,#b45309,#f59e0b)}
.pa-tl2-legend-pill-progress{background:linear-gradient(90deg,#1e40af,#60a5fa)}
.pa-tl2-legend-pill-done{background:linear-gradient(90deg,#166534,#4ade80)}
.pa-tl2-legend-gem{width:10px;height:10px;border-radius:var(--r);transform:rotate(45deg);flex-shrink:0}
.pa-tl2-legend-gem-open{background:var(--amber)}
.pa-tl2-legend-gem-done{background:var(--green)}
/* Heatmap */
.pa-360-heatmap{display:flex;align-items:flex-end;gap:8px}
.pa-360-heatmap-yaxis{
display:flex;flex-direction:column;justify-content:space-between;
height:200px;font-size:10px;color:var(--text-2);text-align:right;padding-right:4px;
}
.pa-360-heatmap-grid{
flex:1;display:grid;grid-template-rows:repeat(5,1fr);gap:2px;height:200px
}
.pa-360-heatmap-row{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.pa-360-heatmap-cell{
border-radius:var(--r-sm);
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:600;
}
.pa-360-heatmap-xaxis{
display:flex;justify-content:space-between;font-size:10px;color:var(--text-2);
margin-top:4px;padding-left:24px;
}
/* ── Panel-Card (Hub-Standard für Tab-Inhalte, analog .mon-panel) ── */
.pa-360-panel{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-md);
display:flex;flex-direction:column;
overflow:hidden;
}
.pa-360-panel + .pa-360-panel{margin-top:var(--space-3)}
.pa-360-panel-head{
display:flex;align-items:baseline;gap:var(--space-2);
justify-content:flex-start;flex-wrap:wrap;
padding:14px 16px 8px;
}
.pa-360-panel-head-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pa-360-panel-title{
font-size:13px;font-weight:700;color:var(--text);margin:0;
text-transform:uppercase;letter-spacing:.04em;
}
.pa-360-panel-sub{font-size:11px;color:var(--text-3);font-weight:500}
.pa-360-panel-actions{
display:flex;gap:var(--space-2);align-items:center;
margin-left:auto;flex-shrink:0;
}
.pa-360-panel-body{padding:8px 16px 16px;flex:1;display:flex;flex-direction:column;gap:var(--space-3)}
.pa-360-panel-body-flush{padding:0}
.pa-360-panel-grid-2{
display:grid;gap:var(--space-3);
grid-template-columns:minmax(0,2fr) minmax(0,1fr);
}
@media(max-width:900px){
.pa-360-panel-grid-2{grid-template-columns:1fr}
}
/* ── Stakeholder-Karten mit Avatar ── */
.pa-360-stakeholders{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:var(--space-2);
}
.pa-360-stakeholder{
display:flex;align-items:center;gap:var(--space-3);
padding:var(--space-3);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
transition:border-color var(--dur-fast),transform var(--dur-fast);
}
.pa-360-stakeholder:hover{border-color:var(--accent);transform:translateY(-1px)}
.pa-360-avatar{
width:40px;height:40px;border-radius:var(--r-full);
display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:700;flex-shrink:0;
background:var(--surface-2);color:var(--text-2);
}
.pa-360-avatar-auftraggeber{background:rgba(33,150,243,.12);color:var(--blue)}
.pa-360-avatar-pl{background:rgba(76,175,80,.14);color:var(--green)}
.pa-360-avatar-stellv{background:rgba(255,152,0,.14);color:var(--amber)}
.pa-360-avatar-rapport{background:rgba(156,39,176,.14);color:var(--violet)}
.pa-360-avatar-team{background:rgba(33,150,243,.10);color:var(--blue)}
.pa-360-stakeholder-info{flex:1;min-width:0}
.pa-360-stakeholder-role{
font-size:10px;font-weight:700;color:var(--text-3);
text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;
}
.pa-360-stakeholder-name{
font-weight:600;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pa-360-stakeholder-pos{
font-size:11px;color:var(--text-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ── Brief-Block (Ziel + Ausgangslage gestaffelt in einem Panel) ── */
.pa-360-brief{display:flex;flex-direction:column;gap:var(--space-3)}
.pa-360-brief-section + .pa-360-brief-section{
padding-top:var(--space-3);
border-top:1px dashed var(--border);
}
.pa-360-brief-label{
font-size:10px;font-weight:700;color:var(--text-3);
text-transform:uppercase;letter-spacing:.6px;margin-bottom:var(--space-1);
}
.pa-360-brief-text{
color:var(--text);line-height:1.55;
white-space:pre-line;font-size:13px;
}
.pa-360-brief-text-empty{
color:var(--text-3);font-style:italic;font-size:13px;
}
/* ── Audit-Timeline mit Dot-Markern ── */
.pa-360-audit-timeline{position:relative;padding-left:24px}
.pa-360-audit-timeline::before{
content:'';position:absolute;left:7px;top:6px;bottom:6px;
width:2px;background:var(--border);
}
.pa-360-audit-row{
position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-2);
display:flex;gap:var(--space-3);align-items:flex-start;
}
.pa-360-audit-row::before{
content:'';position:absolute;left:-21px;top:14px;
width:12px;height:12px;border-radius:var(--r-full);
background:var(--surface);border:2px solid var(--accent);
}
.pa-360-audit-row.is-ai::before{border-color:var(--violet)}
.pa-360-audit-row + .pa-360-audit-row{border-top:1px dashed var(--border)}
/* ── Dokumenten-Liste als Cards ── */
.pa-360-docs-list{display:flex;flex-direction:column;gap:var(--space-2)}
.pa-360-doc-row{
display:flex;align-items:center;gap:var(--space-3);
padding:var(--space-2) var(--space-3);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
transition:border-color var(--dur-fast);
}
.pa-360-doc-row:hover{border-color:var(--accent)}
.pa-360-doc-icon{
width:36px;height:36px;border-radius:var(--r);
display:flex;align-items:center;justify-content:center;
background:rgba(33,150,243,.10);color:var(--blue);
font-weight:700;font-size:11px;flex-shrink:0;
text-transform:uppercase;
}
.pa-360-doc-info{flex:1;min-width:0}
.pa-360-doc-name{
font-weight:600;color:var(--text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pa-360-doc-meta{
font-size:11px;color:var(--text-3);
display:flex;gap:var(--space-2);flex-wrap:wrap;
}
.pa-360-doc-actions{display:flex;gap:var(--space-1);flex-shrink:0}
/* ── Ticket-Liste als Cards ── */
.pa-360-tickets-list{display:flex;flex-direction:column;gap:var(--space-1)}
.pa-360-ticket-row{
display:flex;align-items:center;gap:var(--space-3);
padding:var(--space-2) var(--space-3);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
transition:border-color var(--dur-fast);
}
.pa-360-ticket-row:hover{border-color:var(--accent)}
.pa-360-ticket-key{
font-family:var(--font-mono,ui-monospace,monospace);
font-size:11px;font-weight:700;color:var(--text-2);
min-width:70px;flex-shrink:0;
}
.pa-360-ticket-title{flex:1;min-width:0;font-size:13px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.pa-360-ticket-meta{
font-size:11px;color:var(--text-3);
display:flex;gap:var(--space-2);flex-shrink:0;
}
.pa-360-ticket-status-todo{background:rgba(255,152,0,.12);color:var(--amber)}
.pa-360-ticket-status-progress{background:rgba(33,150,243,.12);color:var(--blue)}
.pa-360-ticket-status-done{background:rgba(76,175,80,.14);color:var(--green)}
.pa-360-ticket-group + .pa-360-ticket-group{margin-top:var(--space-3)}
.pa-360-ticket-group-head{
display:flex;align-items:center;gap:8px;
padding:6px 4px 8px;
font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--text-3);
border-bottom:1px solid var(--border);
margin-bottom:8px;
}
.pa-360-ticket-group-dot{
width:8px;height:8px;border-radius:var(--r-full);flex-shrink:0;
}
.pa-360-ticket-group-dot.pa-360-ticket-status-todo{background:var(--amber)}
.pa-360-ticket-group-dot.pa-360-ticket-status-progress{background:var(--blue)}
.pa-360-ticket-group-dot.pa-360-ticket-status-done{background:var(--green)}
.pa-360-ticket-group-label{flex:1;color:var(--text-2)}
.pa-360-ticket-group-count{
color:var(--text-3);font-weight:600;
background:var(--surface-2,rgba(0,0,0,.04));
padding:2px 8px;border-radius:var(--r-full);
font-size:11px;letter-spacing:0;text-transform:none;
}
/* ── Projektauftrag-Verlauf (Timeline) ─────────────────────── */
.pa-history-summary{
display:flex;flex-wrap:wrap;gap:var(--space-2);
margin-bottom:var(--space-3);
}
.pa-history-chip{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:var(--r-full);
background:var(--surface-2);border:1px solid var(--border);
font-size:12px;color:var(--text-2);
}
.pa-history-chip strong{color:var(--text);font-weight:700}
.pa-history-chip.is-error{background:rgba(244,67,54,.10);border-color:rgba(244,67,54,.30);color:var(--red,#c62828)}
.pa-history-day{margin-bottom:var(--space-4)}
.pa-history-day-head{
display:flex;align-items:center;gap:8px;
margin-bottom:var(--space-2);
font-size:12px;font-weight:700;
letter-spacing:.04em;text-transform:uppercase;
color:var(--text-3);
}
.pa-history-day-line{flex:1;height:1px;background:var(--border)}
.pa-history-timeline{position:relative;padding-left:28px}
.pa-history-timeline::before{
content:'';position:absolute;left:11px;top:6px;bottom:6px;
width:2px;background:var(--border);
}
.pa-history-row{
position:relative;
padding:var(--space-2) 0 var(--space-2) var(--space-2);
display:flex;gap:var(--space-3);align-items:flex-start;
}
.pa-history-row + .pa-history-row{border-top:1px dashed var(--border)}
.pa-history-dot{
position:absolute;left:-22px;top:14px;
width:24px;height:24px;border-radius:var(--r-full);
display:flex;align-items:center;justify-content:center;
background:var(--surface);border:2px solid var(--accent);
color:var(--accent);font-size:11px;font-weight:700;
line-height:1;
}
.pa-history-row.is-notification .pa-history-dot{
border-color:var(--blue);color:var(--blue);
}
.pa-history-row.is-error .pa-history-dot{
border-color:var(--red,#c62828);color:var(--red,#c62828);
}
.pa-history-row.is-skipped .pa-history-dot{
border-color:var(--text-3);color:var(--text-3);
}
.pa-history-time{
font-family:var(--font-mono,ui-monospace,monospace);
font-size:11px;color:var(--text-3);
min-width:48px;flex-shrink:0;padding-top:4px;
}
.pa-history-body{flex:1;min-width:0}
.pa-history-title{
font-weight:600;color:var(--text);
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.pa-history-title-text{flex:1;min-width:120px}
.pa-history-channel{
font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:2px 8px;border-radius:var(--r-full);
background:var(--surface-2);color:var(--text-2);
border:1px solid var(--border);
}
.pa-history-channel.is-email{background:rgba(33,150,243,.10);color:var(--blue);border-color:rgba(33,150,243,.30)}
.pa-history-channel.is-teams{background:rgba(124,77,255,.10);color:var(--violet,#7c4dff);border-color:rgba(124,77,255,.30)}
.pa-history-channel.is-inapp{background:rgba(76,175,80,.10);color:var(--green);border-color:rgba(76,175,80,.30)}
.pa-history-channel.is-system{background:var(--surface-2);color:var(--text-3)}
.pa-history-status{
font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:2px 8px;border-radius:var(--r-full);
}
.pa-history-status.is-ok{background:rgba(76,175,80,.10);color:var(--green)}
.pa-history-status.is-error{background:rgba(244,67,54,.10);color:var(--red,#c62828)}
.pa-history-status.is-skipped{background:var(--surface-2);color:var(--text-3)}
.pa-history-meta{
margin-top:2px;font-size:12px;color:var(--text-2);
display:flex;flex-wrap:wrap;gap:4px 12px;
}
.pa-history-meta b{color:var(--text);font-weight:600}
.pa-history-error-msg{
margin-top:4px;font-size:12px;
padding:6px 8px;border-radius:var(--r);
background:rgba(244,67,54,.08);color:var(--red,#c62828);
}
.pa-history-empty{
text-align:center;padding:var(--space-6);
color:var(--text-3);font-size:13px;
}
/* RACI-Matrix mit Sticky-Header und horizontalem Scroll */
.pa-360-raci-wrap{
max-height:420px;overflow:auto;
border:1px solid var(--border);border-radius:var(--r);
}
.pa-360-raci-table{width:100%;font-size:13px;border-collapse:collapse}
.pa-360-raci-table thead th{
position:sticky;top:0;z-index:1;
background:var(--surface);
box-shadow:inset 0 -1px 0 var(--border);
text-align:left;
}
.pa-360-raci-table .pa-360-raci-col{width:60px;text-align:center;cursor:help}
.pa-360-raci-table tbody td{padding:8px 12px}
.pa-360-raci-table tbody td:not(:first-child){text-align:center}
.pa-360-raci-table .pa-360-raci-task{font-weight:600;min-width:200px}
/* ── Risiken-Tabelle als Cards ── */
.pa-360-risk-list{display:flex;flex-direction:column;gap:var(--space-2)}
.pa-360-risk-card{
display:grid;gap:var(--space-2);
padding:var(--space-3);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
grid-template-columns:1fr auto;
transition:border-color var(--dur-fast);
}
.pa-360-risk-card:hover{border-color:var(--accent)}
.pa-360-risk-card-main{min-width:0}
.pa-360-risk-card-title{font-weight:600;color:var(--text);font-size:13px}
.pa-360-risk-card-desc{
font-size:12px;color:var(--text-2);margin-top:2px;
}
.pa-360-risk-card-mitigation{
font-size:12px;color:var(--blue);margin-top:4px;
}
.pa-360-risk-card-tags{
display:flex;gap:var(--space-1);flex-wrap:wrap;margin-top:var(--space-2);
font-size:11px;color:var(--text-3);
}
.pa-360-risk-card-tag{
padding:1px 8px;border-radius:var(--r-full);
background:var(--surface-2);
}
.pa-360-risk-card-score{
display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:2px;
min-width:64px;padding:0 var(--space-2);
border-left:1px solid var(--border);
}
.pa-360-risk-card-score-value{
font-size:20px;font-weight:800;line-height:1;
font-variant-numeric:tabular-nums;
}
.pa-360-risk-card-score-label{
font-size:9px;font-weight:700;
text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);
}
.pa-360-risk-score-crit .pa-360-risk-card-score-value{color:var(--red)}
.pa-360-risk-score-high .pa-360-risk-card-score-value{color:var(--amber)}
.pa-360-risk-score-med .pa-360-risk-card-score-value{color:var(--blue)}
.pa-360-risk-score-low .pa-360-risk-card-score-value{color:var(--text-2)}
.pa-360-risk-card-actions{
grid-column:1 / -1;display:flex;gap:var(--space-1);
justify-content:flex-end;
border-top:1px dashed var(--border);padding-top:var(--space-2);
}
/* ── Modal-Popup (zentral, ersetzt seitliches FlyIn für Editor-Dialoge) ── */
.pa-360-modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.55);
z-index:2000;display:flex;align-items:center;justify-content:center;
padding:var(--space-4);
animation:spa-fade-in var(--dur) var(--ease-out);
}
.pa-360-modal{
background:var(--surface);
border-radius:var(--r-lg);
box-shadow:0 20px 60px rgba(0,0,0,.25);
width:100%;max-width:560px;
max-height:calc(100vh - 80px);
display:flex;flex-direction:column;overflow:hidden;
animation:pa-modal-pop var(--dur) var(--ease-out);
}
@keyframes pa-modal-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.pa-360-modal-head{
padding:var(--space-3) var(--space-4);
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
flex-shrink:0;
}
.pa-360-modal-title{
font-size:15px;font-weight:700;margin:0;color:var(--text);
}
.pa-360-modal-close{
background:none;border:none;font-size:20px;line-height:1;
cursor:pointer;color:var(--text-3);
padding:4px 8px;border-radius:var(--r);
transition:background var(--dur-fast),color var(--dur-fast);
}
.pa-360-modal-close:hover{background:var(--surface-2);color:var(--text)}
.pa-360-modal-body{
padding:var(--space-4);overflow-y:auto;flex:1;
display:grid;gap:var(--space-3);
}
.pa-360-modal-foot{
padding:var(--space-3) var(--space-4);
border-top:1px solid var(--border);
display:flex;gap:var(--space-2);justify-content:flex-end;
flex-shrink:0;
}
@media(max-width:600px){
.pa-360-modal{
max-width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;
align-self:flex-end;max-height:90vh;
}
.pa-360-modal-overlay{align-items:flex-end;padding:0}
}
/* ── Stammdaten Referenzdaten — kompaktes Editor-Grid (nutzt .pa-360-modal* als Basis) ── */
.st-refdata-modal{max-width:520px}
.st-rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.st-rd-sep{height:0;border-top:1px solid var(--border)}
.st-rd-check{font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text-2)}
.st-rd-hint{font-size:11px;color:var(--text-3);margin-top:4px}
@media(max-width:600px){
.st-rd-grid{grid-template-columns:1fr}
}
/* ── Welcome-Modal (Erst-Login-Begrüssung, nutzt .pa-360-modal* als Basis) ── */
.welcome-modal{max-width:600px}
.welcome-modal-step{
font-size:11px;color:var(--text-3);
text-transform:uppercase;letter-spacing:.06em;
}
.welcome-modal-body{text-align:center}
.welcome-modal-hero{
display:flex;justify-content:center;align-items:center;
margin:var(--space-2) auto var(--space-3);color:var(--accent);
}
.welcome-modal-greeting{
font-size:22px;font-weight:700;margin:0;color:var(--text);
}
.welcome-modal-lead{
font-size:14px;color:var(--text-2);margin:0;line-height:1.5;
}
.welcome-modal-hint{
font-size:12px;color:var(--text-3);margin:var(--space-2) 0 0;
}
.welcome-mod-grid{
display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);
text-align:left;margin-top:var(--space-1);
}
@media(max-width:600px){
.welcome-mod-grid{grid-template-columns:1fr}
}
.welcome-mod-card{
display:flex;align-items:flex-start;gap:var(--space-2);
padding:var(--space-2) var(--space-3);
background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--r);cursor:pointer;text-align:left;
transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast);
font-family:inherit;color:var(--text);
}
.welcome-mod-card:hover{
background:var(--surface);border-color:var(--accent);
transform:translateY(-1px);
}
.welcome-mod-card-icon{
color:var(--accent);flex-shrink:0;
display:flex;align-items:center;margin-top:2px;
}
.welcome-mod-card-text{
display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;
}
.welcome-mod-card-label{
font-size:13px;font-weight:600;color:var(--text);
}
.welcome-mod-card-desc{
font-size:11px;color:var(--text-2);line-height:1.4;
}
.welcome-mod-card-arrow{
color:var(--text-3);font-size:18px;line-height:1;
flex-shrink:0;align-self:center;
}
/* Visually-Hidden für Screenreader-Texte (ARIA-Live etc.) */
.sr-only{
position:absolute !important;
width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* ── Skeleton-Loader (Hub-weite Utility) ──────────────────────
Platzhalter in Form des erwarteten Inhalts während Daten
geladen werden. Reduziert die gefühlte Ladezeit, ohne die
reale Latenz zu verändern. Pattern: dezente Pulse-Basis +
Wave-Sweep (Pseudo-Element), wie es Linear / GitHub / shadcn
heute machen. */
.sk{
position:relative;
display:block;
overflow:hidden;
isolation:isolate;
background:color-mix(in srgb,var(--text) 8%,var(--surface-card,var(--surface)));
border-radius:var(--r,8px);
border:1px solid color-mix(in srgb,var(--text) 6%,transparent);
animation:sk-pulse 2.4s ease-in-out infinite;
}
.sk::after{
content:"";
position:absolute;inset:0;
background:linear-gradient(90deg,
transparent 0%,
color-mix(in srgb,#fff 55%,transparent) 50%,
transparent 100%);
transform:translateX(-100%);
animation:sk-sweep 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
html.dark .sk::after{
background:linear-gradient(90deg,
transparent 0%,
color-mix(in srgb,#fff 9%,transparent) 50%,
transparent 100%);
}
.sk--line{height:12px;border-radius:var(--r-full);border:0;width:100%}
.sk--line-sm{height:9px;border-radius:var(--r-full);border:0}
.sk--title{height:18px;border-radius:var(--r-full);border:0;width:55%}
.sk--tile{height:108px;border-radius:var(--r-lg)}
.sk--card{height:72px;border-radius:var(--r-md)}
.sk--row{height:48px;border-radius:var(--r-md)}
.sk-stack > * + *{margin-top:8px}
@keyframes sk-sweep{
0% {transform:translateX(-100%)}
100% {transform:translateX(100%)}
}
@keyframes sk-pulse{
0%,100%{opacity:1}
50% {opacity:.72}
}
@media (prefers-reduced-motion: reduce){
.sk,.sk::after{animation:none}
}
/* Print-Mode für PDF-Export */
@media print{
body.print-projectCharter-360 *{visibility:hidden}
body.print-projectCharter-360 .pa-360,
body.print-projectCharter-360 .pa-360 *{visibility:visible}
body.print-projectCharter-360 .pa-360{
position:absolute;left:0;top:0;width:100%;padding:16px
}
body.print-projectCharter-360 .no-print{display:none !important}
body.print-projectCharter-360 .pa-360-section{
page-break-inside:avoid;border-color:#ddd;background:#fff
}
body.print-projectCharter-360 .kpi-card{
border:1px solid #ddd;background:#fff;page-break-inside:avoid
}
}
/* ── Stammdaten Redesign (ADR-0054): Card-Roster + Dossier-Identitäts-Anker ──
Hier statt im Template-