/*!
 * SGS 4x4 – Kleine Bedienelemente auf allen Seiten (Paket Tooltips 1.0.0 · 09.10.2026 · Child-Template SGS2026)
 * Wird auf jeder Seite geladen (auch im Bestellvorgang), deshalb ohne Variablen aus sgs-header.css.
 * Tooltips (Bootstrap 4 / Popper, z. B. „Auf den Wunschzettel“, „Auf die Vergleichsliste“, Info-Symbole):
 * Das Theme zeichnet sie als weißen Kasten mit schwarzem Rahmen, eckig, 90 % deckend, der Pfeil sitzt daneben.
 * Neu: dunkel (#161718) wie der SGS-Kopf, weiße Schrift, 8px Ecken, weicher Schatten, kleiner Pfeil, Einblenden mit leichtem Zoom.
 */
div.tooltip { margin: 0; padding: 0; font-family: Raleway, "Helvetica Neue", Arial, sans-serif; pointer-events: none; }
div.tooltip.show { opacity: 1; }
div.tooltip.fade { transition: opacity .16s ease; }
.tooltip .tooltip-inner {
    max-width: 260px; padding: 7px 11px; border: 0; border-radius: 8px; background: #161718; color: #fff;
    font: 600 12.5px/1.35 Raleway, "Helvetica Neue", Arial, sans-serif; letter-spacing: .01em; text-align: center;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
    transform: scale(.94); transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.tooltip.show .tooltip-inner { transform: none; }

/* Pfeil: 12 × 6px, 2px Luft zum Element */
.tooltip .arrow { margin: 0; width: 12px; height: 6px; }
.tooltip .arrow::before { border-color: transparent; border-style: solid; }
.tooltip .arrow::after { content: none !important; display: none !important; }   /* weiße Pfeilfüllung des Themes */

.tooltip.bs-tooltip-top, .tooltip.bs-tooltip-auto[x-placement^="top"] { padding: 8px 0; }
.tooltip.bs-tooltip-top .arrow, .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow { top: auto; bottom: 2px; }
.tooltip.bs-tooltip-top .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before { top: 0; bottom: auto; left: 0; right: auto; border-width: 6px 6px 0; border-top-color: #161718; }

.tooltip.bs-tooltip-bottom, .tooltip.bs-tooltip-auto[x-placement^="bottom"] { padding: 8px 0; }
.tooltip.bs-tooltip-bottom .arrow, .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow { top: 2px; bottom: auto; }
.tooltip.bs-tooltip-bottom .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { top: auto; bottom: 0; left: 0; right: auto; border-width: 0 6px 6px; border-bottom-color: #161718; }

.tooltip.bs-tooltip-left, .tooltip.bs-tooltip-auto[x-placement^="left"] { padding: 0 8px; }
.tooltip.bs-tooltip-left .arrow, .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow { left: auto; right: 2px; width: 6px; height: 12px; }
.tooltip.bs-tooltip-left .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before { top: 0; left: 0; right: auto; border-width: 6px 0 6px 6px; border-left-color: #161718; }

.tooltip.bs-tooltip-right, .tooltip.bs-tooltip-auto[x-placement^="right"] { padding: 0 8px; }
.tooltip.bs-tooltip-right .arrow, .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow { left: 2px; right: auto; width: 6px; height: 12px; }
.tooltip.bs-tooltip-right .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before { top: 0; left: auto; right: 0; border-width: 6px 6px 6px 0; border-right-color: #161718; }

@media (prefers-reduced-motion: reduce) {
    .tooltip .tooltip-inner { transform: none; transition: none; }
}