/* ==========================================================
   KARISWA INFO-SYMBOLSYSTEM
   Transparente Grafiken, eng beschnitten, nur Symbolfläche klickbar.
   Passend zu den aktuellen Klassen:
   kariswa-footnote = 13px
   kariswa-text     = 20px
   kariswa-subhead  = 48px
   ========================================================== */

.kariswa-info {
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-color: transparent;
    vertical-align: -0.12em;
    margin-left: 0.18em;
    cursor: pointer;
    user-select: none;
}

.kariswa-info.info-footnote {
    width: 13px;
    height: 13px;
    background-image: url("../Pic/kariswa-info-footnote.png");
}

.kariswa-info.info-text {
    width: 20px;
    height: 20px;
    background-image: url("../Pic/kariswa-info-text.png");
}

.kariswa-info.info-subhead {
    width: 48px;
    height: 48px;
    background-image: url("../Pic/kariswa-info-subhead.png");
}

.kariswa-info::after {
    content: attr(data-info);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    min-width: 180px;
    max-width: 320px;
    padding: 7px 9px;
    background: rgba(50,50,50,.95);
    color: #fff;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
    z-index: 999999;
}

.kariswa-info:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================
   KARISWA EXTERNE LINKS – Website, Instagram, Facebook
   Ergänzung ohne Änderung der bestehenden Info-Symbole.
   Verwendung: <a class="kariswa-link link-instagram info-text"
                 href="https://..." target="_blank"
                 rel="noopener noreferrer"
                 title="Instagram öffnen" aria-label="Instagram öffnen"></a>
   ========================================================== */

.kariswa-link {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    vertical-align: -0.12em;
    margin-left: 0.18em;
    background-color: transparent;
    color: maroon;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
}

.kariswa-link.info-footnote { width: 13px; height: 13px; }
.kariswa-link.info-text     { width: 20px; height: 20px; }
.kariswa-link.info-subhead  { width: 32px; height: 32px; }

.kariswa-link::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

.kariswa-link:hover,
.kariswa-link:focus-visible { color: #a00000; }
.kariswa-link:focus-visible { outline: 2px solid maroon; outline-offset: 3px; }

.kariswa-link.link-website::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c-3%203-4%206-4%209s1%206%204%209M12%203c3%203%204%206%204%209s-1%206-4%209%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%2012h18M12%203c-3%203-4%206-4%209s1%206%204%209M12%203c3%203%204%206%204%209s-1%206-4%209%22%2F%3E%3C%2Fsvg%3E");
}

.kariswa-link.link-instagram::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2217.6%22%20cy%3D%226.5%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2217.6%22%20cy%3D%226.5%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
}

.kariswa-link.link-facebook::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M14.6%2021v-8.1h2.7l.4-3.2h-3.1V7.65c0-.93.26-1.56%201.59-1.56H18V3.23A24%2024%200%200%200%2015.55%203c-2.43%200-4.1%201.48-4.1%204.2v2.5H8.7v3.2h2.75V21z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M14.6%2021v-8.1h2.7l.4-3.2h-3.1V7.65c0-.93.26-1.56%201.59-1.56H18V3.23A24%2024%200%200%200%2015.55%203c-2.43%200-4.1%201.48-4.1%204.2v2.5H8.7v3.2h2.75V21z%22%2F%3E%3C%2Fsvg%3E");
}

/* ==========================================================
   ORIGINALFARBEN DER EXTERNEN LINKS
   Nur Link-Symbole; KARISWA-Infopunkte bleiben unverändert.
   ========================================================== */
.kariswa-link.link-website { color: #1769aa; }
.kariswa-link.link-website:hover { color: #0a4c87; }

.kariswa-link.link-instagram::before {
    background-color: transparent;
    background-image: linear-gradient(35deg, #feda75 0%, #fa7e1e 22%, #d62976 52%, #962fbf 78%, #4f5bd5 100%);
}
.kariswa-link.link-instagram:hover::before { opacity: .82; }

.kariswa-link.link-facebook::before {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2211%22%20fill%3D%22%231877F2%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M13.8%2022v-8.4h2.8l.42-3.28H13.8V8.23c0-.95.26-1.6%201.64-1.6h1.75V3.7a23%2023%200%200%200-2.55-.13c-2.52%200-4.25%201.54-4.25%204.36v2.39H7.55v3.28h2.84V22z%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-mask-image: none;
    mask-image: none;
}
.kariswa-link.link-facebook:hover::before { opacity: .82; }

/* ==========================================================
   KARISWA INFO: DATEITYP-SYMBOLE (automatisch nach data-Attribut)
   Bestehende Info- und externe Link-Symbole bleiben erhalten.
   Prioritaet bei mehreren Attributen: Video > PDF > Audio.
   ========================================================== */

.kariswa-info[data-audio] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232563a6%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%209v6h4l5%204V5L8%209zM16%209a5%205%200%200%201%200%206M18.5%206a9%209%200%200%201%200%2012%22%2F%3E%3C%2Fsvg%3E") !important;
}

.kariswa-info[data-pdf] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b4232d%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202.5h8l4%204V21H6z%22%2F%3E%3Cpath%20d%3D%22M14%202.5V7h4M9%2011h6M9%2014h6M9%2017h4%22%2F%3E%3C%2Fsvg%3E") !important;
}

.kariswa-info[data-video] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%23800000%22%20stroke-width%3D%221.9%22%2F%3E%3Cpath%20d%3D%22M9.5%207.5%2017%2012l-7.5%204.5z%22%20fill%3D%22%23800000%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* ==========================================
   KARISWA – Individuelle Symbolgrößen
   ========================================== */

/* Normales Info-Symbol */
.kariswa-info.info-text:not([data-pdf]):not([data-audio]):not([data-video]) {
    width: 20px;
    height: 20px;
}

/* PDF-Symbol */
.kariswa-info.info-text[data-pdf] {
    width: 24px;
    height: 24px;
}

/* Audio-Symbol */
.kariswa-info.info-text[data-audio] {
    width: 24px;
    height: 24px;
}

/* Video-Symbol */
.kariswa-info.info-text[data-video] {
    width: 24px;
    height: 24px;
}