/* Info Button 1.1.1 — follows the Cloes Welt menu (cwnav) design; scoped to this plugin. */
.isinfo-root {
    --ink: #16191A;
    --body: #3A4042;
    --muted: #6B7270;
    --line: #E6E6E4;
    --wash: #F4F4F2;
    --mint: #9BC3B1;
    --euca: #3D7A66;
    --paper: #FFFFFF;
    --isinfo-x: 24px;
    --isinfo-y: 94px;
    --isinfo-y-md: 86px;
    --isinfo-y-sm: 86px;
    /* No z-index here: the fixed children sort against the menu on their own. */
    font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.isinfo-root *, .isinfo-root *::before, .isinfo-root *::after { box-sizing: border-box; }
.isinfo-root button { appearance: none; font-family: inherit; box-shadow: none; }
.isinfo-root .isinfo-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Trigger: same pill as the ENTDECKEN button (height, padding, gap, tracking, shadow). */
.isinfo-root .isinfo-trigger {
    position: fixed;
    z-index: 99997; /* below the menu button (99998) and its overlay (99999) */
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: auto;
    min-width: 0;
    height: 58px;
    min-height: 0;
    margin: 0;
    padding: 0 26px 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    max-width: calc(100vw - 2 * var(--isinfo-x));
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    visibility: hidden;
    transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.isinfo-root[data-isinfo-ready="1"] .isinfo-trigger { visibility: visible; }
.isinfo-root.is-open .isinfo-trigger { visibility: hidden; }
.isinfo-root .isinfo-trigger:hover { transform: translateY(-2px); }
.isinfo-root .isinfo-trigger:focus-visible { outline: 2px solid var(--euca); outline-offset: 3px; }
.isinfo-root .isinfo-icon { flex: 0 0 auto; display: block; }
.isinfo-root .isinfo-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.isinfo-root[data-isinfo-style="dark"] .isinfo-trigger {
    background: var(--ink);
    color: #FFFFFF;
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.isinfo-root[data-isinfo-style="dark"] .isinfo-icon { color: var(--mint); }

.isinfo-root[data-isinfo-style="light"] .isinfo-trigger {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.isinfo-root[data-isinfo-style="light"] .isinfo-icon { color: var(--euca); }

/* Placement: side and edge come from the plugin, the stylesheet only reads them. */
.isinfo-root[data-isinfo-side="right"] .isinfo-trigger { right: var(--isinfo-x); left: auto; }
.isinfo-root[data-isinfo-side="left"] .isinfo-trigger { left: var(--isinfo-x); right: auto; }
.isinfo-root[data-isinfo-edge="top"] .isinfo-trigger { top: var(--isinfo-y); bottom: auto; }
.isinfo-root[data-isinfo-edge="bottom"] .isinfo-trigger { bottom: var(--isinfo-y); top: auto; }

/* Panel: same centred card as the Cloes Welt menu. */
.isinfo-root .isinfo-panel {
    position: fixed;
    inset: 0;
    width: min(680px, calc(100% - 2 * clamp(12px, 3vw, 40px)));
    max-width: none;
    height: fit-content;
    max-height: min(88vh, 860px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 40px 120px rgba(0,0,0,.30);
    font: inherit;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
    overscroll-behavior: contain;
}
.isinfo-root .isinfo-panel:not([open]) { display: none !important; }
.isinfo-root .isinfo-panel[open] { display: flex; flex-direction: column; animation: isinfo-in .18s ease-out both; }
.isinfo-root .isinfo-panel::backdrop { background: rgba(18,18,18,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* The non-modal fallback has no ::backdrop, so it dims the page itself. */
.isinfo-root .isinfo-panel.isinfo-fallback { z-index: 100000; box-shadow: 0 40px 120px rgba(0,0,0,.30), 0 0 0 100vmax rgba(18,18,18,.45); }
@keyframes isinfo-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.isinfo-root .isinfo-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px clamp(18px, 2.4vw, 28px);
    border-bottom: 1px solid var(--line);
}
.isinfo-root .isinfo-title {
    margin: 0;
    padding: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-transform: none;
}
.isinfo-root .isinfo-dot { color: #7FA898; }
.isinfo-root .isinfo-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    margin: 0;
    padding: 0 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--wash);
    color: var(--ink);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.isinfo-root .isinfo-close:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.isinfo-root .isinfo-close svg { flex: 0 0 auto; display: block; }
.isinfo-root .isinfo-close:focus-visible { outline: 2px solid var(--euca); outline-offset: 3px; }

.isinfo-root .isinfo-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: clamp(22px, 3vw, 36px) clamp(18px, 3.4vw, 44px) clamp(26px, 3.4vw, 40px);
}

/* Reading typography: Archivo for text, Instrument Serif for the lead and headings, as in the menu. */
.isinfo-root .isinfo-content { max-width: 64ch; color: var(--body); font-size: 16px; line-height: 1.65; font-weight: 400; }
.isinfo-root .isinfo-content :is(p, ul, ol, li, blockquote, span, em) { color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; }
.isinfo-root .isinfo-content > :first-child { margin-top: 0; }
.isinfo-root .isinfo-content > :first-child:is(p) { color: var(--ink); font-family: 'Instrument Serif', Georgia, serif; font-size: 24px; line-height: 1.34; letter-spacing: 0; }
.isinfo-root .isinfo-content > :first-child:is(p) strong { font-weight: 400; } /* the serif has no bold cut */
.isinfo-root .isinfo-content p { margin: 0 0 14px; }
.isinfo-root .isinfo-content h2,
.isinfo-root .isinfo-content h3 { margin: 32px 0 10px; padding: 0; color: var(--ink); font-family: 'Instrument Serif', Georgia, serif; font-size: 26px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.isinfo-root .isinfo-content h4,
.isinfo-root .isinfo-content h5,
.isinfo-root .isinfo-content h6 { margin: 22px 0 8px; color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.isinfo-root .isinfo-content ul,
.isinfo-root .isinfo-content ol { margin: 0 0 14px; padding: 0 0 0 1.15em; }
.isinfo-root .isinfo-content ul { list-style: disc outside; }
.isinfo-root .isinfo-content ol { list-style: decimal outside; }
.isinfo-root .isinfo-content li { display: list-item; list-style: inherit; margin: 0 0 9px; padding-left: .2em; }
.isinfo-root .isinfo-content li::before { content: none; }
.isinfo-root .isinfo-content li::marker { color: var(--mint); }
.isinfo-root .isinfo-content strong { color: var(--ink); font-weight: 600; }
.isinfo-root .isinfo-content a { color: var(--euca); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.isinfo-root .isinfo-content a:hover { color: var(--ink); }
.isinfo-root .isinfo-content blockquote { margin: 18px 0; padding: 0 0 0 16px; border-left: 2px solid var(--mint); color: var(--ink); }
.isinfo-root .isinfo-content img { max-width: 100%; height: auto; border-radius: 12px; }

.isinfo-root .isinfo-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 52px;
    margin-top: 22px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--ink);
    color: #FFFFFF !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: transform .16s ease;
}
.isinfo-root .isinfo-cta:hover { transform: translateY(-2px); }
.isinfo-root .isinfo-cta:focus-visible { outline: 2px solid var(--euca); outline-offset: 3px; }

body.isinfo-lock { overscroll-behavior: none; }

/* Same breakpoint as the menu button, which shrinks to 50 px here. */
@media (max-width: 980px) {
    .isinfo-root .isinfo-trigger { height: 50px; padding: 0 18px 0 14px; font-size: 11px; letter-spacing: .14em; }
    .isinfo-root .isinfo-icon { width: 20px; height: 20px; }
    .isinfo-root[data-isinfo-edge="top"] .isinfo-trigger { top: var(--isinfo-y-md); }
    .isinfo-root[data-isinfo-edge="bottom"] .isinfo-trigger { bottom: var(--isinfo-y-md); }
    .isinfo-root .isinfo-panel { max-height: 94vh; }
}
@media (max-width: 782px) {
    .isinfo-root[data-isinfo-edge="top"] .isinfo-trigger { top: var(--isinfo-y-sm); }
    .isinfo-root[data-isinfo-edge="bottom"] .isinfo-trigger { bottom: var(--isinfo-y-sm); }
}
@media (max-width: 600px) {
    .isinfo-root .isinfo-panel { width: calc(100% - 24px); border-radius: 16px; }
    .isinfo-root .isinfo-head { padding: 14px 14px 14px 18px; }
    .isinfo-root .isinfo-title { font-size: 20px; }
    .isinfo-root .isinfo-close { height: 44px; padding: 0 16px; gap: 10px; }
    .isinfo-root .isinfo-content { font-size: 15px; }
    .isinfo-root .isinfo-content > :first-child:is(p) { font-size: 21px; }
    .isinfo-root .isinfo-content h2, .isinfo-root .isinfo-content h3 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
    .isinfo-root *, .isinfo-root *::before, .isinfo-root *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
    .isinfo-root .isinfo-trigger, .isinfo-root .isinfo-close, .isinfo-root .isinfo-cta { border: 1px solid ButtonText; }
    .isinfo-root .isinfo-panel { background: Canvas; }
}
@media print { .isinfo-root { display: none !important; } }