/* ========================================================================== iweb4u Webseiten-Check — Ergebnis-Dashboard Nutzt die Design-Tokens der Seite (styles.css) mit Fallback-Werten, damit die Komponente auch ohne das Haupt-CSS funktioniert. Alle Klassen sind mit "wcx-" geprefixt (kein Konflikt mit Bootstrap/BSS). ========================================================================== */ .wcx-dash { --wcx-acc1: var(--acc1, #38BDF2); --wcx-acc2: var(--acc2, #2B6EF2); --wcx-acc-soft: var(--acc-soft, #5EB9F0); --wcx-card: var(--card-dark, #0C1017); --wcx-bg: var(--bg-dark, #05070C); --wcx-line: var(--line-dark, rgba(255, 255, 255, .09)); --wcx-text: var(--text-on-dark, #F2F4F8); --wcx-mut: var(--text-on-dark-mut, #B7BCC7); --wcx-dim: var(--text-on-dark-dim, #8A909C); --wcx-faint: var(--text-on-dark-faint, #6E7480); --wcx-ok: var(--ok, #3DDC84); --wcx-warn: #F0A24A; --wcx-fail: #FF6B6B; /* Prüfpunkt-Symbole, Prioritäten, Fehlermeldungen */ /* Eigene Skala für Punktzahlen — bewusst getrennt von --wcx-fail, damit eine Farbanpassung der Bewertung nicht die Symbole mitverändert. */ --wcx-low: #E8836F; /* 40–59 · gedämpftes Rot */ --wcx-crit: #FF4A3D; /* unter 40 · knalliges Rot */ --wcx-r: var(--r-card, 24px); --wcx-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); --wcx-grad: linear-gradient(92deg, var(--wcx-acc1), var(--wcx-acc2)); color: var(--wcx-text); margin-top: 24px; /* Beim Auto-Scroll nach der Analyse (dash.scrollIntoView) genügend Platz für die fixierte Pillen-Navbar freihalten. Diese schwebt bei top:14px und ist min. 84px hoch (Unterkante ≈ 98px) — plus etwas Luft. */ scroll-margin-top: 120px; } /* -------------------------------------------------------------------------- Fortschritt (Terminal-Look während der Analyse) -------------------------------------------------------------------------- */ .wcx-progress { font-family: var(--wcx-mono); font-size: 12px; letter-spacing: .08em; } .wcx-progress .wcx-cmd { color: var(--text-on-dark-faint, #6E7480); text-transform: uppercase; margin-bottom: 10px; } .wcx-progress .wcx-step { color: var(--text-on-dark-mut, #B7BCC7); padding: 3px 0; opacity: 0; animation: wcxFadeIn .35s ease forwards; } .wcx-progress .wcx-step .wcx-tick { color: var(--ok, #3DDC84); margin-right: 8px; } .wcx-progress .wcx-step.wcx-active .wcx-tick { color: var(--acc-soft, #5EB9F0); } .wcx-error { font-size: 14px; color: #FFB4B4; background: rgba(255, 107, 107, .08); border: 1px solid rgba(255, 107, 107, .25); border-radius: 14px; padding: 14px 18px; } /* -------------------------------------------------------------------------- Einladung statt Ergebnis Erscheint, wenn dieselbe Domain oft genug messbar besser geworden ist (Schwelle: 'verlauf_schwelle' in config.php). Sie MUSS anders aussehen als .wcx-error direkt darüber: Das hier ist kein Fehler, sondern ein Lob mit einem Angebot. Deshalb der blaue Markenakzent statt des Rots — und ein Rahmen, der nicht nach Warnung aussieht. Die Kachel trägt zusätzlich .rb-theme-site. Grund: .rb-cta greift auf --rb-accent zurück, das nur auf #rb-block und .rb-overlay definiert ist — ausserhalb davon bliebe der Knopf ohne Fläche. .rb-theme-site .rb-cta nutzt dagegen --acc1/--acc2 mit harten Rückfallwerten und steht damit überall. -------------------------------------------------------------------------- */ .wcx-einladung { background: linear-gradient(180deg, rgba(56, 189, 242, .07), rgba(43, 110, 242, .04)); border: 1px solid rgba(94, 185, 240, .28); border-radius: var(--wcx-r); padding: 30px 30px 26px; text-align: center; } .wcx-einladung-titel { margin: 0 0 14px; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--wcx-text); } .wcx-einladung-text { margin: 0 auto 14px; max-width: 58ch; font-size: 15px; line-height: 1.6; color: var(--wcx-mut); } /* Linksbündig trotz zentrierter Kachel: Eine Aufzählung mit unterschiedlich langen Zeilen wird mittig gesetzt unruhig und schlecht lesbar. */ .wcx-einladung-liste { margin: 4px auto 18px; padding: 0; max-width: 58ch; list-style: none; text-align: left; } .wcx-einladung-liste li { position: relative; padding: 8px 0 8px 26px; border-top: 1px solid var(--wcx-line); font-size: 14.5px; line-height: 1.5; color: var(--wcx-mut); } .wcx-einladung-liste li:first-child { border-top: 0; } .wcx-einladung-liste li::before { content: '→'; position: absolute; left: 0; top: 8px; color: var(--wcx-acc-soft); font-weight: 600; } .wcx-einladung-mail { margin: 14px 0 0; font-size: 13px; color: var(--wcx-dim); } .wcx-einladung-mail a { color: var(--wcx-acc-soft); text-decoration: none; } .wcx-einladung-mail a:hover { text-decoration: underline; } @media (max-width: 560px) { .wcx-einladung { padding: 24px 18px 22px; } .wcx-einladung-titel { font-size: 19px; } .wcx-einladung-text { font-size: 14.5px; } /* «Kostenlose Besprechung · 15 Min.» soll auf EINE Zeile. Gemessen am 23.09.2026: Die Beschriftung braucht bei 15 px rund 247 px, im Knopf sind bei 375 px Fensterbreite 263 px frei — es passte gerade eben, und ab 360 px abwärts nicht mehr. Dann blieb «Min.» allein auf der zweiten Zeile stehen. Der frühere Wert 15 px löste das Problem also nur auf dem Papier. 13.5 px und schmaleres Polster halten die Zeile bis hinunter zu 320 px. Dazu steht in der Beschriftung ein geschütztes Leerzeichen vor der Einheit (siehe verlaufAngebot in check.php): Bricht sie auf einem noch schmaleren Gerät doch um, dann am Trennpunkt und nicht vor «Min.». Nur innerhalb der Einladungskachel — die übrigen Knöpfe bleiben. */ .wcx-einladung .rb-cta { font-size: 13.5px; padding-left: 14px; padding-right: 14px; letter-spacing: 0; } } @keyframes wcxFadeIn { to { opacity: 1; } } .wcx-blink { display: inline-block; width: 8px; height: 14px; background: var(--acc-soft, #5EB9F0); vertical-align: text-bottom; margin-left: 6px; animation: wcxBlink 1s steps(1) infinite; } @keyframes wcxBlink { 50% { opacity: 0; } } /* -------------------------------------------------------------------------- Dashboard-Kopf: Score + URL + Aktionen -------------------------------------------------------------------------- */ .wcx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; background: linear-gradient(135deg, var(--acc-glow, rgba(43, 110, 242, .15)), rgba(12, 16, 23, .92) 55%), var(--wcx-card); border: 1px solid var(--wcx-line); border-radius: var(--wcx-r); padding: 28px 32px; } .wcx-ring { position: relative; width: 132px; height: 132px; flex: 0 0 auto; } .wcx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .wcx-ring .wcx-ring-bg { stroke: rgba(255, 255, 255, .08); } .wcx-ring .wcx-ring-val { stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.25, .8, .3, 1); } .wcx-ring-num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-weight: 700; font-size: 38px; line-height: 1; color: var(--wcx-text); } .wcx-ring-num small { display: block; font-size: 11px; font-weight: 500; color: var(--wcx-faint); font-family: var(--wcx-mono); letter-spacing: .14em; margin-top: 4px; } .wcx-head-main { flex: 1 1 260px; min-width: 0; } .wcx-grade { display: inline-block; font-family: var(--wcx-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 10px; border: 1px solid var(--wcx-line); color: var(--wcx-text); } .wcx-grade.g-good { border-color: rgba(61, 220, 132, .4); color: var(--wcx-ok); } .wcx-grade.g-mid { border-color: rgba(240, 162, 74, .4); color: var(--wcx-warn); } .wcx-grade.g-low { border-color: rgba(223, 102, 80, .4); color: var(--wcx-low); } .wcx-grade.g-bad { border-color: rgba(255, 74, 61, .45); color: var(--wcx-crit); } .wcx-head-url { font-family: var(--wcx-mono); font-size: 12px; color: var(--wcx-dim); word-break: break-all; margin-bottom: 8px; } .wcx-head-comment { font-size: 15px; color: var(--wcx-mut); max-width: 520px; } .wcx-head-meta { font-family: var(--wcx-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--wcx-faint); margin-top: 12px; } .wcx-head-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: 0 0 auto; } .wcx-head-actions .wcx-btn-ghost { text-align: center; white-space: nowrap; } /* -------------------------------------------------------------------------- Tab-Bar (wie im Vorlage-Dashboard: Pill-Leiste, aktiver Tab mit Verlauf) -------------------------------------------------------------------------- */ .wcx-tabs { display: flex; flex-wrap: wrap; gap: 6px; background: var(--wcx-card); border: 1px solid var(--wcx-line); border-radius: 999px; padding: 6px; margin: 22px 0; } .wcx-tab { flex: 1 1 0; border: 0; background: transparent; color: var(--wcx-dim); font-family: inherit; font-weight: 600; font-size: 14px; padding: 12px 18px; border-radius: 999px; cursor: pointer; transition: color .2s, background .3s; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; } .wcx-tab:hover { color: var(--wcx-text); } .wcx-tab.wcx-on { background: var(--wcx-grad); color: #fff; box-shadow: 0 8px 26px var(--acc-shadow, rgba(43, 110, 242, .35)); } .wcx-tab .wcx-count { font-family: var(--wcx-mono); font-size: 10.5px; background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 2px 8px; line-height: 1.5; } .wcx-tab:not(.wcx-on) .wcx-count { background: rgba(255, 255, 255, .07); color: var(--wcx-dim); } /* "NEU"-Badge am Sichtbarkeits-Tab — die Messung wird sonst oft übersehen */ .wcx-tab-badge { font-family: var(--wcx-mono); font-size: 9px; font-weight: 700; letter-spacing: .12em; padding: 2px 7px; border-radius: 999px; background: var(--wcx-grad); color: #fff; } .wcx-tab.wcx-on .wcx-tab-badge { background: #fff; color: var(--wcx-acc2); } /* -------------------------------------------------------------------------- Analyse-Tab: Kategorie-Karten -------------------------------------------------------------------------- */ /* min(310px, 100%) statt 310px: verhindert, dass das Raster in schmalen Containern (Handy, schmale Spalten) breiter wird als der Platz erlaubt. container-type macht das Raster zum Mass für die @container-Regel unten. */ /* align-items:start ist wesentlich: Ohne die Angabe dehnt das Raster beim Aufklappen EINER Kachel alle übrigen derselben Reihe auf dieselbe Höhe mit — daneben stünden dann meterhohe leere Kästen. Zugeklappt sind die Kacheln ohnehin gleich hoch, weil ihr sichtbarer Inhalt identisch aufgebaut ist. */ .wcx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 16px; align-items: start; container-type: inline-size; } /* Kachel als Spalte: Kopf, Balken und Kurzfassung stehen immer da, der ausführliche Teil klappt auf. Die Aktions-Schaltfläche (06/07) wird mit margin-top:auto an den unteren Rand gedrückt und bleibt dadurch auch im zugeklappten Zustand sichtbar — und alle Kacheln einer Reihe schliessen unten bündig ab. */ .wcx-cat { background: var(--wcx-card); border: 1px solid var(--wcx-line); border-radius: var(--wcx-r); padding: 22px 24px; min-width: 0; display: flex; flex-direction: column; /* Von kachelnAngleichen() gesetzt: die Höhe der höchsten zugeklappten Kachel. Damit stehen auch die beiden mit Schaltfläche bündig. */ min-height: var(--wcx-kachel-h, auto); } .wcx-cat-kurz { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } .wcx-cat-stand { font-size: 12.5px; color: var(--wcx-dim); } .wcx-cat-stand.ist-gruen { color: var(--wcx-ok); } .wcx-cat-toggle { display: inline-flex; align-items: center; gap: 7px; flex: none; background: transparent; border: 1px solid var(--wcx-line); border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12px; color: var(--wcx-mut); cursor: pointer; transition: color .18s, border-color .18s; } .wcx-cat-toggle:hover { color: var(--wcx-text); border-color: var(--wcx-dim); } .wcx-cat-toggle:focus-visible { outline: 2px solid var(--wcx-acc1); outline-offset: 2px; } .wcx-cat-chevron { width: 6px; height: 6px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease; } .wcx-cat.ist-offen .wcx-cat-chevron { transform: rotate(-135deg); margin-top: 2px; } .wcx-cat-body { margin-top: 16px; } /* Aktions-Schaltfläche: steht ausserhalb des zuklappbaren Teils und bleibt damit auch zugeklappt sichtbar. margin-top:auto schiebt sie ans untere Ende der angeglichenen Kachelhöhe. */ .wcx-cat > .rb-block { margin-top: auto; padding: 16px 0 0; } /* In der Kachel bewusst zurückhaltend: keine Verlaufsfläche, kein Schlagschatten, nur eine feine Linie in der Akzentfarbe. Der kräftige Verlaufs-Button bleibt den grossen Abschluss-CTAs vorbehalten — zwei davon mitten im Raster würden die Ergebnisdarstellung dominieren und werblich wirken. */ .wcx-cat > .rb-block .rb-cta, .wcx-cat > .rb-block.rb-theme-site .rb-cta { margin: 0; background: transparent; background-image: none; box-shadow: none; /* Rahmen in der Akzentfarbe statt im Grau der Sprachwahl. Bis 12.09.2026 stand hier rgba(255,255,255,.14) — dasselbe Grau wie .nav-lang-group. Die Schaltfläche fügte sich damit so gut in die Bedienoberfläche ein, dass sie wie eine gelesen wurde: als Schalter, nicht als Angebot. Bei hunderten Analysen kam eine Terminbuchung zustande. Der Grund bleibt durchsichtig und der Schatten aus — der gefüllte Verlaufs-Knopf ist weiterhin den grossen Abschluss-CTAs vorbehalten, zwei davon mitten im Raster wirkten werblich. */ border: 1px solid rgba(94, 185, 240, .45); color: var(--wcx-acc-soft); font-size: 13px; font-weight: 600; letter-spacing: .01em; padding: 10px 16px; line-height: 1.35; transition: background .16s, border-color .16s, color .16s; } .wcx-cat > .rb-block .rb-cta:hover, .wcx-cat > .rb-block.rb-theme-site .rb-cta:hover { /* Im Blau intensivieren statt ins Grau wechseln — sonst wirkte die Schaltfläche beim Berühren blasser als im Ruhezustand. */ background: rgba(56, 189, 242, .10); border-color: rgba(94, 185, 240, .75); color: var(--wcx-text); filter: none; transform: none; } .wcx-cat > .rb-block .rb-cta:focus-visible { outline: 2px solid var(--wcx-acc1); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .wcx-cat-chevron { transition: none; } } /* KI-Sichtbarkeit: standardmässig normale Kachel. Erst wenn das Raster selbst breit genug für 2 Spalten ist (2×310px + 16px Gap = 636px), wird sie zwei Kacheln breit. So kann "span 2" nie eine Phantom-Spalte erzeugen, die das Raster horizontal überlaufen lässt (das war der Responsive-Bruch bei Zwischenbreiten). Ältere Browser ohne @container zeigen die Kachel einfach einspaltig — rein kosmetisch. */ .wcx-cat.wcx-wide { grid-column: auto; } @container (min-width: 636px) { .wcx-cat.wcx-wide { grid-column: span 2; } } .wcx-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .wcx-cat-no { font-family: var(--wcx-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--wcx-acc-soft); text-transform: uppercase; } .wcx-cat-title { font-weight: 600; font-size: 16px; color: var(--wcx-text); margin: 2px 0 0; } .wcx-cat-score { font-weight: 700; font-size: 26px; line-height: 1; } .wcx-cat-score small { font-size: 11px; font-weight: 500; color: var(--wcx-faint); font-family: var(--wcx-mono); } .wcx-bar { height: 7px; background: rgba(255, 255, 255, .07); border-radius: 999px; overflow: hidden; margin: 14px 0 16px; } .wcx-bar i { /* Standard = guter Wert (ab 80) → grün. Orange/rot über b-mid/b-bad. */ display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(92deg, #3DDC84, #22B364); transition: width 1.1s cubic-bezier(.25, .8, .3, 1); } .wcx-bar.b-mid i { background: linear-gradient(92deg, #F0A24A, #E8842B); } /* 40–59: gedämpftes Rot — Handlungsbedarf, aber kein Alarm */ .wcx-bar.b-low i { background: linear-gradient(92deg, #F08C7A, #DF6650); } /* unter 40: knalliges Rot — bewusst dem Alarmfall vorbehalten */ .wcx-bar.b-bad i { background: linear-gradient(92deg, #FF5A4E, #F5232B); } .wcx-score-good { color: var(--wcx-ok); } .wcx-score-mid { color: var(--wcx-warn); } .wcx-score-low { color: var(--wcx-low); } .wcx-score-bad { color: var(--wcx-crit); } .wcx-items { list-style: none; margin: 0; padding: 0; } .wcx-items > li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; flex-wrap: wrap; border-top: 1px solid var(--wcx-line); font-size: 13px; color: var(--wcx-mut); } .wcx-items > li:first-child { border-top: 0; } .wcx-ico { flex: 0 0 16px; text-align: center; font-family: var(--wcx-mono); font-size: 12px; } .wcx-ico.s-ok { color: var(--wcx-ok); } .wcx-ico.s-warn { color: var(--wcx-warn); } .wcx-ico.s-fail { color: var(--wcx-fail); } .wcx-ico.s-info { color: var(--wcx-faint); } .wcx-item-label { flex: 1 1 auto; min-width: 0; } .wcx-item-value { font-family: var(--wcx-mono); font-size: 11px; letter-spacing: .04em; color: var(--wcx-dim); text-align: right; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; } .wcx-item-hint { display: block; font-size: 11.5px; color: var(--wcx-faint); margin-top: 2px; } /* Aufklappbare Einzel-Meldungen (W3C-Fehler/Warnungen) */ .wcx-msgs { flex-basis: 100%; margin: 4px 0 2px 26px; } .wcx-msgs summary { cursor: pointer; color: var(--wcx-acc-soft); font-family: var(--wcx-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 0; } .wcx-msgs summary:hover { color: var(--wcx-text); } .wcx-msgs ul { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .wcx-msg { line-height: 1.5; } .wcx-msg-kind { display: inline-block; font-family: var(--wcx-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; margin-right: 8px; position: relative; top: -1px; white-space: nowrap; } .wcx-msg-error .wcx-msg-kind { color: var(--wcx-fail); border: 1px solid rgba(255, 107, 107, .4); } .wcx-msg-warning .wcx-msg-kind { color: var(--wcx-warn); border: 1px solid rgba(240, 162, 74, .4); } .wcx-msg-info .wcx-msg-kind { color: var(--wcx-faint); border: 1px solid var(--wcx-line); } .wcx-msg-text { color: var(--wcx-dim); font-size: 12px; word-break: break-word; } /* KI-Plattformen */ .wcx-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; margin: 6px 0 18px; } .wcx-pf { border: 1px solid var(--wcx-line); border-radius: 16px; padding: 14px 16px; background: rgba(255, 255, 255, .02); } .wcx-pf-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .wcx-pf-name { font-weight: 600; font-size: 14px; color: var(--wcx-text); } .wcx-pf-state { font-family: var(--wcx-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .wcx-pf-state.p-ok { color: var(--wcx-ok); border: 1px solid rgba(61, 220, 132, .35); } .wcx-pf-state.p-warn { color: var(--wcx-warn); border: 1px solid rgba(240, 162, 74, .35); } .wcx-pf-state.p-fail { color: var(--wcx-fail); border: 1px solid rgba(255, 107, 107, .35); } .wcx-pf .wcx-bar { margin: 8px 0 8px; height: 5px; } .wcx-pf-note { font-size: 11px; color: var(--wcx-faint); line-height: 1.45; word-break: break-word; } .wcx-pf-score { font-family: var(--wcx-mono); font-size: 11px; color: var(--wcx-dim); } /* -------------------------------------------------------------------------- Empfehlungen-Tab -------------------------------------------------------------------------- */ .wcx-recs { display: flex; flex-direction: column; gap: 12px; } .wcx-rec { display: flex; gap: 16px; align-items: flex-start; background: var(--wcx-card); border: 1px solid var(--wcx-line); border-radius: 18px; padding: 18px 20px; } .wcx-prio { flex: 0 0 auto; font-family: var(--wcx-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-top: 2px; } .wcx-prio.p-hoch { color: var(--wcx-fail); border: 1px solid rgba(255, 107, 107, .4); } .wcx-prio.p-mittel { color: var(--wcx-warn); border: 1px solid rgba(240, 162, 74, .4); } .wcx-prio.p-tipp { color: var(--wcx-acc-soft); border: 1px solid rgba(94, 185, 240, .4); } .wcx-rec-body { flex: 1 1 auto; min-width: 0; } .wcx-rec-cat { font-family: var(--wcx-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--wcx-faint); margin-bottom: 4px; } .wcx-rec-title { font-weight: 600; font-size: 15px; color: var(--wcx-text); margin: 0 0 4px; } .wcx-rec-text { font-size: 13.5px; color: var(--wcx-mut); margin: 0; line-height: 1.55; } .wcx-rec-empty { text-align: center; color: var(--wcx-mut); padding: 32px 16px; font-size: 14.5px; } /* CTA am Ende */ /* Hinweis unter dem Eingabefeld: nur die Domain, keine Adresszeilen-Anhängsel. Steht bewusst VOR dem Absenden da — eine Fehlermeldung danach kommt zu spät, wenn die Adresse bereits eine fremde Sitzungskennung enthielt. */ .check-hinweis { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--wcx-dim); max-width: 60ch; } /* Warnung und Massstab. Weiterhin ohne Verlauf, ohne Farbakzent und ohne grüne Häkchen — sonst kippt die Warnung ins Werbliche und verliert genau die Wirkung, wegen der sie dasteht. Aber mit deutlich mehr Gewicht als zuvor: eigene Fläche, Linie oben, grössere Überschrift. Der Abschnitt trägt den Vertrauensaufbau und darf nicht wie eine Fussnote wirken. */ .wcx-trust { margin-top: 28px; padding: 34px 34px 32px; background: var(--wcx-card); border: 1px solid var(--wcx-line); border-radius: var(--wcx-r); } /* Kicker links, Badge am rechten Rand der Kachel — dort, wo im Raster darüber auch die Punktzahlen stehen. Das Auge findet es beim Herunterscrollen. */ .wcx-trust-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .wcx-trust-kicker { font-family: var(--wcx-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--wcx-acc-soft); } /* Gefüllte Pille im Site-Akzent — bewusst NICHT in Warnfarbe: Der Abschnitt ist keine Beanstandung am geprüften Auftritt, sondern ein Massstab. Orange oder Rot läse sich hier wie ein weiterer Mangel im eigenen Ergebnis. */ .wcx-trust-badge { display: inline-block; flex: none; font-family: var(--wcx-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; background: var(--wcx-grad); color: #fff; border-radius: 999px; padding: 5px 11px 4px; box-shadow: 0 4px 14px var(--acc-shadow, rgba(43, 110, 242, .35)); } .wcx-trust h4 { font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--wcx-text); margin: 0 0 10px; } .wcx-trust-lead { font-size: 15px; line-height: 1.6; color: var(--wcx-mut); margin: 0 0 26px; max-width: 66ch; } /* Zwei Spalten: links das Muster, rechts die nachprüfbare Tatsache. */ .wcx-trust-tab { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; border-top: 1px solid var(--wcx-line); } .wcx-trust-kopf { font-family: var(--wcx-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--wcx-faint); padding: 12px 0 10px; } .wcx-trust-warn, .wcx-trust-hier { font-size: 14px; line-height: 1.55; padding: 13px 0; border-top: 1px solid var(--wcx-line); } .wcx-trust-warn { color: var(--wcx-text); font-weight: 500; } .wcx-trust-hier { color: var(--wcx-mut); } .wcx-trust-schluss { font-size: 13.5px; color: var(--wcx-mut); margin: 20px 0 0; max-width: 62ch; } .wcx-trust-link { display: inline-block; margin-top: 16px; font-family: var(--wcx-mono); font-size: 12px; color: var(--wcx-acc-soft); text-decoration: none; border-bottom: 1px solid rgba(94, 185, 240, .35); padding-bottom: 2px; } .wcx-trust-link:hover { color: var(--wcx-acc1); border-bottom-color: var(--wcx-acc1); } /* Schmal: die Paare untereinander, das Muster bleibt oben, die Tatsache rückt eingezogen darunter — sonst verliert man die Zuordnung. */ @media (max-width: 620px) { .wcx-trust { padding: 22px 20px; } .wcx-trust-tab { grid-template-columns: 1fr; } /* Nur die Spaltenköpfe «Warnsignal | Hier». Dieselbe Klasse trägt auch die Zeile «Massstab · Wichtig» oben in der Kachel — bis 09.10.2026 verschwand sie hier auf dem Telefon mit. */ .wcx-trust-tab .wcx-trust-kopf { display: none; } .wcx-trust-warn { padding-bottom: 4px; } .wcx-trust-hier { border-top: 0; padding-top: 0; padding-left: 14px; border-left: 2px solid var(--wcx-line); margin-bottom: 4px; } } .wcx-cta { margin-top: 20px; text-align: center; padding: 30px 24px; background: linear-gradient(135deg, var(--acc-glow, rgba(43, 110, 242, .15)), rgba(12, 16, 23, .92) 60%), var(--wcx-card); border: 1px solid var(--wcx-line); border-radius: var(--wcx-r); } .wcx-cta h4 { font-weight: 600; font-size: 19px; color: var(--wcx-text); margin: 0 0 8px; } .wcx-cta p { font-size: 14px; color: var(--wcx-mut); margin: 0 auto 18px; max-width: 460px; } /* Hinweis unter den Kopf-Knöpfen, wenn der PDF-Bericht ausgegraut ist. Gedämpft, aber lesbar — er soll nicht als Fehlermeldung wirken, sondern als Angebot. */ .wcx-bericht-hinweis { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--wcx-dim); } .wcx-bericht-hinweis a { color: var(--wcx-acc-soft); text-decoration: none; } .wcx-bericht-hinweis a:hover { text-decoration: underline; } /* Abschluss-Kachel mit Porträt (buildPersona) — seit 21.09.2026 die einzige Handlungsaufforderung im Dashboard. Baut auf .wcx-cta auf, ersetzt dort aber Ausrichtung und Abstände; alle Farben kommen aus den bestehenden Tokens. ACHTUNG Kaskade: Die Regeln von .wcx-cta greifen hier mit — und .wcx-cta p ist spezifischer als eine einzelne Klasse wie .wcx-persona-name. Name und Funktion bekämen sonst Fliesstext-Grösse und 18px Abstand und der ganze Block verlöre seinen Rhythmus. Deshalb sind die Absätze unten bewusst mit ZWEI Klassen adressiert. */ .wcx-persona { display: flex; align-items: center; gap: 30px; /* Mittig als Gruppe: Die Kachel ist auf dem Bildschirm rund 950px breit, Bild und Textspalte zusammen aber nur etwa 640. Linksbündig bliebe rechts ein Drittel leer und die Kachel sähe unfertig aus. */ justify-content: center; text-align: left; padding: 34px 36px; margin-top: 28px; } .wcx-persona-bild { width: 112px; height: 112px; flex: 0 0 112px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 2px solid var(--wcx-line); /* Graustufen mit Farbe beim Darüberfahren — dieselbe Behandlung wie bei den Team- und Kontaktbildern der Seite. Bewusst hier definiert und nicht über deren Klasse .grayscale: Das Dashboard bringt sein Aussehen selbst mit und hängt nicht am Theme der Seite. */ filter: grayscale(1); transition: filter .5s, transform .5s; } .wcx-persona-bild:hover { filter: grayscale(0); transform: scale(1.04); } .wcx-persona-text { min-width: 0; } /* Name und Funktion sind ein Block: 3px zwischen ihnen, 18px bis zur Überschrift. So liest sich die Absenderzeile als Einheit. */ .wcx-persona p.wcx-persona-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--wcx-text); margin: 0; max-width: none; } .wcx-persona p.wcx-persona-rolle { font-size: 12.5px; line-height: 1.3; letter-spacing: .04em; color: var(--wcx-dim); margin: 3px 0 18px; max-width: none; } .wcx-persona h4 { font-size: 20px; line-height: 1.35; margin: 0 0 10px; } .wcx-persona p.wcx-persona-fliess { font-size: 14px; line-height: 1.65; color: var(--wcx-mut); margin: 0 0 24px; max-width: 46ch; } .wcx-persona .wcx-btn { margin: 0; } @media (max-width: 560px) { /* Auf dem Telefon untereinander und mittig — nebeneinander bliebe für den Text keine brauchbare Spalte übrig. Abstände etwas enger, das Bild kleiner, damit die Kachel nicht den halben Bildschirm füllt. */ .wcx-cta.wcx-persona { flex-direction: column; text-align: center; gap: 18px; padding: 28px 20px 30px; } .wcx-persona-bild { width: 96px; height: 96px; flex-basis: 96px; } .wcx-persona p.wcx-persona-rolle { margin-bottom: 14px; } .wcx-persona h4 { font-size: 19px; } .wcx-persona p.wcx-persona-fliess { margin: 0 auto 20px; } } .wcx-btn { display: inline-block; background: var(--wcx-grad); color: #fff; border: 0; border-radius: 999px; padding: 14px 28px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; box-shadow: 0 8px 26px var(--acc-shadow, rgba(43, 110, 242, .35)); transition: filter .2s, transform .2s; font-family: inherit; } .wcx-btn:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; } .wcx-btn-ghost { display: inline-block; background: transparent; color: var(--wcx-mut); border: 1px solid var(--wcx-line); border-radius: 999px; padding: 10px 20px; font-weight: 500; font-size: 13px; text-decoration: none; cursor: pointer; font-family: inherit; transition: color .2s, border-color .2s; } .wcx-btn-ghost:hover { color: var(--wcx-text); border-color: rgba(255, 255, 255, .3); } /* -------------------------------------------------------------------------- Details-Tab -------------------------------------------------------------------------- */ .wcx-details { background: var(--wcx-card); border: 1px solid var(--wcx-line); border-radius: var(--wcx-r); padding: 10px 24px; } .wcx-details dl { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; margin: 0; } .wcx-details dt, .wcx-details dd { padding: 11px 0; border-top: 1px solid var(--wcx-line); margin: 0; font-size: 13px; } .wcx-details dt:first-of-type, .wcx-details dd:first-of-type { border-top: 0; } .wcx-details dt { color: var(--wcx-faint); font-family: var(--wcx-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; align-self: center; } .wcx-details dd { color: var(--wcx-mut); word-break: break-all; } .wcx-note { font-size: 11.5px; color: var(--wcx-faint); margin-top: 14px; line-height: 1.6; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 640px) { .wcx-dash { scroll-margin-top: 96px; } /* Pille ist mobil niedriger (top:10 + ~68px) */ .wcx-head { padding: 22px 20px; gap: 18px; } /* Auf dem Telefon stehen die Knöpfe untereinander unter dem Text — dann sollen sie die ganze Karte nutzen statt sich auf die Breite ihrer längsten Beschriftung zu ducken. */ .wcx-head-actions { width: 100%; flex: 1 1 100%; } .wcx-ring { width: 104px; height: 104px; } .wcx-ring-num { font-size: 30px; } .wcx-tabs { flex-direction: column; border-radius: 22px; } .wcx-tab { width: 100%; } .wcx-cat { padding: 18px 16px; } .wcx-rec { flex-direction: column; gap: 10px; } .wcx-details dl { grid-template-columns: 1fr; } .wcx-details dt { padding-bottom: 0; border-top: 1px solid var(--wcx-line); } .wcx-details dd { border-top: 0; padding-top: 4px; } .wcx-item-value { text-align: left; } .wcx-items > li { flex-wrap: wrap; } /* Immer genau EINE Kategorie pro Zeile (volle Breite) — auch die sonst breite KI-Kachel. Das verhindert das horizontale Überlaufen und damit das Abschneiden von Inhalten auf dem Handy. */ .wcx-grid { grid-template-columns: 1fr; gap: 14px; } .wcx-cat.wcx-wide { grid-column: auto; } .wcx-platforms { grid-template-columns: 1fr; } .wcx-cat-score { font-size: 22px; } .wcx-cta { padding: 24px 18px; } /* Punktekarte «Sichtbarkeit» und Meldungen: Telefon-Regeln am Dateiende. Hier oben verloren sie gegen die später folgenden Grundregeln. */ } /* -------------------------------------------------------------------------- GEO-Sichtbarkeits-Tab -------------------------------------------------------------------------- */ .wcx-geo { display: flex; flex-direction: column; gap: 16px; } .wcx-geo-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 20px; text-align: center; } .wcx-geo-spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--wcx-line); border-top-color: var(--wcx-acc-soft); animation: wcxSpin .9s linear infinite; } @keyframes wcxSpin { to { transform: rotate(360deg); } } .wcx-geo-loadtext { font-size: 14px; color: var(--wcx-mut); max-width: 420px; } .wcx-geo-head { } .wcx-geo-biz { font-weight: 600; font-size: 19px; color: var(--wcx-text); } .wcx-geo-loc { font-family: var(--wcx-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--wcx-acc-soft); margin-top: 4px; } .wcx-geo-note { font-size: 13.5px; color: var(--wcx-mut); background: rgba(94, 185, 240, .06); border: 1px solid var(--wcx-line); border-radius: 14px; padding: 14px 18px; } .wcx-geo-scorecard { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; background: linear-gradient(135deg, var(--acc-glow, rgba(43, 110, 242, .15)), rgba(12, 16, 23, .92) 55%), var(--wcx-card); border: 1px solid var(--wcx-line); border-radius: var(--wcx-r); padding: 22px 26px; } .wcx-geo-scorelabel { flex-basis: 100%; font-family: var(--wcx-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--wcx-faint); } .wcx-geo-bignum { font-weight: 700; font-size: 44px; line-height: 1; color: var(--wcx-text); flex: 0 0 auto; } .wcx-geo-bignum small { font-size: 13px; font-weight: 500; color: var(--wcx-faint); font-family: var(--wcx-mono); letter-spacing: .04em; } .wcx-geo-subbar { flex: 1 1 220px; min-width: 200px; } .wcx-geo-subtop { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--wcx-mut); margin-bottom: 6px; } .wcx-geo-subval { font-family: var(--wcx-mono); font-weight: 600; color: var(--wcx-text); } /* Ranking-Positions-Badges */ .wcx-pos { flex: 0 0 auto; font-family: var(--wcx-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .wcx-pos-top { color: var(--wcx-ok); border: 1px solid rgba(61, 220, 132, .4); } .wcx-pos-mid { color: var(--wcx-acc-soft); border: 1px solid rgba(94, 185, 240, .4); } .wcx-pos-low { color: var(--wcx-warn); border: 1px solid rgba(240, 162, 74, .4); } .wcx-pos-none { color: var(--wcx-faint); border: 1px solid var(--wcx-line); } /* Service-Tags + generierte Suchbegriffe */ .wcx-geo-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 18px; } .wcx-geo-tag { font-family: var(--wcx-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--wcx-mut); background: rgba(255, 255, 255, .04); border: 1px solid var(--wcx-line); border-radius: 999px; padding: 5px 12px; } .wcx-geo-qgroup { padding: 12px 0; border-top: 1px solid var(--wcx-line); } .wcx-geo-qgroup:first-of-type { border-top: 0; } .wcx-geo-qlabel { font-family: var(--wcx-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--wcx-acc-soft); margin-bottom: 8px; } .wcx-geo-qitems { display: flex; flex-wrap: wrap; gap: 7px; } .wcx-geo-q { font-size: 12.5px; color: var(--wcx-mut); background: var(--wcx-bg); border: 1px solid var(--wcx-line); border-radius: 8px; padding: 5px 11px; } /* Keyword-Bearbeitung (Schritt 1: streichen / eigene hinzufügen) */ .wcx-kw-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; } .wcx-kw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wcx-text); background: var(--wcx-bg); border: 1px solid var(--wcx-line); border-radius: 999px; padding: 6px 8px 6px 14px; } .wcx-kw-x { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; border: 0; background: rgba(255, 255, 255, .06); color: var(--wcx-dim); font-size: 10px; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; } .wcx-kw-x:hover { background: rgba(255, 107, 107, .18); color: var(--wcx-fail); } .wcx-kw-add { display: flex; gap: 8px; margin-bottom: 10px; } .wcx-kw-input { flex: 1 1 auto; min-width: 0; background: var(--wcx-bg); border: 1px solid var(--wcx-line); border-radius: 10px; color: var(--wcx-text); padding: 10px 14px; font-family: inherit; font-size: 13.5px; } .wcx-kw-input:focus { outline: none; border-color: var(--wcx-acc-soft); } .wcx-kw-input:disabled { opacity: .5; } .wcx-kw-addbtn { flex: 0 0 auto; background: transparent; color: var(--wcx-acc-soft); border: 1px solid var(--wcx-line); border-radius: 10px; padding: 10px 16px; font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: border-color .15s; } .wcx-kw-addbtn:hover:not(:disabled) { border-color: var(--wcx-acc-soft); } .wcx-kw-info { font-family: var(--wcx-mono); font-size: 11px; letter-spacing: .06em; color: var(--wcx-faint); margin-bottom: 16px; } .wcx-kw-measure { width: 100%; } .wcx-geo-back { margin-bottom: 4px; } /* -------------------------------------------------------------------------- Bestellblock «Rechtssicher-Paket» (Kategorie 06 – Rechtliches) Übernommen aus der Übergabe-Komponente (rechtssicher-bestellblock.html). Präfix rb-, komplett eigenständig — Farben über die --rb-*-Variablen. -------------------------------------------------------------------------- */ #rb-block, .rb-overlay { --rb-navy:#13253f; --rb-navy-2:#1d3557; --rb-accent:#ffc400; --rb-accent-dark:#e8a800; --rb-ink:#1c2733; --rb-muted:#5a6b80; --rb-line:#e2e7ee; --rb-radius:14px; font-family:inherit; box-sizing:border-box; } #rb-block *, .rb-overlay * { box-sizing:border-box; } .rb-block { display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:var(--rb-navy); color:#fff; border-radius:var(--rb-radius); padding:24px 28px; margin:18px 0 0; background-image:linear-gradient(135deg, var(--rb-navy) 0%, var(--rb-navy-2) 100%); } .rb-text { flex:1 1 380px; min-width:0; } .rb-title { margin:0 0 10px; font-size:21px; line-height:1.3; color:#fff; } .rb-price { color:var(--rb-accent); white-space:nowrap; } .rb-list { margin:0 0 10px; padding:0; list-style:none; } .rb-list li { position:relative; padding-left:24px; margin:5px 0; font-size:15px; color:#dfe6f0; } .rb-list li::before { content:'✓'; position:absolute; left:0; color:var(--rb-accent); font-weight:700; } .rb-note { margin:0; font-size:12.5px; line-height:1.5; color:#9fb0c7; } .rb-cta { flex:0 0 auto; background:var(--rb-accent); color:var(--rb-navy); /* Pill-Radius wie die Site-CTAs («Webseiten-Check», «Ergebnis kostenlos besprechen») */ border:none; border-radius:var(--r-pill, 999px); padding:16px 28px; font-size:16.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; /* text-decoration/text-align: Die Klasse trägt neu auch ein (Calendly- Link in Kategorie 07). Ohne diese Zeilen unterstreicht der Browser den Text und die Beschriftung sitzt linksbündig. Für