/* =================================================================== VORLAGE aus dem Skill edles-dunkel-design — WOERTLICH uebernommen aus AccelNexus frontend/css/app.css (Zeilen 1947–2134, Abschnitte „R1 Baustein 1–3“) (Stand AccelNexus 063be7f, 10.10.2026 — R1 Design-Rückgrat, Regeln R-D/R-E/R-F/R-I/R-J, Entscheidung Vahid 09.10.2026). Nichts im Code unten ist veraendert — AUSSER dem Selektor des Fehlerzustands der Anmeldekarte (.nd-fehler, Skill-Korrektur 21.10.2026, Stolperfalle 1 in SKILL.md; AccelNexus zieht in NS4.11 nach); die AccelNexus-spezifischen Namen sind HIER als Platzhalter gekennzeichnet und werden beim Uebernehmen ersetzt (Checkliste: referenz/umstell-checkliste.md). PLATZHALTER: · #kiready-vorrang (zweimal :not(#…)) → eine Id, die es in der eigenen App NICHT gibt (-vorrang); Muster bleibt · .page .card / .page .karte / .login-card → Karten-Klassen der eigenen App (EINE Liste, kein Ausnahme-Katalog) · #dash-kacheln > details.card + --kz-farbe → Kachel-Behaelter der Uebersicht und Farbe je Kachel · .login-body (--m = --marke-blau) → Anmeldeseite der eigenen App, Markenfarbe · #page-dashboard .onb-zeile .btn-tinted → Erste Schritte der eigenen Startseite (oder weglassen) · .ib-block / .ib-text / .ib-kopf → alte Bloecke der Module, die in einer Unterkarte ihre Raender verlieren · .ak-zahlen → Kennzahlen-Leiste der eigenen App (dort bleibt dt klein) · .klapp-status / .status-badge / .chip[class*=-status-] → Stand-Texte und Status-Chips der eigenen App · .erin-ziel / .erin-ziel-text → AccelNexus Regel-Katalog (Spalte Ziel) — in der eigenen App weglassen · Token --glas-kante --leucht-glas(-weite) --leucht-haupt-hover(-weite) --text-stark --glas-text --glas-leise --status-gruen --rot-nacht → aus nachtglas.css, --text-stark --marke-blau --schatten-kachel → aus tokens.css (bleiben) · Token --karte-* → aus nacht-token-auszug.css (app.css Z. 100–107 hell, Z. 160–164 und 216–220 dunkel) · HTML der Unterkarten: AccelAbschnitt.html({ ton, icon, titel, inhalt }) aus js/helpers.js (referenz/bauteile.md §22) =================================================================== */ /* R1 Baustein 1 — Karten-Kontur und Schein in der Rubrikfarbe (S13, Regel R-D, Wahl Vahid 09.10.2026: Variante D = 60 % + Schein 12 px / 18 %, hell 50 % / 10 %) und Hauptaktion als Glas (S15, Regel R-E). EINE Regel für JEDE Karte (`.card`, `.karte` auf jeder Seite, dazu das Anmeldefenster): die Farbe ist die Seiten-/Modulfarbe --m, auf der Übersicht die Farbe der Kachel (--kz-farbe). Kein Ausnahme-Katalog — welche Karte welche Farbe trägt, entscheidet allein --m der Seite. Zustände: Ruhe (--karte-kontur, --karte-schein), Darüberfahren / Fokus darin / aktiv (.karte-aktiv, aria-current) mit --karte-kontur-aktiv und --karte-schein-aktiv. Werte als Token oben (hell schwächer). `:not(#kiready-vorrang)` zweimal hebt die Regel über die Karten- und Knopfregeln der Seiten- und Modul-Dateien (bis Spezifität 1-5-x, später geladen) — ohne !important und ohne Liste der Seiten. Einen Schatten in der Tiefe (Übersicht-Kacheln) gibt eine Karte über --karte-tiefe mit. */ html.edel #dash-kacheln > details.card { --karte-tiefe: 0 10px 30px var(--schatten-kachel); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(.page .card:not(.abschnitt), .page .karte, .login-card) { border-color: color-mix(in srgb, var(--kz-farbe, var(--m)) var(--karte-kontur), transparent); box-shadow: inset 0 1px 0 var(--glas-kante), 0 0 var(--karte-schein-weite) color-mix(in srgb, var(--kz-farbe, var(--m)) var(--karte-schein), transparent), var(--karte-tiefe, 0 0 0 transparent); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(.page .card:not(.abschnitt), .page .karte, .login-card):is(:has(:focus-visible), .karte-aktiv, [aria-current="true"]) { border-color: color-mix(in srgb, var(--kz-farbe, var(--m)) var(--karte-kontur-aktiv), transparent); box-shadow: inset 0 1px 0 var(--glas-kante), 0 0 var(--karte-schein-weite) color-mix(in srgb, var(--kz-farbe, var(--m)) var(--karte-schein-aktiv), transparent), var(--karte-tiefe, 0 0 0 transparent); } @media (hover: hover) { html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(.page .card:not(.abschnitt), .page .karte, .login-card):hover { border-color: color-mix(in srgb, var(--kz-farbe, var(--m)) var(--karte-kontur-aktiv), transparent); box-shadow: inset 0 1px 0 var(--glas-kante), 0 0 var(--karte-schein-weite) color-mix(in srgb, var(--kz-farbe, var(--m)) var(--karte-schein-aktiv), transparent), var(--karte-tiefe, 0 0 0 transparent); } } /* Fehler bei der Anmeldung: der rote Schein geht vor (nachtglas.css). SKILL-KORREKTUR 21.10.2026 (Skill-Sitzung 8, Stolperfalle 1 in SKILL.md; vor AccelNexus, dort Fund SC59, Reparatur in NS4.11): der Fehlerzustand traegt dieselbe :is()-Liste wie die Kontur-Regel. :is() zaehlt die hoechste Spezifitaet seiner Liste (.page .card:not(.abschnitt) = 0,3,0); ein nacktes .login-card.nd-fehler (0,2,0) verliert deshalb gegen die Kontur-Regel, die Karte bleibt bei falscher Anmeldung blau statt rot. Mit :is(…).nd-fehler hat er eine Klasse mehr (0,4,0 + Vorrang) und schlaegt Ruhe, Fokus und Darueberfahren (gleich stark, aber spaeter in der Datei). */ html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(.page .card:not(.abschnitt), .page .karte, .login-card).nd-fehler { border-color: color-mix(in srgb, var(--rot-nacht) 55%, transparent); box-shadow: inset 0 1px 0 var(--glas-kante), 0 0 0 1px color-mix(in srgb, var(--rot-nacht) 25%, transparent), 0 0 42px color-mix(in srgb, var(--rot-nacht) 30%, transparent); } /* Hauptaktion = das Glas des aktiven Umschalt-Knopfs (Tönung 18 %, Kontur und Schein in --m, Schrift kräftig und fett, Symbol in --m) — auf jeder Seite, im Dialog und auf der Anmeldung. Markenblau nur, wo es keine Rubrikfarbe gibt (Anmeldung: --m = --marke-blau). Die gefüllte Fläche (F33 „--haupt-blau“) ist aufgehoben — auch „Einrichten“ der Ersten Schritte und die Links im Stil der Hauptaktion. Gefährliches bleibt rot umrandet. */ html.edel .login-body { --m: var(--marke-blau); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(button.primary:not(.danger), a.primary-link, #page-dashboard .onb-zeile:not(.onb-fertig) .btn-tinted) { background: color-mix(in srgb, var(--m) 18%, transparent); border: 1px solid var(--m); border-radius: var(--r-knopf); color: var(--text-stark); font-family: inherit; font-weight: 700; filter: none; box-shadow: inset 0 1px 0 var(--glas-kante), 0 0 var(--leucht-glas-weite) color-mix(in srgb, var(--m) var(--leucht-glas), transparent); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(button.primary:not(.danger), a.primary-link, #page-dashboard .onb-zeile:not(.onb-fertig) .btn-tinted) :is([data-icon], svg) { color: var(--m); } @media (hover: hover) { html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(button.primary:not(.danger), a.primary-link, #page-dashboard .onb-zeile:not(.onb-fertig) .btn-tinted):enabled:hover { background: color-mix(in srgb, var(--m) 26%, transparent); border-color: var(--m); filter: none; box-shadow: inset 0 1px 0 var(--glas-kante), 0 0 var(--leucht-haupt-hover-weite) color-mix(in srgb, var(--m) var(--leucht-haupt-hover), transparent); } } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(button.primary:not(.danger), a.primary-link, #page-dashboard .onb-zeile:not(.onb-fertig) .btn-tinted):focus-visible { outline: 2px solid var(--m); outline-offset: 2px; } /* R1 Baustein 2 — Abschnitte einer Detail-Ansicht als flache Unterkarten (Fund S24, Regel R-F): EINE Farbe (--m der Seite), drei Tonlagen — Lesen neutral (nur Kontur), Anfassbares 5 % Tönung, Handlung 10 % + Schein. Flach: kein Anheben, keine Lichtkante; Überschrift mit Symbol in --m; 12 px Luft zwischen den Abschnitten, keine Trennlinien (auch nicht die alten der Blöcke darin). Die Kontur ist halb so stark wie die der Karte (Token --karte-kontur). HTML: AccelAbschnitt.html (helpers.js). Vorrang wie bei den Karten — die Blöcke der Module (.ib-block, .card in einer Karte) tragen eigene Ränder. */ html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .abschnitt { margin: 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--m) calc(var(--karte-kontur) / 2), transparent); border-radius: var(--r-kachel); background: transparent; box-shadow: none; transform: none; } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .abschnitt + .abschnitt, html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .abschnitt:not(:first-child) { margin-top: 12px; } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .abschnitt.abschnitt-anfassen { background: color-mix(in srgb, var(--m) 5%, transparent); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .abschnitt.abschnitt-handlung { background: color-mix(in srgb, var(--m) 10%, transparent); border-color: color-mix(in srgb, var(--m) var(--karte-kontur), transparent); box-shadow: 0 0 var(--karte-schein-weite) color-mix(in srgb, var(--m) var(--karte-schein), transparent); } html.edel .abschnitt-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; font-size: var(--fs-body); font-weight: 700; color: var(--glas-text); } html.edel .abschnitt-kopf [data-icon] { display: inline-flex; color: var(--m); } html.edel .abschnitt-kopf svg { width: 16px; height: 16px; } /* summary einer Klapp-Unterkarte (Angebot: KI, Nachkalkulation) */ html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) details.abschnitt > summary { padding: 0; background: transparent; } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) details.abschnitt > .klapp-koerper { padding: 10px 0 0; } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .abschnitt :is(.ib-block, .ib-text, .ib-kopf) { margin: 0; border: 0; padding-top: 0; } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .abschnitt .ib-text { padding: 0; background: transparent; box-shadow: none; } /* R1 Baustein 2 — Feldlisten (Fund S27, Regel R-I): die Bezeichnung (dt) steht in DERSELBEN Schriftgröße wie der Wert (dd), nur in leiser Farbe, nicht fett — in jeder Feldliste (dl) der App. Ausgenommen sind allein die Kennzahlen-Leisten (.ak-zahlen), denn dort ist dt das Wort unter einer großen Zahl, keine Feld-Bezeichnung. Die hervorgehobene Endsumme (dt.stark, Brutto) bleibt fett. */ html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) dl:not(.ak-zahlen) :is(dt, dd) { font-size: var(--fs-body); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) dl:not(.ak-zahlen) dt { color: var(--glas-leise); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) dl:not(.ak-zahlen) dt:not(.stark) { font-weight: 400; } /* R1 Baustein 2 — Stand-Texte als Schrift (Fund S36, Regel R-J): der Stand im Kopf einer Karte („Deutsch · Hell“, „Testphase, noch 14 Tage“, „7 von 7 an“) und jede Status-Pille sind farbige Schrift ohne Fläche, Rand oder Rundung — in der Farbe der Seite --m, „gut“ in Grün, ein Warnhinweis („Rechtstexte fehlen“) als Text in der Warnfarbe Bernstein (Rot bleibt Fehlern und Verstößen). Gilt auf jeder Seite, beide Themen. */ html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(.klapp-status, .status-badge, .chip[class*="-status-"]), html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) details.klapp > summary:hover .klapp-status { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 700; } /* Ohne eigene Stand-Farbe: die Farbe der Seite. Status-Chips der Module (z. B. Angebot angenommen grün, abgelehnt orange) behalten ihre Farbe. */ html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(.klapp-status, .status-badge), html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) details.klapp > summary:hover .klapp-status { color: var(--m); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(.klapp-status, .status-badge).ok { color: var(--status-gruen); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) :is(.klapp-status, .status-badge).warn, html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .klapp-status .klapp-status-hinweis { color: var(--bernstein); } html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .klapp-status.warn .klapp-status-rest { color: var(--m); } /* R1 Baustein 3 — aufklappende Zeile (Fund S16): Muster für JEDE Tabellen- zeile, die darunter ein Detail aufklappt (Klasse zeile-klappt mit aria-expanded): Pfeil › links in --m, dreht sich beim Aufklappen, Hand-Zeiger, Hervorhebung beim Darüberfahren. */ html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) tr.zeile-klappt { cursor: pointer; } html.edel tr.zeile-klappt .zeile-pfeil { display: inline-block; width: 1em; margin-right: 6px; color: var(--m); font-weight: 700; transition: transform 0.2s ease; } html.edel tr.zeile-klappt[aria-expanded="true"] .zeile-pfeil { transform: rotate(90deg); } @media (hover: hover) { html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) tr.zeile-klappt:hover > td { background: color-mix(in srgb, var(--m) 9%, transparent); } } @media (prefers-reduced-motion: reduce) { html.edel tr.zeile-klappt .zeile-pfeil { transition: none; } } /* R1 Baustein 3 — Spalte „Ziel“ im Regel-Katalog (Fund S17): Symbol und Name des Ziels; bei schmaler Breite nur das Symbol, der Satz im Tooltip. */ html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .erin-ziel { display: inline-flex; align-items: center; gap: 6px; cursor: default; } @media (max-width: 600px) { html.edel:not(#kiready-vorrang) body:not(#kiready-vorrang) .erin-ziel { cursor: help; } html.edel .erin-ziel-text { display: none; } }