/* Info-Icon für Hinweise und Quellenangaben – rhinopaq-Plugin */ /* Wort + Icon: kein Zeilenumbruch dazwischen. Den Wrapper setzt das JavaScript – nicht das PHP, siehe rhino-info-icon.js */ .rq-info-nowrap { white-space: nowrap; } .rq-info { position: relative; margin-left: .2em; white-space: normal; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; } /* Klickfläche mindestens 24 × 24 px, ohne den Zeilenfluss zu verändern */ .rq-info a.rq-info__btn { padding: 5px 4.5px; margin: 0 -4.5px; border: 0; border-radius: 4px; background: none; box-shadow: none; text-decoration: none !important; cursor: help; color: var(--theme-palette-color-1, #3b146f); -webkit-tap-highlight-color: transparent; } .rq-info a.rq-info__btn:focus-visible { outline: 2px solid var(--theme-palette-color-1, #3b146f); outline-offset: 0; } .rq-info__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Kreis mit Nummer – dieselbe Nummer steht im Verzeichnis „Quellen und Hinweise“ */ .rq-info__kreis { display: inline-block; overflow: hidden; /* overflow: Grundlinie = Unterkante, damit vertical-align exakt greift */ box-sizing: border-box; height: 15px; min-width: 15px; padding: 0 3px; border: 1.5px solid currentColor; border-radius: 999px; vertical-align: calc(.36em - 7.5px); /* Kreismitte auf halber Versalhöhe = optische Zeilenmitte */ text-align: center; text-indent: 0; line-height: 0; transition: background-color .12s, color .12s; } .rq-info__nr { display: block; font: 700 10px/12px Lato, system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0; } .rq-info a.rq-info__btn:hover .rq-info__kreis, .rq-info a.rq-info__btn:focus-visible .rq-info__kreis, .rq-info.is-open .rq-info__kreis { background: var(--theme-palette-color-1, #3b146f); border-color: var(--theme-palette-color-1, #3b146f); color: #fff; } /* Große Kennzahlen: Kreis hochgestellt (Oberkante auf Versalhöhe). Im Block unter „Zusätzliche CSS-Klasse“ rq-gross eintragen. */ .rq-gross .rq-info__kreis { vertical-align: calc(.72em - 15px); } /* Blase */ .rq-info__tip { display: none; position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); /* ohne JavaScript: unter dem Icon */ width: max-content; max-width: min(21rem, calc(100vw - 24px)); box-sizing: border-box; padding: 11px 14px; border-radius: 6px; background: var(--theme-palette-color-1, #3b146f); color: #fff; font-family: Lato, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; font-weight: 400; font-style: normal; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: left; text-indent: 0; white-space: normal; box-shadow: 0 10px 28px rgba(30, 10, 60, .28); } .rq-info__tip::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* Brücke: Maus kann hineinwandern */ /* Mit JavaScript hängt die geöffnete Blase an und wird dort positioniert – so schneidet kein Container sie ab. */ .rq-info__tip.is-portal { top: 0; left: 0; bottom: auto; transform: none; z-index: 9999; } .rq-info__tip.is-open { display: block; } .rq-info__tip--oben::before { top: auto; bottom: -10px; } html:not(.rq-info-js) .rq-info:hover .rq-info__tip, html:not(.rq-info-js) .rq-info:focus-within .rq-info__tip { display: block; } .rq-info__tip > span { display: block; } .rq-info__tip a.rq-info__link, .rq-info__tip a.rq-info__link:hover { display: inline-block; margin-top: 7px; color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, .6); } .rq-info__tip a.rq-info__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Verzeichnis „Quellen und Hinweise“ ganz unten unter dem Footer – in den Farben des Blocksy-Footers */ aside.rq-info-liste { margin: 0; padding: 0 0 28px; background: var(--theme-palette-color-6, #edeff2); color: var(--theme-palette-color-4, #111518); font-size: 13px; line-height: 1.55; } :where(.rq-info-liste__inner) { width: min(100% - 40px, 1290px); margin-inline: auto; } /* nur ohne Blocksy (.ct-container) */ .rq-info-liste__inner { border-top: 1px solid var(--theme-palette-color-5, #e2e7ed); padding-top: 18px; } .rq-info-liste__titel { margin: 0 0 .5em; font-size: 15px; font-weight: 700; color: inherit; } .rq-info-liste ol { margin: 0; padding: 0; list-style: none; } .rq-info-liste li { margin: 0 0 .35em; padding-left: 22px; text-indent: -22px; scroll-margin-top: 120px; } .rq-info-liste li .rq-info__kreis { margin-right: 7px; color: var(--theme-palette-color-1, #3b146f); } .rq-info-liste li:target { background: var(--theme-palette-color-8, #fff); outline: 6px solid var(--theme-palette-color-8, #fff); } .rq-info-liste a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .rq-info-liste a:hover { color: var(--theme-palette-color-2, #3b146f); } @media print { .rq-info, .rq-info__tip { display: none !important; } } @media (prefers-reduced-motion: reduce) { .rq-info__kreis { transition: none; } }