/* ============================================================ KI-BILDKENNZEICHNUNG — Art. 50 EU-KI-Verordnung (EU AI Act) ------------------------------------------------------------ Ein dezentes (i)-Chip in der Bildecke. Bei Hover (Desktop) oder Tap/Klick (Touch/Tastatur) öffnet sich ein kleines Pop-over mit dem gesetzlich geforderten Transparenzhinweis. Farben, Font, Radius, Schatten und Tempo kommen aus 01-tokens.css — das Chip fügt sich damit zu 100 % ins Design. ⛔ Das Pop-over wird per JS an gehängt (07-ki-badge.js), damit es NICHT von `overflow:hidden`-Bildrahmen oder von transform-Reveal-Animationen abgeschnitten wird. Das CSS hier stylt es nur — positioniert wird per JS. ============================================================ */ /* Der Bildcontainer. Muss position:relative sein, damit das Chip in der Ecke sitzt. Sonst greift die Komponente nicht ein. */ .ki-media { position: relative; display: block; } /* ---------- Das (i)-Chip ---------- */ .ki-badge { position: absolute; top: .6rem; right: .6rem; z-index: 6; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; color: var(--hohn-gruen, #40564E); /* Glassmorphism: halbtransparentes Weiß + Weichzeichner. Der Fallback-Hintergrund ist opak genug, dass das (i) auch ohne backdrop-filter lesbar bleibt (ältere Browser). */ background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(9px) saturate(1.4); backdrop-filter: blur(9px) saturate(1.4); box-shadow: 0 1px 3px rgba(28, 34, 31, .20), inset 0 0 0 1px rgba(255, 255, 255, .55); transition: background var(--tempo, .35s), transform var(--tempo, .35s), box-shadow var(--tempo, .35s); line-height: 0; -webkit-tap-highlight-color: transparent; } .ki-badge svg { width: 1.05rem; height: 1.05rem; display: block; } @media (hover: hover) { .ki-badge:hover { background: rgba(255, 255, 255, .82); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(28, 34, 31, .24), inset 0 0 0 1px rgba(255, 255, 255, .70); } } .ki-badge:focus-visible { outline: 2px solid var(--hohn-gruen, #40564E); outline-offset: 2px; background: rgba(255, 255, 255, .82); } /* Chip mit geöffnetem Pop-over: sichtbar „aktiv". */ .ki-badge[aria-expanded="true"] { background: rgba(255, 255, 255, .90); box-shadow: 0 4px 14px rgba(28, 34, 31, .24), inset 0 0 0 1px rgba(255, 255, 255, .75); } /* ---------- Das Pop-over (per JS an ) ---------- */ .ki-pop { position: absolute; z-index: 9999; max-width: min(84vw, 300px); margin: 0; padding: .85rem .95rem; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); color: var(--hohn-tinte, #1C221F); border-radius: var(--radius-lg, 4px); box-shadow: var(--shadow-lg, 0 12px 48px rgba(28, 34, 31, .14)), inset 0 0 0 1px rgba(255, 255, 255, .60); font-family: var(--schrift, "Inter", system-ui, sans-serif); opacity: 0; transform: scale(.92) translateY(4px); transform-origin: top right; transition: opacity var(--tempo, .35s), transform var(--tempo, .35s); pointer-events: none; } .ki-pop[data-open="true"] { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } .ki-pop__titel { display: flex; gap: .4rem; align-items: center; margin: 0 0 .35rem; font-size: var(--fs-klein, .9rem); font-weight: 700; letter-spacing: var(--sperr-eng, .04em); color: var(--hohn-gruen, #40564E); } .ki-pop__titel svg { width: 1rem; height: 1rem; flex: 0 0 auto; } .ki-pop__text { margin: 0; font-size: var(--fs-mikro, .75rem); line-height: 1.55; color: var(--hohn-grau, #5A5C5E); } /* ============================================================ BARRIEREFREIHEITS-MODI (Klassen vom A11y-Widget auf ) ============================================================ */ /* Kontrast erhöhen: kein Glas, solide Flächen, harter Rahmen. */ html.a11y-contrast .ki-badge { background: #fff; color: var(--hohn-tinte, #1C221F); box-shadow: 0 0 0 2px var(--hohn-tinte, #1C221F); -webkit-backdrop-filter: none; backdrop-filter: none; } html.a11y-contrast .ki-pop { background: #fff; color: var(--hohn-tinte, #1C221F); box-shadow: 0 0 0 2px var(--hohn-tinte, #1C221F), var(--shadow-lg); -webkit-backdrop-filter: none; backdrop-filter: none; } html.a11y-contrast .ki-pop__titel { color: var(--hohn-tinte, #1C221F); } html.a11y-contrast .ki-pop__text { color: var(--hohn-tinte, #1C221F); } /* Animationen reduzieren: sofort ein/aus, kein Weichzeichner-Ruckeln. */ html.a11y-nomotion .ki-badge, html.a11y-nomotion .ki-pop { transition: none !important; } @media (prefers-reduced-motion: reduce) { .ki-badge, .ki-pop { transition: none; } } /* Kein backdrop-filter (alte Browser): Flächen weiter aufhellen, damit Text sicher lesbar bleibt. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ki-badge { background: rgba(255, 255, 255, .92); } .ki-pop { background: rgba(255, 255, 255, .98); } }