/* KI-Präsentation — Figma "Konnect plus › FINAL › Presentation" (2142:2581). */
:root{--f-dms:'DM Serif Display',Georgia,serif}

/* ---------- header variant: one bar, logo left, menu centred ---------- */
.h3-nav2{height:63px;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(231,229,228,.8)}
.h3-nav2 .h3-nav-in{height:62px;padding:0 32px}
.h3-nav2 .h3-logo{position:static;transform:none}
.h3-nav2 .h3-logo img{width:102px;height:auto}
.h3-nav2 .h3-links a{color:#364A6F}
@media(min-width:1101px){.h3-nav2 .h3-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}}
@media(max-width:1100px){
  .h3-nav2 .h3-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .h3-nav2 .h3-links{inset:63px 0 auto 0;height:calc(100dvh - 63px)}
}

/* ---------- app ---------- */
.kpp{background:#F5F3EF;margin-bottom:110px}
.kpp-in{display:grid;grid-template-columns:minmax(0,1136fr) 255px;gap:17px;max-width:1440px;margin:0 auto;padding:31px 16px 22px}
.kpp-left{display:flex;flex-direction:column;gap:12px;min-width:0}

/* stage */
.kpp-stage{position:relative;aspect-ratio:1136/673;border-radius:16px;overflow:hidden;background:#364A6F;
  box-shadow:0 8px 10px rgba(214,211,209,.4),0 20px 25px rgba(214,211,209,.4);user-select:none}
.kpp-stage:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
.kpp-scenes{position:absolute;inset:0}
.kpp-sc{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.kpp-sc.on{opacity:1}
.kpp-sc .bg{position:absolute;inset:-30px;background:center/cover no-repeat;filter:blur(26px) brightness(.55);transform:scale(1.1)}
.kpp-sc .fr{position:absolute;transform-origin:50% 50%;will-change:transform}
.kpp-sc .fr img{display:block;width:100%;height:100%;object-fit:cover}
.kpp-sc.ct .fr{border-radius:10px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.kpp-spot{position:absolute;border-radius:10px;box-shadow:0 0 0 3px #F2BB82,0 0 0 9999px rgba(6,10,20,.55);transition:all .5s ease;pointer-events:none}
.kpp-g1{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.10) 50%,rgba(0,0,0,0) 100%);pointer-events:none;transition:opacity .8s}
.kpp-g2{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);pointer-events:none}
.kpp-stage.ui .kpp-g1{opacity:0}
.kpp-head{position:absolute;left:2.73%;top:4.6%;width:64%;color:#fff;transition:opacity .7s,transform .7s;pointer-events:none}
.kpp-stage.ui .kpp-head{opacity:0;transform:translateY(-8px)}
.kpp-k{font:300 10px/15px var(--f-out);letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5)}
.kpp-head h1{margin-top:12px;max-width:420px;font:400 36px/39.6px var(--f-dms);color:#fff}
.kpp-head p:last-child{margin-top:12px;max-width:320px;font:300 14px/22.8px var(--f-out);color:rgba(255,255,255,.55)}

/* captions */
.kpp-cc{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);max-width:min(72%,720px);padding:10px 24px;border-radius:8px;background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);text-align:center;pointer-events:none}
.kpp-cc[hidden]{display:none}
#kppC1{font:300 14px/20px var(--f-out);color:#fff}
#kppC2{padding-top:2px;font:300 12px/16px var(--f-out);color:rgba(255,255,255,.55)}
#kppC2:empty{display:none}

/* big play button */
.kpp-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;padding:10px 26px 10px 10px;border:0;border-radius:999px;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font:500 16px/1 var(--f-out);cursor:pointer;transition:.2s}
.kpp-big i{width:52px;height:52px;border-radius:50%;background:#F2BB82;display:grid;place-items:center}
.kpp-big i svg{width:22px;height:22px;margin-left:3px;color:#fff}
.kpp-big:hover{background:rgba(255,255,255,.24)}
.kpp-big[hidden]{display:none}
.kpp-note{position:absolute;right:16px;top:16px;max-width:min(34%,340px);z-index:3;padding:7px 14px;border-radius:8px;background:rgba(0,0,0,.55);color:rgba(255,255,255,.85);font:400 12px/17px var(--f-out);text-align:center}
.kpp-note[hidden]{display:none}
[dir=rtl] .kpp-note{right:auto;left:16px}
@media(max-width:720px){.kpp-note{left:12px;right:12px;max-width:none}[dir=rtl] .kpp-note{left:12px}.kpp-stage.note .kpp-head{opacity:0}}

/* control bar */
.kpp-bar{position:absolute;left:0;right:0;bottom:0;padding:16px 24px 14px;opacity:.7;transition:opacity .2s}
.kpp-stage:hover .kpp-bar,.kpp-stage.paused .kpp-bar{opacity:1}
.kpp-prog{position:relative;height:14px;cursor:pointer;margin:-6px 0 -6px}
.kpp-prog::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.2)}
.kpp-fill{position:absolute;left:0;top:6px;height:2px;border-radius:2px;background:#fff;width:0}
.kpp-knob{position:absolute;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:1.27px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.1);left:0}
.kpp-row{display:flex;align-items:center;gap:16px;padding-top:12px}
.kpp-ic{width:22px;height:22px;padding:0;border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.kpp-ic svg{width:18px;height:18px}
#kppPlay .pa{display:none}#kppStage.playing #kppPlay .pa{display:block}#kppStage.playing #kppPlay .pl{display:none}
#kppMute .x{display:none}#kppMute.off .x{display:block}#kppMute.off .w{display:none}
.kpp-time{font:300 12px/16px var(--f-out);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.kpp-sp{flex:1}
.kpp-cc-b{border:1.27px solid #fff;border-radius:4px;padding:2px 8px;background:none;color:#fff;font:600 11px/16.5px var(--f-out);cursor:pointer}
.kpp-cc-b:not(.on){opacity:.45}

/* thumbnails */
.kpp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpp-th{position:relative;height:72px;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;opacity:.6;background:#1c1917;transition:opacity .2s,box-shadow .2s;text-align:left}
.kpp-th img{width:100%;height:100%;object-fit:cover;display:block}
.kpp-th::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.kpp-th:hover{opacity:.85}
.kpp-th.on{opacity:1;box-shadow:0 4px 6px rgba(0,0,0,.1),0 10px 15px rgba(0,0,0,.1),0 0 0 2px #1C1917}
.kpp-thl{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;padding:0 10px 8px;gap:8px}
.kpp-thl b{font:500 11px/13.8px var(--f-out);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpp-thl em{font:normal 400 10px/15px var(--f-out);color:rgba(255,255,255,.5)}
.kpp-thp{position:absolute;z-index:1;right:9px;top:8px;width:19px;height:19px;border-radius:50%;background:#fff;color:#1C1917;display:none;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.kpp-thp svg{width:8px;height:8px}
.kpp-th.on .kpp-thp{display:grid}

/* side */
.kpp-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.kpp-now,.kpp-queue{background:#fff;border:1.27px solid #F5F5F4;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.1);overflow:hidden}
.kpp-now-im{position:relative;height:127px;background:#F5F5F4}
.kpp-now-im img{width:100%;height:100%;object-fit:cover;display:block}
.kpp-now-im::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
.kpp-now-im span{position:absolute;z-index:1;left:12px;right:12px;bottom:10px}
.kpp-now-im small{display:block;font:500 9px/13.5px var(--f-out);letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.kpp-now-im b{display:block;padding-top:2px;font:400 14px/17.5px var(--f-dms);color:#fff}
.kpp-now p{padding:12px 16px;font:300 11px/15.1px var(--f-out);color:#A6A09B}
.kpp-queue{flex:1}
.kpp-qh{padding:12px 16px;border-bottom:1px solid #FAFAF9;font:600 9px/13.5px var(--f-out);letter-spacing:1.62px;text-transform:uppercase;color:#A6A09B}
.kpp-q{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 16px;border:0;border-bottom:1px solid rgba(250,250,249,.8);background:#fff;cursor:pointer;text-align:left;transition:background .15s}
.kpp-q:hover{background:#FAFAF9}
.kpp-q.on{background:#FAFAF9}
.kpp-qn{flex:0 0 24px;height:24px;border-radius:50%;background:#F5F5F4;display:grid;place-items:center;color:#A6A09B;font:600 10px/15px var(--f-out)}
.kpp-qn i{font-style:normal}
.kpp-qn svg{display:none;width:7px;height:7px}
.kpp-q.on .kpp-qn{background:#364A6F;color:#fff}
.kpp-q.on .kpp-qn i{display:none}.kpp-q.on .kpp-qn svg{display:block}
.kpp-qt{flex:1;min-width:0;display:flex;flex-direction:column}
.kpp-qt b{font:500 13px/16.2px var(--f-out);color:#57534D}
.kpp-q.on .kpp-qt b{color:#364A6F}
.kpp-qt small{padding-top:2px;font:300 11px/16.5px var(--f-out);color:#A6A09B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpp-q em{font:normal 500 10px/15px var(--f-out);color:#D6D3D1;font-variant-numeric:tabular-nums}

/* RTL */
[dir=rtl] .kpp-head{left:auto;right:2.73%}
[dir=rtl] .kpp-g1{transform:scaleX(-1)}
[dir=rtl] .kpp-th,[dir=rtl] .kpp-q{text-align:right}
[dir=rtl] .kpp-thp{right:auto;left:9px}

/* responsive */
@media(max-width:1100px){
  .kpp-in{grid-template-columns:1fr;padding:20px 16px}
  .kpp-side{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
}
@media(max-width:720px){
  .kpp{margin-bottom:40px}
  .kpp-stage{aspect-ratio:4/5}
  .kpp-head h1{font-size:26px;line-height:30px}
  .kpp-head p:last-child{display:none}
  .kpp-cc{bottom:60px;max-width:90%;padding:8px 14px}
  .kpp-thumbs{display:flex;overflow-x:auto;scrollbar-width:none}
  .kpp-thumbs::-webkit-scrollbar{display:none}
  .kpp-th{flex:0 0 46%}
  .kpp-side{grid-template-columns:1fr}
  .kpp-bar{padding:14px 14px 12px}
  .kpp-row{gap:12px}
  .kpp-big{padding:8px 20px 8px 8px;font-size:14px}
  .kpp-big i{width:44px;height:44px}
}

/* ---------- Konnect TV: Umschalter Gästebildschirm | Dashboard ---------- */
.kpp-tabs{display:inline-flex;gap:4px;margin:0 0 12px;padding:4px;background:#fff;border:1px solid #E7E8EC;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.kpp-tabs a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:9px;font:500 14px/1 var(--f-out);color:#364A6F;transition:background .15s,color .15s}
.kpp-tabs a svg{width:17px;height:17px}
.kpp-tabs a:hover{background:#F5F6FA}
.kpp-tabs a.on{background:#364A6F;color:#fff}

/* ---------- Live: echter Gästebildschirm auf der Bühne ---------- */
.kpp.live .kpp-stage{aspect-ratio:auto;display:flex;flex-direction:column;background:#05080f}
.kpp.live .kpp-head,.kpp.live .kpp-g1,.kpp.live .kpp-g2,.kpp.live .kpp-scenes{display:none}
.kpl{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;flex:0 0 auto}
/* Untertitel + Steuerung UNTER dem Bildschirm, damit nichts das Menü des Themes verdeckt */
.kpp.live .kpp-cc{position:static;transform:none;max-width:none;margin:0;padding:14px 24px 2px;background:transparent;border-radius:0;min-height:62px;display:flex;flex-direction:column;justify-content:center}
.kpp.live .kpp-cc[hidden]{display:flex;visibility:hidden}
.kpp.live .kpp-bar{position:static;opacity:1;padding:6px 24px 14px}
.kpp.live .kpp-big{z-index:4}
.kpp.live .kpp-note{z-index:5}
.kpl-fit{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
[dir=rtl] .kpl-fit{left:auto;right:0;transform-origin:100% 0}
.kpl-fit iframe{display:block;width:1920px;height:1080px;border:0;background:#05080f}
.kpl-spot{position:absolute;border-radius:14px;pointer-events:none;z-index:2;
  box-shadow:0 0 0 9999px rgba(5,8,15,.55),0 0 0 2px #F2BB82,0 0 28px rgba(242,187,130,.55);
  transition:left .5s cubic-bezier(.2,.8,.2,1),top .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1)}
.kpl-spot[hidden]{display:none}
.kpl-spot i{position:absolute;inset:-7px;border-radius:19px;border:2px solid rgba(242,187,130,.6);animation:kplPulse 1.7s ease-out infinite}
.kpl-spot.full{box-shadow:inset 0 0 0 2px rgba(242,187,130,.65)}
.kpl-spot.full i{display:none}
@keyframes kplPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.07)}}
.kpl-load{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#0b1220 url(/static/home3/hero-bg.webp?v=1) center/cover;transition:opacity .6s}
.kpl-load.hide{opacity:0;pointer-events:none}
.kpl-load>div{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 30px;border-radius:16px;background:rgba(5,8,15,.55);color:rgba(255,255,255,.85);font:400 14px/20px var(--f-out);text-align:center}
.kpl-load img{width:140px;height:auto}
.kpl-load b{position:relative;display:block;width:160px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.kpl-load b::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;background:#F2BB82;animation:kplBar 1.2s infinite ease-in-out}
@keyframes kplBar{to{left:100%}}
.kpl-off{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;background:rgba(5,8,15,.88);color:#fff;font:400 15px/22px var(--f-out);text-align:center}
.kpl-off[hidden]{display:none}
.kpl-off a{display:inline-flex;height:44px;align-items:center;padding:0 22px;border-radius:10px;background:#F2BB82;color:#fff;font-weight:600}
.kpl-top{position:absolute;top:14px;left:14px;right:14px;z-index:7;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none}
.kpl-live,.kpl-theme{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:999px;background:rgba(5,8,15,.6);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);color:#fff;font:500 12.5px/1 var(--f-out)}
.kpl-live i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.22)}
.kpl-theme span{color:rgba(255,255,255,.65)}
.kpl-theme select{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center/11px no-repeat;
  border:0;color:#fff;font:600 12.5px/1 var(--f-out);padding:0 18px 0 0;cursor:pointer;outline:none}
.kpl-theme select option{color:#090C1A}
.kpl-you{position:absolute;left:50%;top:60px;z-index:5;transform:translateX(-50%);max-width:86%;padding:9px 16px;border-radius:10px;background:rgba(5,8,15,.75);color:#fff;font:400 13px/18px var(--f-out);text-align:center;pointer-events:none}
.kpl-you[hidden]{display:none}
@media(max-width:720px){
  .kpp.live .kpp-stage{aspect-ratio:16/9}
  .kpp-tabs{display:flex;width:100%}.kpp-tabs a{flex:1;justify-content:center;padding:0 8px;font-size:13px}
  .kpl-top{top:8px;left:8px;right:8px}.kpl-live span,.kpl-theme span{display:none}
  .kpl-live,.kpl-theme{height:28px;font-size:11px}
}
/* Live: 7 Kapitel → Bildleiste scrollt waagerecht, Kartengröße wie im Design (4 sichtbar) */
.kpp.live .kpp-thumbs{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px}
.kpp.live .kpp-thumbs::-webkit-scrollbar{display:none}
.kpp.live .kpp-th{flex:0 0 calc((100% - 36px) / 4);scroll-snap-align:start}
.kpp.live .kpp-th img{object-position:50% 50%}
@media (max-width:760px){.kpp.live .kpp-th{flex:0 0 46%}}