/* Kopfleiste (<:is(cw-app-header, vc-app-header)>) — portiert aus den scoped-Styles von * core-frontend/components/Header.vue. Selektoren und Werte unveraendert * uebernommen; im Light DOM entfaellt lediglich Vues scoped-Attribut. * * Ergaenzt um den Element-Selektor selbst: im Bestand trug das umschliessende *
die Leiste, hier ist es das Custom Element. */ /* Drei Spalten, Mitte echt mittig — 1:1 aus AvengersHeader.vue:137-146 * (`.avengers-header__content`). * * NUTZERMELDUNG: „Area Combobox muss auch wieder in die Mitte." Zutreffend * und im eigenen Bildschirmfoto belegt: die Auswahl klebte links neben * „Live-Aktualisierung". * * URSACHE: im Bestand liegt der Kopfinhalt in DREI Rasterspalten * `1fr auto 1fr`; die mittlere Spalte steht dadurch unabhaengig von der * Breite der beiden aeusseren genau in der Mitte. Der Port liess die * -Huelle weg und uebernahm nur die scoped-Styles von * Header.vue — mit ihr ging die Rasterung verloren. Der Ersatz aus Flexbox * (`.header-left { margin-right: auto }`) schiebt die Mitte immer dorthin, * wo die linke Spalte endet, also NICHT in die Mitte. * * Gilt in allen Themes, nicht nur im Avengers-Look: im Bestand umschliesst * den Kopf ebenfalls immer, `styleName` steuert nur das * Aussehen. */ :is(cw-app-header, vc-app-header) { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 12px; min-height: 48px; background: var(--surface-elevated); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card); position: sticky; top: 0; z-index: 20; } :is(cw-app-header, vc-app-header) .header-center { justify-content: center; } .avengers-header { --header-control-font-size: 12px; font-family: var(--app-font-sans, 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif); overflow: visible; background: var(--surface); color: var(--header-fg); box-sizing: border-box; /* HIER BEWUSST NICHT: die Token-Zuordnung des Bestands. * * Im Bestand stand an dieser Stelle ein Block, der --surface, --text, * --primary usw. auf die --core-color-*-Familie mappte (mit dunklen * Fallbacks). Dort war das richtig, weil --core-color-* je Theme gesetzt * wird. Im Port ist es umgekehrt: die Themes (light/dark/contrast/avangers) * setzen genau die semantischen Token, waehrend --core-color-* statisch aus * core-design/tokens/colors.css kommt. * * Der uebernommene Block haette den Header damit dauerhaft auf die dunklen * Werte genagelt — ein Theme-Wechsel waere im Header wirkungslos geblieben. * Vorgabe ist aber, dass ALLE Ansichten und der Header jedes Theme * mitmachen. Die Token werden deshalb geerbt, nicht neu definiert. */ } /* Rueckfall auf die schlichte Leiste, wenn im Avengers-THEME ein anderer * KOPFSTIL gewaehlt ist. * * Zuvor lautete die Bedingung `:not(.is-avengers)`. Diese Klasse stammt aus * dem Bestand (AvengersHeader.vue setzt sie am Wurzelelement); der Port * schaltet stattdessen ueber `data-core-header-style` an und vergibt * `is-avengers` NIRGENDS. Die Negation traf damit immer zu — dieses * `!important` uebermalte den Avengers-Look also auch dann, wenn er * ausdruecklich gewaehlt war. Die Bedingung steht jetzt an demselben * Attribut, an dem auch der Look selbst haengt. */ html[data-core-theme="avangers"]:not([data-core-header-style="avengers"]) .avengers-header { background: var(--surface-elevated) !important; border-bottom-color: var(--border); box-shadow: var(--shadow-card); } html[data-core-theme="avangers"] .header-right button:hover { background: var(--primary-soft); } .header-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .title-block { display: flex; flex-direction: column; line-height: 1; min-width: 0; } .logo { height: 32px; max-height: calc(48px - 10px); width: auto; max-width: 148px; object-fit: contain; flex: 0 0 auto; } .logo-fallback { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--success); color: var(--text-inverse); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; flex: 0 0 auto; } .product-name { font-size: 13px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-subtitle { font-size: 10px; color: var(--header-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-center { display: flex; align-items: center; gap: 10px; min-width: 0; } .header-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; } .agent42-header-dock-target { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; } .agent42-header-dock-target:empty { display: none; } .live-updates-btn { background-color: transparent; color: color-mix(in srgb, var(--header-fg) 92%, var(--header-muted)); border: 1px solid transparent; padding: 4px 0; border-radius: 999px; display: flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0; white-space: nowrap; min-width: max-content; flex: 0 0 auto; } .indicator { width: 10px; height: 10px; background-color: var(--success); border-radius: 50%; box-shadow: 0 0 0 3px var(--success-soft); flex: 0 0 auto; } .live-updates-btn.inactive .indicator { background-color: var(--text-muted); box-shadow: none; } .live-updates-btn.inactive { opacity: 0.72; } .dropdown { margin-left: 0; width: 200px; min-width: 200px; max-width: 200px; height: 32px; background-color: var(--header-control-bg); color: var(--header-fg); border: 1px solid var(--header-control-border); padding: 0 10px; border-radius: 6px; font-size: var(--header-control-font-size); font-family: inherit; flex: 0 0 auto; } .header-right button { background: none; border: none; color: color-mix(in srgb, var(--header-fg) 92%, var(--header-muted)); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; width: 32px; height: 32px; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } .header-right button:hover { background: color-mix(in srgb, var(--header-control-bg) 78%, white 22%); color: var(--header-fg); } .help-menu-wrap { position: relative; display: flex; align-items: center; } .notification-wrap { position: relative; display: flex; align-items: center; } .notification-trigger-btn { position: relative; } .notification-trigger-btn.active { border-color: var(--warning); background: var(--warning-soft); } .notification-badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: var(--text-inverse); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border: 1px solid var(--border); } .notification-overlay { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: min(340px, calc(100vw - 22px)); border-radius: 12px; border: 1px solid var(--header-control-border); background: var(--surface-elevated); box-shadow: var(--shadow-overlay); padding: 8px; z-index: 3000; } .notification-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text); padding: 4px 4px 8px; } .notification-clear-btn { width: auto !important; height: 26px !important; padding: 0 8px; border: 1px solid var(--border) !important; border-radius: 7px !important; font-size: 11px !important; } .notification-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; display: grid; gap: 6px; } .notification-item { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface); } .notification-item--error { border-color: var(--danger); } .notification-item--warn { border-color: var(--warning); } .notification-item--info { border-color: var(--primary); } .notification-type-chip { font-size: 10px; letter-spacing: 0.03em; font-weight: 700; padding: 2px 6px; border-radius: 999px; border: 1px solid currentColor; color: var(--text); flex: 0 0 auto; } .notification-copy { min-width: 0; } .notification-title { font-size: 12px; font-weight: 700; line-height: 1.2; } .notification-message { font-size: 11px; line-height: 1.3; opacity: 0.86; margin-top: 3px; word-break: break-word; } .notification-empty { border: 1px dashed var(--border); border-radius: 8px; padding: 10px; font-size: 12px; color: var(--text-muted); } .help-trigger-btn.active { border-color: var(--primary); background: var(--primary-soft); } .help-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 320px; border-radius: 12px; border: 1px solid var(--header-control-border); background: var(--surface-elevated); box-shadow: var(--shadow-overlay); padding: 8px; z-index: 50; } /* Specificity bump: `.header-right button { width: 32px; height: 32px }` * earlier in this file has specificity 0-1-1 and was clobbering the * `.help-dropdown-item { width: 100% }` (0-1-0) declaration, squashing * every menu entry into a 32×32 icon-only square and stacking the four * cards on top of each other. Nesting the dropdown class lifts these * rules to 0-2-1 so they win cleanly. */ .help-dropdown .help-dropdown-item { width: 100%; min-height: 56px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--header-fg); display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 10px; cursor: pointer; text-align: left; } .help-dropdown .help-dropdown-item + .help-dropdown-item { margin-top: 4px; } .help-dropdown .help-dropdown-item:last-child { margin-top: 8px; border-top-color: var(--header-control-border); } .help-dropdown .help-dropdown-item .material-icons { font-size: 18px; margin-top: 1px; opacity: 0.9; width: auto; height: auto; flex: 0 0 auto; } .help-dropdown .help-dropdown-item:hover { background: var(--surface); border-color: var(--primary); } .help-dropdown-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; } .help-dropdown-title { font-size: 13px; font-weight: 700; line-height: 1.2; } .help-dropdown-subtitle { font-size: 11px; opacity: 0.8; line-height: 1.2; } .account-btn { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; overflow: hidden; padding: 0; } .account-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--header-control-border) 78%, white 22%); } .menu-button { background: none; border: none; color: color-mix(in srgb, var(--header-fg) 90%, var(--header-muted)); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .lang-select { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 1px solid var(--header-control-border); border-radius: 6px; background: var(--header-control-bg); font-family: inherit; flex: 0 0 auto; } .material-icons { font-size: 22px; line-height: 1; } .lang-select select { background: transparent; color: var(--header-fg); border: none; padding: 0; border-radius: 0; font-size: 12px; height: 100%; font-family: inherit; } .lang-select .material-icons { font-size: 18px; opacity: 0.88; } /* SPEC-0724 Etappe 5 (B5), GEMESSEN bei 834 px: die Bereichswahl war auf * 170/200 px festgenagelt und schnitt „IMS SMT+TEST Area" zu „IMS SMT+TEST A…" * ab, waehrend das Live-Label daneben Platz belegte. Bis 1099 px faellt das * Textlabel weg (der Punkt bleibt, der Titel traegt den Zustand weiter), und * die Bereichswahl darf bis min(320px, 40vw) wachsen. Ab 1200 px bleibt die * Leiste byteidentisch. * SPEC-0724 Etappe 7: Schwelle 1199 — EINE Tablet-Zone mit der Seitenleiste * (shell.css 721–1199) und dem Widget-Designer; vorher 1099. Wächter: * ShellBreakpointTest. */ @media (max-width: 1199px) { .live-updates-btn { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; gap: 0; padding-inline: 6px; } .live-updates-label { display: none; } .dropdown { width: min(320px, 40vw); min-width: 0; max-width: min(320px, 40vw); } } /* --- Zeigerschicht (SPEC-0724 Etappe 3) ------------------------------------ * * GEMESSEN (2026-08-20, ausgelieferter Stand): Hamburger 30x30, alle * Kopfknoepfe 32 px, Sprachwahl 32 px — auf iPadOS ist unter 44 px nichts * treffsicher. Nur unter grobem Zeiger; Maus und Trackpad sehen diese Regeln * nie. Die Kopfleiste ist 48 px hoch, 44 passt hinein. Schriftgroessen bleiben * — groesser heisst groesser, nicht fetter. */ @media (pointer: coarse) { :is(cw-app-header, vc-app-header) .menu-button { width: 44px; height: 44px; } .header-right button { width: 44px; height: 44px; /* GEMESSEN bei 834 px: der Abmelde-Knopf ist ein direktes Flex-Kind von .header-right (die anderen stecken in .notification-wrap/.help-menu-wrap) und wurde vom Flex-Schrumpfen auf 34 px gedrueckt, waehrend die Hoehe 44 war. Ein Trefferziel darf nicht schrumpfen. */ flex: 0 0 auto; } .lang-select, .dropdown { height: 44px; } .live-updates-btn { min-height: 44px; } } /* Ohne Hover (Touch) bleibt ein :hover nach dem Tipp KLEBEN, bis der naechste * Tipp woanders landet — der Knopf saehe dauerhaft „angefasst" aus. Unter * (hover: none) faellt der Hover-Zustand deshalb auf den Ruhezustand zurueck; * Fokus- und Aktiv-Zustaende bleiben unberuehrt. */ @media (hover: none) { .header-right button:hover { background: none; color: color-mix(in srgb, var(--header-fg) 92%, var(--header-muted)); } } /* --- Animierte Avengers-Hülle (Bestand AvengersHeader.vue:196-341) -------- * * BEFUND (Nutzermeldung 2026-08-04): der Port hatte die Hülle nie übernommen * („die Animation folgt separat", header.js) — die vier Einstellungen dafür * gibt es vollständig, der Lader schreibt sie an , und NIEMAND las sie. * * Geschaltet wird deshalb hier, an genau diesen Attributen. Damit gilt * dieselbe UND-Bedingung wie im Bestand (AvengersHeader.vue:69-73): * Theme „avangers" UND Kopfstil „avengers" UND Animation an UND Modus ≠ off. * * Die Ring- und Funkenfarben stehen unter dem THEME-Selektor, nicht hinter * einer Ausnahme: sie SIND der Avengers-Look und erscheinen nirgends sonst. * Ein Theme darf konkrete Farben nennen — das ist sein Zweck. */ /* Eigener Stapelkontext fuer die Dekoration — in beiden Koepfen. Der * Login-Kopf bringt `position: relative` schon mit (login.css:105-107), die * Isolation fehlte dort. */ :is(cw-app-header, vc-app-header), cw-login-screen .login-header { position: relative; isolation: isolate; } :is(cw-app-header, vc-app-header) .avengers-header__bg, cw-login-screen .login-header .avengers-header__bg, cw-login-screen .login-header .avengers-header__scanlines, cw-login-screen .login-header .avengers-header__rings, :is(cw-app-header, vc-app-header) .avengers-header__scanlines, :is(cw-app-header, vc-app-header) .avengers-header__rings { display: none; } /* Nur im Avengers-Kopf ueberhaupt sichtbar. */ :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .avengers-header__bg, :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .avengers-header__rings { display: block; position: absolute; inset: 0; pointer-events: none; /* z-index 0, NICHT -1: die Kopfleiste traegt `isolation: isolate` und einen * eigenen, deckenden Hintergrund. Bei -1 malte der Browser die Dekoration * HINTER diesen Hintergrund — die Animation lief nachweislich * (`ring-outer` mit vcHeaderOrbitPulse, Deckkraft mitten im Zyklus), war * aber vollstaendig verdeckt. Genau das war der Eindruck „die Animation * fehlt". * * `overflow: visible` wie im Bestand (AvengersHeader.vue:107): die Ringe * sind 95px hoch und beginnen bei y=-23, ragen also ABSICHTLICH ueber die * 48px hohe Leiste hinaus. `hidden` schnitt genau den sichtbaren Teil weg. */ z-index: 0; overflow: visible; } /* Kopfleiste selbst im Avengers-Look — 1:1 aus `.is-avengers` * (AvengersHeader.vue:165-172). Ohne diesen Block blieb die Leiste im hellen * --surface-elevated stehen, waehrend die Dekoration darauf einen dunklen * Verlauf malte; der Uebergang zum Fensterrand passte dadurch nicht. */ :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) { background: linear-gradient(180deg, rgba(4, 10, 31, 0.98), rgba(7, 15, 40, 0.96)); border-bottom-color: rgba(49, 151, 255, 0.22); box-shadow: inset 0 -1px 0 rgba(84, 162, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.25); } /* Vier Schichten wie im Bestand (AvengersHeader.vue:174-181), nicht der eine * flache 92deg-Verlauf, der hier stand: die drei Radialverlaeufe erzeugen den * Lichtkegel oben mittig und die beiden seitlichen Reflexe. Genau sie machen * den Unterschied zwischen „blauer Balken" und dem Bestandslook aus. */ :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .avengers-header__bg { background: radial-gradient(circle at 50% -5%, rgba(42, 170, 255, 0.34), transparent 28%), radial-gradient(circle at 84% 26%, rgba(98, 225, 255, 0.18), transparent 18%), radial-gradient(circle at 18% 18%, rgba(42, 170, 255, 0.12), transparent 18%), linear-gradient(180deg, rgba(2, 8, 28, 0.98), rgba(6, 15, 40, 0.96)); } /* Die Scanlines standen in der `display: none`-Liste, wurden aber NIE wieder * eingeschaltet — die Schicht fehlte im Port vollstaendig, obwohl der Kopf * den Knoten rendert (header.js:559). Bestand: AvengersHeader.vue:126-136 * (Raster) und :185-187 (Deckkraft 0.28 im Avengers-Look). */ :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .avengers-header__scanlines { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.28; background: repeating-linear-gradient( 180deg, rgba(255, 255, 255, 0.038) 0px, rgba(255, 255, 255, 0.038) 1px, transparent 2px, transparent 6px ); } /* Ringe ueber Verlauf und Scanlines, leicht nach oben gerueckt — * AvengersHeader.vue:189-194. */ :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .avengers-header__rings { z-index: 2; transform: translateY(-8%); } /* Inhalt ueber der gesamten Dekoration (Bestand: .avengers-header__content * mit z-index 3). Im Port gibt es keinen gemeinsamen Inhaltsrahmen, deshalb * stehen hier die drei Spalten. */ :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .header-left, :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .header-center, :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .header-right { position: relative; z-index: 3; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .ring { /* Weichzeichner wie im Bestand (AvengersHeader.vue:203): * filter: blur(calc(var(--avengers-blur) * 0.08)), Vorgabe blurStrength=14 * ergibt 1.12px. Ohne ihn sind die Ringe harte Linien statt weichem * Leuchten — der Port hatte die Zeile nicht uebernommen. */ filter: blur(calc(var(--core-header-blur, 14px) * 0.08)); position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(72, 190, 255, 0.88); box-shadow: 0 0 calc(22px * var(--core-header-animation-intensity, 0.95)) rgba(52, 162, 255, 0.78), 0 0 calc(46px * var(--core-header-animation-intensity, 0.95)) rgba(50, 127, 255, 0.42), inset 0 0 18px rgba(106, 220, 255, 0.24); opacity: 0.95; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .ring::after { /* Innenglut, Bestand AvengersHeader.vue:211-218. Fehlte im Port ganz; * sie gibt dem Ring die Tiefe nach innen. */ content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 calc(18px * var(--core-header-animation-intensity, 0.95)) rgba(145, 235, 255, 0.18); } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .ring-outer { width: min(760px, 74vw); height: 92px; border-width: 3px; opacity: 0.85; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .ring-mid { width: min(640px, 62vw); height: 74px; border-color: rgba(39, 136, 255, 0.96); opacity: 0.76; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .ring-inner { width: min(520px, 50vw); height: 56px; border-color: rgba(80, 145, 255, 0.78); opacity: 0.58; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .ring-core { width: min(360px, 34vw); height: 36px; border-color: rgba(115, 180, 255, 0.34); opacity: 0.3; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(166, 238, 255, 1) 0%, rgba(47, 164, 255, 0.85) 45%, rgba(47, 164, 255, 0) 72%); box-shadow: 0 0 18px rgba(75, 190, 255, 0.66); opacity: 0.68; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .spark-a { top: 12px; right: 42px; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .spark-b { top: 22px; right: 42px; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"] cw-login-screen .login-header) .spark-c { top: 32px; right: 42px; } /* Bewegung erst, wenn die Einstellung sie erlaubt (Modus „off" bleibt still). */ :is(html[data-core-theme="avangers"][data-core-header-style="avengers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) cw-login-screen .login-header) .ring-outer { animation: vcHeaderOrbitPulse 6.4s ease-in-out infinite; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) cw-login-screen .login-header) .ring-mid { animation: vcHeaderOrbitPulse 5.2s ease-in-out infinite reverse; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) cw-login-screen .login-header) .ring-inner { animation: vcHeaderOrbitFloat 4.8s ease-in-out infinite; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) cw-login-screen .login-header) .spark-a { animation: vcHeaderSparkle 2.2s ease-in-out infinite; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) cw-login-screen .login-header) .spark-b { animation: vcHeaderSparkle 1.9s ease-in-out infinite 0.35s; } :is(html[data-core-theme="avangers"][data-core-header-style="avengers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"][data-core-header-animation="on"]:not([data-core-header-animation-mode="off"]) cw-login-screen .login-header) .spark-c { animation: vcHeaderSparkle 2.4s ease-in-out infinite 0.7s; } /* Modus „pulse": zusaetzlich atmet der Hintergrund (Bestand :285). */ :is(html[data-core-theme="avangers"][data-core-header-style="avengers"][data-core-header-animation="on"][data-core-header-animation-mode="pulse"] :is(cw-app-header, vc-app-header), html[data-core-theme="avangers"][data-core-header-animation="on"][data-core-header-animation-mode="pulse"] cw-login-screen .login-header) .avengers-header__bg { animation: vcHeaderBgPulse 4.8s ease-in-out infinite; } @keyframes vcHeaderOrbitPulse { 0%, 100% { transform: translate(-50%, -50%) scaleX(1) scaleY(1); opacity: 0.72; } 50% { transform: translate(-50%, -50%) scaleX(1.03) scaleY(1.06); opacity: 1; } } @keyframes vcHeaderOrbitFloat { 0%, 100% { transform: translate(-50%, -50%) scaleX(1); opacity: 0.42; } 50% { transform: translate(-50%, calc(-50% + 2px)) scaleX(1.025); opacity: 0.64; } } @keyframes vcHeaderSparkle { 0%, 100% { opacity: 0.32; transform: scale(0.84); } 50% { opacity: 1; transform: scale(1.18); } } @keyframes vcHeaderBgPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* Wer Bewegung abbestellt hat, bekommt keine — wie im Bestand (:289-299). */ @media (prefers-reduced-motion: reduce) { :is(cw-app-header, vc-app-header) .ring, :is(cw-app-header, vc-app-header) .spark, :is(cw-app-header, vc-app-header) .avengers-header__bg { animation: none !important; } } /* --- Kopfzeilen-Token ------------------------------------------------------ * * BEFUND (2026-08-04): 21 Verwendungen, NULL Definitionen. Dieselbe Klasse * wie bei den 30 `--menu-*`-Token der Seitenleiste — eine Regel ohne Leser, * nur andersherum: hier las jemand, was niemand geschrieben hatte. * * Am schaerfsten bei `background-color: var(--header-control-bg)` OHNE * Rueckfall: ein `var()` auf eine undefinierte Variable macht die ganze * Deklaration ungueltig — die Knoepfe der Kopfzeile standen also ohne * Hintergrund da, in jedem Theme. * * Werte 1:1 aus dem Bestand (App.vue:2284/2393/2502/2597, je Theme-Block). * Sie stehen hier und nicht in `themes/*.css`, weil die generiert sind * ("NICHT von Hand editieren") — dieselbe Entscheidung wie bei den * `--menu-*`-Token. */ html[data-core-theme="light"] { --header-bg: var(--surface-elevated); --header-fg: var(--text); --header-muted: var(--text-muted); --header-control-bg: var(--surface-elevated); --header-control-border: var(--border); } html[data-core-theme="dark"] { --header-bg: var(--surface); --header-fg: var(--text); --header-muted: var(--text-muted); --header-control-bg: var(--surface-elevated); --header-control-border: var(--border-strong); } html[data-core-theme="contrast"] { --header-bg: var(--text); --header-fg: var(--text-inverse); --header-muted: var(--text-inverse); --header-control-bg: #111111; --header-control-border: var(--text-inverse); } html[data-core-theme="avangers"] { --header-bg: linear-gradient(92deg, #04193f 0%, #072969 44%, #051e4b 100%); --header-fg: #d8f7ff; --header-muted: #87b4da; --header-control-bg: rgba(0, 163, 255, 0.14); --header-control-border: rgba(0, 214, 255, 0.42); }