/* Runtime integration of the original V3 tokens and components. */ @font-face{font-family:"DM Sans";src:url('/fonts/DMSans-Regular.ttf');font-display:swap} @font-face{font-family:"DM Sans";src:url('/fonts/DMSans-Bold.ttf');font-weight:700;font-display:swap} @font-face{font-family:Manrope;src:url('/fonts/Manrope-ExtraBold.ttf');font-weight:800;font-display:swap} [hidden]{display:none!important} html,body{height:100%;overflow:hidden} .symbol-definitions{position:absolute} .boot{display:grid;place-content:center;height:100vh} .anmeldung:not([hidden]){display:grid;min-height:100vh} .anmeldekarte label{font-size:14px;margin-bottom:-12px} .anmeldekarte input{width:100%} #challengeFields{display:grid;gap:16px;min-width:0} #challengeFields label{display:grid;gap:8px;margin:0} #challengeFields code{overflow-wrap:anywhere;user-select:all} #challengeFields select{max-width:100%} #loginError{color:var(--rot-text);font-size:14px} .buehne{height:100dvh;max-width:none;border:0;border-radius:0;margin:0;box-shadow:none} .p-knopf:is([aria-current="page"],[aria-current="true"]){background:var(--zeile-hier);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #ff5a63} .p-knopf:is([aria-current="page"],[aria-current="true"]):hover{background:var(--zeile-hier-zeigen)} .p-knopf:focus-visible{outline-offset:-2px} .schiene-liste{overscroll-behavior:contain} /* Group headings belong to the following items; separate them from the prior group. */ #walletNav .p-knopf + .schiene-gruppe{margin-top:var(--a2)} #overviewButton:not([hidden]) ~ #walletNav > .schiene-gruppe:first-child{margin-top:var(--a2)} #walletNav,#productNav{display:flex;flex-direction:column;gap:1px} #productNav .p-knopf{display:grid} #productNav .p-knopf .name{text-transform:uppercase;font-weight:700} .p-zurueck{display:grid;white-space:nowrap} .avatar{display:grid;place-content:center;width:34px;height:34px;border-radius:50%;font-size:14px} .fuss-rolle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} .tenant-field select{width:100%;min-height:42px;background:var(--flaeche);color:var(--schrift);border:1px solid var(--umriss);border-radius:var(--r-1);padding:8px;font:inherit;font-size:14px} .mobile-menu,.mobile-menu-close,.menu-backdrop{display:none} .mitte-kopf{height:var(--kopf-hoehe);min-height:var(--kopf-hoehe)} .mitte-kopf .workspace-heading{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0} .mitte-kopf h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #workspaceEyebrow{color:var(--rot-text);font-size:11px;line-height:1.2;font-weight:700;letter-spacing:.09em;text-transform:uppercase} #workspaceSubtitle{color:var(--leise);font-size:13px;line-height:1.4;font-family:var(--ui);font-weight:400;overflow-wrap:anywhere} #workspaceTitle:focus{outline:none} #walletRoot{display:flex;flex:1;min-height:0;overflow:hidden} #walletRoot>div{flex:1;min-width:0} /* Wallet dialogs live outside #walletRoot: RNWeb portals under ([role="dialog"][aria-modal="true"]) and the native .wallet-dialog element; both re-apply the #walletRoot font and focus rules. */ :is(#walletRoot,[role="dialog"][aria-modal="true"],.wallet-dialog) [dir]{font-family:var(--ui)} :is(#walletRoot,[role="dialog"][aria-modal="true"],.wallet-dialog) [role="heading"]{font-family:var(--anzeige)} :is(#walletRoot,[role="dialog"][aria-modal="true"],.wallet-dialog) :is(button,input,textarea,select,a,[tabindex],[role="button"]):focus-visible{outline:2px solid var(--fokus)!important;outline-offset:3px} #walletRoot input,#walletRoot textarea{accent-color:var(--rot)} #walletRoot [aria-disabled="true"]{cursor:default} #walletRoot .wallet-message{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;margin:24px;padding:28px;border:1px solid var(--linie);border-radius:var(--r-3);background:var(--flaeche);line-height:1.6} .wallet-message[role="alert"]{color:var(--rot-text)} .wallet-message h2{font-size:21px} .product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:20px} .product-card{background:var(--flaeche);border:1px solid var(--linie);padding:24px;border-radius:10px;display:grid;gap:16px} .product-card svg{width:180px;height:34px} .product-card p,#productDescription{color:var(--leise)} #productWorkspace{display:grid;align-content:start;gap:20px} .product-card button{justify-self:start} button:disabled{cursor:default;opacity:.55} /* Native confirmation dialogs stay in the same document and use V3 tokens. */ .wallet-dialog{width:520px;max-width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:0;border:1px solid var(--linie-stark);border-radius:var(--r-3);color:var(--schrift);background:var(--flaeche);font:400 var(--t15)/1.5 var(--ui);box-shadow:var(--schatten)} .wallet-dialog::backdrop{background:rgba(20,19,17,.5)} .wallet-dialog-heading{padding:20px 24px;border-bottom:1px solid var(--linie);font:800 18px/1.4 var(--anzeige);overflow-wrap:anywhere} .wallet-dialog-message{margin:0;padding:20px 24px;white-space:pre-line;line-height:1.6;overflow-wrap:anywhere} .wallet-dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:16px 24px;border-top:1px solid var(--linie);background:var(--flaeche-sanft)} .wallet-dialog-actions .knopf{min-height:42px;justify-content:center} .wallet-dialog :focus-visible{outline:2px solid var(--fokus);outline-offset:3px} .account-menu{position:fixed;inset:auto auto 84px 12px;margin:0;width:248px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 108px);overflow:auto;padding:12px;border:1px solid var(--linie-stark);border-radius:var(--r-2);background:var(--flaeche);color:var(--schrift);box-shadow:var(--schatten);--fokus:var(--rot)} .account-menu:popover-open{display:flex;flex-direction:column;gap:8px} .account-menu .tenant-field{display:flex;flex-direction:column;gap:6px;padding:8px 0;font-size:13px;color:var(--leise)} .account-menu .knopf{width:100%;min-height:42px;justify-content:flex-start} @media(max-width:700px){ .portal,.portal[data-agent="aus"]{grid-template-columns:1fr;grid-template-areas:"mitte"} .schiene{position:absolute;z-index:30;inset:0 auto 0 0;width:min(300px,calc(100vw - 40px));display:none;box-shadow:14px 0 40px -18px rgba(0,0,0,.55)} .portal[data-menu="open"] .schiene{display:flex} .portal[data-menu="open"] .menu-backdrop{display:block;position:absolute;inset:0;z-index:20;background:rgba(20,19,17,.5)} .mobile-menu,.mobile-menu-close{display:grid;place-items:center;width:44px;height:44px;flex:none} .mobile-menu-close{margin-left:auto;color:#fff} .mobile-menu-close:hover{background:rgba(255,255,255,.12)} .schiene-kopf{padding:0 12px 0 20px} .portalheim{display:flex} .portalmarke{display:block} .schiene-liste{padding:12px;align-items:stretch} .schiene-liste .name{display:block;font-size:14px} .p-knopf{min-height:44px} .mitte-kopf{padding:12px;gap:10px;align-items:flex-start} .mitte-kopf h1{font-size:17px} .mitte-kopf .workspace-heading{align-self:center} .schiene-fuss{height:76px;grid-template-columns:34px minmax(0,1fr);padding:0 16px} .fuss-text{display:block} .account-menu{bottom:88px;width:min(276px,calc(100vw - 24px))} .wallet-dialog-heading,.wallet-dialog-message{padding:18px 20px} .wallet-dialog-actions{padding:16px 20px} .wallet-dialog-actions .knopf{min-height:44px} #walletRoot .wallet-message{margin:16px;padding:20px} } @media(prefers-reduced-motion:reduce){#walletRoot *{scroll-behavior:auto!important}} /* Preserve the V3 shell geometry; runtime content does not redefine its tokens. */ #agentOpenHeader{margin-left:auto} .agent-status{padding:var(--rand);color:var(--leise);line-height:1.6} .agent-status p{margin-top:12px} #agentPanel textarea:disabled{opacity:.7} @media(min-width:701px){ .portal[data-navi="zu"] .schiene-kopf{padding:0;justify-content:center} .portal[data-navi="zu"] .portalheim{display:none} .portal[data-navi="zu"] .schiene-liste{padding-left:0;padding-right:0;align-items:center} .portal[data-navi="zu"] #walletNav{align-items:center;width:100%} .portal[data-navi="zu"] .p-knopf{width:var(--feld);padding:0;grid-template-columns:22px;justify-content:center} .portal[data-navi="zu"] .p-knopf .name{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } @media(max-width:700px){ .portal,.portal[data-navi][data-agent="auf"],.portal[data-navi][data-agent="zu"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"mitte"} .portal[data-agent="auf"] .mitte{display:none} .portal[data-agent="auf"] .agent{display:flex;grid-area:mitte} .portal[data-agent="zu"] .agent{display:none} .agent-griff,.schiene-falten{display:none} .mitte-kopf{padding:0 12px;align-items:center} } /* Corporate Design, 2026-08-31: semantic mapping for the live portal. Source: SUMA-Filme/styleguide/corporate-design.html, sections 2.4 and 4. */ :root{--eingabe-radius:8px;--fokus:var(--rot-text)} [data-modus="dunkel"]{ --grund:#161513;--flaeche:#232220;--flaeche-sanft:#3d3b37; --schrift:#fafaf8;--leise:#d3d0c9;--sehr-leise:#b7b3aa; --linie:#3d3b37;--linie-stark:#5f5d58;--umriss:#8a8781; --rot:#e30613;--rot-flaeche:#e30613;--rot-text:#fb9aa2; --rot-hauch:rgba(251,154,162,.14);--fokus:var(--rot-text); --gruen-text:#5fc994;--gruen-hauch:rgba(95,201,148,.12); --gelb:#e8a94a;--gelb-text:#e8a94a;--gelb-hauch:rgba(232,169,74,.14); --ampel-gruen:#5fc994;--ampel-gelb:#e8a94a;--ampel-rot:#fb9aa2; } :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select){border-radius:var(--eingabe-radius)!important} :focus-visible,.p-knopf:focus-visible{outline-color:var(--rot-text);outline-offset:3px} /* Explicit line breaks in the reference product headlines are intentional. */ #productPreview .schlagzeile{white-space:pre-line} /* User decision: original strong brand red for navigation logos. */ .schiene{--wm-marke:#e30613} /* Collapsed product rail: reserve a separate slot for entitlement locks. */ @media (min-width:701px){ .portal[data-navi="zu"] #productNav .p-knopf{width:48px} .portal[data-navi="zu"] #productNav .punkt[data-zustand="schloss"]{position:absolute;right:2px;top:5px;width:10px;height:12px;transform:none} .portal[data-navi="zu"] #productNav .punkt[data-zustand="schloss"] svg{width:10px;height:12px} } /* Recovery screens share the login card and remain scrollable on phones. */ .anmeldung{overflow-y:auto} .anmeldekarte .anmelde-link{background:none;border:0;padding:0;text-align:left;cursor:pointer} .anmeldekarte .reset-note{font-size:var(--t13);color:var(--leise);line-height:1.5} @media(max-height:850px){.anmeldung:has(#resetConfirmForm:not([hidden])){align-content:start}} /* Keep the card anchor stable while switching authentication screens. */ .anmeldung[style*="--auth-top"]{align-content:start;padding-top:var(--auth-top)} @media(max-height:600px){ .anmeldung,.anmeldung[style*="--auth-top"]{align-content:start;padding-top:var(--a5)} }