/* ==========================================================================
   SmashStarter – Design (Child-Theme von Impreza)
   Vorlage: Pong-Museum (tt-museum/style.css). Farben/Schriften zusätzlich
   in den Impreza-Theme-Optionen gesetzt, damit der Editor sie kennt.

   Klassen für WPBakery (Feld „Zusätzliche CSS-Klasse“ an Zeile oder Spalte):
     ss-card      weiße Karte mit Schatten (Spalte)
     ss-glass     halbtransparente Glas-Fläche (Spalte)
     ss-center    alles zentrieren (Zeile oder Spalte)
     ss-reveal    sanft einblenden beim Scrollen (Zeile, Spalte oder Element)
     ss-narrow    Inhalt schmal halten (Zeile; für Lesetexte)
   ========================================================================== */

:root{
  --ss-navy:#16306B; --ss-ink:#1B2A4E; --ss-muted:#6B7A99;
  --ss-red:#E33B2E; --ss-red-dark:#B92A20; --ss-blue:#4F86D6; --ss-blue-light:#9CC3EE; --ss-sky:#93C0EE;
  --ss-green:#2E9E68; --ss-yellow:#F2C14E;
  --ss-bg-a:#0c1a3e; --ss-bg-b:#173777; --ss-bg-c:#2a2b69;
  --ss-on-dark:#EEF4FF; --ss-mut:#B6C7E6;
  --ss-cream:#F2F6FD; --ss-cream-2:#E7EEFA; --ss-cream-3:#D2DEF1;
  --ss-r-lg:26px; --ss-r-md:18px; --ss-r-sm:12px;
  --ss-shadow:0 18px 40px -18px rgba(5,12,35,.55);
  --ss-shadow-sm:0 6px 18px -8px rgba(5,12,35,.45);
  --ss-head:'Fredoka','Baloo 2',system-ui,sans-serif;
  --ss-body:'Nunito',system-ui,sans-serif;
  --ss-caps:'Oswald','Arial Narrow',sans-serif;
  --ss-card:'Baloo 2','Fredoka',system-ui,sans-serif;
}

/* ---------- Grundfläche: fester Blau-Verlauf hinter allem ---------- */
html{background:var(--ss-bg-a)}
body{background:var(--ss-bg-a)!important;color:var(--ss-on-dark)}
body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 12% -5%,rgba(64,118,214,.55),transparent 60%),
    radial-gradient(900px 700px at 105% 110%,rgba(110,72,170,.45),transparent 60%),
    linear-gradient(115deg,transparent 40%,rgba(255,255,255,.05) 48%,transparent 56%),
    linear-gradient(165deg,var(--ss-bg-a) 0%,var(--ss-bg-b) 48%,#1b3270 70%,var(--ss-bg-c) 100%)}
.l-canvas{position:relative;z-index:1;background:transparent!important}
.l-main,.l-main .l-section:not(.color_alternate):not(.color_primary):not(.color_secondary):not([class*="us_custom"]){background:transparent}
html,body{overflow-x:clip}
::selection{background:var(--ss-sky);color:var(--ss-navy)}

/* Überschriften: Fredoka 700, auf Dunkel weiß */
h1,h2,h3,h4,h5,h6{font-family:var(--ss-head);letter-spacing:-.005em}
.l-main a:not([class]){text-underline-offset:3px}

/* Helle Flächen: Impreza-Farbvariablen auf „hell“ umstellen, damit alle Elemente darin passen */
.ss-card,.ss-white,.color_alternate,.ss-toolcard,.ss-bubble,.ss-lightbox .ss-lb-panel{
  --color-content-bg:#fff;--color-content-bg-grad:#fff;--color-content-bg-alt:var(--ss-cream);--color-content-bg-alt-grad:var(--ss-cream);
  --color-content-border:var(--ss-cream-3);--color-content-heading:var(--ss-navy);--color-content-heading-grad:var(--ss-navy);
  --color-content-text:var(--ss-ink);--color-content-link:var(--ss-red);--color-content-link-hover:var(--ss-red-dark);
  --color-content-faded:var(--ss-muted);color:var(--ss-ink)}
.ss-card h1,.ss-card h2,.ss-card h3,.ss-card h4,.ss-card h5,.ss-card h6{color:var(--ss-navy)}

/* Spalte als weiße Karte */
.wpb_column.ss-card>.vc_column-inner{background:#fff;border-radius:var(--ss-r-lg);box-shadow:var(--ss-shadow);padding:clamp(22px,3vw,40px)!important}
.wpb_column.ss-glass>.vc_column-inner{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--ss-r-lg);
  padding:clamp(22px,3vw,40px)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ss-center,.ss-center .wpb_wrapper{text-align:center}
.ss-center .ss-heading{text-align:center}
.ss-center .ss-heading .ss-eyebrow{justify-content:center}
.ss-narrow .l-section-h{max-width:860px}

/* Abschnitt „alternativ“ (Impreza-Farbschema) = großes weißes Panel */
.l-section.color_alternate{background:transparent!important}
.l-section.color_alternate>.l-section-h{background:#fff;border-radius:34px;box-shadow:var(--ss-shadow);padding-top:clamp(30px,4.5vw,64px)!important;padding-bottom:clamp(30px,4.5vw,64px)!important;
  padding-left:clamp(20px,4vw,56px)!important;padding-right:clamp(20px,4vw,56px)!important;max-width:calc(var(--site-content-width,1300px) + 2*clamp(20px,4vw,56px))}

/* ---------- Impreza-Elemente angleichen ---------- */
.w-btn{font-family:var(--ss-body)!important}
.w-separator-h{border-color:rgba(255,255,255,.18)}
.ss-card .w-separator-h,.color_alternate .w-separator-h{border-color:var(--ss-cream-3)}

/* Akkordeon / Tabs (FAQ) */
.w-tabs-section{border:0!important;background:rgba(255,255,255,.07);border-radius:var(--ss-r-md)!important;margin-bottom:10px;overflow:hidden}
.w-tabs-section-header{padding:18px 22px!important}
.w-tabs-section-title{font:700 19px/1.25 var(--ss-head)!important;color:#fff}
.w-tabs-section-control{color:var(--ss-sky)}
.w-tabs-section.active{background:#fff}
.w-tabs-section.active .w-tabs-section-title{color:var(--ss-navy)}
.w-tabs-section.active .w-tabs-section-content{color:var(--ss-ink)}
.w-tabs-section-content-h{padding:0 22px 20px!important}

/* Formulare (Contact Form 7, Impreza) */
.l-main input:not([type=submit]):not([type=checkbox]):not([type=radio]),.l-main textarea,.l-main select{
  border-radius:14px;background:#fff;color:var(--ss-ink);border:2px solid var(--ss-cream-3);font-family:var(--ss-body)}
.l-main input:focus,.l-main textarea:focus{border-color:var(--ss-blue)}
.wpcf7 input[type=submit],.ss-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 26px;cursor:pointer;
  font:800 17px/1 var(--ss-body);background:var(--ss-red);color:#fff;box-shadow:0 4px 0 var(--ss-red-dark);transition:transform .12s,box-shadow .12s,background .2s;text-decoration:none}
.wpcf7 input[type=submit]:hover,.ss-btn:hover{background:#dc463d;color:#fff}
.wpcf7 input[type=submit]:active,.ss-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ss-red-dark)}

/* Fließtext auf Dunkel */
.l-main .wpb_text_column p{color:inherit}
.l-main .wpb_text_column strong{color:#fff}
.ss-card .wpb_text_column strong{color:var(--ss-navy)}

/* ==========================================================================
   Bausteine
   ========================================================================== */

/* ---------- Überschrift ---------- */
.ss-heading{margin-bottom:28px}
.ss-heading.align-center{text-align:center}
.ss-heading.align-center .ss-eyebrow{justify-content:center}
.ss-heading.align-center .ss-lead{margin-left:auto;margin-right:auto}
.ss-eyebrow{display:inline-flex;align-items:center;gap:14px;font:600 15px/1.2 var(--ss-caps);letter-spacing:.32em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ss-eyebrow:before{content:"";width:52px;height:5px;border-radius:3px;background:var(--ss-red);flex:none}
.ss-card .ss-eyebrow,.color_alternate .ss-eyebrow{color:var(--ss-navy)}
.ss-title{font-family:var(--ss-head)!important;font-weight:700!important;line-height:1.08!important;color:var(--color-content-heading,#fff);margin:0 0 .35em!important;
  font-size:clamp(32px,4.6vw,54px)!important}
h1.ss-title{font-size:clamp(38px,6vw,72px)!important}
.ss-heading.size-xl .ss-title{font-size:clamp(40px,5.6vw,72px)!important;line-height:1.04!important}
.ss-heading.size-s .ss-title{font-size:clamp(24px,2.8vw,32px)!important}
.ss-tab{display:inline-block;background:var(--ss-sky);color:var(--ss-navy);border-radius:.32em;padding:0 .3em .03em;margin:.06em 0;
  box-shadow:0 10px 30px -10px rgba(147,192,238,.6);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ss-lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;max-width:680px;color:var(--ss-on-dark);opacity:.95}
.ss-card .ss-lead,.color_alternate .ss-lead{color:var(--ss-ink)}
.ss-lead p:last-child{margin-bottom:0}

/* Pillen-Etikett */
.ss-pill{display:inline-block;background:var(--ss-red);color:#fff;border-radius:999px;padding:5px 12px;font:600 12px/1.2 var(--ss-caps);letter-spacing:.12em;text-transform:uppercase}

/* ---------- Pong-Figur ---------- */
.ss-pong{position:relative;width:var(--w,320px);max-width:100%;margin:0 auto}
.ss-pong.align-left{margin-left:0}
.ss-pong.align-right{margin-right:0}
.ss-pong-fig{position:relative;aspect-ratio:1;cursor:pointer;filter:drop-shadow(0 26px 24px rgba(0,0,0,.32));transform-origin:50% 92%}
.ss-pong-fig img,.ss-pong-fig canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ss-pong-fig[data-wide]{aspect-ratio:4/3}
/* sanfte Bewegung, solange kein Video läuft */
.ss-pong-fig:not(.has-video)[data-anim]{animation:ss-bob 3.6s ease-in-out infinite,ss-breathe 2.8s ease-in-out infinite}
.ss-pong-fig:not(.has-video)[data-anim=wave]{animation:ss-wave 1.8s ease-in-out infinite,ss-breathe 2.8s ease-in-out infinite}
.ss-pong-fig:not(.has-video)[data-anim=sway]{animation:ss-sway 3.2s ease-in-out infinite,ss-breathe 2.8s ease-in-out infinite}
.ss-pong-fig:not(.has-video)[data-anim=swing]{animation:ss-swing 2.4s ease-in-out infinite}
.ss-pong-fig:not(.has-video)[data-anim=hop]{animation:ss-hop 2.6s ease-in-out infinite}
.ss-pong-fig:not(.has-video)[data-anim=float]{animation:ss-float 3s ease-in-out infinite}
.ss-pong-fig:not(.has-video)[data-anim=nod]{animation:ss-nod 3.4s ease-in-out infinite,ss-breathe 2.8s ease-in-out infinite}
.ss-pong-fig:not(.has-video)[data-anim=shuffle]{animation:ss-shuffle 2.2s ease-in-out infinite}
.ss-pong-fig:not(.has-video)[data-anim=breathe]{animation:ss-breathe 3.2s ease-in-out infinite}
.ss-pong-fig.is-poke{animation:ss-poke .6s cubic-bezier(.3,1.5,.5,1)!important}
@keyframes ss-bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes ss-breathe{0%,100%{scale:1 1}50%{scale:1.018 .982}}
@keyframes ss-sway{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
@keyframes ss-wave{0%,100%{rotate:-3deg}25%{rotate:2deg}50%{rotate:-2deg}75%{rotate:3deg}}
@keyframes ss-swing{0%,100%{rotate:-5deg}35%{rotate:-6deg}55%{rotate:7deg}70%{rotate:5deg}}
@keyframes ss-hop{0%,55%,100%{translate:0 0;scale:1 1}65%{translate:0 3px;scale:1.05 .94}78%{translate:0 -22px;scale:.96 1.04}90%{translate:0 0;scale:1.04 .96}}
@keyframes ss-float{0%,100%{translate:0 0;rotate:-3deg}50%{translate:12px -12px;rotate:2deg}}
@keyframes ss-nod{0%,100%{rotate:0deg}20%{rotate:-3deg}30%{rotate:1deg}40%{rotate:0deg}}
@keyframes ss-shuffle{0%,100%{translate:0 0;rotate:0deg}25%{translate:-6px -4px;rotate:-2deg}50%{translate:0 0;rotate:0deg}75%{translate:6px -4px;rotate:2deg}}
@keyframes ss-poke{0%{scale:1 1;translate:0 0}25%{scale:1.14 .86;translate:0 4px}55%{scale:.9 1.12;translate:0 -30px}80%{scale:1.05 .95;translate:0 0}100%{scale:1 1;translate:0 0}}

/* Sprechblase */
.ss-bubble{position:relative;background:#fff;color:var(--ss-navy);border-radius:22px;padding:14px 18px;font:700 17px/1.35 var(--ss-body);box-shadow:var(--ss-shadow);
  max-width:300px;opacity:0;transform:translateY(10px) scale(.92);transition:opacity .4s .3s,transform .5s .3s cubic-bezier(.3,1.5,.5,1)}
.ss-pong.is-in .ss-bubble{opacity:1;transform:none}
.ss-bubble:after{content:"";position:absolute;border:10px solid transparent}
.ss-pong.has-bubble{display:grid;align-items:center;gap:6px;width:auto}
.ss-pong.has-bubble .ss-bubble{min-width:180px}
.ss-pong.has-bubble .ss-pong-fig{width:var(--w,320px);max-width:60vw}
.ss-pong.bubble-left{grid-template-columns:auto auto;justify-content:center}
.ss-pong.bubble-left .ss-bubble{order:-1}
.ss-pong.bubble-left .ss-bubble:after{right:-18px;top:40%;border-left:12px solid #fff;border-right:0}
.ss-pong.bubble-right{grid-template-columns:auto auto;justify-content:center}
.ss-pong.bubble-right .ss-bubble:after{left:-18px;top:40%;border-right:12px solid #fff;border-left:0}
.ss-pong.bubble-top{justify-items:center}
.ss-pong.bubble-top .ss-bubble{order:-1;margin-bottom:-10px}
.ss-pong.bubble-top .ss-bubble:after{left:50%;bottom:-18px;margin-left:-10px;border-top:12px solid #fff;border-bottom:0}
.ss-pong.has-bubble.align-left{justify-content:start}
.ss-pong.has-bubble.align-right{justify-content:end}
@media (max-width:600px){
  .ss-pong.bubble-left,.ss-pong.bubble-right{grid-template-columns:1fr;justify-items:center}
  .ss-pong.bubble-left .ss-bubble,.ss-pong.bubble-right .ss-bubble{order:-1;margin-bottom:-6px}
  .ss-pong.bubble-left .ss-bubble:after,.ss-pong.bubble-right .ss-bubble:after{left:50%;right:auto;top:auto;bottom:-18px;margin-left:-10px;border:10px solid transparent;border-top:12px solid #fff;border-bottom:0}
}

/* ---------- App-Store-Knöpfe ---------- */
.ss-stores{margin:30px 0 10px}
.ss-stores-row{display:flex;gap:12px;flex-wrap:wrap}
.ss-stores.align-center .ss-stores-row{justify-content:center}
.ss-stores.align-center{text-align:center}
.ss-store{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff!important;text-decoration:none!important;border-radius:14px;padding:10px 20px 10px 14px;
  border:1px solid rgba(255,255,255,.35);min-width:190px;transition:transform .15s,box-shadow .15s}
.ss-store:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.ss-store svg{width:28px;height:28px;flex:none}
.ss-store>span{display:flex;flex-direction:column;font:700 21px/1.05 var(--ss-body);text-align:left}
.ss-store small{font:600 11px/1.3 var(--ss-body);opacity:.85}
.ss-store.is-soon{opacity:.55;cursor:default}
.ss-store.is-soon:hover{transform:none;box-shadow:none}
.ss-stores-note{margin:10px 0 0;font-size:14px;color:var(--ss-mut)}

/* ---------- App-Demo ---------- */
.ss-appdemo{display:grid;grid-template-columns:1fr minmax(240px,310px);gap:clamp(24px,4vw,60px);align-items:center}
.ss-appdemo.phone-left{grid-template-columns:minmax(240px,310px) 1fr}
.ss-appdemo.phone-left .ss-phone{order:-1}
.ss-steps{list-style:none;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:10px}
.ss-steps li{margin:0!important;padding:0!important}
.ss-steps li:before{display:none}
.ss-step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;width:100%;text-align:left;border:0;cursor:pointer;overflow:hidden;
  background:rgba(255,255,255,.06);border-radius:var(--ss-r-md);padding:16px 18px;color:var(--ss-on-dark);font:inherit;transition:background .25s,transform .25s}
.ss-step:hover{background:rgba(255,255,255,.11)}
.ss-step-no{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.12);font:700 22px/1 var(--ss-head);color:#fff;transition:all .25s}
.ss-step-tx b{display:block;font:700 20px/1.2 var(--ss-head);color:#fff;margin:2px 0 4px}
.ss-step-tx span{display:block;font-size:15.5px;line-height:1.45;opacity:.85;max-height:0;overflow:hidden;transition:max-height .45s ease,opacity .3s}
.ss-step.is-on{background:#fff;transform:translateX(6px);box-shadow:var(--ss-shadow)}
.ss-step.is-on .ss-step-no{background:var(--ss-red);box-shadow:0 4px 0 var(--ss-red-dark)}
.ss-step.is-on .ss-step-tx b{color:var(--ss-navy)}
.ss-step.is-on .ss-step-tx span{color:var(--ss-ink);max-height:140px;opacity:1}
.ss-step-bar{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--ss-red);border-radius:0 3px 3px 0}
.ss-step.is-on .ss-step-bar{animation:ss-progress var(--ss-int,6s) linear forwards}
.ss-appdemo.is-paused .ss-step.is-on .ss-step-bar{animation:none;width:100%;opacity:.35}
@keyframes ss-progress{to{width:100%}}

.ss-phone{position:relative;width:100%;max-width:min(310px,calc((100vh - 150px) * .4737));aspect-ratio:9/19;margin:0 auto;border-radius:46px;background:#0b1022;padding:12px;
  box-shadow:0 0 0 2px #2b3352 inset,0 40px 70px -30px rgba(0,0,0,.75),0 0 0 8px rgba(255,255,255,.04);rotate:3deg;transition:rotate .6s}
.ss-appdemo:hover .ss-phone{rotate:0deg}
.ss-phone-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff}
.ss-phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:translateX(18px) scale(.98);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.ss-phone-screen img.is-on{opacity:1;transform:none}
.ss-phone-notch{position:absolute;left:50%;top:20px;width:30%;height:22px;margin-left:-15%;background:#0b1022;border-radius:20px;z-index:2}
.ss-tap{position:absolute;left:60%;top:55%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(227,59,46,.35);border:3px solid rgba(255,255,255,.9);
  z-index:3;opacity:0;pointer-events:none}
.ss-tap.go{animation:ss-tap .9s ease-out}
@keyframes ss-tap{0%{opacity:0;scale:1.6}30%{opacity:1;scale:.9}100%{opacity:0;scale:1.3}}
@media (max-width:900px){
  .ss-appdemo,.ss-appdemo.phone-left{grid-template-columns:1fr}
  .ss-appdemo .ss-phone{order:-1;max-width:250px}
  .ss-step.is-on{transform:none}
}

/* ---------- Kartenstapel ---------- */
.ss-deck{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,50px);align-items:center}
.ss-deck-table{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,var(--cw,230px)));gap:24px;align-items:center}
.ss-deck-pile,.ss-deck-card{width:var(--cw,230px);aspect-ratio:506/760}
.ss-deck-pile{position:relative}
.ss-deck-pile i,.ss-face.ss-back-design{position:absolute;inset:0;border-radius:16px;
  background:url(../img/logo.png) center 50%/74% auto no-repeat,repeating-linear-gradient(135deg,rgba(22,48,107,.045) 0 10px,transparent 10px 20px),#fff;
  box-shadow:0 0 0 7px #fff inset,0 0 0 10px var(--ss-navy) inset,0 14px 28px -12px rgba(0,0,0,.6)}
.ss-deck-pile i:nth-child(1){transform:rotate(-6deg) translate(-6px,6px)}
.ss-deck-pile i:nth-child(2){transform:rotate(3deg) translate(4px,2px)}
.ss-deck-pile i:nth-child(3){transform:rotate(-1deg)}
.ss-deck-card{position:relative;border:0;padding:0;background:none;cursor:pointer;perspective:1400px;visibility:hidden}
.ss-deck.has-card .ss-deck-card{visibility:visible}
.ss-deck-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.ss-deck-card.is-flipped .ss-deck-in{transform:rotateY(180deg)}
.ss-face{position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff center/cover no-repeat;
  box-shadow:0 22px 40px -16px rgba(0,0,0,.6)}
.ss-face.ss-back{transform:rotateY(180deg)}
.ss-deck-card.is-drawing{animation:ss-draw .85s cubic-bezier(.25,.9,.3,1.15)}
@keyframes ss-draw{0%{transform:translateX(calc(-100% - 24px)) rotate(-4deg) rotateY(180deg)}40%{transform:translateX(-40%) translateY(-40px) rotate(-10deg) rotateY(120deg) scale(1.06)}100%{transform:none}}
.ss-deck-info{min-width:0}
.ss-deck-meta{min-height:96px}
.ss-deck-meta .ss-pill{margin-bottom:10px}
.ss-deck-meta b{display:block;font:700 clamp(26px,3vw,36px)/1.1 var(--ss-head);color:var(--color-content-heading,#fff);margin-bottom:8px}
.ss-deck-chips{display:flex;gap:8px;flex-wrap:wrap}
.ss-deck-chips span{background:rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;font:700 14px var(--ss-body)}
.ss-card .ss-deck-chips span{background:var(--ss-cream-2);color:var(--ss-navy)}
.ss-deck-hint{margin:12px 0 0;font-size:14px;opacity:.75}
.ss-deck-draw{margin-top:18px}
@media (max-width:760px){
  .ss-deck{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ss-deck-table{--cw:min(42vw,200px);gap:14px}
  .ss-deck-chips{justify-content:center}
}

/* ---------- Kartenübersicht ---------- */
.ss-cg-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.ss-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:9px 16px;
  font:700 15px/1.1 var(--ss-body);cursor:pointer;transition:all .15s}
.ss-chip i{width:10px;height:10px;border-radius:50%;background:var(--c,#fff)}
.ss-chip small{opacity:.7;font-weight:700}
.ss-chip:hover{background:rgba(255,255,255,.16)}
.ss-chip.is-on{background:var(--ss-sky);border-color:var(--ss-sky);color:var(--ss-navy)}
.ss-cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.ss-cg-item{border:0;padding:0;background:none;cursor:pointer;text-align:left;color:inherit;font:inherit;display:flex;flex-direction:column;gap:8px;
  animation:ss-in .45s both;animation-delay:calc(var(--i,0) * 22ms)}
.ss-cg-item img{width:100%;aspect-ratio:506/760;object-fit:cover;border-radius:12px;box-shadow:0 12px 24px -12px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.ss-cg-item:hover img{transform:translateY(-6px) rotate(-1.5deg)}
.ss-cg-item b{font:700 15px/1.2 var(--ss-head)}
@keyframes ss-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Großansicht */
.ss-lightbox{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:16px;background:rgba(6,14,38,.78);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s}
.ss-lightbox.is-on{opacity:1;pointer-events:auto}
.ss-lb-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.ss-lb-card{position:relative;width:min(380px,78vw,calc((100vh - 150px) * .666));aspect-ratio:506/760;border:0;padding:0;background:none;cursor:pointer;perspective:1600px}
.ss-lb-card .ss-deck-in{transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.ss-lb-card.is-flipped .ss-deck-in{transform:rotateY(180deg)}
.ss-lb-bar{display:flex;gap:10px;align-items:center;color:#fff;font:700 16px var(--ss-body)}
.ss-lb-btn{width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--ss-navy);font:800 20px/1 var(--ss-body);cursor:pointer;display:grid;place-items:center;box-shadow:var(--ss-shadow-sm)}
.ss-lb-btn:hover{background:var(--ss-sky)}
.ss-lb-close{position:absolute;top:14px;right:14px}
.ss-lb-title{min-width:180px;text-align:center}

/* ---------- Tool-Karte ---------- */
/* Pong schaut oben rechts aus der Karte heraus, Text darunter – passt in jede Spaltenbreite */
.ss-toolcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--ss-r-lg);margin-top:70px;
  padding:26px 24px 22px;color:var(--ss-ink)!important;text-decoration:none!important;box-shadow:var(--ss-shadow);transition:transform .25s,box-shadow .25s;--acc:var(--ss-red)}
.ss-toolcard.accent-sky{--acc:var(--ss-sky)} .ss-toolcard.accent-navy{--acc:var(--ss-navy)} .ss-toolcard.accent-green{--acc:var(--ss-green)}
.ss-toolcard:before{content:"";position:absolute;left:24px;top:0;width:52px;height:5px;border-radius:0 0 4px 4px;background:var(--acc)}
a.ss-toolcard:hover{transform:translateY(-6px);box-shadow:0 28px 50px -22px rgba(5,12,35,.7)}
.ss-toolcard .ss-pill{align-self:flex-start;background:var(--acc);margin-bottom:12px}
.ss-toolcard.accent-sky .ss-pill{color:var(--ss-navy)}
.ss-toolcard-tx{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.ss-toolcard-title{font:700 24px/1.12 var(--ss-head);color:var(--ss-navy);padding-right:36%}
.ss-toolcard-desc{font-size:15.5px;line-height:1.5;color:var(--ss-ink)}
.ss-toolcard-desc p{margin:0}
.ss-toolcard-go{margin-top:auto;padding-top:10px;font:800 15px var(--ss-body);color:var(--ss-red)}
.ss-toolcard-go i{display:inline-block;font-style:normal;transition:transform .2s}
a.ss-toolcard:hover .ss-toolcard-go i{transform:translateX(5px)}
.ss-toolcard-art{position:absolute;right:-8px;top:-78px;width:min(44%,190px);pointer-events:none}
.ss-toolcard-art img{width:100%;height:auto;display:block}
.ss-toolcard-art .ss-pong-fig{filter:drop-shadow(0 14px 12px rgba(5,12,35,.3))}
a.ss-toolcard:hover .ss-pong-fig{animation:ss-poke .6s cubic-bezier(.3,1.5,.5,1)}
@media (min-width:901px){.wpb_column .ss-toolcard{height:calc(100% - 70px)}}

/* ---------- Funktionen ---------- */
.ss-features{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:16px}
.ss-features.cols-2{--cols:2}.ss-features.cols-3{--cols:3}.ss-features.cols-4{--cols:4}
.ss-feature{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--ss-r-md);padding:22px;transition:transform .25s,background .25s}
.ss-feature:hover{transform:translateY(-4px);background:rgba(255,255,255,.11)}
.ss-feature-ic{width:52px;height:52px;border-radius:15px;background:var(--ss-sky);display:grid;place-items:center;font-size:26px;line-height:1;margin-bottom:14px;
  box-shadow:0 10px 24px -10px rgba(147,192,238,.7)}
.ss-feature b{display:block;font:700 20px/1.2 var(--ss-head);color:#fff;margin-bottom:6px}
.ss-feature p{margin:0;font-size:15.5px;line-height:1.5;opacity:.88}
.ss-features.style-white .ss-feature{background:#fff;border:0;box-shadow:var(--ss-shadow-sm);color:var(--ss-ink)}
.ss-features.style-white .ss-feature b{color:var(--ss-navy)}
@media (max-width:900px){.ss-features.cols-3,.ss-features.cols-4{--cols:2}}
@media (max-width:560px){.ss-features{--cols:1!important}}

/* ---------- Kennzahlen ---------- */
.ss-stats{display:flex;flex-wrap:wrap;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--ss-r-lg);padding:8px}
.ss-stat{flex:1 1 150px;text-align:center;padding:18px 12px;position:relative}
.ss-stat+.ss-stat:before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(255,255,255,.15)}
.ss-stat b{display:block;font:700 clamp(36px,4.4vw,54px)/1 var(--ss-head);color:#fff;font-variant-numeric:tabular-nums}
.ss-stat span{display:block;margin-top:8px;font:600 13px/1.3 var(--ss-caps);letter-spacing:.2em;text-transform:uppercase;color:var(--ss-sky)}
@media (max-width:560px){.ss-stat{flex-basis:45%}.ss-stat+.ss-stat:before{display:none}}

/* ---------- Startbild: Kartenfächer + Pong ---------- */
.ss-heroart{position:relative;width:min(var(--w,600px),100%);aspect-ratio:1/.92;margin:0 auto}
.ss-ha-cards{position:absolute;left:0;top:0;width:76%;height:84%}
.ss-ha-card{position:absolute;width:43%;aspect-ratio:506/760;border:0;padding:0;background:none;cursor:pointer;border-radius:12px;
  box-shadow:0 20px 34px -14px rgba(0,0,0,.65);transition:translate .35s cubic-bezier(.3,1.4,.5,1),scale .35s,box-shadow .3s;
  animation:ss-deal .9s cubic-bezier(.2,.9,.3,1.15) both,ss-cardfloat 6s ease-in-out infinite;animation-delay:calc(var(--n)*.12s),calc(var(--n)*-1.4s)}
.ss-ha-card img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.ss-ha-card:nth-child(1){left:0;top:16%;rotate:-15deg}
.ss-ha-card:nth-child(2){left:18%;top:5%;rotate:-5deg}
.ss-ha-card:nth-child(3){left:38%;top:3%;rotate:5deg}
.ss-ha-card:nth-child(4){left:58%;top:14%;rotate:14deg}
.ss-ha-card:hover,.ss-ha-card:focus-visible{z-index:5;scale:1.08;translate:0 -16px;box-shadow:0 30px 50px -16px rgba(0,0,0,.75)}
@keyframes ss-deal{from{opacity:0;transform:translate(60%,40%) rotate(10deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes ss-cardfloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
.ss-ha-pong{position:absolute;right:-7%;bottom:-6%;width:72%;z-index:6;pointer-events:none}
.ss-ha-pong .ss-pong-fig{pointer-events:auto}
.ss-ha-hint{position:absolute;left:2%;bottom:10%;z-index:7;font:600 12px/1 var(--ss-caps);letter-spacing:.18em;text-transform:uppercase;color:var(--ss-navy);
  background:var(--ss-sky);border-radius:999px;padding:8px 12px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);animation:ss-bob 2.4s ease-in-out infinite}
.ss-ha-hint:before{content:"☝ ";letter-spacing:0}
@media (max-width:1024px){.ss-heroart{margin-top:10px}}

/* ---------- In 3 Schritten zum Training ---------- */
.ss-threesteps{list-style:none;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);counter-reset:none;cursor:pointer}
.ss-3step{position:relative;margin:0!important;padding:18px 20px 22px!important;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--ss-r-lg)}
.ss-3step:before{display:none}
.ss-3step:not(:last-child):after{content:"→";position:absolute;right:calc(-1 * clamp(16px,2.4vw,34px) / 2 - 15px);top:124px;width:30px;height:30px;border-radius:50%;
  background:var(--ss-red);color:#fff;display:grid;place-items:center;font:800 16px/1 var(--ss-body);z-index:2;box-shadow:0 4px 0 var(--ss-red-dark)}
.ss-3no{position:absolute;left:-10px;top:-14px;width:44px;height:44px;border-radius:50%;background:var(--ss-red);color:#fff;display:grid;place-items:center;font:700 22px/1 var(--ss-head);
  box-shadow:0 4px 0 var(--ss-red-dark);z-index:2}
.ss-3title{display:block;font:700 22px/1.2 var(--ss-head);color:#fff;margin:16px 0 6px}
.ss-3step p{margin:0;font-size:15.5px;line-height:1.5;opacity:.88}
.ss-3v{position:relative;height:218px;border-radius:16px;background:rgba(5,12,35,.28);overflow:hidden;display:flex;align-items:center;justify-content:center}
/* 1 – Karten wählen */
.ss-3v-pick{gap:6%;padding:0 6%}
.ss-3c{position:relative;width:21%;aspect-ratio:506/760;border-radius:7px;box-shadow:0 10px 18px -8px rgba(0,0,0,.6);opacity:0;translate:0 30px}
.ss-3c img{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block}
.ss-3c i{position:absolute;right:-8px;top:-8px;width:24px;height:24px;border-radius:50%;background:#39b65a;color:#fff;font:800 13px/24px var(--ss-body);text-align:center;font-style:normal;scale:0;box-shadow:0 0 0 3px rgba(57,182,90,.3)}
.is-in .ss-3c{animation:ss-3up .5s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--n)*.12s)}
.is-in .ss-3c i{animation:ss-3pop .4s cubic-bezier(.3,1.8,.5,1) forwards;animation-delay:calc(.55s + var(--n)*.18s)}
@keyframes ss-3up{to{opacity:1;translate:0 0}}
@keyframes ss-3pop{to{scale:1}}
/* 2 – zum Training hinzufügen */
.ss-3v-list{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding:12px;background:#fff}
.ss-3l-head{font:600 11px/1 var(--ss-caps);letter-spacing:.2em;text-transform:uppercase;color:var(--ss-muted);margin:2px 2px 2px}
.ss-3row{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;background:var(--ss-cream);border-radius:9px;padding:4px 8px 4px 4px;
  border-left:4px solid var(--c);opacity:0;translate:-30px 0;color:var(--ss-ink)}
.ss-3row img{width:22px;height:33px;object-fit:cover;border-radius:3px}
.ss-3row span{font:700 13px/1.1 var(--ss-head);color:var(--ss-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-3row small{display:block;font:600 10px/1.2 var(--ss-body);color:var(--ss-muted)}
.ss-3row em{font:800 13px var(--ss-body);font-style:normal;color:var(--ss-red)}
.is-in .ss-3row{animation:ss-3slide .45s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(1.3s + var(--n)*.22s)}
@keyframes ss-3slide{to{opacity:1;translate:0 0}}
/* 3 – fertig */
.ss-3v-ready{flex-direction:column;gap:10px}
.ss-3ring{position:relative;width:96px;height:96px}
.ss-3ring svg{width:100%;height:100%;rotate:-90deg}
.ss-3ring circle{fill:none;stroke:rgba(255,255,255,.15);stroke-width:10}
.ss-3ring .ss-3ring-go{stroke:#39b65a;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327}
.ss-3ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 40px/1 var(--ss-body);color:#39b65a;scale:0}
.is-in .ss-3ring-go{animation:ss-3ring 1s ease-out 2.4s forwards}
.is-in .ss-3ring b{animation:ss-3pop .45s cubic-bezier(.3,1.8,.5,1) 3.3s forwards}
@keyframes ss-3ring{to{stroke-dashoffset:0}}
.ss-3sum{display:flex;align-items:baseline;gap:8px;color:#fff}
.ss-3sum small{font:600 12px var(--ss-caps);letter-spacing:.2em;text-transform:uppercase;color:var(--ss-sky)}
.ss-3sum b{font:700 28px/1 var(--ss-head)}
.ss-3go{scale:0}
.is-in .ss-3go{animation:ss-3pop .45s cubic-bezier(.3,1.8,.5,1) 3.5s forwards}
@media (max-width:900px){
  .ss-threesteps{grid-template-columns:1fr;max-width:460px;margin:0 auto!important}
  .ss-3step:not(:last-child):after{content:"↓";right:50%;margin-right:-15px;top:auto;bottom:-24px}
}

/* ---------- Kartenschau ---------- */
.ss-cs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.2vw,30px)}
.ss-cs-col{display:flex;flex-direction:column;align-items:center}
.ss-cs-cat{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--ss-caps);letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.ss-cs-cat i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.ss-cs-card{position:relative;width:100%;aspect-ratio:506/760;border:0;padding:0;background:none;cursor:pointer;border-radius:14px;
  box-shadow:0 22px 36px -16px rgba(0,0,0,.7);rotate:-2.5deg;transition:translate .35s cubic-bezier(.3,1.4,.5,1),scale .35s,rotate .35s,box-shadow .3s}
.ss-cs-card+.ss-cs-card{margin-top:-62%;rotate:3deg;translate:5% 0}
.ss-cs-card img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}
.ss-cs-card:hover,.ss-cs-card:focus-visible{z-index:4;rotate:0deg;scale:1.05;translate:0 -12px;box-shadow:0 34px 50px -18px rgba(0,0,0,.8)}
.ss-cs-flip{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;background:var(--ss-red);color:#fff;display:grid;place-items:center;
  font:800 20px/1 var(--ss-body);box-shadow:0 4px 0 var(--ss-red-dark);opacity:0;scale:.6;transition:opacity .25s,scale .25s}
.ss-cs-card:hover .ss-cs-flip,.ss-cs-card:focus-visible .ss-cs-flip{opacity:1;scale:1}
.ss-js .ss-cs-card.ss-reveal{transition-delay:calc(var(--g,0) * 90ms + var(--j,0) * 140ms)}
.ss-cs-hint{text-align:center;margin:26px 0 0;font-weight:700;color:var(--ss-sky)}
.ss-cs-hint:before{content:"☝ "}
@media (max-width:760px){.ss-cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}

/* ---------- Sprachumschalter für die Karten ---------- */
.ss-langswitch{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 auto 26px}
.ss-ls-label{font:600 13px/1.2 var(--ss-caps);letter-spacing:.18em;text-transform:uppercase;color:var(--ss-sky);margin-right:6px}
.ss-langswitch button{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;
  padding:7px 16px 7px 7px;font:700 15px/1 var(--ss-body);cursor:pointer;transition:background .2s,border-color .2s,transform .12s}
.ss-langswitch button b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);font:600 12px/1 var(--ss-caps);letter-spacing:.06em}
.ss-langswitch button:hover{background:rgba(255,255,255,.16)}
.ss-langswitch button:active{transform:translateY(2px)}
.ss-langswitch button.is-on{background:#fff;border-color:#fff;color:var(--ss-navy);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.ss-langswitch button.is-on b{background:var(--ss-red);color:#fff}
.ss-ha-langs .ss-langswitch{margin:18px 0 0}
.ss-ha-langs .ss-ls-label{flex-basis:100%;text-align:center;margin:0 0 2px;font-size:11.5px;letter-spacing:.16em}
.ss-ha-langs .ss-langswitch{gap:6px}
.ss-ha-langs .ss-langswitch button{padding:5px 12px 5px 5px;font-size:13.5px}
.ss-ha-langs .ss-langswitch button b{width:26px;height:26px;font-size:11px}
.ss-lightbox .ss-langswitch{margin:4px 0 0}
.ss-lightbox .ss-langswitch button{padding:5px 12px 5px 5px;font-size:13.5px}
.ss-lightbox .ss-langswitch button b{width:26px;height:26px}
.ss-cardlist+*,.ss-langswitch+.ss-cardlist{margin-top:0}
img.ss-turn{transform:perspective(600px) rotateY(90deg);transition:transform .18s ease-in}
img[src*="/traincards/"]{transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
@media (max-width:560px){.ss-ls-label{flex-basis:100%;text-align:center;margin:0 0 4px}.ss-langswitch{gap:6px}.ss-langswitch button{padding:4px 10px 4px 4px;font-size:12.5px;gap:6px}.ss-langswitch button b{width:24px;height:24px;font-size:10px}}

/* ---------- Instagram-Bereich ---------- */
.ss-insta{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center;border-radius:34px;padding:clamp(26px,4vw,56px);
  background:radial-gradient(120% 120% at 100% 0%,rgba(221,42,123,.45),transparent 55%),radial-gradient(90% 90% at 0% 100%,rgba(254,218,117,.28),transparent 60%),linear-gradient(135deg,#3a1f6e,#16306B 70%);
  border:1px solid rgba(255,255,255,.18);box-shadow:var(--ss-shadow);overflow:hidden}
.ss-insta .ss-eyebrow:before{background:linear-gradient(90deg,#feda75,#fa7e1e,#d62976,#962fbf)}
.ss-insta .ss-title{font-size:clamp(34px,4.6vw,58px)!important}
.ss-insta .ss-tab{background:linear-gradient(90deg,#feda75,#fa7e1e 30%,#d62976 65%,#962fbf);color:#fff}
.ss-insta-btn{display:inline-flex;align-items:center;gap:12px;margin-top:10px;padding:16px 28px;border-radius:999px;color:#fff!important;text-decoration:none!important;
  font:800 19px/1 var(--ss-body);background:linear-gradient(90deg,#f58529,#dd2a7b 50%,#8134af);box-shadow:0 5px 0 #6a1f73,0 18px 34px -14px rgba(221,42,123,.8);
  transition:transform .15s,box-shadow .15s}
.ss-insta-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #6a1f73,0 22px 40px -14px rgba(221,42,123,.9)}
.ss-insta-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #6a1f73}
.ss-insta-handle{display:block;margin-top:14px;color:var(--ss-sky)!important;font-weight:700;text-decoration:none!important}
.ss-insta-art{position:relative;display:flex;justify-content:center;min-height:480px}
.ss-insta-phone{position:relative;display:block;width:min(290px,72%);aspect-ratio:9/17.5;border-radius:38px;background:#0b1022;padding:10px;rotate:-4deg;
  box-shadow:0 0 0 2px #2b3352 inset,0 40px 70px -30px rgba(0,0,0,.8);transition:rotate .5s}
.ss-insta:hover .ss-insta-phone{rotate:0deg}
.ss-insta-phone video{width:100%;height:100%;object-fit:cover;border-radius:29px;display:block;background:#16306B}
.ss-ip-top{position:absolute;left:20px;right:20px;top:20px;z-index:2;display:flex;align-items:center;gap:8px;color:#fff!important;text-decoration:none!important;font:700 13px/1 var(--ss-body);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.ss-ip-top img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 4px #dd2a7b}
.ss-ip-top i{margin-left:auto;font-style:normal;border:1.5px solid #fff;border-radius:8px;padding:5px 9px;font-size:12px}
.ss-ip-hearts{position:absolute;right:22px;bottom:30px;width:30px;height:160px;pointer-events:none}
.ss-ip-hearts i{position:absolute;bottom:0;left:0;font-style:normal;color:#ff3b6b;font-size:24px;opacity:0;animation:ss-heart 3.6s ease-out infinite;animation-delay:calc(var(--n,0) * .9s)}
.ss-ip-hearts i:nth-child(2){--n:1;left:8px}.ss-ip-hearts i:nth-child(3){--n:2;left:-6px}.ss-ip-hearts i:nth-child(4){--n:3;left:4px}
@keyframes ss-heart{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-150px) scale(1.2) rotate(18deg)}}
.ss-insta-badge{position:absolute;left:4%;top:12%;z-index:3;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ss-navy);border-radius:999px;padding:10px 16px;
  font:800 16px/1 var(--ss-body);box-shadow:0 14px 30px -12px rgba(0,0,0,.6);rotate:-6deg;animation:ss-bob 3s ease-in-out infinite}
.ss-insta-badge .ss-ig-ic{color:#dd2a7b}
.ss-insta-pong{position:absolute;right:-4%;bottom:-6%;width:46%;z-index:3}
@media (max-width:900px){.ss-insta{grid-template-columns:1fr;text-align:center}.ss-insta .ss-eyebrow{justify-content:center}.ss-insta .ss-lead{margin:0 auto}.ss-insta-art{min-height:420px}}
.ss-ip-sound{position:absolute;left:20px;bottom:22px;z-index:3;border:0;border-radius:999px;padding:9px 14px;cursor:pointer;
  background:rgba(8,19,47,.78);color:#fff;font:800 13px/1 var(--ss-body);backdrop-filter:blur(6px);box-shadow:0 6px 16px -6px rgba(0,0,0,.6);white-space:nowrap}
.ss-ip-sound .on{display:none}.ss-ip-sound.is-on .on{display:inline}.ss-ip-sound.is-on .off{display:none}
.ss-ip-sound:not(.is-on){animation:ss-bob 2.4s ease-in-out infinite}
/* Pong-Museum */
.ss-museum{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,60px);align-items:center;border-radius:34px;padding:clamp(26px,4vw,56px);
  background:radial-gradient(110% 110% at 0% 0%,rgba(227,59,46,.42),transparent 55%),radial-gradient(90% 90% at 100% 100%,rgba(147,192,238,.3),transparent 60%),linear-gradient(135deg,#1d3d86,#0f2152);
  border:1px solid rgba(255,255,255,.18);box-shadow:var(--ss-shadow);overflow:hidden}
.ss-museum .ss-title{font-size:clamp(34px,4.6vw,58px)!important}
.ss-mu-art .ss-insta-phone{rotate:4deg}
.ss-museum:hover .ss-insta-phone{rotate:0deg}
.ss-mu-ticket{position:absolute;left:0;top:10%;z-index:3;display:block;width:190px;rotate:-10deg;text-decoration:none!important;color:#fff!important;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.45));transition:rotate .3s,scale .3s;animation:ss-bob 3.2s ease-in-out infinite}
.ss-mu-ticket:hover{rotate:-4deg;scale:1.05}
.ss-mu-main,.ss-mu-stub{display:block;background:var(--ss-red);padding:14px 16px}
.ss-mu-main{border-radius:14px 14px 0 0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 10px,transparent 10px 20px),var(--ss-red)}
.ss-mu-main small{display:block;font:600 11px/1 var(--ss-caps);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.ss-mu-main b{display:block;font:700 24px/1.1 var(--ss-head);margin-top:4px}
.ss-mu-stub{border-radius:0 0 14px 14px;border-top:3px dashed rgba(255,255,255,.7);font:800 13px/1 var(--ss-body);display:flex;justify-content:space-between}
.ss-mu-stub i{font-style:normal}
.ss-mu-pong{right:-2%;bottom:-8%;width:44%}
.ss-mu-facts{list-style:none;margin:6px 0 24px!important;padding:0!important;display:flex;flex-wrap:wrap;gap:8px}
.ss-mu-facts li{margin:0!important;padding:8px 14px!important;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font:700 14px/1 var(--ss-body)}
.ss-mu-facts li:before{content:"✓ ";color:var(--ss-sky);display:inline!important;position:static!important}
.ss-mu-btn{font-size:19px;padding:16px 28px}
@media (max-width:900px){.ss-museum{grid-template-columns:1fr;text-align:center}.ss-museum .ss-mu-art{order:2}.ss-museum .ss-eyebrow{justify-content:center}.ss-mu-facts{justify-content:center}.ss-museum .ss-lead{margin:0 auto}}
@media (max-width:480px){.ss-mu-ticket{width:150px}.ss-mu-main b{font-size:19px}}
@media (max-width:480px){.ss-insta-btn{padding:14px 20px;font-size:16px;gap:9px;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.ss-ip-hearts{display:none}.ss-insta-badge{animation:none}}

/* Großansicht: Hinweis */
.ss-lb-tip{color:var(--ss-sky);font:700 14px var(--ss-body);margin-top:-4px}

/* ---------- Kartenliste (nur Titel) ---------- */
.ss-cardlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ss-cl-col{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--ss-r-md);padding:18px 18px 12px;border-top:5px solid var(--c)}
.ss-cl-head{display:flex;align-items:center;gap:8px;font:700 19px/1.2 var(--ss-head);color:#fff;margin-bottom:10px;flex-wrap:wrap}
.ss-cl-head i{width:11px;height:11px;border-radius:50%;background:var(--c)}
.ss-cl-head small{font:600 12px var(--ss-caps);letter-spacing:.14em;text-transform:uppercase;color:var(--ss-sky);margin-left:auto}
.ss-cardlist ul{list-style:none;margin:0!important;padding:0!important}
.ss-cardlist li{display:flex;justify-content:space-between;gap:10px;margin:0!important;padding:6px 0!important;border-bottom:1px dashed rgba(255,255,255,.13);font-size:15px;line-height:1.3}
.ss-cardlist li:last-child{border-bottom:0}
.ss-cardlist li:before{display:none}
.ss-cardlist li em{font-style:normal;font-weight:800;color:var(--ss-mut);font-size:13px;white-space:nowrap}
@media (max-width:1000px){.ss-cardlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ss-cardlist{grid-template-columns:1fr}}

/* ---------- Trainer-Abschnitt ---------- */
.ss-cert{display:flex;align-items:center;gap:16px;margin-top:22px;padding:14px;border-radius:var(--ss-r-md);background:var(--ss-cream);max-width:560px}
.ss-cert img{width:150px;height:auto;border-radius:10px;box-shadow:var(--ss-shadow-sm);flex:none}
.ss-cert b{display:block;font:700 18px/1.2 var(--ss-head);color:var(--ss-navy)}
.ss-cert span{font-size:14.5px;color:var(--ss-ink)}
@media (max-width:520px){.ss-cert{flex-direction:column;align-items:flex-start}}

/* ---------- Kopfzeile ---------- */
.l-header .l-subheader.at_middle{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.l-header .w-nav-anchor.level_1{font:700 16px/1 var(--ss-body)!important}
.l-header .w-nav-anchor.level_1 .w-nav-title{position:relative}
.l-header .w-nav-item.level_1:not(.current-menu-item)>.w-nav-anchor .w-nav-title:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:3px;border-radius:3px;background:var(--ss-red);transition:right .25s}
.l-header .w-nav-item.level_1>.w-nav-anchor:hover .w-nav-title:after{right:0}
.ss-head-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ss-red);color:#fff!important;text-decoration:none!important;border-radius:999px;padding:11px 18px;
  font:800 15px/1 var(--ss-body);box-shadow:0 3px 0 var(--ss-red-dark);white-space:nowrap;transition:background .2s,transform .12s}
.ss-head-cta:before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.4-.9-1.7 0-3.3 1-4.2 2.6-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8s2 .8 3.4.8c1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9 0 0-2.7-1-2.7-4.1zM13.9 4.9c.7-.9 1.2-2.1 1.1-3.3-1 0-2.3.7-3 1.6-.7.8-1.2 2-1.1 3.2 1.2.1 2.3-.6 3-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.6 2.1-3.8 2.2-3.9-1.2-1.8-3.1-2-3.7-2-1.6-.2-3.1.9-3.9.9-.8 0-2-.9-3.4-.9-1.7 0-3.3 1-4.2 2.6-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.6 1.3-.1 1.8-.8 3.3-.8s2 .8 3.4.8c1.4 0 2.3-1.3 3.1-2.5 1-1.4 1.4-2.8 1.4-2.9 0 0-2.7-1-2.7-4.1zM13.9 4.9c.7-.9 1.2-2.1 1.1-3.3-1 0-2.3.7-3 1.6-.7.8-1.2 2-1.1 3.2 1.2.1 2.3-.6 3-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.ss-head-cta:hover{background:#dc463d}
.ss-head-ig{display:inline-grid;place-items:center;width:42px;height:42px;margin-right:10px;border-radius:50%;color:#fff!important;vertical-align:middle;
  background:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af);box-shadow:0 3px 0 #6a1f73;transition:transform .15s}
.ss-head-ig:hover{transform:translateY(-2px) rotate(-6deg)}
@media (max-width:480px){.ss-head-ig{width:36px;height:36px;margin-right:6px}.ss-head-ig svg{width:18px;height:18px}}
.ss-head-cta:active{transform:translateY(2px)}
@media (max-width:480px){.ss-head-cta{padding:9px 12px;font-size:13px}.ss-head-cta:before{display:none}}
.w-nav.type_mobile .w-nav-list.level_1{background:var(--ss-bg-a)!important}
html{scroll-padding-top:90px}

/* ---------- Fußzeile ---------- */
.l-footer,.l-footer .l-section.color_footer-top{background:#08132f!important}
.l-footer .l-section.color_footer-bottom{background:#060f26!important}
.l-footer .ss-footer{border-top:1px solid rgba(255,255,255,.08)}
.l-footer .ss-foot-logo img{height:44px;width:auto}
.l-footer h6{font:600 13px/1 var(--ss-caps)!important;letter-spacing:.22em;text-transform:uppercase;color:var(--ss-sky)!important;margin:6px 0 14px!important}
.l-footer .w-menu .menu{list-style:none;margin:0!important;padding:0!important}
.l-footer .w-menu .menu-item{margin:0 0 10px!important;padding:0!important}
.l-footer .w-menu .menu-item:before{display:none}
.l-footer .w-menu a{color:#fff!important;font-weight:700;text-decoration:none!important;opacity:.85;transition:opacity .2s}
.l-footer .w-menu a:hover{opacity:1;color:var(--ss-sky)!important}
.l-footer .ss-stores{margin-top:14px}
.l-footer .ss-store{min-width:0;padding:8px 14px 8px 10px}
.l-footer .ss-store>span{font-size:17px}
.ss-foot-social a{color:#fff!important;font-weight:700}
.l-footer .ss-footer-bottom{font-size:14px;color:var(--ss-mut)}
.l-footer .ss-footer-bottom p{margin:0;text-align:center}

/* ---------- Einblenden beim Scrollen ---------- */
.ss-js .ss-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.ss-js .ss-reveal.is-in{opacity:1;transform:none}
.ss-js .ss-features .ss-feature.ss-reveal{transition-delay:calc(var(--i,0) * 80ms)}

@media (prefers-reduced-motion:reduce){
  .ss-ha-card,.ss-ha-hint,.ss-3c,.ss-3row,.ss-3c i,.ss-3ring b,.ss-3go{animation:none!important;opacity:1!important;translate:none!important;scale:1!important}
  .ss-3ring-go{stroke-dashoffset:0!important}
  .ss-pong-fig,.ss-step.is-on .ss-step-bar,.ss-deck-card.is-drawing,.ss-cg-item{animation:none!important}
  .ss-js .ss-reveal{opacity:1;transform:none;transition:none}
  .ss-phone{rotate:0deg}
}