/**
 * psn Consent — Frontend-Banner, Platzhalter, Widerruf-Button, Shortcodes.
 * Designsprache wie das Barrierefreiheits-Widget: blauer Header-Balken,
 * weisse Karten, Toggle-Switches, Mobile-Sheet (dvh). Briefing §14.
 */
:root {
    --psn-cc-primary: #2271b1;
    --psn-cc-accept: #1e8e3e;
    --psn-cc-reject: #d63638;
    --psn-cc-settings: #f2f4f8;
}

/* ---------- Modal ---------- */
.psn-cc-overlay {
    position: fixed; inset: 0; z-index: 2147483600;
    background: rgba(0, 0, 0, 0.55);
    animation: psnCcFade 0.25s ease;
}
.psn-cc-modal {
    position: fixed; z-index: 2147483601;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 640px; max-width: calc(100vw - 32px); max-height: 88vh; max-height: 88dvh;
    display: flex; flex-direction: column;
    background: #f7f8fb; border-radius: 18px; overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1d2327;
    animation: psnCcIn 0.25s ease;
}
.psn-cc-modal:focus { outline: none; }

@keyframes psnCcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes psnCcIn {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes psnCcSheetUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .psn-cc-modal, .psn-cc-overlay { animation: none; }
}

.psn-cc-head {
    display: flex; align-items: center; gap: 12px;
    background: var(--psn-cc-header, var(--psn-cc-primary)); color: #fff;
    padding: 18px 22px; flex-shrink: 0;
}
.psn-cc-badge {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: #fff; color: var(--psn-cc-header, var(--psn-cc-primary));
    display: flex; align-items: center; justify-content: center;
}
.psn-cc-title {
    margin: 0; padding: 0; font-size: 20px; font-weight: 700; color: #fff; flex: 1;
    line-height: 1.2; min-height: 36px;
    display: flex; align-items: center;        /* fest auf die Icon-Achse zentrieren */
}
/* Logo: feste Höhe statt nur max-height, damit auch dimensionslose SVGs sichtbar
   skalieren (ein SVG ohne intrinsische Größe kollabiert sonst auf 0 Breite). */
.psn-cc-logo img { height: 32px; max-height: 32px; width: auto; max-width: 200px; display: block; }
.psn-cc-langs { display: flex; gap: 8px; align-items: center; }
.psn-cc-lang {
    background: transparent; color: #fff; border: 0;
    border-radius: 3px; padding: 0; line-height: 0; cursor: pointer;
    font-size: 12px; font-weight: 700; opacity: 0.5;
    transition: opacity 0.15s ease;
}
.psn-cc-lang:hover { opacity: 0.85; }
.psn-cc-lang.is-active { opacity: 1; }
.psn-cc-lang svg { display: block; width: 24px; height: 16px; border-radius: 2px; }
.psn-cc-x {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: #fff; font-size: 24px; line-height: 1;
    cursor: pointer; padding: 0; opacity: 0.9;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.psn-cc-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }

.psn-cc-view { padding: 22px; overflow-y: auto; }
.psn-cc-view::-webkit-scrollbar { width: 8px; }
.psn-cc-view::-webkit-scrollbar-track { background: transparent; }
.psn-cc-view::-webkit-scrollbar-thumb { background: #c9ced8; border-radius: 4px; }
.psn-cc-intro { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #3c434a; }

.psn-cc-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.psn-cc-btn {
    flex: 1 1 auto; min-width: 140px; appearance: none; border: 0; border-radius: 10px;
    padding: 13px 18px; font-size: 14px; font-weight: 600; cursor: pointer; color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.psn-cc-btn:hover { filter: brightness(0.96); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }
.psn-cc-btn:active { transform: translateY(0); }
.psn-cc-btn:focus-visible { outline: 3px solid rgba(0, 0, 0, 0.35); outline-offset: 2px; }
.psn-cc-accept { background: var(--psn-cc-accept); }
.psn-cc-reject { background: var(--psn-cc-reject); }
/* „Einstellungen" = dezenter, heller Sekundär-Button (Default #f2f4f8) → dunkler
   Text + Rahmen, damit er auf dem hellen Modal sichtbar bleibt (weißer Text wäre
   auf fast-weiß unsichtbar). */
.psn-cc-settings { background: var(--psn-cc-settings); color: #3c434a; border: 1px solid #d5d9e2; box-shadow: none; }
.psn-cc-settings:hover { filter: none; background: #e6eaf1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.psn-cc-save { background: var(--psn-cc-primary); }
/* „Zurück" bewusst dezent: weisser Hintergrund + graue Outline (keine dominante Fläche). */
.psn-cc-back { background: #fff; color: #50575e; border: 1px solid #c3c4c7; box-shadow: none; }
.psn-cc-back:hover { background: #f6f7f7; color: #1d2327; filter: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }

/* Body = konstanter, scrollbarer Ansichts-Container (Head + Body + Footer als
   feste Modal-Spalten). Mehransichtig: Hauptansicht, Einstellungen-Akkordion,
   Anbieter-/Cookie-Liste, Detailseiten. */
.psn-cc-body { padding: 22px; overflow-y: auto; flex: 1 1 auto; }
.psn-cc-body::-webkit-scrollbar { width: 8px; }
.psn-cc-body::-webkit-scrollbar-track { background: transparent; }
.psn-cc-body::-webkit-scrollbar-thumb { background: #c9ced8; border-radius: 4px; }

.psn-cc-footer { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 12px 22px; border-top: 1px solid #e2e4e7; background: #fff; flex-shrink: 0; }
.psn-cc-footer a { color: var(--psn-cc-primary); font-size: 13px; text-decoration: none; }
.psn-cc-footer a:hover { text-decoration: underline; }
/* „powered by" als dezenter Link (eigene Regel nach .psn-cc-footer a, damit die
   gedaempfte Optik gewinnt — gleiche Spezifitaet, spaeter im Stylesheet). */
.psn-cc-powered { margin-left: auto; font-size: 11px; color: #a7aaad; }
a.psn-cc-powered { font-size: 11px; color: #a7aaad; text-decoration: none; }
a.psn-cc-powered:hover { color: var(--psn-cc-primary); text-decoration: underline; }

/* ---------- Ebene 2: Kategorien + Anbieter ---------- */
.psn-cc-cat { background: #fff; border-radius: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); overflow: hidden; }
.psn-cc-cat-head { display: flex; gap: 14px; align-items: center; padding: 16px 18px; }
.psn-cc-cat-icon { width: 44px; height: 44px; border-radius: 50%; background: #f2f4f8; color: var(--psn-cc-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; flex-shrink: 0; }
.psn-cc-cat-title { flex: 1; font-size: 14px; }
.psn-cc-cat-title strong { font-size: 15px; }
.psn-cc-cat-title em { color: #1e8e3e; font-style: normal; font-size: 12px; }
.psn-cc-cat-desc, .psn-cc-prov-desc { font-size: 12px; color: #646970; margin-top: 4px; line-height: 1.5; }
.psn-cc-provs { padding: 4px 18px 14px; border-top: 1px solid #f0f1f4; }
.psn-cc-prov { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #f0f0f1; }
.psn-cc-prov:first-child { border-top: 0; }
.psn-cc-prov-info { flex: 1; font-size: 13px; }
.psn-cc-prov-link, .psn-cc-ph-link { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--psn-cc-primary); }
.psn-cc-eu { display: inline-block; font-size: 11px; background: #fcf0f1; color: #d63638; border-radius: 3px; padding: 1px 6px; margin-left: 4px; }

/* Toggle-Switch */
.psn-cc-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.psn-cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.psn-cc-slider { position: absolute; inset: 0; background: #c3c4c7; border-radius: 24px; transition: background 0.2s; cursor: pointer; }
.psn-cc-slider::before { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.psn-cc-switch input:checked + .psn-cc-slider { background: var(--psn-cc-primary); }
.psn-cc-switch input:checked + .psn-cc-slider::before { transform: translateX(20px); }
/* „Notwendig" = immer an + disabled: klarer, volldeckender Look statt blasser
   opacity (die ließ den Knopf durchscheinen/„durcheinander" wirken). */
.psn-cc-switch input:disabled + .psn-cc-slider { cursor: default; }
.psn-cc-switch input:checked:disabled + .psn-cc-slider { background: #9cc4e6; }
.psn-cc-switch input:disabled + .psn-cc-slider::before { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }

/* ---------- Akkordion (Kategorien einklappbar) ---------- */
.psn-cc-cat-toggle { flex: 1; display: flex; gap: 14px; align-items: center; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.psn-cc-cat-toggle:focus-visible { outline: 2px solid var(--psn-cc-primary); outline-offset: 3px; border-radius: 8px; }
/* Aufklapp-Pfeil: größer + eigener runder Hover-Bereich, damit klar als Klickziel
   erkennbar (vorher 12px, kaum zu treffen). Die ganze Kopfzeile bleibt klickbar. */
.psn-cc-caret { margin-left: auto; flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #646970; font-size: 28px; line-height: 1; transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease; }
.psn-cc-cat-toggle:hover .psn-cc-caret { background: #eef1f5; color: var(--psn-cc-primary); }
.psn-cc-cat.is-open .psn-cc-caret { transform: rotate(180deg); }
/* Mobil: Pfeil + Tippflaeche groesser (die ganze Kopfzeile bleibt ohnehin tippbar). */
@media (max-width: 600px) { .psn-cc-caret { width: 44px; height: 44px; font-size: 32px; } }
.psn-cc-cat-desc { display: block; }
.psn-cc-prov-name { background: transparent; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; font-size: 13px; color: var(--psn-cc-primary); cursor: pointer; text-align: left; }
.psn-cc-prov-name:hover { text-decoration: underline; }

/* ---------- Listen-Ansichten (Anbieter / Cookies) ---------- */
.psn-cc-vtitle { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.psn-cc-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.psn-cc-rowlink { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 30px; text-align: left; background: #fff; border: 1px solid #e7e9ee; border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease; }
.psn-cc-rowlink:hover { border-color: var(--psn-cc-primary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }
.psn-cc-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.psn-cc-row-name { font-size: 14px; font-weight: 600; color: #1d2327; }
.psn-cc-row-sub { font-size: 12px; color: #646970; }
.psn-cc-row-ico { flex-shrink: 0; display: inline-flex; align-items: center; color: #9aa0a6; }
.psn-cc-rowlink:hover .psn-cc-row-ico { color: var(--psn-cc-primary); }

/* Zustand je Cookie-Zeile: greift der Eintrag gerade oder nicht? Sitzt links
   neben der Lupe. Die Liste bleibt vollstaendig (Informationspflicht), das
   Icon zeigt nur, was von der aktuellen Entscheidung gedeckt ist. */
.psn-cc-row-state {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;   /* rechtsbuendig, direkt vor der Lupe */
    margin-right: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.psn-cc-row-state.is-on { color: #1e8e3e; }
.psn-cc-row-state.is-off { color: #9aa0a6; }
@media (max-width: 480px) {
    /* Auf schmalen Displays nur das Zeichen — der Name der Zeile hat Vorrang. */
    .psn-cc-row-state-txt { display: none; }
}

/* Abschnitts-Beschriftung über einer Liste (z. B. „Eingesetzte Cookies /
   Speichereinträge"). Bewusst zurückhaltend: Die Liste selbst ist der Inhalt,
   die Zeile darüber nur ihre Bezeichnung. Gleiche Optik wie das Betreiber-Label
   darunter. Bleibt im Markup eine Überschrift — nur die Darstellung ändert sich. */
.psn-cc-listtitle {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #646970;
    margin-bottom: 8px;
}

/* „Betreiber dieser Website" (First-Party) — oben abgesetzt in der Anbieter-Liste. */
.psn-cc-operator { margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #e7e9ee; }
.psn-cc-operator-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #646970; margin-bottom: 8px; }

/* ---------- Detailseiten (Anbieter / Cookie) ---------- */
.psn-cc-detail-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: #3c434a; }
.psn-cc-dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 0; font-size: 13px; }
.psn-cc-dl dt { font-weight: 600; color: #50575e; }
.psn-cc-dl dd { margin: 0; color: #1d2327; word-break: break-word; }
.psn-cc-dl dd a, .psn-cc-provlink { color: var(--psn-cc-primary); }
.psn-cc-provlink { background: transparent; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; text-decoration: underline; }
@media (max-width: 560px) { .psn-cc-dl { grid-template-columns: 1fr; gap: 2px 0; } .psn-cc-dl dt { margin-top: 8px; } }

/* „← Zurück" als dezenter Text-Link oben über Listen/Detailseiten. */
.psn-cc-backlink { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 2px 0; margin: 12px 0 2px; font: inherit; font-size: 14px; font-weight: 600; color: #646970; cursor: pointer; }
.psn-cc-backlink:hover { color: #1d2327; text-decoration: underline; }
/* <code> im Banner neutralisieren (Theme-Styles wie Hintergrund-Chip/Größe ausblenden). */
.psn-cc-modal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.9em; background: none; border: 0; padding: 0; color: inherit; }
.psn-cc-switch input:focus-visible + .psn-cc-slider { outline: 2px solid var(--psn-cc-primary); outline-offset: 2px; }

/* ---------- Platzhalter (geblockte Embeds) ---------- */
.psn-cc-ph {
    display: flex; align-items: center; justify-content: center;
    background: #f0f3f6; border: 1px dashed #b6c4d2; border-radius: 8px;
    color: #1d2327; padding: 20px; box-sizing: border-box;
}
.psn-cc-ph-inner { text-align: center; max-width: 420px; }
.psn-cc-ph-icon { color: var(--psn-cc-primary); line-height: 1; margin-bottom: 8px; }
.psn-cc-ph-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.psn-cc-ph-text { font-size: 13px; color: #50575e; line-height: 1.5; margin-bottom: 14px; }
.psn-cc-ph-btn {
    appearance: none; border: 0; border-radius: 6px; cursor: pointer;
    background: var(--psn-cc-primary); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 18px;
}
.psn-cc-ph-btn:hover { filter: brightness(0.93); }
.psn-cc-ph-link { display: block; margin-top: 10px; }
.psn-cc-ph-info { width: 100%; }
.psn-cc-ph-links { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; margin: 0 0 14px; }
.psn-cc-ph-settings, .psn-cc-ph-privacy { font: inherit; font-size: 12px; color: var(--psn-cc-primary); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.psn-cc-ph-settings:hover, .psn-cc-ph-privacy:hover { filter: brightness(0.9); }

/* ---------- Widerruf-Button ---------- */
.psn-cc-revoke {
    z-index: 2147483000; width: 46px; height: 46px; border-radius: 50%;
    background: var(--psn-cc-primary); color: #fff; border: 0; cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.psn-cc-revoke:hover { filter: brightness(0.92); }
.psn-cc-revoke:focus-visible { outline: 3px solid rgba(0,0,0,0.35); outline-offset: 2px; }

/* ---------- Mobile-Sheet ---------- */
@media (max-width: 600px) {
    .psn-cc-modal {
        left: 0; right: 0; bottom: 0; top: auto; transform: none;
        width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; max-height: 92dvh;
        animation: psnCcSheetUp 0.28s ease;
    }
    .psn-cc-buttons { flex-direction: column; }
    .psn-cc-btn { width: 100%; }
}

/* ---------- Shortcode-Akkordions ---------- */
.psn-cc-list { margin: 16px 0; }
.psn-cc-item { border: 1px solid #e2e4e7; border-radius: 6px; margin-bottom: 8px; background: #fff; }
.psn-cc-item > summary { cursor: pointer; padding: 12px 14px; font-size: 15px; list-style: none; }
.psn-cc-item > summary::-webkit-details-marker { display: none; }
.psn-cc-item > summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; transition: transform 0.15s; }
.psn-cc-item[open] > summary::before { transform: rotate(90deg); }
.psn-cc-tag { display: inline-block; font-size: 12px; color: #50575e; background: #f0f0f1; border-radius: 3px; padding: 1px 8px; margin-left: 6px; }
.psn-cc-body { padding: 4px 16px 14px; }
.psn-cc-body dl { display: grid; grid-template-columns: minmax(120px, 28%) 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.psn-cc-body dt { color: #646970; font-weight: 600; }
.psn-cc-body dd { margin: 0; }

/* ---------- Anbietergruppen (Ebene 2: eine Gruppe = ein Schalter) ---------- */
.psn-cc-group-name { background: transparent; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; font-size: 13px; color: var(--psn-cc-primary); cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 6px; }
.psn-cc-group-name:hover { text-decoration: underline; }
.psn-cc-group-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #50575e; background: #eef1f5; border-radius: 4px; padding: 1px 6px; }
.psn-cc-group-name:hover .psn-cc-group-badge { text-decoration: none; }

/* Inline-Platzhalter-Bild (geblockte Embeds, optional — Anbieter ODER Gruppe) */
.psn-cc-ph-img { max-width: 100%; max-height: 160px; width: auto; border-radius: 6px; margin: 0 auto 12px; display: block; object-fit: cover; }

/* ---------- Schwebender Gruppen-Hinweis (fixed, ankerunabhaengig) ---------- */
/* Zentriert im Sichtfenster + prominent. Container ist klick-durchlaessig
   (pointer-events:none), nur die Kaesten fangen Klicks -> Seite bleibt bedienbar. */
.psn-cc-fhints { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147482000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; pointer-events: none; }
.psn-cc-fhint { position: relative; pointer-events: auto; width: min(440px, 100%); background: #fff; border: 1px solid #e2e4e7; border-left: 5px solid var(--psn-cc-primary); border-radius: 12px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.20); padding: 20px 22px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1d2327; animation: psnCcSheetUp 0.28s ease; }
@media (prefers-reduced-motion: reduce) { .psn-cc-fhint { animation: none; } }
.psn-cc-fhint-x { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border: 0; background: transparent; color: #9aa0a6; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 50%; padding: 0; }
.psn-cc-fhint-x:hover { background: #f0f0f1; color: #1d2327; }
.psn-cc-fhint-img { max-width: 100%; max-height: 90px; width: auto; border-radius: 6px; margin-bottom: 10px; display: block; object-fit: cover; }
.psn-cc-fhint-text { font-size: 14px; line-height: 1.55; color: #3c434a; margin: 2px 18px 14px 0; }
.psn-cc-fhint-btn { appearance: none; border: 0; border-radius: 8px; background: var(--psn-cc-primary); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer; }
.psn-cc-fhint-btn:hover { filter: brightness(0.94); }
.psn-cc-fhint-title { font-size: 15px; font-weight: 700; color: #1d2327; margin: 0 18px 4px 0; }
/* Zwei-Button-Zeile im schwebenden Hinweis: links [Akzeptieren] gruen, rechts
   [Ablehnen] rot. Nutzt dieselben, im Design-Tab konfigurierbaren Farbvariablen
   wie die Banner-Buttons -> Hinweis bleibt automatisch konsistent zum Banner. */
.psn-cc-fhint-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; flex-wrap: wrap; }
.psn-cc-fhint-accept { background: var(--psn-cc-accept); }
.psn-cc-fhint-decline { background: var(--psn-cc-reject); }
.psn-cc-fhint .psn-cc-ph-text { margin-bottom: 8px; }
.psn-cc-fhint .psn-cc-ph-links { justify-content: flex-start; margin-bottom: 12px; }
@media (max-width: 600px) { .psn-cc-fhints { padding: 12px; } }

/* Abgelehnter Dienst als kleiner Chip — der Weg zurück.
   Lehnt jemand einen schwebenden Hinweis ab, verschwand der Dienst bisher
   spurlos. Bei einem Chat ist das eine Sackgasse: Sein Bedienelement gehört
   selbst zum blockierten Dienst, es gibt also nichts mehr zum Anklicken.
   Der Chip hält ihn erreichbar, nimmt aber kaum Platz und drängt sich nicht auf.
   Sitzt unten rechts, wo solche Widgets üblicherweise sitzen. */
/* Position kommt per Inline-Style vom Datenschutz-Button (Design-Tab) —
   hier nur der Fallback, falls dort nichts gesetzt ist. */
.psn-cc-fminis {
    position: fixed;
    left: 20px;
    bottom: 76px;
    z-index: 2147481900;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    pointer-events: auto;
}
.psn-cc-fmini {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 240px;
    padding: 7px 13px;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.13);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #3c434a;
    cursor: pointer;
    opacity: 0.96;
    transition: opacity 0.15s, box-shadow 0.15s;
}
.psn-cc-fmini:hover { opacity: 1; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); }
.psn-cc-fmini-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--psn-cc-primary);
    flex-shrink: 0;
}
.psn-cc-fmini-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
    .psn-cc-fminis { right: 12px; bottom: 12px; }
    .psn-cc-fmini { max-width: 165px; }
}