/* =============================================================================
   Interaktive Elemente v2 — sebastianklingel.com (09/2026)
   Satelliten-Explorer (iv-sat), KI-Zitat-Umschalter (iv-quote), Keyword-Vorschau (iv-kw),
   Vorher-nachher-Schieber (iv-slider). Nutzt die --hs-Variablen aus startseite.css.
   Gemeinsame Bausteine: Fensterleiste (iv-winbar), Segment-Umschalter (iv-seg), Kicker.
   ============================================================================= */

.iv [hidden] { display: none !important; }
.iv .fn-head p { max-width: 660px; margin-left: auto; margin-right: auto; }
.iv .fn-center { margin: 34px 0 0; }
.iv-foot { text-align: center; color: var(--hs-faded); font-size: .82rem; margin: 20px 0 0; }
.iv-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--hs-turq); }
.iv-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.iv-kicker--green { color: #15803d; }
.iv-kicker--red { color: #c2410c; }

@keyframes iv-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes iv-pop { 0% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes iv-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes iv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes iv-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes iv-flow { from { background-position: 0 0; } to { background-position: -24px 0; } }
@keyframes iv-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }

/* --- Fensterleiste (App-, Browser- und Chatfenster) ---------------------------- */
.iv-winbar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: #f7f8fa; border-bottom: 1px solid var(--hs-border); min-height: 46px; }
.iv-winbar .hs-demo__dots { flex: none; }
.iv-winbar__url { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--hs-border); border-radius: 999px; padding: 5px 14px; font-size: .78rem; color: var(--hs-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-winbar__url i { color: #16a34a; font-size: .68rem; margin-right: 3px; }

/* --- Segment-Umschalter mit gleitendem Daumen ---------------------------------- */
.iv-seg { position: relative; display: inline-grid; grid-template-columns: repeat(var(--n, 2), 1fr); grid-auto-flow: column; max-width: 100%; background: #e9eef2; border-radius: 999px; padding: 5px; isolation: isolate; box-shadow: inset 0 1px 2px rgba(11, 72, 107, .08); }
.iv-seg button { position: relative; z-index: 1; border: 0; background: transparent; font: inherit; font-size: .92rem; font-weight: 700; color: var(--hs-gray); padding: 10px 22px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: color .3s; }
.iv-seg button:hover { color: var(--hs-heading); }
.iv-seg button.is-active { color: #fff; }
.iv-seg button:focus-visible { outline: 3px solid var(--hs-mint); outline-offset: 2px; }
.iv-seg__thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--w, calc((100% - 10px) / var(--n, 2))); border-radius: 999px; background: var(--hs-petrol); box-shadow: 0 8px 18px -8px rgba(11, 72, 107, .75); transform: translateX(var(--x, calc(5px + var(--i, 0) * 100%))); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1); }
.iv-seg.is-static .iv-seg__thumb { transition: none; }
.iv-seg--sm button { font-size: .84rem; padding: 8px 16px; }

/* =============================================================================
   Satelliten-Explorer
   ============================================================================= */
.iv-sat { background: #fff; border-radius: 28px; box-shadow: var(--hs-shadow); border: 1px solid var(--hs-border); overflow: hidden; }
.fn-section--alt .iv-sat { border-color: transparent; }
.iv-sat__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--hs-border); }
.iv-sat__bar-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--hs-gray); display: inline-flex; align-items: center; gap: 8px; }
.iv-sat__bar-label i { color: var(--hs-turq); font-size: .85rem; }
.iv-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-pill { border: 1px solid var(--hs-border); background: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: .88rem; font-weight: 700; color: var(--hs-heading); cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.iv-pill:hover { border-color: var(--hs-turq); color: var(--hs-petrol); }
.iv-pill.is-active { background: var(--hs-petrol); border-color: var(--hs-petrol); color: #fff; box-shadow: 0 8px 18px -10px rgba(11, 72, 107, .8); }
.iv-pill:focus-visible { outline: 3px solid var(--hs-mint); outline-offset: 2px; }

.iv-sat__stage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: center; padding: 22px; }
.iv-sat__space { position: relative; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 44px 20px 20px; min-height: 500px;
    background: radial-gradient(120% 90% at 50% 46%, #155f86 0%, #0B486B 40%, #062a40 100%); }
.iv-sat__space::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .75;
    background-image:
        radial-gradient(1.6px 1.6px at 8% 14%, #fff, transparent), radial-gradient(1.2px 1.2px at 22% 78%, #fff, transparent),
        radial-gradient(1.4px 1.4px at 36% 8%, #fff, transparent), radial-gradient(1px 1px at 58% 92%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 88% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 94% 70%, #fff, transparent),
        radial-gradient(1px 1px at 70% 6%, #fff, transparent), radial-gradient(1.3px 1.3px at 6% 56%, #fff, transparent),
        radial-gradient(1px 1px at 46% 50%, #fff, transparent), radial-gradient(1.4px 1.4px at 80% 88%, #fff, transparent),
        radial-gradient(1px 1px at 16% 36%, #fff, transparent), radial-gradient(1.2px 1.2px at 64% 30%, #fff, transparent); }
.iv-sat__legend { position: relative; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font-size: .72rem; color: rgba(255, 255, 255, .62); padding: 0 12px; }
.iv-sat__legend span { display: inline-flex; align-items: center; gap: 6px; }
.iv-sat__legend i { width: 9px; height: 9px; border-radius: 50%; }
.iv-sat__legend .is-planet { background: #fb923c; box-shadow: 0 0 8px rgba(251, 146, 60, .8); }
.iv-sat__legend .is-sat { background: var(--hs-mint); box-shadow: 0 0 8px rgba(121, 219, 154, .8); }

.iv-orbit { --s: 400px; --r: calc(var(--s) * .38); position: relative; width: var(--s); height: var(--s); max-width: 100%; }
.iv-orbit__ring, .iv-orbit__crowd { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; }
.iv-orbit__ring { width: calc(var(--r) * 2); height: calc(var(--r) * 2); border: 1.5px dashed rgba(255, 255, 255, .24); animation: iv-spin 80s linear infinite; }
.iv-orbit__ring--outer { width: calc(var(--r) * 2.5); height: calc(var(--r) * 2.5); border: 1px solid rgba(255, 255, 255, .07); animation-duration: 140s; animation-direction: reverse; }
.iv-orbit__crowd { width: calc(var(--s) * .56); height: calc(var(--s) * .56); border: 4px dotted rgba(255, 190, 140, .5); animation: iv-spin 40s linear infinite; }
.iv-orbit__beam { position: absolute; left: 50%; top: 50%; width: var(--r); height: 3px; margin-top: -1.5px; transform-origin: 0 50%; transform: rotate(var(--beam-a, -38deg)); transition: transform .7s cubic-bezier(.35, 1.25, .5, 1), opacity .3s; border-radius: 3px; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(121, 219, 154, .95) 0 8px, transparent 8px 12px); animation: iv-flow .9s linear infinite; filter: drop-shadow(0 0 6px rgba(121, 219, 154, .7)); }
.iv-orbit.is-planet .iv-orbit__beam { opacity: 0; }

.iv-orbit__planet { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * .41); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 0; padding: 0 16px; cursor: pointer; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: #fff; font: inherit;
    background: radial-gradient(circle at 32% 26%, #ffd6a5 0%, #fb923c 36%, #c2410c 78%, #9a3412 100%);
    box-shadow: 0 0 0 10px rgba(251, 146, 60, .12), 0 0 0 22px rgba(251, 146, 60, .06), 0 0 70px rgba(251, 146, 60, .5), inset -14px -18px 30px rgba(124, 45, 18, .45);
    transition: box-shadow .3s, transform .3s; }
.iv-orbit__planet::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(251, 146, 60, .6); animation: iv-pulse 2.6s ease-out infinite; pointer-events: none; }
.iv-orbit__planet:hover, .iv-orbit__planet.is-active { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 0 10px rgba(251, 146, 60, .2), 0 0 0 22px rgba(251, 146, 60, .1), 0 0 90px rgba(251, 146, 60, .65), inset -14px -18px 30px rgba(124, 45, 18, .45); }
.iv-orbit__planet.is-active { outline: 3px solid #fff; outline-offset: 5px; }
.iv-orbit__planet:focus-visible { outline: 3px solid var(--hs-mint); outline-offset: 5px; }
.iv-orbit__planet-kicker { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; opacity: .85; }
.iv-orbit__planet-q { font-size: .86rem; line-height: 1.3; font-weight: 800; text-shadow: 0 1px 8px rgba(124, 45, 18, .55); }
.iv-orbit__planet-heat { font-size: .66rem; font-weight: 700; background: rgba(124, 45, 18, .35); border-radius: 999px; padding: 2px 8px; margin-top: 2px; }

.iv-orbit__sat { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 3; font: inherit;
    transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) translate(-50%, -50%); }
.iv-orbit__dot { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(121, 219, 154, .6); color: var(--hs-mint); font-size: 1.05rem; backdrop-filter: blur(4px);
    animation: iv-float 5s ease-in-out infinite; animation-delay: var(--d, 0s); transition: background .3s, color .3s, box-shadow .3s, border-color .3s; }
.iv-orbit__label { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .76rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 4px 11px; transition: background .3s, color .3s; }
.iv-orbit__sat:hover .iv-orbit__dot { background: rgba(121, 219, 154, .25); }
.iv-orbit__sat.is-active .iv-orbit__dot { background: var(--hs-mint); color: #07351f; border-color: transparent; box-shadow: 0 0 0 8px rgba(121, 219, 154, .2), 0 0 36px rgba(121, 219, 154, .7); }
.iv-orbit__sat.is-active .iv-orbit__label { background: #fff; color: var(--hs-petrol); border-color: #fff; }
.iv-orbit__sat:focus-visible { outline: none; }
.iv-orbit__sat:focus-visible .iv-orbit__dot { outline: 3px solid #fff; outline-offset: 4px; }
.iv-orbit__sat--lab-t .iv-orbit__label { top: auto; bottom: calc(100% + 10px); }
.iv-orbit__sat--lab-l .iv-orbit__label { left: auto; right: -4px; transform: none; }
.iv-orbit__sat--lab-r .iv-orbit__label { left: -4px; transform: none; }
@keyframes iv-launch { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
.iv-orbit.is-swap .iv-orbit__sat { animation: iv-launch .6s cubic-bezier(.3, 1.25, .5, 1) both; }
.iv-orbit.is-swap .iv-orbit__sat:nth-of-type(2) { animation-delay: .06s; }
.iv-orbit.is-swap .iv-orbit__sat:nth-of-type(3) { animation-delay: .12s; }
.iv-orbit.is-swap .iv-orbit__planet-q { animation: iv-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }

.iv-sat__detail { padding: 6px 8px 6px 0; }
.iv-sat__detail.is-swap > * { animation: iv-in .45s ease both; }
.iv-sat__detail.is-swap > *:nth-child(2) { animation-delay: .05s; }
.iv-sat__detail.is-swap > *:nth-child(3) { animation-delay: .1s; }
.iv-sat__detail.is-swap > *:nth-child(4) { animation-delay: .15s; }
.iv-sat__detail.is-swap > *:nth-child(5) { animation-delay: .2s; }
.iv-sat__detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.iv-sat__nav { display: flex; gap: 8px; }
.iv-sat__nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hs-border); background: #fff; color: var(--hs-petrol); cursor: pointer; display: grid; place-items: center; font-size: .8rem; transition: background .2s, color .2s, border-color .2s; }
.iv-sat__nav button:hover { background: var(--hs-petrol); color: #fff; border-color: var(--hs-petrol); }
.iv-search { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--hs-border); border-radius: 999px; padding: 14px 20px; box-shadow: var(--hs-shadow-sm); font-weight: 700; color: var(--hs-heading); font-size: 1.04rem; line-height: 1.35; }
.iv-search i { color: #4285f4; flex: none; }
.iv-sat__why { color: var(--hs-text); line-height: 1.7; margin: 18px 0 20px; font-size: .98rem; min-height: 3.4em; }
.iv-meters { display: grid; gap: 14px; }
.iv-meter { --c: #b45309; --bg: #fef3c7; }
.iv-meter[data-meter="wett"][data-level="niedrig"], .iv-meter[data-meter="absicht"][data-level="hoch"] { --c: #15803d; --bg: #dcfce7; }
.iv-meter[data-meter="wett"][data-level="hoch"], .iv-meter[data-meter="absicht"][data-level="unklar"] { --c: #c2410c; --bg: #ffedd5; }
.iv-meter__top { display: flex; justify-content: space-between; align-items: center; font-size: .86rem; font-weight: 700; color: var(--hs-heading); margin-bottom: 7px; }
.iv-meter__top em { font-style: normal; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--c); background: var(--bg); border-radius: 999px; padding: 3px 10px; transition: color .3s, background .3s; }
.iv-meter__bar { height: 10px; border-radius: 999px; background: #edf0f3; overflow: hidden; }
.iv-meter__bar i { display: block; height: 100%; border-radius: 999px; background: var(--c); transition: width .8s cubic-bezier(.3, 1.1, .4, 1), background .3s; }
.iv-sat__vs { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--hs-alt); color: var(--hs-gray); font-size: .86rem; line-height: 1.5; }
.iv-sat__vs i { color: var(--hs-turq); margin-top: 3px; }

/* =============================================================================
   KI-Zitat-Umschalter
   ============================================================================= */
.iv-quote__switch { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 30px; }
.iv-quote__switch-label { font-size: .8rem; font-weight: 700; color: var(--hs-gray); letter-spacing: .02em; }
.iv-quote__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 56px minmax(0, 1fr); gap: 18px; align-items: center; }
.iv-quote__arrow { width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--hs-petrol); display: grid; place-items: center; box-shadow: var(--hs-shadow-sm); border: 1px solid var(--hs-border); justify-self: center; font-size: 1rem; }
.iv-quote[data-state="praxis"] .iv-quote__arrow { background: var(--hs-mint); color: #07351f; border-color: transparent; }
.iv-doc, .iv-chat { background: #fff; border-radius: 20px; border: 1px solid var(--hs-border); box-shadow: var(--hs-shadow); overflow: hidden; }
.fn-section--alt .iv-doc, .fn-section--alt .iv-chat { border-color: transparent; }
.iv-doc.is-in { animation: iv-in .45s ease both; }
.iv-doc__body { padding: 24px 26px 26px; }
.iv-doc__body h3 { font-size: 1.14rem; line-height: 1.35; margin: 0 0 12px; color: var(--hs-heading); }
.iv-doc__body > p { font-size: .95rem; line-height: 1.8; color: var(--hs-text); margin: 0; }
.iv-mark { background: linear-gradient(transparent 58%, rgba(121, 219, 154, .5) 58%); color: inherit; padding: 0 1px; border-radius: 2px; transition: background .25s; }
.iv-mark sup { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 3px; border-radius: 999px; background: var(--hs-petrol); color: #fff; font-size: .62rem; font-weight: 800; line-height: 1; vertical-align: .5em; }
.iv-mark.is-hot { background: rgba(121, 219, 154, .6); }
.iv-legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.iv-legend li { display: flex; gap: 10px; align-items: flex-start; background: var(--hs-alt); border-radius: 12px; padding: 10px 12px; font-size: .8rem; line-height: 1.45; color: var(--hs-gray); border: 1px solid transparent; transition: border-color .2s, background .2s; cursor: default; }
.iv-legend li.is-hot { border-color: var(--hs-mint); background: #f0fbf4; }
.iv-legend b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--hs-petrol); color: #fff; display: grid; place-items: center; font-size: .7rem; }
.iv-legend strong { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hs-turq); margin-bottom: 1px; }
.iv-verdict { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; font-size: .88rem; line-height: 1.5; font-weight: 600; }
.iv-verdict i { margin-top: 3px; }
.iv-verdict--yes { background: #ecfdf3; color: #166534; }
.iv-verdict--no { background: #fef2f2; color: #991b1b; }

.iv-chat__title { font-size: .84rem; font-weight: 800; color: var(--hs-heading); display: inline-flex; align-items: center; gap: 8px; }
.iv-chat__title i { color: var(--hs-turq); }
.iv-chat__body { padding: 22px; background: linear-gradient(180deg, #fbfcfd, #fff); }
.iv-chat__q { display: flex; justify-content: flex-end; }
.iv-chat__q p { margin: 0; max-width: 88%; background: var(--hs-petrol); color: #fff; border-radius: 18px 18px 4px 18px; padding: 12px 16px; font-size: .92rem; line-height: 1.5; box-shadow: 0 10px 20px -14px rgba(11, 72, 107, .9); }
.iv-chat__a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 16px; }
.iv-chat__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .8rem; background: linear-gradient(135deg, var(--hs-mint), var(--hs-turq)); }
.iv-chat__bubble { background: #fff; border: 1px solid var(--hs-border); border-radius: 4px 18px 18px 18px; padding: 14px 16px; min-height: 64px; }
.iv-chat__text { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--hs-text); }
.iv-chat__src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--hs-border); transition: opacity .3s; }
.iv-chat__src span { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--hs-faded); margin-right: 2px; }
.iv-chat__src em { font-style: normal; font-size: .76rem; font-weight: 600; color: var(--hs-gray); background: var(--hs-alt); border: 1px solid var(--hs-border); border-radius: 999px; padding: 3px 10px; }
.iv-chat__src em.is-you { background: #dcfce7; border-color: #86efac; color: #166534; font-weight: 800; }
.iv-chat__src em.is-you i { font-size: .66rem; }
.iv-chat__result { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 11px 14px; border-radius: 12px; font-size: .9rem; font-weight: 800; }
.iv-chat__result.is-yes { background: #ecfdf3; color: #166534; }
.iv-chat__result.is-no { background: #fef2f2; color: #991b1b; }
.iv-chat .is-wait { opacity: 0; }
.iv-chat .is-pop { animation: iv-pop .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.iv-typing { display: inline-flex; gap: 5px; padding: 6px 0; }
.iv-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--hs-faded); animation: iv-dot 1.1s ease-in-out infinite; }
.iv-typing i:nth-child(2) { animation-delay: .15s; }
.iv-typing i:nth-child(3) { animation-delay: .3s; }

/* =============================================================================
   Keyword-Vorschau
   ============================================================================= */
.iv-app { background: #fff; border-radius: 22px; border: 1px solid var(--hs-border); box-shadow: var(--hs-shadow); overflow: hidden; }
.fn-section--alt .iv-app { border-color: transparent; }
.iv-app__title { flex: 1; min-width: 0; font-size: .84rem; font-weight: 800; color: var(--hs-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-app__title i { color: var(--hs-turq); margin-right: 4px; }
.iv-app__badge { flex: none; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 4px 10px; }
.iv-kw__top { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; padding: 20px 22px; border-bottom: 1px solid var(--hs-border); }
.iv-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.iv-kpi { background: var(--hs-alt); border-radius: 14px; padding: 10px 16px; min-width: 118px; }
.iv-kpi strong { display: block; font-size: 1.4rem; line-height: 1.2; color: var(--hs-petrol); font-variant-numeric: tabular-nums; }
.iv-kpi span { display: block; font-size: .74rem; color: var(--hs-gray); font-weight: 600; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal; }
.iv-kw__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.iv-kw__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; margin: 0; }
.iv-kw__table th { text-align: left; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hs-gray); font-weight: 800; padding: 12px 16px; background: #fafbfc; border-bottom: 1px solid var(--hs-border); white-space: nowrap; }
.iv-sort { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.iv-sort i { opacity: .45; font-size: .8rem; }
.iv-sort:hover, th[aria-sort="ascending"] .iv-sort, th[aria-sort="descending"] .iv-sort { color: var(--hs-petrol); }
th[aria-sort="ascending"] .iv-sort i, th[aria-sort="descending"] .iv-sort i { opacity: 1; }
.iv-sort:focus-visible { outline: 3px solid var(--hs-mint); outline-offset: 3px; border-radius: 4px; }
.iv-kw__table td { padding: 12px 16px; border-bottom: 1px solid #f0f1f3; vertical-align: middle; color: var(--hs-text); }
.iv-kw__table tbody tr { transition: background .2s; }
.iv-kw__table tbody tr:hover { background: #f7fbfd; }
.iv-kw__table tbody tr:last-child td { border-bottom: 0; }
.iv-kw__table tbody tr.is-in td { animation: iv-in .4s ease both; animation-delay: calc(var(--k, 0) * 35ms); }
.iv-kw__kw strong { display: block; color: var(--hs-heading); font-weight: 700; }
.iv-cluster { display: inline-block; margin-top: 4px; font-size: .7rem; font-weight: 700; color: var(--hs-turq); background: rgba(59, 134, 134, .1); border-radius: 999px; padding: 1px 9px; }
.iv-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-num span { display: block; font-weight: 700; color: var(--hs-heading); }
.iv-minibar { display: block; width: 72px; height: 4px; border-radius: 4px; background: #edf0f3; margin-top: 6px; overflow: hidden; }
.iv-minibar b { display: block; height: 100%; background: linear-gradient(90deg, var(--hs-turq), var(--hs-petrol)); border-radius: 4px; }
.iv-kdcell { white-space: nowrap; }
.iv-kd { display: inline-block; width: 64px; height: 6px; border-radius: 6px; background: #edf0f3; vertical-align: middle; overflow: hidden; }
.iv-kd b { display: block; height: 100%; border-radius: 6px; }
.iv-kd--low b { background: #22c55e; }
.iv-kd--mid b { background: #f59e0b; }
.iv-kd--high b { background: #ef4444; }
.iv-kdcell small { margin-left: 8px; font-size: .8rem; color: var(--hs-gray); font-variant-numeric: tabular-nums; }
.iv-tag { display: inline-block; font-size: .74rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.iv-tag--mandat { background: #dcfce7; color: #166534; }
.iv-tag--info { background: #e0f2fe; color: #075985; }
.iv-type { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; white-space: nowrap; }
.iv-type i { color: var(--hs-turq); font-size: .8rem; }
.iv-prio { display: inline-grid; place-items: center; min-width: 36px; height: 26px; border-radius: 8px; font-size: .74rem; font-weight: 800; }
.iv-prio--1 { background: var(--hs-petrol); color: #fff; }
.iv-prio--2 { background: rgba(59, 134, 134, .16); color: var(--hs-turq); }
.iv-prio--3 { background: #edf0f3; color: var(--hs-gray); }

/* =============================================================================
   Vorher-nachher-Schieber
   ============================================================================= */
.iv-slider { max-width: 1060px; margin: 0 auto; }
.iv-win { background: #fff; border-radius: 18px; border: 1px solid var(--hs-border); box-shadow: var(--hs-shadow); overflow: hidden; }
.fn-section--alt .iv-win { border-color: transparent; }
.iv-slider__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; background: #f3f4f6; }
.iv-slider__after, .iv-slider__before { position: absolute; inset: 0; }
.iv-slider__after { z-index: 0; }
.iv-slider__after img, .iv-slider__before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; -webkit-user-drag: none; }
.iv-slider__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); z-index: 1; }
.iv-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 0; z-index: 3; pointer-events: none; }
.iv-slider__handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 72, 107, .12), 0 0 18px rgba(0, 0, 0, .3); }
.iv-slider__handle span { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--hs-petrol); display: grid; place-items: center; font-size: 1.05rem; box-shadow: 0 12px 26px -8px rgba(11, 72, 107, .6), 0 0 0 6px rgba(255, 255, 255, .35); transition: transform .2s, box-shadow .2s; }
.iv-slider__stage:hover .iv-slider__handle span, .iv-slider__stage.is-drag .iv-slider__handle span { transform: translate(-50%, -50%) scale(1.08); }
.iv-slider__stage:has(.iv-slider__range:focus-visible) .iv-slider__handle span { box-shadow: 0 12px 26px -8px rgba(11, 72, 107, .6), 0 0 0 5px var(--hs-mint); }
.iv-slider__range { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.iv-slider__tag { position: absolute; bottom: 16px; z-index: 2; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; padding: 7px 13px; border-radius: 999px; color: #fff; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }
.iv-slider__tag--before { left: 16px; background: rgba(31, 41, 55, .82); }
.iv-slider__tag--after { right: 16px; background: var(--hs-petrol); }
.iv-pin { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; transform: translate(-14px, -50%); pointer-events: none; }
.iv-pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 14px), -50%); }
.iv-pin b { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; border: 2px solid #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.iv-pin b::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid currentColor; animation: iv-pulse 2.4s ease-out infinite; }
.iv-pin--before b { background: #ef4444; color: #fff; }
.iv-pin--before b::after { border-color: #ef4444; }
.iv-pin--after b { background: var(--hs-mint); color: #07351f; }
.iv-pin--after b::after { border-color: var(--hs-mint); }
.iv-pin em { transition: opacity .2s; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--hs-heading); background: #fff; border-radius: 8px; padding: 5px 10px; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); }
.iv-pin.is-cut em { opacity: 0; }
.iv-slider__tag .iv-short { display: none; }
.iv-slider__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.iv-legendbox { background: var(--hs-alt); border-radius: 18px; padding: 18px 20px; }
.fn-section--alt .iv-legendbox { background: #fff; }
.iv-legendbox__title { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--hs-heading); margin: 0 0 12px; font-size: .98rem; }
.iv-legendbox--before .iv-legendbox__title i { color: #ef4444; }
.iv-legendbox--after .iv-legendbox__title i { color: #16a34a; }
.iv-legendbox ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iv-legendbox li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--hs-text); }
.iv-legendbox li b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; }
.iv-legendbox--before li b { background: #ef4444; color: #fff; }
.iv-legendbox--after li b { background: var(--hs-mint); color: #07351f; }
.iv-slider__hint { text-align: center; color: var(--hs-gray); font-size: .86rem; margin: 16px 0 0; }
.iv-slider__hint i { color: var(--hs-turq); margin-right: 4px; }

/* =============================================================================
   Responsiv
   ============================================================================= */
@media (max-width: 1100px) {
    .iv-orbit { --s: 360px; }
    .iv-sat__space { min-height: 440px; }
}
@media (max-width: 900px) {
    .iv-sat__stage { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .iv-sat__detail { padding: 4px 4px 8px; }
    .iv-quote__grid { grid-template-columns: minmax(0, 1fr); }
    .iv-quote__arrow { transform: rotate(90deg); width: 44px; height: 44px; }
}
@media (max-width: 640px) {
    .iv-sat { border-radius: 22px; }
    .iv-sat__bar { padding: 14px 16px; }
    .iv-pills { gap: 6px; }
    .iv-pill { font-size: .8rem; padding: 7px 12px; }
    .iv-sat__space { min-height: 0; padding: 40px 8px 18px; gap: 16px; }
    .iv-orbit { --s: min(310px, 80vw); }
    .iv-orbit__sat { width: 46px; height: 46px; }
    .iv-orbit__dot { font-size: .9rem; }
    .iv-orbit__label { font-size: .68rem; padding: 3px 9px; top: calc(100% + 7px); }
    .iv-orbit__planet { width: calc(var(--s) * .4); padding: 0 12px; }
    .iv-orbit__planet-q { font-size: .7rem; }
    .iv-orbit__planet-heat { display: none; }
    .iv-search { font-size: .95rem; padding: 12px 16px; }
    .iv-seg { max-width: 100%; }
    .iv-seg button { padding: 9px 14px; font-size: .84rem; }
    .iv-doc__body { padding: 20px; }
    .iv-legend { grid-template-columns: minmax(0, 1fr); }
    .iv-chat__body { padding: 16px; }
    .iv-kw__top { padding: 16px; }
    .iv-kpis { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .iv-kpi { min-width: 0; padding: 10px 12px; }
    .iv-kpi strong { font-size: 1.1rem; }
    .iv-kpi span { font-size: .68rem; line-height: 1.3; }
    .iv-seg--sm { display: flex; width: 100%; }
    .iv-seg--sm button { flex: 1 1 auto; font-size: .78rem; padding: 8px 10px; }
    /* Tabelle als Kartenliste */
    .iv-kw__table, .iv-kw__table tbody, .iv-kw__table thead { display: block; }
    .iv-kw__table thead tr { display: flex; gap: 8px; align-items: center; padding: 12px 16px; background: #fafbfc; border-bottom: 1px solid var(--hs-border); overflow-x: auto; }
    .iv-kw__table thead tr::before { content: 'Sortieren'; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--hs-faded); margin-right: 2px; }
    .iv-kw__table thead th { display: none; }
    .iv-kw__table thead th.iv-th-sort { display: block; padding: 0; border: 0; background: none; }
    .iv-kw__table thead .iv-sort { border: 1px solid var(--hs-border); background: #fff; border-radius: 999px; padding: 5px 10px; font-size: .64rem; }
    .iv-kw__table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-bottom: 1px solid #f0f1f3; }
    .iv-kw__table tbody tr:last-child { border-bottom: 0; }
    .iv-kw__table td { display: block; padding: 0; border: 0; }
    .iv-kw__table td.iv-kw__kw { flex: 1 0 calc(100% - 60px); order: 0; min-width: 0; }
    .iv-kw__table td.iv-priocell { order: 1; flex: 0 0 auto; }
    .iv-kw__table td.iv-num { order: 2; display: flex; align-items: center; gap: 8px; }
    .iv-kw__table td.iv-kdcell { order: 3; }
    .iv-kw__table td.iv-intent { order: 4; }
    .iv-kw__table td.iv-typcell { order: 5; }
    .iv-num .iv-minibar { width: 44px; margin: 0; }
    .iv-num span::after { content: ' / Monat'; font-weight: 500; color: var(--hs-gray); font-size: .78rem; }
    .iv-kd { width: 44px; }
    .iv-kdcell small { margin-left: 5px; }
    .iv-type { font-size: .78rem; }
    .iv-slider__legend { grid-template-columns: minmax(0, 1fr); }
    .iv-pin em { display: none; }
    .iv-pin, .iv-pin--l { transform: translate(-50%, -50%); }
    .iv-pin b { width: 24px; height: 24px; font-size: .72rem; }
    .iv-slider__tag { bottom: 10px; font-size: .62rem; padding: 5px 9px; }
    .iv-slider__tag .iv-long { display: none; }
    .iv-slider__tag .iv-short { display: inline; }
    .iv-slider__tag--before { left: 10px; }
    .iv-slider__tag--after { right: 10px; }
    .iv-slider__handle span { width: 44px; height: 44px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .iv *, .iv *::before, .iv *::after { animation: none !important; transition: none !important; }
}