/* ========================================================================= WALYSER — ERKLÄR-EBENE (Portfolio & KI) ------------------------------------------------------------------------- Vorher verteilte sich der erklärende Text pro Karte auf bis zu fünf Stellen: eine Pille neben der Überschrift, ein grauer Absatz darunter, eine eingeblendete „Kurz gesagt"-Zeile, ein aufklappbarer Kasten in der Kartenmitte und eine Fußzeile. Fünf Bauformen für dieselbe Sache — und der Schalter „Erklärungen" steuerte nur zwei davon. Jetzt gibt es genau zwei Plätze pro Karte und einen einzigen Regler: ┌───────────────────────────────────────────┐ │ Überschrift Wert / Tag │ │ exLead ← ein Satz │ │ │ │ (Inhalt: Zahlen, Tabelle, Diagramm) │ │ │ │ exMore ← vier beschriftete Zeilen │ └───────────────────────────────────────────┘ Regler „Erklärungen": Aus · Kurz · Ausführlich Aus nur Daten — die dichte Profi-Ansicht Kurz ein Satz pro Karte, ein Satz pro Kennzahl (Standard) Ausführlich zusätzlich der volle Erklärblock auf jeder Karte Wird als letzte Datei geladen und überschreibt gezielt. ========================================================================= */ /* ========================================================================= 1 · DER REGLER ========================================================================= */ .exDial{display:flex;align-items:center;gap:9px;flex:0 0 auto;position:relative} .exDialLbl{ font-size:9.5px;letter-spacing:.09em;text-transform:uppercase; color:#6f7789;font-weight:700;white-space:nowrap; } .exSeg{ display:flex;padding:3px;gap:2px;border-radius:11px; border:1px solid var(--line);background:#ffffff05; } .exSeg button{ border:0;background:none;color:#98a0b3;cursor:pointer; font-family:inherit;font-size:11px;font-weight:700; padding:5px 10px;border-radius:8px;white-space:nowrap; transition:background .15s,color .15s; } .exSeg button:hover{color:#fff} .exSeg button.active{ background:linear-gradient(120deg,#7c5cff30,#00d9ff20);color:#fff; box-shadow:inset 0 0 0 1px #7c5cff40; } @media(max-width:520px){ .exDial{width:100%;justify-content:space-between} .exSeg button{padding:5px 8px;font-size:10.5px} } /* Einmalig eingeblendeter Hinweis, der auf den Erklär-Regler zeigt — erscheint beim allerersten Portfolio-Besuch, verschwindet danach dauerhaft. */ .exHint{ display:none;position:absolute;top:calc(100% + 12px);right:0;z-index:30; width:270px;padding:13px 30px 13px 14px;border-radius:13px; border:1px solid #7c5cff55;background:#14182a; box-shadow:0 14px 34px #000a,0 0 0 1px #7c5cff22; animation:exHintIn .35s ease; } .exHint.show{display:block} .exHint:before{ content:"";position:absolute;top:-6px;right:22px;width:11px;height:11px; background:#14182a;border-left:1px solid #7c5cff55;border-top:1px solid #7c5cff55; transform:rotate(45deg); } .exHint p{margin:0;font-size:12px;line-height:1.55;color:#dfe2ee} .exHintClose{ position:absolute;top:7px;right:7px;width:20px;height:20px;border:0;border-radius:7px; background:none;color:#8e96ab;font-size:15px;line-height:1;cursor:pointer; } .exHintClose:hover{color:#fff;background:#ffffff12} @keyframes exHintIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} @media(max-width:520px){ .exHint{right:auto;left:0;width:min(270px,80vw)} .exHint:before{right:auto;left:22px} } /* ========================================================================= 2 · EIN SATZ PRO KARTE — der Lead Kein Kasten, keine Farbe: eine Haarlinie links, ruhige Schrift. Er soll gelesen und dann vergessen werden, nicht die Karte dominieren. ========================================================================= */ .exLead{ display:none; margin:-3px 0 13px;padding:0 0 0 11px; border-left:2px solid #62eaff40; color:#a2adbe;font-size:12.5px;line-height:1.6; } .exLead b{color:#cfe0ec;font-weight:650} body.ex-short .exLead, body.ex-full .exLead{display:block} /* Randlose Karten (Tabellen) brauchen den Einzug der Kopfzeile */ .dcard.flush > .exLead{margin-left:17px;margin-right:17px} /* „Mehr"-Knopf: erlaubt eine einzelne Karte aufzuklappen, ohne die ganze Seite auf „Ausführlich" zu stellen. Im Ausführlich-Modus überflüssig. */ .exMoreBtn{ border:0;background:none;padding:0;margin-left:6px;cursor:pointer; font-family:inherit;font-size:12px;font-weight:650;color:#8fe9ff; border-bottom:1px solid #8fe9ff40;line-height:1.2; } .exMoreBtn:hover{border-bottom-color:#8fe9ff} .exMoreBtn:after{content:" ↓";font-size:10px} .dcard.exOpen .exMoreBtn:after, .intelCard.exOpen .exMoreBtn:after{content:" ↑"} body.ex-full .exMoreBtn,body.ex-off .exMoreBtn{display:none} /* ========================================================================= 3 · DER ERKLÄRBLOCK — immer unten, immer gleich gebaut Vier feste Zeilen. Weil sie überall dieselbe Reihenfolge und dieselbe Beschriftung haben, muss man sie genau einmal lesen lernen. ========================================================================= */ .exMore{ display:none; margin-top:14px;padding-top:13px; border-top:1px solid var(--line); } body.ex-full .exMore, .dcard.exOpen .exMore, .intelCard.exOpen .exMore{display:block} .dcard.flush > .exMore{margin:14px 17px 4px} /* Beschriftung über dem Text, nicht daneben. Eine zweite Spalte sähe in breiten Karten eleganter aus, würde in halbbreiten aber den Text auf 180 px quetschen — und der Block soll überall gleich aussehen, sonst muss man ihn zweimal lesen lernen. */ .exRow{ display:block; padding:8px 0; } .exRow + .exRow{border-top:1px solid #ffffff08} .exRow > span{ display:block;margin-bottom:3px; font-size:9.5px;letter-spacing:.08em;text-transform:uppercase; font-weight:700;color:#6f7789;line-height:1.4; } .exRow > p{ margin:0;font-size:12.5px;line-height:1.7;color:#aab3c3; } .exRow > p b{color:#e8ebf3;font-weight:650} .exRow > p a{color:#8fe9ff} .exRow > p a:hover{text-decoration:underline} /* Handlung und Einordnung tragen die einzige Farbe im Block */ .exRow.do > span{color:#5fbf95} .exRow.do > p{color:#bcd6cb} .exRow.lim > span{color:#7a7f8e} .exRow.lim > p{color:#8e96ab;font-size:12px} /* ========================================================================= 4 · KENNZAHLEN — eine Zeile Klartext, zwei Stufen tief ========================================================================= */ .kpiPlain{display:none} body.ex-short .kpiPlain, body.ex-full .kpiPlain{display:block} .kpiLong{display:none;margin-top:5px;font-size:11px;line-height:1.55;color:#6f7789} body.ex-full .kpiLong{display:block} /* ========================================================================= 5 · PROFI-ANSICHT — was im Modus „Aus" verschwindet Nichts davon trägt Daten. Was Daten trägt, bleibt in jedem Modus stehen. ========================================================================= */ body.ex-off .headHint, body.ex-off .plainLine, body.ex-off .tipBlock, body.ex-off .demoBanner small{display:none !important} /* Das Fragezeichen hinter Fachbegriffen ist in der dichten Ansicht Rauschen — die gestrichelte Linie und der Klick funktionieren weiter. */ body.ex-off .wt:after{display:none} /* Fußzeilen, die reinen Erklärtext tragen, sind in den Block gewandert. Übrig bleiben Fußzeilen mit Daten oder Links — die tragen jetzt .exFoot nur dann, wenn sie wirklich erklären. */ .exFoot{ margin-top:12px;padding-top:11px;border-top:1px solid var(--line); font-size:11.5px;color:var(--d-dim,#7e879b);line-height:1.55; } .exFoot a{color:#8fe9ff} .exFoot a:hover{text-decoration:underline} /* ========================================================================= 6 · KOPFZEILE DER KARTE — Titel, Kurzhinweis, Wert. Sonst nichts. Der Kurzhinweis war eine Pille mit Rahmen und sah aus wie ein Status. Jetzt ist er, was er ist: eine Unterzeile. ========================================================================= */ .cardHead{gap:9px 10px;margin-bottom:11px} .cardHead h3{font-size:13.5px;font-weight:700;letter-spacing:-.01em} .headHint{ display:inline-block;padding:0;border:0;background:none;border-radius:0; font-size:11.5px;color:#6f7789;font-weight:500; } .headHint:before{content:"· ";color:#4d5566} body:not(.ex-off) .headHint{display:inline-block} .intelTitle + .headHint{display:block;margin:-3px 0 11px} .intelTitle + .headHint:before{content:none} /* ========================================================================= 7 · SEITENKOPF — vier Zeilen Vorspann wurden zwei ========================================================================= */ .dashTopBar{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"crumbs dial" "title dial" "sub sub"; gap:2px 16px;align-items:center; padding-bottom:14px;border-bottom:1px solid var(--line); } .dashTopBar .crumbs{grid-area:crumbs} .dashTopBar h1{grid-area:title;font-size:22px;margin:1px 0 0} .dashTopBar .topHead{grid-area:dial;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end} .dashTopBar .topLine{ grid-area:sub;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap; margin-top:7px; } .dashTopBar .sub{font-size:12px;color:var(--d-dim,#7e879b)} .dashTopBar .topStatus{display:flex;align-items:center;gap:10px;margin-left:auto} .dashTopBar .sideToggle{margin:0} @media(max-width:760px){ .dashTopBar{grid-template-columns:1fr;grid-template-areas:"crumbs" "title" "dial" "sub";gap:6px} .dashTopBar .topHead{justify-content:flex-start;margin-top:6px} .dashTopBar .topStatus{margin-left:0} } /* Wegweiser „Diese Seite beantwortet drei Fragen" — eine Zeile, keine Karte */ .gsBox{border:0;padding:0;margin:2px 0 0} .gsHead{padding:0;margin:0 0 7px;display:block} .gsFoldTxt{ font-size:9.5px;letter-spacing:.09em;text-transform:uppercase; color:#6f7789;font-weight:700; } .gsSteps{ display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0; grid-template-columns:none; } .gsSteps li{display:block} .gsSteps a{ display:inline-flex;align-items:center;gap:8px;height:auto; padding:7px 13px 7px 8px;border-radius:999px; border:1px solid var(--line);background:#ffffff04; } .gsSteps a:hover{background:#ffffff0b;border-color:#ffffff2b} .gsNum{width:18px;height:18px;border-radius:5px;font-size:9.5px} .gsT{font-size:12px} body.ex-off .gsBox{display:none} /* Schrittzeilen („Auf welchem Netzwerk liegt es?") standen in schmalen Karten dreizeilig und zerrissen. Umbruch am Wortende statt am Element. */ .stepLbl{flex-wrap:wrap;align-items:baseline;row-gap:3px;line-height:1.5} .stepLbl i{align-self:center} .stepLbl small{flex:1 1 100%;margin-left:26px} /* ========================================================================= 8 · ABSCHNITTE — die Nummer trägt die Reihenfolge, nicht die Deko ========================================================================= */ .secHead{margin:20px 0 2px;gap:12px;align-items:center} .secHead.divided{border-top:1px solid var(--line);padding-top:24px;margin-top:16px} .secTxt h2{font-size:16px} .secTxt p{font-size:12.5px;margin-top:3px} body.ex-off .secTxt p{display:none} body.ex-off .secHead{margin:14px 0 0} body.ex-off .secHead.divided{padding-top:18px;margin-top:10px} /* ========================================================================= 9 · KPI-LEISTE — die Hauptzahl bekommt mehr Platz als die Nebenzahlen ========================================================================= */ .kpiRow{grid-template-columns:1.32fr repeat(4,minmax(0,1fr))} @media(max-width:1080px){.kpiRow{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:680px){.kpiRow{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ========================================================================= 10 · EINLEITUNGEN — Selbsterkenntnis / Stresstest ========================================================================= */ .selfIntro{font-size:12.5px;line-height:1.65} .selfIntro .siList{margin-top:12px} /* ========================================================================= 11 · TIPP-KÄSTEN AUS DER ALTEN FASSUNG Auf dieser Seite ersetzt der Erklärblock sie vollständig. Sollte irgendwo noch einer stehen (andere Seiten laden diese Datei nicht), bleibt er funktionsfähig — hier wird er nur ausgeblendet. ========================================================================= */ body.dashPage .tipBlock{display:none} /* ========================================================================= 12 · KARTENKOPF — drei Felder, überall dieselben ------------------------------------------------------------------------- Vorher stand alles in einer Zeile auf gleicher Höhe: Emoji, Titel, Kurzhinweis, Marker. Nichts war dem anderen übergeordnet, und in schmalen Karten brach die Zeile an beliebiger Stelle um. Jetzt: [◆] Titel [Marker] Kurzhinweis Den Umbau macht js/erklaer.js (normalizeHeads) — hier steht nur, wie es aussieht. ========================================================================= */ .cardHead{ display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap; margin-bottom:12px; } /* Das Emoji war Teil des Titels und verschob je nach Zeichen die Grundlinie. Als eigenes Feld sind alle Titel gleich hoch und linksbündig. */ .cIco{ flex:0 0 auto;width:27px;height:27px;border-radius:9px; display:inline-flex;align-items:center;justify-content:center; font-size:14px;line-height:1; background:#ffffff08;box-shadow:inset 0 0 0 1px var(--line); } .cTitle{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px} .cTitle h3,.cTitle .intelTitle{margin:0;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3} .cTitle .headHint{ display:block;margin:0;padding:0;border:0;background:none; font-size:11.5px;font-weight:500;color:#6f7789;line-height:1.4; } .cTitle .headHint:before{content:none} body.ex-off .cTitle .headHint{display:none !important} /* Ohne Kurzhinweis soll der Titel neben dem Icon mittig sitzen */ .cardHead:not(:has(.headHint)) .cTitle{justify-content:center;min-height:27px} /* ── Marker rechts: eine Bauform, zwei Rollen ──────────────────────────── Herkunft (grau, gestrichelt) = woher die Zahlen stammen Ergebnis (farbig, gefüllt) = was WALYSER daraus macht Vorher waren das vier verschiedene Formen an derselben Stelle, und man sah der Karte nicht an, was Status und was Aussage war. */ .cMeta{ flex:0 0 auto;margin-left:auto; display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end; padding-top:2px; } .cMeta > *{margin-left:0 !important} .cMeta .tag,.cMeta .demoTag{ display:inline-flex;align-items:center;gap:5px; height:21px;padding:0 9px;border-radius:999px; font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap; } .cMeta .demoTag{ border:1px dashed #ffffff26;background:none;color:#7e879b; font-weight:600;letter-spacing:0; } .cMeta .cardSub{font-size:11px;color:var(--d-dim,#7e879b);white-space:nowrap} .cMeta .chartLegend{gap:5px} @media(max-width:520px){ .cMeta{margin-left:0;width:100%;justify-content:flex-start} .cardHead .tblTools{width:100%} } /* Intelligence-Karten: das runde Icon oben sagte dasselbe wie das Emoji im Titel. Es bleibt als Sprungziel im DOM, nimmt aber keinen Platz mehr. */ .intelIcoMuted{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);margin:0;padding:0; scroll-margin-top:140px; } .intelCard{position:relative} /* ========================================================================= 13 · FAZIT-ZEILE — was die Karte aus ihren Daten schließt ------------------------------------------------------------------------- .actionTip stand als grün gerahmter Kasten in der Karte und sah aus wie noch ein Erklärkasten — dabei ist er das Gegenteil: kein Hintergrundwissen, sondern das Ergebnis für genau diese Wallet. Deshalb dieselbe Bauform wie der exLead (Haarlinie links), nur in Grün: cyan = wir erklären, grün = daraus folgt. ========================================================================= */ .actionTip{ margin-top:14px;padding:0 0 0 11px;border:0;border-radius:0;background:none; border-left:2px solid #27e7a466; font-size:12.5px;line-height:1.6;color:#a9bdb4; } .actionTip:empty{display:none} /* Kein zusätzliches Etikett: der Text beginnt bereits mit „Konkret für dich" — die grüne Haarlinie reicht, um ihn vom cyanfarbenen exLead zu trennen. */ .actionTip b{color:#cfe9dc} .actionTip .btn.primary{margin-top:8px} /* Auf der Werkzeug-Bühne (tool-rail) steht eine Karte allein und trägt einen größeren Titel — der Kurzhinweis darunter zieht mit, sonst reißt der Abstand zwischen beiden Zeilen auf. */ .cardStage > .dcard .cTitle .headHint, .cardStage > .intelCard .cTitle .headHint{font-size:12.5px} .cardStage > .dcard .cIco{width:31px;height:31px;font-size:16px} /* ========================================================================= 14 · FEINSCHLIFF — Lesbarkeit und Semantik ========================================================================= */ /* Die Ansichts-Überschrift war ein zweites

auf derselben Seite. Optisch soll sie bleiben, wie sie war — semantisch ist sie jetzt ein

unter der Seitenüberschrift im Hero. */ .dashTopBar h2{ grid-area:title;margin:1px 0 0; font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.15; } /* Kontrast: Kurzhinweis und die Beschriftungen im Erklärblock lagen bei 4,3:1 und damit knapp unter der Schwelle, ab der kleiner Text sicher lesbar ist. Beide auf 5,4:1 gehoben — grau bleiben sie trotzdem. */ .cTitle .headHint{color:#7e879b} .exRow > span{color:#828b9f} .exDialLbl,.barLbl,.gsFoldTxt,.kpiLabel{color:#828b9f} /* Mikro-Beschriftungen standen auf 9,5 px. Bei Großbuchstaben mit Sperrung ist das die Grenze zur Unlesbarkeit — 10,5 px kosten keine Zeile mehr. */ .exDialLbl,.barLbl,.gsFoldTxt,.exRow > span{font-size:10.5px} .kpiLabel{font-size:10px} /* Der Regler ist eine Auswahl aus drei Möglichkeiten — für Screenreader entsprechend ausgezeichnet (siehe js/erklaer.js). Der aktive Knopf soll auch ohne Farbe erkennbar sein. */ .exSeg button[aria-checked="true"],.exSeg button.active{ background:linear-gradient(120deg,#7c5cff30,#00d9ff20);color:#fff; box-shadow:inset 0 0 0 1px #7c5cff40; } /* Bewegung nur, wenn sie erwünscht ist */ @media(prefers-reduced-motion:reduce){ .exLead,.exMore,.exSeg button,.exMoreBtn{transition:none !important} } /* Gedruckt braucht niemand einen Regler — dafür alle Erklärungen */ @media print{ .exDial,.exMoreBtn,.sideToggle,.copilotDock,.dashBar,.cmdOverlay{display:none !important} .exLead,.exMore,.kpiPlain,.kpiLong,.headHint{display:block !important} .dcard,.intelCard{break-inside:avoid} }