/* ============================================================================ Review-Overlay — redaktionelles Annotations-Tool (nur in der Preview aktiv). Alle Klassen sind mit .pcgrev- gescoped und erscheinen nur, wenn das Overlay per JS aktiviert wurde (). Auf der Live-Domain bleibt alles unsichtbar. ========================================================================== */ :root { --pcgrev-accent: #6b3fa0; /* Wisteria-nah, klar von der Orange-Brand getrennt */ --pcgrev-accent-2: #d8533b; --pcgrev-bg: #ffffff; --pcgrev-fg: #1d1d24; --pcgrev-muted: #6a6a78; --pcgrev-border: #e3e3ea; --pcgrev-shadow: 0 8px 30px rgba(20, 12, 40, .18); } html:not([data-pcgrev]) .pcgrev { display: none !important; } /* ---- Launcher (schwebender Button unten rechts) -------------------------- */ .pcgrev-launcher { position: fixed; right: 18px; bottom: 18px; z-index: 2147483000; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--pcgrev-accent); color: #fff; font: 600 14px/1 system-ui, sans-serif; box-shadow: var(--pcgrev-shadow); } .pcgrev-launcher:hover { background: #5a3488; } .pcgrev-launcher .pcgrev-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; } /* CMS-Inline-Edit: schwebender Umschalter (über dem Review-Launcher) */ .pcgrev-inlinetoggle { position: fixed; right: 18px; bottom: 70px; z-index: 2147483000; width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer; background: #fff; color: var(--pcgrev-accent); font-size: 18px; box-shadow: var(--pcgrev-shadow); border: 2px solid var(--pcgrev-accent); } .pcgrev-inlinetoggle.is-active { background: var(--pcgrev-accent); color: #fff; } /* Im Modus: Textbausteine als bearbeitbar markieren */ .pcgrev-inline-on #main p, .pcgrev-inline-on #main li, .pcgrev-inline-on #main h1, .pcgrev-inline-on #main h2, .pcgrev-inline-on #main h3, .pcgrev-inline-on #main h4, .pcgrev-inline-on #main figcaption, .pcgrev-inline-on #main blockquote { cursor: text; } .pcgrev-inline-on #main p:hover, .pcgrev-inline-on #main li:hover, .pcgrev-inline-on #main h1:hover, .pcgrev-inline-on #main h2:hover, .pcgrev-inline-on #main h3:hover, .pcgrev-inline-on #main h4:hover, .pcgrev-inline-on #main figcaption:hover, .pcgrev-inline-on #main blockquote:hover { outline: 2px dashed var(--pcgrev-accent); outline-offset: 3px; border-radius: 3px; } .pcgrev-editing-el { outline: 2px solid var(--pcgrev-accent) !important; outline-offset: 3px; background: #fffef8; } .pcgrev-inlinebar { position: absolute; z-index: 2147483001; display: inline-flex; gap: 4px; align-items: center; background: #fff; border: 1px solid var(--pcgrev-border); border-radius: 8px; padding: 4px; box-shadow: var(--pcgrev-shadow); font: 500 13px/1 system-ui, sans-serif; } .pcgrev-inlinebar button { border: 0; background: transparent; cursor: pointer; padding: 5px 8px; border-radius: 6px; font-size: 13px; } .pcgrev-inlinebar button:hover { background: #f0ecf8; } .pcgrev-inlinebar .ib-save { color: #2e7d46; font-weight: 700; } .pcgrev-ib-note { color: var(--pcgrev-muted); font-size: 12px; padding: 0 6px; } /* ---- Sidebar-Panel ------------------------------------------------------- */ .pcgrev-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 2147483001; background: var(--pcgrev-bg); color: var(--pcgrev-fg); border-left: 1px solid var(--pcgrev-border); box-shadow: var(--pcgrev-shadow); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; font: 14px/1.45 system-ui, sans-serif; } .pcgrev-panel.is-open { transform: translateX(0); } .pcgrev-panel__head { display: flex; align-items: center; gap: .5rem; padding: 14px 16px; border-bottom: 1px solid var(--pcgrev-border); } .pcgrev-panel__head h2 { margin: 0; font-size: 15px; font-weight: 700; flex: 1; } .pcgrev-iconbtn { border: 1px solid var(--pcgrev-border); background: #fff; color: var(--pcgrev-fg); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .pcgrev-iconbtn:hover { background: #f4f2f9; } .pcgrev-panel__tools { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--pcgrev-border); flex-wrap: wrap; } .pcgrev-model { border: 1px solid var(--pcgrev-border); background: #fff; color: var(--pcgrev-fg); padding: 6px 8px; border-radius: 8px; cursor: pointer; font: 600 12px/1 system-ui, sans-serif; max-width: 190px; } /* ---- KI-Hilfe (einklappbare Infobox für Redakteur:innen) ---------------- */ .pcgrev-help { padding: 12px 16px; border-bottom: 1px solid var(--pcgrev-border); background: #f7f5fb; font: 400 12.5px/1.5 system-ui, sans-serif; color: var(--pcgrev-fg); } .pcgrev-help p { margin: 0 0 8px; } .pcgrev-help ol { margin: 0 0 8px; padding-left: 18px; } .pcgrev-help li { margin: 0 0 5px; } .pcgrev-help strong { font-weight: 700; } .pcgrev-help-note { color: var(--pcgrev-muted); border-top: 1px dashed var(--pcgrev-border); padding-top: 8px; } .pcgrev-help-toggle[aria-expanded="true"] { background: var(--pcgrev-accent); color: #fff; border-color: var(--pcgrev-accent); } /* ---- Seiten-Übersicht („Alle Seiten"): gruppierende Seiten-Köpfe --------- */ .pcgrev-pagehead { list-style: none; margin: 10px 0 2px; padding: 0; position: sticky; top: 0; z-index: 1; background: var(--pcgrev-bg, #fff); } .pcgrev-pagehead:first-child { margin-top: 0; } .pcgrev-pagejump { width: 100%; display: flex; align-items: baseline; gap: 8px; cursor: pointer; border: 1px solid var(--pcgrev-border); border-radius: 8px; background: #f4f2f9; padding: 7px 10px; text-align: left; font: 600 12.5px/1.3 system-ui, sans-serif; color: var(--pcgrev-fg); } .pcgrev-pagejump:hover { background: #ece7f6; border-color: var(--pcgrev-accent); } .pcgrev-pagehead__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pcgrev-pagehead__count { flex: none; font-weight: 500; color: var(--pcgrev-muted); } .pcgrev-pagehead.is-here .pcgrev-pagejump { border-color: var(--pcgrev-accent); background: #efeaf9; } .pcgrev-pagehead__here { display: inline-block; margin: 3px 0 0 2px; font: 600 10px/1 system-ui, sans-serif; color: var(--pcgrev-accent); text-transform: uppercase; letter-spacing: .04em; } @keyframes pcgrevFlash { 0%,100% { background: transparent; } 25% { background: #fdeaa8; } } .pcgrev-item.pcgrev-flash { animation: pcgrevFlash 1.6s ease; border-radius: 8px; } /* ---- Umschalter „Diese Seite / Alle Seiten" (zwei sichtbare Buttons) ----- */ .pcgrev-scope { display: inline-flex; gap: 4px; } /* ---- Zähler-Badges in der Haupt-Navigation (Staging-only) --------------- */ .pcgrev-navbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; vertical-align: middle; border-radius: 9px; background: var(--pcgrev-accent); color: #fff; font: 700 10px/1 system-ui, sans-serif; box-shadow: 0 1px 3px rgba(20, 12, 40, .25); } .pcgrev-navbadge.is-done { background: #b9b4c6; } .pcgrev-panel__live { display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--pcgrev-border); flex-wrap: wrap; align-items: center; } .pcgrev-livestat { font: 500 12px/1.3 system-ui, sans-serif; color: var(--pcgrev-muted); flex: 1 1 100%; } .pcgrev-btn { border: 1px solid var(--pcgrev-border); background: #fff; color: var(--pcgrev-fg); padding: 6px 10px; border-radius: 8px; cursor: pointer; font: 600 13px/1 system-ui, sans-serif; } .pcgrev-btn:hover { background: #f4f2f9; } .pcgrev-btn--primary { background: var(--pcgrev-accent); color: #fff; border-color: var(--pcgrev-accent); } .pcgrev-btn--primary:hover { background: #5a3488; } .pcgrev-btn.is-active { background: var(--pcgrev-accent); color: #fff; border-color: var(--pcgrev-accent); } /* ---- Eingabe-Bereich (immer sichtbar) ----------------------------------- */ .pcgrev-compose { padding: 12px 16px; border-bottom: 1px solid var(--pcgrev-border); display: flex; flex-direction: column; gap: 8px; } .pcgrev-target { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pcgrev-target__label { font-size: 12px; color: var(--pcgrev-accent); font-weight: 600; flex: 1; word-break: break-word; } .pcgrev-target__clear { border: 0; background: transparent; cursor: pointer; font-size: 13px; color: var(--pcgrev-muted); padding: 2px; } .pcgrev-input, .pcgrev-author { width: 100%; box-sizing: border-box; border: 1px solid var(--pcgrev-border); border-radius: 8px; padding: 9px; font: 14px/1.4 system-ui, sans-serif; resize: vertical; } .pcgrev-input:focus, .pcgrev-author:focus { outline: 2px solid var(--pcgrev-accent); border-color: var(--pcgrev-accent); } .pcgrev-add { align-self: flex-start; } .pcgrev-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; } .pcgrev-list:empty::after { content: "Noch keine Anmerkungen. Oben eintippen und „Hinzufügen“ — optional vorher „⊕ Element wählen“."; display: block; color: var(--pcgrev-muted); padding: 24px 12px; text-align: center; } .pcgrev-item { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--pcgrev-border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; } .pcgrev-item:hover { border-color: var(--pcgrev-accent); } .pcgrev-item.is-done { opacity: .55; } .pcgrev-item.is-done .pcgrev-item__text { text-decoration: line-through; } .pcgrev-item.is-archived { opacity: .7; background: var(--pcgrev-bg-alt, #f4f2f7); } .pcgrev-item.is-archived .pcgrev-item__text { text-decoration: none; } .pcgrev-archtag { display: inline-block; font-size: 11px; font-weight: 700; color: #6b6478; background: #ece9f1; border-radius: 4px; padding: 0 5px; } .pcgrev-directbtn { width: 100%; margin-top: 6px; } .pcgrev-directhint { margin: 6px 0 0; font-size: 12px; color: var(--pcgrev-muted); line-height: 1.4; } .pcgrev-directcancel { border: 0; background: transparent; color: var(--pcgrev-accent); cursor: pointer; text-decoration: underline; font-size: 12px; padding: 0; } .pcgrev-testat { margin: 3px 0 0; font-size: 12px; color: #6b6478; } .pcgrev-testat--err { color: #b23b3b; } .pcgrev-item__num { width: 24px; height: 24px; border-radius: 999px; background: var(--pcgrev-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .pcgrev-item__text { margin: 0 0 3px; word-break: break-word; } .pcgrev-item__meta { margin: 0; font-size: 12px; color: var(--pcgrev-muted); word-break: break-word; } .pcgrev-item__actions { display: flex; flex-direction: column; gap: 4px; } .pcgrev-item__actions button { border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px; } /* 🤖-Button ausgegraut, solange die KI-Umsetzung deaktiviert ist (Sicherheits-Review) */ .pcgrev-item__actions button.pcgrev-ai-off { opacity: .35; filter: grayscale(1); cursor: not-allowed; } .pcgrev-foot { padding: 8px 16px; border-top: 1px solid var(--pcgrev-border); font-size: 12px; color: var(--pcgrev-muted); } /* ---- Pins (Marker am Element) ------------------------------------------- */ .pcgrev-pinlayer { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 2147482000; pointer-events: none; } .pcgrev-pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; width: 26px; height: 26px; border-radius: 999px 999px 999px 2px; background: var(--pcgrev-accent); color: #fff; border: 2px solid #fff; box-shadow: var(--pcgrev-shadow); display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 system-ui, sans-serif; } .pcgrev-pin.is-done { background: #2e9e6b; } .pcgrev-pin.is-active { outline: 3px solid var(--pcgrev-accent-2); outline-offset: 2px; } /* ---- Element-Hover beim Anmerken ---------------------------------------- */ .pcgrev-picking, .pcgrev-picking * { cursor: crosshair !important; } .pcgrev-hi { position: absolute; z-index: 2147481000; pointer-events: none; border: 2px solid var(--pcgrev-accent); background: rgba(107,63,160,.12); border-radius: 4px; } /* ---- Hinweis-Banner im Pick-Modus --------------------------------------- */ .pcgrev-hint { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2147483003; background: var(--pcgrev-accent); color: #fff; padding: 9px 16px; border-radius: 999px; box-shadow: var(--pcgrev-shadow); font: 600 13px/1 system-ui, sans-serif; white-space: nowrap; } /* ---- Kommentar-Popover beim Erfassen ------------------------------------ */ .pcgrev-pop { position: fixed; z-index: 2147483004; width: 300px; max-width: 92vw; background: #fff; border: 1px solid var(--pcgrev-border); border-radius: 12px; box-shadow: var(--pcgrev-shadow); padding: 12px; font: 14px/1.4 system-ui, sans-serif; } .pcgrev-pop label { display: block; font-size: 12px; color: var(--pcgrev-muted); margin: 0 0 4px; } .pcgrev-pop input, .pcgrev-pop textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--pcgrev-border); border-radius: 8px; padding: 8px; font: inherit; margin-bottom: 8px; resize: vertical; } .pcgrev-pop__target { font-size: 12px; color: var(--pcgrev-accent); margin: 0 0 8px; word-break: break-word; } .pcgrev-pop__row { display: flex; gap: 8px; justify-content: flex-end; } @media print { .pcgrev { display: none !important; } } /* ---- Bearbeiten + Antworten (Threads) ---------------------------------- */ .pcgrev-item__body { min-width: 0; } .pcgrev-replies { margin: 4px 0 0; border-left: 2px solid var(--pcgrev-border); padding-left: 8px; } .pcgrev-reply { margin: 2px 0; font-size: 12px; color: var(--pcgrev-muted); word-break: break-word; } .pcgrev-reply__a { font-weight: 700; } .pcgrev-replybox { display: flex; gap: 4px; margin-top: 6px; } .pcgrev-replyin { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--pcgrev-border); border-radius: 6px; } .pcgrev-reply__btn { border: 0; background: var(--pcgrev-accent); color: #fff; border-radius: 6px; padding: 0 9px; cursor: pointer; font-size: 12px; } .pcgrev-editin { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 5px 6px; border: 1px solid var(--pcgrev-accent); border-radius: 6px; } .pcgrev-editbtns { display: flex; gap: 6px; margin: 6px 0 2px; } .pcgrev-edited { font-size: 11px; color: var(--pcgrev-muted); } .pcgrev-undostat { margin: 3px 0 0; font-size: 11px; font-weight: 700; color: var(--pcgrev-accent); }