:root{
  --bg:#08090A;--g2:#0B0E11;--panel:#0E1418;--panel2:#111A20;--line:#1E272D;--line2:#161E23;--kante:#2A3740;
  --fg:#E4EFF5;--dim:#8B979F;--faint:#7A868E;--blue:#8FD8FF;--green:#5FE3A8;--amber:#F5B36B;--lime:#BFE07A;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp:"Archivo","IBM Plex Sans",sans-serif;
  --brico:"Bricolage Grotesque","Archivo",sans-serif;
  --wrap:1280px;--pad:clamp(16px,4vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.s5-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s5-mono{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.s5-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--blue)}
.s5-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.s5-btn{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 24px;background:var(--blue);color:var(--bg);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;transition:background .3s ease}
.s5-btn:hover{background:var(--fg);color:var(--bg)}
.s5-btn--rand{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.s5-btn--rand:hover{background:var(--blue);color:var(--bg)}
.s5-sec{position:relative;padding:clamp(72px,10vw,128px) 0}
.s5-h2{margin:0;font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:clamp(40px,5.4vw,64px);line-height:1;letter-spacing:-.02em}

/* ---------------------------------------------------------------- Kopf */
.s5-kopf{position:fixed;z-index:50;top:16px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:1360px;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 22px;background:rgba(11,14,17,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 40px rgba(143,216,255,.06);transition:background .4s ease,top .4s ease}
.s5-kopf.unten{background:rgba(8,9,10,.92)}
.s5-marke{display:flex;align-items:center;gap:12px;color:var(--fg)}
.s5-marke:hover{color:var(--fg)}
.s5-marke b{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em}
.s5-marke b i{font-style:normal;color:var(--blue)}
.s5-nav{display:flex;align-items:stretch;gap:2px;height:100%}
.s5-nav a{position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 18px;color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;border-left:1px solid transparent;border-right:1px solid transparent;transition:color .3s ease,background .3s ease}
.s5-nav a:hover{color:var(--fg);background:rgba(143,216,255,.04)}
.s5-nav a .s5-ch{display:flex;gap:10px;align-items:baseline}
.s5-nav a .s5-ch em{font-style:normal;font-size:10px;color:var(--faint);letter-spacing:.18em}
.s5-pegel{display:flex;gap:3px;align-items:flex-end;height:8px}
.s5-pegel i{display:block;width:6px;height:2px;background:var(--line);transition:background .4s ease,height .4s ease}
.s5-nav a:hover .s5-pegel i{background:var(--blue)}
.s5-nav a.an{color:var(--fg);background:var(--panel);border-color:var(--line)}
.s5-nav a.an .s5-ch em{color:var(--green)}
.s5-nav a.an .s5-pegel i{background:var(--green);box-shadow:0 0 6px rgba(95,227,168,.6);transform-origin:bottom;animation:s5-pegel 9s ease-in-out infinite}
.s5-nav a.an .s5-pegel i:nth-child(2){animation-delay:-2s}.s5-nav a.an .s5-pegel i:nth-child(3){animation-delay:-4s}.s5-nav a.an .s5-pegel i:nth-child(4){animation-delay:-6s}.s5-nav a.an .s5-pegel i:nth-child(5){animation-delay:-7.5s}
@keyframes s5-pegel{0%,100%{height:2px}50%{height:8px}}
.s5-menue{display:none;width:48px;height:48px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--fg);cursor:pointer}
.s5-menue svg{width:20px;height:20px}

/* Seitenschiene rechts (Uebersicht 01-06), klein; Name nur beim Zeigen */
.s5-schiene{position:fixed;z-index:40;right:max(14px,calc(50% - 712px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase}
.s5-schiene a{position:relative;display:flex;align-items:center;gap:8px;height:22px;padding:0 4px 0 8px;color:var(--faint)}
.s5-schiene a em{order:3;width:16px;text-align:right}
.s5-schiene a i{order:2;display:block;height:2px;width:12px;background:var(--line);transition:background .4s ease,width .4s ease}
.s5-schiene a span{order:1;position:absolute;right:calc(100% + 2px);padding:4px 8px;background:rgba(14,20,24,.94);border:1px solid var(--line);color:var(--fg);white-space:nowrap;opacity:0;transform:translateX(6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.s5-schiene a:hover span{opacity:1;transform:none}
.s5-schiene a:hover,.s5-schiene a.an{color:var(--fg)}
.s5-schiene a.an i{background:var(--green);width:20px;box-shadow:0 0 8px rgba(95,227,168,.6)}
.s5-schiene a:hover i{background:var(--blue)}
.s5-schiene{opacity:0;pointer-events:none;transition:opacity .6s ease}
.s5-schiene.zeigen{opacity:1;pointer-events:auto}
.s5-schiene small{margin:8px 4px 0 0;font-size:9px;letter-spacing:.22em;color:var(--dim)}

/* ---------------------------------------------------------------- Hero */
.s5-hero{position:relative;min-height:max(760px,100vh);max-height:1080px;display:flex;flex-direction:column;justify-content:center;padding:136px 0 64px;overflow:hidden}
.s5-hero__bild{position:absolute;inset:0 0 auto 0;height:62%;z-index:0}
.s5-hero__bild img{width:100%;height:100%;object-fit:cover;object-position:center 58%;opacity:.42}
.s5-hero__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.55) 0%,rgba(8,9,10,.25) 35%,rgba(8,9,10,.92) 82%,var(--bg) 100%)}
.s5-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(8,9,10,.18) 0 1px,transparent 1px 3px)}
.s5-rack{position:absolute;z-index:2;top:96px;bottom:24px;width:28px;background:var(--g2);border:1px solid var(--line);background-image:repeating-linear-gradient(180deg,transparent 0 30px,var(--line2) 30px 31px);display:flex;flex-direction:column;justify-content:space-around;align-items:center}
.s5-rack i{display:block;width:10px;height:10px;border-radius:50%;background:var(--bg);border:1px solid var(--kante)}
.s5-rack--l{left:max(12px,calc(50% - 720px))}
.s5-rack--r{right:max(12px,calc(50% - 720px))}
.s5-band{position:relative;z-index:3;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.s5-band__spur{display:flex;gap:16px;width:max-content;padding:4px 0}
.s5-band--a .s5-band__spur{animation:s5-links 120s linear infinite}
.s5-band--b .s5-band__spur{animation:s5-rechts 140s linear infinite}
.s5-band:hover .s5-band__spur{animation-play-state:paused}
@keyframes s5-links{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes s5-rechts{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* Kanalzug-Karte */
.s5-kz{position:relative;flex:none;width:272px;display:grid;grid-template-columns:minmax(0,1fr) 14px;grid-template-rows:auto auto auto;gap:0 10px;padding:10px 10px 10px 12px;background:var(--g2);border:1px solid var(--line);color:var(--fg);transition:border-color .4s ease,background .4s ease}
.s5-kz:hover{border-color:var(--blue);background:var(--panel);color:var(--fg)}
.s5-kz__kopf{grid-column:1/2;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim)}
.s5-kz__kopf b{font-weight:400}
.s5-kz__led{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(95,227,168,.7);animation:s5-led 9s ease-in-out infinite}
.s5-kz__led.soon{background:var(--amber);box-shadow:0 0 8px rgba(245,179,107,.6)}
@keyframes s5-led{0%,100%{opacity:1}50%{opacity:.45}}
.s5-kz__schirm{grid-column:1/2;margin-top:8px;aspect-ratio:16/10;background:var(--bg);border:1px solid var(--line2);overflow:hidden}
.s5-kz__schirm img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .4s ease}
.s5-kz:hover .s5-kz__schirm img{opacity:1}
.s5-kz__fuss{grid-column:1/2;margin-top:8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.s5-kz__fuss b{font-family:var(--disp);font-weight:800;font-stretch:118%;font-size:17px}
.s5-kz__fuss span{font-family:var(--mono);font-size:11px;color:var(--dim)}
.s5-kz__fuss span.frei{color:var(--green)}
.s5-kz__meter{grid-column:2/3;grid-row:1/4;position:relative;background:var(--panel2);overflow:hidden}
.s5-meter{position:absolute;left:0;right:0;bottom:0;height:100%;transform-origin:50% 100%;background:linear-gradient(to top,var(--green) 0%,var(--green) 58%,var(--blue) 59%,var(--blue) 86%,var(--amber) 87%,var(--amber) 100%);-webkit-mask:repeating-linear-gradient(to top,#000 0 4px,transparent 4px 6px);mask:repeating-linear-gradient(to top,#000 0 4px,transparent 4px 6px);animation:s5-meter 13s ease-in-out infinite}
@keyframes s5-meter{0%,100%{transform:scaleY(.38)}30%{transform:scaleY(.62)}60%{transform:scaleY(.48)}80%{transform:scaleY(.7)}}
.s5-kz--leise .s5-meter{animation:none;transform:scaleY(.08)}
/* Mitte */
.s5-hero__mitte{position:relative;z-index:3;text-align:center;padding:0 var(--pad)}
.s5-eyebrow--striche{display:inline-flex;align-items:center;gap:14px;letter-spacing:.3em}
.s5-eyebrow--striche i{display:block;width:32px;height:1px;background:var(--blue);opacity:.6}
.s5-hero__mitte h1{margin:20px 0 0;font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.025em}
.s5-hero__mitte h1{text-shadow:0 2px 30px rgba(0,0,0,.55)}
.s5-hero__mitte h1 span{display:block;color:var(--blue);text-shadow:0 0 40px rgba(143,216,255,.25)}
.s5-hero__zeile{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:32px}
.s5-hero__zeile p{margin:0;max-width:540px;color:#B4C0C7;text-align:left;text-shadow:0 1px 16px rgba(0,0,0,.8)}
/* Hero 01 · Buehne, dahinter die Kulisse: Studiofilme nacheinander */
.s5-kulisse{position:absolute;inset:0;z-index:0;background:#05070A;overflow:hidden}
.s5-kulisse img,.s5-kulisse video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s5-kulisse img{opacity:.85;transition:opacity 1s ease}
.s5-kulisse.laeuft img{opacity:0}
.s5-kulisse video{opacity:0;transition:opacity 1.05s ease}
.s5-kulisse video.an{opacity:.9}
.s5-kulisse::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 46% 40% at 50% 30%,rgba(8,9,10,.55),rgba(8,9,10,0) 100%),linear-gradient(180deg,rgba(8,9,10,.45) 0%,rgba(8,9,10,.05) 28%,rgba(8,9,10,.15) 60%,rgba(8,9,10,.8) 88%,var(--bg) 100%)}
.s5-hero--buehne{justify-content:flex-start;padding:120px 0 36px;max-height:none;min-height:100vh}
.s5-hero__linien{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(var(--line2) 1px,transparent 1px);background-size:100% 80px;opacity:.25;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.s5-buehne{position:relative;z-index:3;width:min(760px,calc(100% - 2 * var(--pad)),max(420px,calc((100vh - 610px) * 1.6)));margin:36px auto 0}
.s5-buehne__bild{position:relative;aspect-ratio:16/10;background:var(--panel);animation:s5-atmen 12s ease-in-out infinite}
@keyframes s5-atmen{0%,100%{box-shadow:0 0 0 1px var(--line),0 40px 120px -40px rgba(143,216,255,.18)}50%{box-shadow:0 0 0 1px var(--line),0 40px 140px -30px rgba(143,216,255,.32)}}
.s5-folie{position:absolute;inset:0;opacity:0;transform:scale(1.035);transition:opacity 1.1s ease,transform 6.5s cubic-bezier(.2,.6,.2,1);overflow:hidden}
.s5-folie.an{opacity:1;transform:scale(1);z-index:1}
.s5-folie img,.s5-folie video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s5-folie video{opacity:0;transition:opacity .6s ease}
.s5-folie video.laeuft{opacity:1}
.s5-ecke{position:absolute;z-index:2;width:20px;height:20px;border:0 solid var(--blue);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.s5-ecke.tl{left:-10px;top:-10px;border-left-width:1px;border-top-width:1px}
.s5-ecke.tr{right:-10px;top:-10px;border-right-width:1px;border-top-width:1px}
.s5-ecke.bl{left:-10px;bottom:-10px;border-left-width:1px;border-bottom-width:1px}
.s5-ecke.br{right:-10px;bottom:-10px;border-right-width:1px;border-bottom-width:1px}
.s5-buehne.wechsel .s5-ecke.tl{transform:translate(-6px,-6px)}.s5-buehne.wechsel .s5-ecke.tr{transform:translate(6px,-6px)}
.s5-buehne.wechsel .s5-ecke.bl{transform:translate(-6px,6px)}.s5-buehne.wechsel .s5-ecke.br{transform:translate(6px,6px)}
.s5-buehne__scan{position:absolute;z-index:2;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(143,216,255,.8),transparent);opacity:0;pointer-events:none}
.s5-buehne.wechsel .s5-buehne__scan{animation:s5-scan 1.1s ease-out}
@keyframes s5-scan{0%{top:0;opacity:1}100%{top:100%;opacity:0}}
.s5-buehne__links,.s5-buehne__rechts{position:absolute;top:0;text-shadow:0 1px 12px rgba(0,0,0,.9);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);line-height:1.9}
.s5-buehne__links{right:calc(100% + 28px);width:140px;text-align:right}
.s5-buehne__links .blau{color:var(--blue)}.s5-buehne__links b{font-weight:400;color:var(--fg)}
.s5-buehne__links .leise{margin-top:14px;color:var(--faint)}
.s5-buehne__rechts{left:calc(100% + 28px);width:170px}
.s5-buehne__rechts b{display:block;font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:28px;letter-spacing:0;line-height:1;color:var(--fg);text-transform:none}
.s5-buehne__rechts div{margin-top:8px}
.s5-buehne__rechts .gruen{margin-top:12px;color:var(--green)}
.s5-buehne__rechts a{display:inline-block;margin-top:10px}
.s5-buehne__rechts [data-feld]{transition:opacity .35s ease,transform .35s ease}
.s5-buehne.wechsel .s5-buehne__rechts [data-feld]{opacity:0;transform:translateY(6px)}
.s5-buehne__zeile{margin-top:16px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.s5-streifen{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:32px auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.s5-dia{all:unset;cursor:pointer;display:block;color:var(--dim)}
.s5-dia__bild{position:relative;display:block;height:70px;border:1px solid var(--line);background:var(--panel);overflow:hidden;opacity:.62;transition:opacity .4s ease,border-color .4s ease}
.s5-dia__bild img{width:100%;height:100%;object-fit:cover}
.s5-dia__bild i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.s5-dia.an .s5-dia__bild{opacity:1;border-color:var(--blue)}
.s5-dia.an .s5-dia__bild i{animation:s5-dauer var(--dauer,6s) linear forwards}
.s5-streifen.halt .s5-dia.an .s5-dia__bild i{animation-play-state:paused}
@keyframes s5-dauer{to{transform:scaleX(1)}}
.s5-dia:hover .s5-dia__bild,.s5-dia:focus-visible .s5-dia__bild{opacity:1;border-color:var(--dim)}
.s5-dia.an{color:var(--fg)}
.s5-dia__name{display:flex;justify-content:flex-start;align-items:flex-start;gap:8px;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.s5-dia__name .neu,.s5-dia__name .bald{flex:none;width:6px;height:6px;margin-top:4px;border-radius:50%;font-size:0;background:var(--green);box-shadow:0 0 8px rgba(95,227,168,.7)}.s5-dia__name .bald{background:var(--amber);box-shadow:0 0 8px rgba(245,179,107,.6)}
@media (max-width:1180px){.s5-buehne__links{display:none}.s5-buehne__rechts{position:static;width:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:18px}.s5-buehne__rechts b{font-size:24px}.s5-buehne__rechts div,.s5-buehne__rechts .gruen,.s5-buehne__rechts a{margin-top:0}}
@media (max-width:760px){.s5-hero--buehne{padding:104px 0 32px}.s5-hero__zeile{flex-direction:column;gap:18px}.s5-hero__zeile p{text-align:center}
  .s5-streifen{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.s5-dia__bild{height:48px}.s5-dia__name{font-size:9px;letter-spacing:.1em}.s5-dia__name .neu,.s5-dia__name .bald{display:none}}

/* ---------------------------------------------------------------- Produkte */
.s5-prod__kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end;padding-bottom:28px;border-bottom:1px solid var(--line)}
.s5-prod__kopf .s5-zeitung{display:flex;justify-content:space-between;grid-column:1/-1;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.s5-prod__kopf h2{margin:0;font-family:var(--brico);font-weight:700;font-size:clamp(60px,9vw,124px);line-height:.86;letter-spacing:-.045em}
.s5-prod__kopf h2 span{color:var(--blue)}
.s5-prod__kopf p{margin:0 0 22px;font-size:clamp(19px,2vw,24px);line-height:1.4;font-weight:300}
.s5-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.s5-filter em{font-style:normal;color:var(--dim);margin-right:8px}
.s5-filter button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:transparent;border:1px solid var(--line);color:var(--dim);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:color .3s ease,border-color .3s ease,background .3s ease}
.s5-filter button i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.s5-filter button:hover{color:var(--fg);border-color:var(--kante)}
.s5-filter button[aria-pressed="true"]{color:var(--fg);background:var(--panel2)}
.s5-filter button[aria-pressed="true"] i{background:var(--green);box-shadow:0 0 8px var(--green)}
.s5-filter button b{font-weight:500;color:var(--fg)}
.s5-rackbez{display:flex;justify-content:space-between;gap:16px;margin:44px 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.s5-rackbez b{font-weight:400;color:var(--fg)}
.s5-gestell{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) 28px;background:var(--g2);border:1px solid var(--line)}
.s5-gestell__ohr{background:var(--panel);display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:12px 0}
.s5-gestell__ohr:first-child{border-right:1px solid var(--line)}
.s5-gestell__ohr:last-child{border-left:1px solid var(--line)}
.s5-gestell__ohr i{display:block;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.s5-gestell__fach{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px}
.s5-kabel{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:visible}
.s5-kabel path{fill:none;stroke-width:2.5}
.s5-kabel .s5-kabel__mantel{stroke:#1a242b}
.s5-kabel .s5-kabel__signal{stroke-dasharray:2 14;animation:s5-fluss 16s linear infinite}
@keyframes s5-fluss{to{stroke-dashoffset:-160}}
.s5-einheit{position:relative;display:grid;grid-template-columns:110px 200px minmax(0,1fr) 150px 92px;align-items:center;gap:24px;min-height:164px;padding:14px 20px 14px 22px;background:linear-gradient(var(--panel2),var(--panel));border:1px solid var(--line);transition:box-shadow .6s ease}
.s5-einheit:hover{box-shadow:0 0 0 1px var(--kante),0 0 40px rgba(143,216,255,.08)}
.s5-einheit[hidden]{display:none}
.s5-einheit__nr{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;line-height:1.7}
.s5-einheit__nr b{display:block;font-family:var(--brico);font-weight:700;font-size:44px;line-height:1;letter-spacing:-.04em;color:var(--fg)}
.s5-einheit__nr .neu{color:var(--green)}.s5-einheit__nr .bald{color:var(--amber)}
.s5-einheit__schirm{position:relative;aspect-ratio:16/10;background:var(--bg);border:1px solid var(--line);box-shadow:inset 0 0 24px rgba(0,0,0,.8);overflow:hidden}
.s5-einheit__schirm img,.s5-einheit__schirm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s5-einheit__schirm video{opacity:0;transition:opacity .8s ease}
.s5-einheit__schirm video.laeuft{opacity:1}
.s5-einheit__text h3{margin:0;font-family:var(--disp);font-weight:800;font-stretch:125%;font-size:34px;line-height:1}
.s5-einheit__text h3 a{color:var(--fg)}
.s5-einheit__text h3 a:hover{color:var(--blue)}
.s5-einheit__text .s5-unter{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.s5-einheit__text p{margin:10px 0 0;font-size:15px;color:var(--dim);max-width:52ch}
.s5-regler{display:flex;gap:16px;margin-top:12px}
.s5-regler span{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--dim)}
.s5-einheit__preis{text-align:right}
.s5-einheit__preis b{display:block;font-family:var(--mono);font-size:24px;font-weight:500}
.s5-einheit__preis b.frei{color:var(--green);font-size:18px}
.s5-einheit__preis small{display:block;margin:6px 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim)}
.s5-einheit__preis a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.s5-vu{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:52px}
.s5-vu canvas{display:block;width:44px;height:120px}
.s5-vu small{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim);white-space:nowrap;padding-left:12px}
.s5-vu__clip{display:block;width:22px;height:4px;margin-left:12px;background:#2A2218;transition:background .08s linear,box-shadow .08s linear}
.s5-vu__clip.an{background:var(--amber);box-shadow:0 0 10px rgba(245,179,107,.9)}
.s5-einheit:hover .s5-vu small,.s5-einheit:focus-within .s5-vu small{color:var(--green)}
.s5-buchsen{display:flex;flex-direction:column;gap:14px;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim)}
.s5-buchsen span{display:flex;align-items:center;gap:8px}
.s5-buchsen i{display:block;width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid var(--kante);box-shadow:inset 0 0 0 4px var(--panel)}
.s5-buchsen .belegt i{border-color:var(--blue)}
.s5-fig{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);text-align:right}

/* ---------------------------------------------------------------- Bundle */
.s5-bundle{overflow:clip}
.s5-bundle__kopf{text-align:center}
.s5-bundle__kopf p{margin:20px 0 0;font-size:19px;color:var(--dim)}
.s5-bundle__buehne{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:center;margin-top:56px;min-height:500px}
.s5-stapel{position:relative;height:500px}
.s5-stapel__rahmen{position:absolute;left:0;top:170px;width:min(520px,100%);aspect-ratio:520/340;border:1px solid var(--blue);box-shadow:0 0 60px rgba(143,216,255,.18),inset 0 0 40px rgba(143,216,255,.08);animation:s5-glimm 16s ease-in-out infinite}
.s5-stapel__rahmen span{position:absolute;left:0;top:calc(100% + 12px);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
@keyframes s5-glimm{0%,18%,100%{opacity:.25}50%,68%{opacity:1}}
.s5-stapel__karten{position:absolute;left:20px;top:210px;width:min(440px,calc(100% - 40px));aspect-ratio:440/280}
.s5-stapel__karte{position:absolute;inset:0;background:var(--panel);border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.55);animation:s5-falten 16s ease-in-out infinite;display:flex;flex-direction:column}
.s5-stapel__karte img{flex:1;min-height:0;width:100%;object-fit:cover}
.s5-stapel__karte div{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-family:var(--mono);font-size:12px;letter-spacing:.16em}
.s5-stapel__karte div span{color:var(--dim)}
.s5-stapel__karte div span.frei{color:var(--green)}
@keyframes s5-falten{0%,18%{transform:translate(calc(var(--i) * var(--dx)),calc(var(--i) * var(--dy)))}50%,68%{transform:translate(calc(var(--i) * 6px),calc(var(--i) * -4px))}100%{transform:translate(calc(var(--i) * var(--dx)),calc(var(--i) * var(--dy)))}}
.s5-stapel{--dx:52px;--dy:-30px}
/* 3D-Bibliothek: aufgefaechert, Scrollen holt Karte um Karte nach vorn */
.s5-stapel__karten{perspective:1400px;perspective-origin:30% 40%;transform-style:preserve-3d}
.s5-stapel__karte{animation:none;transform:translate(calc(var(--i) * var(--dx)),calc(var(--i) * var(--dy)));z-index:calc(20 - var(--i));will-change:transform,opacity;transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .55s ease,border-color .4s ease,box-shadow .4s ease;text-decoration:none;color:var(--fg)}
.s5-stapel__karte.vorn{border-color:var(--blue);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(143,216,255,.25),0 0 50px rgba(143,216,255,.15)}
.s5-stapel__stand{position:absolute;left:0;right:0;bottom:-44px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.s5-stapel__stand b{font-weight:500;color:var(--fg)}.s5-stapel__stand em{font-style:normal;color:var(--blue)}
.s5-stapel__stand>i{position:absolute;left:0;right:0;bottom:-10px;height:1px;background:var(--line)}
.s5-stapel__stand>i i{display:block;height:100%;width:100%;background:var(--blue);transform:scaleX(var(--p,0));transform-origin:left}
.s5-stapel__rahmen{animation:none;opacity:.5}
.s5-stapel__rahmen span{display:none}
.s5-bundle.strecke .s5-bundle__strecke{height:calc(100vh + 1600px)}
.s5-stapel__karte.weg{pointer-events:none;transition:transform .7s cubic-bezier(.5,0,.75,0),opacity .45s ease}
.s5-stapel__stand>i i{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.s5-bundle.strecke .s5-bundle__buehne{position:sticky;top:max(90px,calc(50vh - 290px))}
.s5-summe{font-family:var(--mono)}
.s5-summe small{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.s5-summe .w{font-size:30px;margin-top:10px}
.s5-summe .n{font-size:12px;color:var(--dim);margin-top:6px;letter-spacing:.06em}
.s5-summe hr{height:1px;border:0;background:var(--line);margin:28px 0}
.s5-summe .gross{font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:72px;line-height:1;margin-top:10px;color:var(--blue);text-shadow:0 0 30px rgba(143,216,255,.28)}
.s5-summe .gruen{color:var(--green)}
.s5-bundle__fuss{margin-top:40px;border-top:1px solid var(--line);padding-top:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.s5-bundle__fuss ul{display:flex;gap:40px;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* ---------------------------------------------------------------- About */
.s5-about{position:relative;overflow:hidden;padding:0}
.s5-about__bild{position:absolute;inset:0}
.s5-about__bild img{width:100%;height:100%;object-fit:cover;opacity:.55;animation:s5-schwenk 34s ease-in-out infinite alternate}
@keyframes s5-schwenk{from{transform:scale(1.06) translateX(0)}to{transform:scale(1.06) translateX(-2%)}}
.s5-about__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,10,.94) 0%,rgba(8,9,10,.72) 38%,rgba(8,9,10,.55) 60%,rgba(8,9,10,.88) 100%),repeating-linear-gradient(0deg,rgba(8,9,10,.22) 0 1px,transparent 1px 3px)}
.s5-about__i{position:relative;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(40px,7vw,112px);padding-top:clamp(80px,11vw,140px);padding-bottom:clamp(80px,11vw,140px)}
.s5-about__links h2{margin:28px 0 0;font-family:var(--disp);font-weight:800;font-stretch:105%;font-size:clamp(34px,4vw,50px);line-height:1.06;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.s5-about__links h2 span{color:var(--blue)}
.s5-about__sig{margin-top:40px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.9}
.s5-about__sig div+div{color:var(--dim)}
.s5-weg{position:relative;padding:22px 0 0 0;background:rgba(11,14,17,.82);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.s5-weg__schritte{position:relative;padding:28px 40px 8px}
.s5-weg__rail{position:absolute;left:79px;top:68px;bottom:96px;width:2px;background-image:linear-gradient(180deg,var(--blue) 0 40px,var(--line) 40px 120px);animation:s5-rail 12s linear infinite}
@keyframes s5-rail{from{background-position:0 0}to{background-position:0 120px}}
.s5-schritt{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);gap:28px;margin-bottom:44px}
.s5-schritt__icon{position:relative;z-index:1;width:80px;height:80px;border:1px solid var(--blue);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.s5-schritt__icon svg{width:46px;height:46px;transform:none !important}
.s5-schritt--gruen .s5-schritt__icon{color:var(--green)}
.s5-schritt:not(:last-child)::before{content:"";position:absolute;left:39px;top:80px;bottom:-44px;width:2px;background:var(--line);overflow:hidden}
.s5-schritt:not(:last-child)::after{content:"";position:absolute;left:38px;top:80px;width:4px;height:18px;background:linear-gradient(180deg,transparent,var(--blue));box-shadow:0 0 10px rgba(143,216,255,.7);animation:s5-puls 3.2s cubic-bezier(.5,0,.5,1) infinite}
.s5-schritt:nth-child(2)::after{animation-delay:1.6s;background:linear-gradient(180deg,transparent,var(--green));box-shadow:0 0 10px rgba(95,227,168,.7)}
@keyframes s5-puls{0%{transform:translateY(-18px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(var(--weg,120px));opacity:0}}
.i-welle path{stroke-dasharray:100 100;animation:s5-welle 3.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes s5-welle{0%{stroke-dashoffset:100}45%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.i-regler .zeiger{transform-origin:18px 18px;animation:s5-zeiger 6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes s5-zeiger{0%,100%{transform:rotate(-120deg)}45%,55%{transform:rotate(120deg)}}
.i-datei .haken{stroke-dasharray:100;stroke-dashoffset:100;animation:s5-haken 4s ease-out infinite}
@keyframes s5-haken{0%,20%{stroke-dashoffset:100}45%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.s5-schritt--gruen .s5-schritt__icon{border-color:var(--green);box-shadow:0 0 24px rgba(95,227,168,.16)}
.s5-schritt small{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.s5-schritt--gruen small{color:var(--green)}
.s5-schritt h3{margin:10px 0 0;font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.2}
.s5-schritt p{margin:10px 0 0;font-size:16px;color:var(--dim)}
.s5-weg__insta{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 40px;border-top:1px solid var(--line);color:var(--fg)}
.s5-weg__insta:hover{background:rgba(143,216,255,.04);color:var(--fg)}
.s5-weg__insta b{display:block;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.s5-weg__insta span{display:block;margin-top:6px;font-size:14px;color:var(--dim)}

/* ---------------------------------------------------------------- Kaufen */
.s5-kauf__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.s5-kauf__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.s5-karte{display:grid;grid-template-columns:120px minmax(0,1fr);gap:36px;min-height:270px;padding:40px;background:var(--panel);border:1px solid var(--line);transition:border-color .5s ease,background .5s ease}
.s5-karte:hover{border-color:var(--kante);background:var(--panel2)}
.s5-karte svg{animation:s5-schweb 9s ease-in-out infinite}
.s5-karte:nth-child(2) svg{animation-delay:-2s}.s5-karte:nth-child(3) svg{animation-delay:-4s}.s5-karte:nth-child(4) svg{animation-delay:-6s}
@keyframes s5-schweb{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.s5-karte small{display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--dim)}
.s5-karte h3{margin:0 0 12px;font-family:var(--disp);font-weight:700;font-size:28px}
.s5-karte p{margin:0;font-size:17px;color:var(--dim)}
.s5-karte a.s5-pfeil{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}

/* ---------------------------------------------------------------- Fuss */
.s5-fuss{padding:64px 0 56px;border-top:1px solid var(--line2)}
.s5-panel{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.s5-panel__ohr{background:var(--g2);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:22px 0}
.s5-panel__ohr:first-child{border-right:1px solid var(--line)}
.s5-panel__ohr:last-child{border-left:1px solid var(--line)}
.s5-panel__ohr i{display:block;width:16px;height:8px;background:var(--bg);border:1px solid var(--line)}
.s5-panel__i{padding:24px 32px 26px}
.s5-panel__kopf{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.s5-panel__kopf a{letter-spacing:.1em;text-transform:none;font-size:13px}
.s5-buchsenfeld{position:relative;margin-top:16px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.s5-buchse{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 6px 12px;color:var(--fg);border:1px solid transparent;text-align:center}
.s5-buchse:hover{border-color:var(--line);background:var(--panel2);color:var(--blue)}
.s5-buchse:hover b{background:var(--panel2)}
.s5-buchse small{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;white-space:nowrap}
.s5-buchse b{background:var(--panel);padding:0 6px;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.s5-buchse svg .ring{stroke:var(--faint);transition:stroke .3s ease}
.s5-buchse:hover svg .ring{stroke:var(--blue)}
.s5-buchse.blau svg .ring{stroke:var(--blue)}.s5-buchse.gruen svg .ring{stroke:var(--green)}
.s5-fuss__kabel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;animation:s5-haengen 14s ease-in-out infinite}
@keyframes s5-haengen{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.s5-fuss__mitte{position:relative;text-align:center;margin-top:56px}
.s5-fuss__mitte::before{content:"";position:absolute;left:50%;top:-30px;width:360px;height:160px;margin-left:-180px;background:radial-gradient(ellipse at center,rgba(143,216,255,.08),transparent 70%);animation:s5-glow 12s ease-in-out infinite;pointer-events:none}
@keyframes s5-glow{0%,100%{opacity:.4}50%{opacity:.85}}
.s5-fuss__marke{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:14px;color:var(--fg)}
.s5-fuss__marke:hover{color:var(--fg)}
.s5-fuss__marke b{font-family:var(--disp);font-weight:700;font-size:22px}
.s5-fuss__marke b i{font-style:normal;color:var(--blue)}
.s5-fuss__mail{display:inline-block;margin-top:24px;font-family:var(--mono);font-size:14px;letter-spacing:.08em}
.s5-fuss__vst{margin:24px auto 0;width:70px}
.s5-fuss__fein{max-width:760px;margin:24px auto 0;font-size:13px;line-height:1.65;color:var(--dim)}
.s5-fuss__fein p{margin:0 0 12px}
.s5-fuss__fein p.c{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--fg)}

/* ---------------------------------------------------------------- Bewegung reduziert */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .s5-stapel__karte{transform:translate(calc(var(--i) * var(--dx)),calc(var(--i) * var(--dy)))}
  .s5-meter{transform:scaleY(.5)}
}

/* ---------------------------------------------------------------- schmaler */
@media (max-width:1180px){
  .s5-schiene{display:none}
  .s5-einheit{grid-template-columns:90px 180px minmax(0,1fr) 120px;gap:20px}
  .s5-buchsen{display:none}
  .s5-vu{display:none}
  .s5-kabel{display:none}
}
@media (max-width:980px){
  .s5-nav a{padding:0 12px}
  .s5-nav a .s5-ch em{display:none}
  .s5-rack{display:none}
  .s5-prod__kopf{grid-template-columns:1fr}
  .s5-einheit{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"nr nr" "schirm text" "schirm preis";gap:16px 24px}
  .s5-einheit__nr{grid-area:nr;display:flex;align-items:baseline;gap:14px}
  .s5-einheit__nr b{font-size:30px;display:inline}
  .s5-einheit__schirm{grid-area:schirm}
  .s5-einheit__text{grid-area:text}
  .s5-einheit__preis{grid-area:preis;text-align:left;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
  .s5-einheit__preis small{margin:0}
  .s5-bundle__buehne{grid-template-columns:1fr;gap:8px}
  .s5-summe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end}
  .s5-summe hr{display:none}
  .s5-summe .gross{font-size:56px}
  .s5-about__i{grid-template-columns:1fr}
  .s5-kauf__raster{grid-template-columns:1fr}
  .s5-buchsenfeld{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .s5-kopf{top:10px;width:calc(100% - 20px);height:60px;padding:0 6px 0 14px}
  .s5-menue{display:inline-flex}
  .s5-nav{display:none;position:absolute;top:calc(100% + 6px);left:-1px;right:-1px;height:auto;flex-direction:column;background:rgba(11,14,17,.97);border:1px solid var(--line);padding:6px}
  .s5-kopf.offen .s5-nav{display:flex}
  .s5-nav a{min-height:52px;flex-direction:row;align-items:center;justify-content:space-between;padding:0 14px}
  .s5-nav a .s5-ch em{display:inline}
  .s5-hero{min-height:auto;padding:100px 0 48px}
  .s5-kz{width:220px}
  .s5-hero__zeile{flex-direction:column;gap:20px}
  .s5-hero__zeile p{text-align:center}
  .s5-hero__zeile hr{display:none}
  .s5-hero__fuss{flex-direction:column;align-items:center;text-align:center;padding:0 var(--pad);gap:6px}
  .s5-hero__fuss span:last-child{display:none}
  .s5-einheit{grid-template-columns:1fr;grid-template-areas:"nr" "schirm" "text" "preis";padding:14px}
  .s5-einheit__text h3{font-size:28px}
  .s5-stapel{height:380px;--dx:22px;--dy:-14px}
  .s5-stapel__rahmen{top:150px}
  .s5-stapel__karten{top:170px;left:10px;width:calc(100% - 180px)}
  .s5-summe{grid-template-columns:1fr 1fr;margin-top:40px}
  .s5-summe>div:last-child{grid-column:1/-1}
  .s5-schritt{grid-template-columns:56px minmax(0,1fr);gap:18px}
  .s5-schritt__icon{width:56px;height:56px}
  .s5-schritt__icon svg{width:34px;height:34px}
  .s5-schritt:not(:last-child)::before{left:27px;top:56px}
  .s5-schritt:not(:last-child)::after{left:26px;top:56px}
  .s5-weg__schritte{padding:24px 18px 4px}
  .s5-weg__insta{padding:18px}
  .s5-karte{grid-template-columns:1fr;gap:16px;padding:28px}
  .s5-karte svg{width:80px;height:80px}
  .s5-kauf__kopf{flex-direction:column;align-items:flex-start}
  .s5-panel{grid-template-columns:16px minmax(0,1fr) 16px}
  .s5-panel__ohr i{width:8px}
  .s5-panel__i{padding:18px 14px}
  .s5-buchsenfeld{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s5-buchse b{font-size:11px;letter-spacing:.1em}
}
@media (max-width:420px){
  .s5-stapel__karten{width:calc(100% - 120px)}
  .s5-buchsenfeld{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------------------------------------------------------- Schriftskala (ganze Seite, eine Quelle)
   H1 Hero · H2 jeder Abschnitt · Deck (Titelsatz neben dem Geraetenamen) · H3 jede Karte/Einheit · Lead · Text · Klein */
:root{
  --t-h1:clamp(40px,5vw,68px);
  --t-h2:clamp(34px,4.2vw,56px);
  --t-deck:clamp(28px,2.9vw,40px);
  --t-h3:clamp(22px,2.2vw,30px);
  --t-lead:clamp(17px,1.5vw,20px);
  --t-text:16px;
  --t-klein:14px;
}
.s5-hero__mitte h1{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:var(--t-h1);line-height:1.02;letter-spacing:-.025em}
.s5-h2,.s5-prod__kopf h2,.s5-about__links h2{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:var(--t-h2);line-height:1.04;letter-spacing:-.025em}
.s5-prod__kopf h2 span{color:var(--blue)}
.s5-einheit__text h3,.s5-schritt h3,.s5-karte h3{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:var(--t-h3);line-height:1.12;letter-spacing:-.01em}
.s5-einheit__text h3{font-stretch:125%;line-height:1}
.s5-hero__zeile p,.s5-prod__kopf p,.s5-bundle__kopf p{font-size:var(--t-lead);line-height:1.5;font-weight:400}
.s5-einheit__text p,.s5-schritt p,.s5-karte p{font-size:var(--t-text);line-height:1.6}

/* ---------------------------------------------------------------- v52 · What we make kompakt: alles auf einen Blick */
.s5-prod__kopf--knapp{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;padding-bottom:22px}
.s5-prod__kopf--knapp h2{flex:none;margin:0}
.s5-prod__kopf--knapp p{flex:1 1 260px;margin:0;color:var(--dim)}
.s5-prod__kopf--knapp .s5-filter{flex:none;align-self:center}
.s5-prod__kopf--knapp .s5-filter button{min-height:38px;padding:0 14px}
.s5-prod .s5-rackbez{margin:26px 0 10px}
.s5-gestell__fach{gap:4px;padding:4px}
.s5-einheit{grid-template-columns:76px 168px minmax(0,1fr) 112px 168px 52px;grid-template-areas:none;gap:22px;min-height:0;padding:10px 16px 10px 18px}
.s5-einheit__nr{display:block;font-size:9px;line-height:1.6}
.s5-einheit__nr b{display:block;font-size:34px;margin-bottom:4px}
.s5-einheit__nr span{display:block}
.s5-einheit__schirm{grid-area:auto;aspect-ratio:16/10}
.s5-einheit__text{grid-area:auto;min-width:0}
.s5-einheit__text .s5-unter{margin-top:6px;font-size:10px}
.s5-einheit__text p{margin:6px 0 0;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s5-einheit__preis{grid-area:auto;display:block;text-align:right}
.s5-einheit__preis b{font-size:22px}
.s5-einheit__preis small{margin:4px 0 0}
.s5-oeffnen{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 16px;border:1px solid var(--blue);color:var(--blue);font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.s5-oeffnen svg{transition:transform .3s ease}
.s5-oeffnen:hover,.s5-einheit:hover .s5-oeffnen{background:var(--blue);color:var(--bg);box-shadow:0 0 30px rgba(143,216,255,.25)}
.s5-einheit:hover .s5-oeffnen svg{transform:translateX(4px)}
.s5-vu canvas{height:92px;width:44px}
.s5-vu{gap:4px}
@media (max-width:1180px){
  .s5-einheit{grid-template-columns:64px 140px minmax(0,1fr) 96px 150px;gap:16px}
  .s5-einheit .s5-vu{display:none}
}
@media (max-width:980px){
  .s5-einheit{grid-template-columns:132px minmax(0,1fr) auto;grid-template-areas:"schirm text text" "schirm preis oeffnen";gap:10px 16px;padding:12px}
  .s5-einheit__nr{display:none}
  .s5-einheit__schirm{grid-area:schirm}
  .s5-einheit__text{grid-area:text}
  .s5-einheit__preis{grid-area:preis;display:flex;align-items:baseline;gap:10px;text-align:left}
  .s5-oeffnen{grid-area:oeffnen;height:40px}
}
@media (max-width:560px){
  .s5-einheit{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"schirm text" "preis oeffnen"}
  .s5-einheit__text p{display:none}
  .s5-einheit__text h3{font-size:22px}
  .s5-einheit__preis{align-self:center}
  .s5-oeffnen{padding:0 10px;font-size:11px}
}

/* ---------------------------------------------------------------- v52 · Kulisse: Atmosphaere statt Bild — kaltblau getont, leicht weich, Mitte ruhig */
.s5-kulisse img,.s5-kulisse video{filter:grayscale(.55) brightness(.78) contrast(1.12) blur(1.2px);transform:scale(1.03)}
.s5-kulisse img{opacity:.55}
.s5-kulisse.laeuft img{opacity:0}
.s5-kulisse video.an{opacity:.6}
.s5-kulisse::before{content:"";position:absolute;inset:0;z-index:1;background:#0E2230;mix-blend-mode:color;opacity:.85;pointer-events:none}
.s5-kulisse::after{z-index:2;background:
  radial-gradient(ellipse 38% 46% at 50% 62%,rgba(8,9,10,.78),rgba(8,9,10,0) 100%),
  radial-gradient(ellipse 50% 26% at 50% 26%,rgba(8,9,10,.6),rgba(8,9,10,0) 100%),
  linear-gradient(90deg,rgba(8,9,10,.55),rgba(8,9,10,0) 22%,rgba(8,9,10,0) 78%,rgba(8,9,10,.55)),
  linear-gradient(180deg,rgba(8,9,10,.5) 0%,rgba(8,9,10,0) 24%,rgba(8,9,10,0) 64%,rgba(8,9,10,.9) 90%,var(--bg) 100%)}

/* ---------------------------------------------------------------- v52 · Bundle: ganze Geraete, die mitschweben */
.s5-stapel__bild{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:10px;background:radial-gradient(ellipse at 50% 40%,#111A20,#0B0E11 75%);overflow:hidden;animation:s5-schweben 7s ease-in-out infinite;animation-delay:calc(var(--t) * -.9s)}
.s5-stapel__bild img{flex:none;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6));transform:translate(calc(var(--mx,0) * (8px + var(--t) * 2px)),calc(var(--my,0) * (6px + var(--t) * 1.5px)));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.s5-stapel__karte.vorn .s5-stapel__bild img{animation:s5-nah 9s ease-in-out infinite alternate}
@keyframes s5-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes s5-nah{from{scale:1}to{scale:1.05}}
.s5-stapel__karte.vorn .s5-stapel__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(143,216,255,.10) 50%,transparent 65%);background-size:250% 100%;animation:s5-glanz 5s ease-in-out infinite;pointer-events:none}
@keyframes s5-glanz{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.s5-stapel__karte div{background:var(--panel)}
@media (max-width:760px){.s5-prod__kopf--knapp .s5-filter{flex:1 1 100%;flex-wrap:wrap}}
.s5-einheit__nr .neu,.s5-einheit__nr .bald{display:block;margin-top:2px}
/* Bundle-Buehne groesser, damit die ganzen Geraete lesbar sind */
@media (min-width:981px){
  .s5-stapel{height:600px;--dx:40px;--dy:-26px}
  .s5-stapel__rahmen{top:180px;width:min(620px,100%)}
  .s5-stapel__karten{top:214px;left:20px;width:min(560px,calc(100% - 300px))}
  .s5-stapel__stand{bottom:-30px}
}

/* ---------------------------------------------------------------- v53 · Hero-Buehne zeigt immer das ganze Geraet */
.s5-buehne__bild{background:radial-gradient(ellipse at 50% 45%,#121C22,#0B0E11 72%)}
.s5-buehne__bild::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);background-size:40px 40px;opacity:.35;pointer-events:none}
.s5-folie img{object-fit:contain;padding:14px;filter:drop-shadow(0 18px 36px rgba(0,0,0,.65))}

/* ---------------------------------------------------------------- v53 · Bundle: das ganze Regal auf einen Blick, in die Tiefe gestaffelt */
.s5-bundle__buehne--regal{align-items:center}
.s5-regal{position:relative;perspective:1500px;perspective-origin:50% 20%;padding:30px 10px 70px}
.s5-regal__raum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 18px;transform-style:preserve-3d}
.s5-regal__karte{--tiefe:calc(-90 + var(--r) * 130 + (var(--s) - 1.5) * (var(--s) - 1.5) * 8);--heb:0;
  position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);color:var(--fg);text-decoration:none;
  box-shadow:0 26px 50px rgba(0,0,0,.6);
  transform:translate3d(calc(var(--mx,0) * var(--tiefe) * -.35px),calc(var(--my,0) * var(--tiefe) * -.25px + var(--heb) * -14px),calc(var(--tiefe) * 1px + var(--heb) * 140px));
  transition:transform .7s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease,opacity .4s ease;
  animation:s5-auftauchen 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 90ms);animation-play-state:paused}
.s5-regal.da .s5-regal__karte{animation-play-state:running}
@keyframes s5-auftauchen{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
.s5-regal__karte:hover,.s5-regal__karte:focus-visible{--heb:1;z-index:5;border-color:var(--blue);box-shadow:0 40px 80px rgba(0,0,0,.7),0 0 0 1px rgba(143,216,255,.3),0 0 60px rgba(143,216,255,.18);color:var(--fg)}
.s5-regal__raum:has(.s5-regal__karte:hover) .s5-regal__karte:not(:hover){opacity:.55}
.s5-regal__bild{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;padding:10px;background:radial-gradient(ellipse at 50% 40%,#111A20,#0B0E11 75%);overflow:hidden}
.s5-regal__bild img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:s5-schweben 7s ease-in-out infinite;animation-delay:calc(var(--i) * -.85s)}
.s5-regal__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(143,216,255,.09) 50%,transparent 65%);background-size:260% 100%;animation:s5-glanz 6s ease-in-out infinite;animation-delay:calc(var(--i) * .7s);pointer-events:none}
.s5-regal__fuss{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 12px;border-top:1px solid var(--line2);font-family:var(--mono);font-size:11px;letter-spacing:.16em}
.s5-regal__fuss b{font-weight:500}
.s5-regal__fuss span{color:var(--dim)}.s5-regal__fuss span.frei{color:var(--green)}
.s5-regal__boden{position:absolute;left:4%;right:4%;bottom:26px;height:1px;background:linear-gradient(90deg,transparent,rgba(143,216,255,.55),transparent);box-shadow:0 0 30px 6px rgba(143,216,255,.12)}
@media (max-width:980px){.s5-regal__raum{grid-template-columns:repeat(2,minmax(0,1fr))}.s5-regal__karte{--tiefe:0}.s5-regal{perspective:none;padding-bottom:40px}}
@media (prefers-reduced-motion:reduce){.s5-regal__karte{animation:none;transform:none}.s5-regal__bild img,.s5-regal__bild::after{animation:none}}

/* ---------------------------------------------------------------- v53 · Stand je Geraet (aus dem Changelog) */
.s5-stand{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.s5-stand i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(95,227,168,.8);animation:s5-led 3s ease-in-out infinite}
.s5-stand time{color:var(--fg)}
.s5-stand span{color:var(--blue);opacity:0;transition:opacity .3s ease}
.s5-einheit:hover .s5-stand span,.s5-stand:focus-visible span{opacity:1}
.s5-stand:hover{color:var(--fg)}
@keyframes s5-led{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------------------------------------------------------------- v53 · Wegweiser */
.s5-weiser{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:22px 0 0}
.s5-weiser em{flex:none;align-self:center;margin-right:8px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
.s5-weiser button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:3px;padding:10px 14px;border:1px solid var(--line);background:rgba(14,20,24,.6);transition:border-color .3s ease,background .3s ease,transform .3s ease}
.s5-weiser button b{font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:16px;color:var(--fg)}
.s5-weiser button span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.s5-weiser button:hover{border-color:var(--kante);transform:translateY(-2px)}
.s5-weiser button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.s5-weiser button[aria-pressed="true"]{border-color:var(--green);background:#0F1F1C;box-shadow:0 0 24px rgba(95,227,168,.12)}
.s5-weiser button[aria-pressed="true"] span{color:var(--green)}
.s5-prod.gewaehlt .s5-einheit{opacity:.32;filter:saturate(.4);transition:opacity .5s ease,filter .5s ease,box-shadow .5s ease}
.s5-prod.gewaehlt .s5-einheit.treffer{opacity:1;filter:none;box-shadow:0 0 0 1px var(--green),0 0 50px rgba(95,227,168,.14)}
.s5-prod.gewaehlt .s5-einheit.treffer .s5-oeffnen{background:var(--green);border-color:var(--green);color:#04140D}
.s5-einheit{transition:opacity .5s ease,filter .5s ease,box-shadow .5s ease}
@media (max-width:760px){.s5-weiser button{padding:8px 10px}.s5-weiser button span{display:none}.s5-weiser em{flex-basis:100%}}

/* ---------------------------------------------------------------- v53 · Der Mensch dahinter: Reels */
.s5-person{position:relative;margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line2)}
.s5-person__kopf{max-width:620px}
.s5-person__kopf h3{margin:14px 0 0;font-family:var(--disp);font-weight:800;font-stretch:112%;font-size:var(--t-h3);line-height:1.12}
.s5-person__kopf p{margin:12px 0 0;color:var(--dim)}
.s5-person__film,.s5-person__track{margin-top:28px}
.s5-person__film video{width:100%;border:1px solid var(--line);background:#000}
.s5-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.s5-reel{margin:0;position:relative;aspect-ratio:9/16;max-height:640px;background:linear-gradient(160deg,#0E1418,#0B0E11 60%,#111A20);border:1px solid var(--line);overflow:hidden}
.s5-reel::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(143,216,255,.03) 0 1px,transparent 1px 4px);pointer-events:none}
.s5-reel__flaeche{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px}
.s5-reel__flaeche b{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.s5-reel__laden{all:unset;cursor:pointer;padding:12px 20px;background:var(--blue);color:var(--bg);font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:background .3s ease}
.s5-reel__laden:hover{background:var(--fg)}
.s5-reel__laden:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.s5-reel__flaeche a{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.s5-reel.geladen{aspect-ratio:auto;max-height:none;background:#fff;overflow:visible}
.s5-reel.geladen .s5-reel__flaeche{position:static}
.s5-reel .instagram-media{margin:0 !important;min-width:0 !important;width:100% !important;border-radius:0 !important}
.s5-reels__hinweis{margin:14px 0 0;font-size:12px;color:var(--faint)}
@media (max-width:980px){.s5-reels{grid-template-columns:repeat(3,minmax(220px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.s5-reel{scroll-snap-align:start}}

/* ---------------------------------------------------------------- v53 · Schlussbild vor dem Fuss */
.s5-schluss{position:relative;overflow:hidden}
.s5-schluss::before{content:"";position:absolute;left:50%;top:0;width:1200px;height:600px;transform:translate(-50%,-30%);background:radial-gradient(ellipse at center,rgba(95,227,168,.10),transparent 60%);pointer-events:none}
.s5-schluss__raster{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:center}
.s5-schluss h2 span{display:block;color:var(--green)}
.s5-schluss p{margin:20px 0 0;max-width:56ch;color:var(--dim);font-size:var(--t-lead)}
.s5-schluss__frei{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.s5-schluss__frei a{position:relative;display:grid;grid-template-columns:96px 1fr;align-items:center;gap:14px;padding:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg);transition:border-color .3s ease,transform .3s ease}
.s5-schluss__frei a:hover{border-color:var(--green);transform:translateY(-2px);color:var(--fg)}
.s5-schluss__frei img{width:96px;height:60px;object-fit:cover;border:1px solid var(--line2)}
.s5-schluss__frei b{display:block;font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:18px}
.s5-schluss__frei span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.s5-schluss__frei em{position:absolute;right:10px;top:8px;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.s5-schluss__form{padding:28px;border:1px solid var(--green);background:rgba(11,14,17,.9);box-shadow:0 0 60px rgba(95,227,168,.10)}
.s5-schluss__form>small{display:block;margin-bottom:16px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.s5-schluss__form .gratis__feld label{display:block;margin-bottom:8px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.s5-schluss__form .gratis__feld input{width:100%;height:52px;padding:0 14px;border:1px solid var(--kante);border-radius:0;background:var(--bg);color:var(--fg);font:15px var(--sans)}
.s5-schluss__form .gratis__feld input:focus{outline:0;border-color:var(--green)}
.s5-schluss__form .gratis__ok{display:flex;gap:12px;align-items:flex-start;margin:16px 0 18px;font-size:12px;line-height:1.6;color:var(--dim);cursor:pointer}
.s5-schluss__form .gratis__ok input{flex:none;width:16px;height:16px;margin-top:2px;accent-color:#5FE3A8}
.s5-schluss__form .btn{display:block;width:100%;min-height:56px;border:0;background:var(--green);color:#04140D;font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .3s ease}
.s5-schluss__form .btn:hover{background:#7BEBBA}
@media (max-width:980px){.s5-schluss__raster{grid-template-columns:1fr}}
@media (max-width:560px){.s5-schluss__frei{grid-template-columns:1fr}.s5-schluss__form{padding:20px}}

/* ---------------------------------------------------------------- v53 · Signalweg: eine Linie laeuft beim Scrollen von oben bis zum Fuss */
.s5-signal{position:absolute;z-index:4;left:max(18px,calc(50% - 712px));width:2px;top:100vh;bottom:0;pointer-events:none;background:linear-gradient(180deg,transparent,var(--line) 4%,var(--line) 96%,transparent)}
main{position:relative}
.s5-signal i{position:absolute;left:0;top:0;width:2px;height:calc(var(--sp,0) * 100%);background:linear-gradient(180deg,rgba(143,216,255,0),var(--blue) 30%,var(--green));box-shadow:0 0 10px rgba(143,216,255,.45)}
.s5-signal b{position:absolute;left:-4px;top:calc(var(--sp,0) * 100%);width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(95,227,168,.15),0 0 18px rgba(95,227,168,.9);transform:translateY(-50%)}
@media (max-width:1180px){.s5-signal{display:none}}
.s5-reel{aspect-ratio:4/5;max-height:460px}
.s5-reel__flaeche::before{content:"";position:absolute;left:12%;right:12%;bottom:18%;height:38%;background:repeating-linear-gradient(90deg,rgba(143,216,255,.22) 0 3px,transparent 3px 9px);-webkit-mask:linear-gradient(0deg,#000,transparent);mask:linear-gradient(0deg,#000,transparent);transform-origin:50% 100%;animation:s5-reelpuls 1.9s ease-in-out infinite;pointer-events:none}
.s5-reel:nth-child(2) .s5-reel__flaeche::before{animation-delay:-.6s}.s5-reel:nth-child(3) .s5-reel__flaeche::before{animation-delay:-1.2s}
@keyframes s5-reelpuls{0%,100%{transform:scaleY(.35)}30%{transform:scaleY(.9)}55%{transform:scaleY(.5)}75%{transform:scaleY(1)}}
.s5-reel__flaeche>*{position:relative}
@media (prefers-reduced-motion:reduce){.s5-reel__flaeche::before{animation:none}}

/* ---------------------------------------------------------------- v54 · Kategorie direkt am Geraet */
.s5-kat{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.s5-kat span{padding:3px 8px;border:1px solid var(--kante);font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);background:rgba(8,9,10,.4)}
.s5-kat span+span{color:var(--dim);border-color:var(--line)}
.s5-einheit__nr span:empty{display:none}

/* ---------------------------------------------------------------- v54 · Handy-Feinschliff */
@media (max-width:560px){
  /* Rack: Bild links, Name rechts, Preis + Knopf darunter; Stand in einer Zeile */
  .s5-einheit{grid-template-columns:118px minmax(0,1fr);grid-template-areas:"schirm text" "preis oeffnen";gap:12px 14px;padding:12px}
  .s5-einheit__schirm{align-self:start}
  .s5-kat{margin-bottom:6px}
  .s5-kat span{font-size:8px;letter-spacing:.16em;padding:2px 6px}
  .s5-einheit__text h3{font-size:22px !important}
  .s5-einheit__text .s5-unter{margin-top:4px;font-size:9px;letter-spacing:.12em}
  .s5-stand{display:flex;flex-wrap:nowrap;white-space:nowrap;margin-top:6px;font-size:9px;letter-spacing:.08em}
  .s5-stand span{display:none}
  .s5-einheit__preis{flex-direction:column;align-items:flex-start;gap:2px}
  .s5-einheit__preis b{font-size:19px}
  .s5-einheit__preis small{display:none}
  .s5-oeffnen{height:44px;align-self:center}
  /* Bundle-Summe untereinander, gut lesbar */
  .s5-summe{grid-template-columns:1fr;gap:4px;margin-top:28px}
  .s5-summe hr{margin:16px 0}
  .s5-summe .gross{font-size:60px}
  /* Kauf-Karten: Symbol klein neben dem Titel statt riesig darueber */
  .s5-karte{grid-template-columns:56px minmax(0,1fr);gap:16px;min-height:0;padding:22px}
  .s5-karte svg{width:56px;height:56px}
  /* Rueckwand im Fuss: drei Spalten, kleinere Beschriftung */
  .s5-buchsenfeld{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
  .s5-buchse{padding:10px 2px 8px;gap:6px}
  .s5-buchse b{font-size:9px;letter-spacing:.06em;padding:0 2px}
  .s5-buchse small{font-size:8px;letter-spacing:.14em}
  .s5-buchse svg{width:26px;height:26px}
  /* Hero-Streifen: vier pro Reihe, Abstand knapper */
  .s5-streifen{gap:8px}
}
@media (max-width:560px){.s5-stand{font-size:8px;letter-spacing:.04em;max-width:100%;overflow:hidden;text-overflow:ellipsis}}

/* ================================================================ v55 · EINE Schriftskala fuer Startseite, Geraete- und Unterseiten
   Display (Archivo 800):  h1 · h2 · deck · h3 · h4 · Zahl (gross) · Zahl 2
   Text (IBM Plex Sans):   lead 20 · text 16 · klein 14 · fein 12
   Mono (IBM Plex Mono):   Knopf 13/600 · Augenbraue 12 · Etikett 11 · Mikro 10 · Preis 22
   Ausnahmen mit Absicht: der riesige Geraetename (Titelzeile) und die Kapitelziffern sind Bildelemente. */
:root{--t-h4:22px;--t-zahl:clamp(44px,5vw,64px);--t-zahl2:30px;--t-fein:12px;--t-knopf:13px;--t-preis:22px;--t-mono-l:12px;--t-mono:11px;--t-mono-s:10px}
/* H4: Namen in Karten, Leisten, Belegen */
html body .s5-schluss__frei b,html body .s6-leiste__name b,html body .s6-deck__text b,html body .s6-posten__name b,html body .s5-buehne__rechts b{font-family:var(--disp) !important;font-weight:800 !important;font-stretch:115% !important;font-size:var(--t-h4) !important;line-height:1.1 !important;letter-spacing:-.005em !important}
html body .s5-buehne__rechts b{font-size:var(--t-h3) !important}
/* Nummern der Rack-Einheiten: gleiche Schrift wie alle Ueberschriften */
html body .s5-einheit__nr b{font-family:var(--disp) !important;font-weight:800 !important;font-stretch:112% !important;font-size:var(--t-h3) !important;letter-spacing:-.02em !important}
html body .s6-preisbox b{font-family:var(--disp) !important;font-weight:800 !important;font-stretch:112% !important}
/* Grosse Zahlen (Preise im Bundle, im Beleg, in den Optionen) */
html body .s5-summe .gross,html body .s6-option__fuss b,html body .s6-summe2 b{font-family:var(--disp) !important;font-weight:800 !important;font-stretch:115% !important;font-size:var(--t-zahl) !important;line-height:1 !important}
html body .s5-summe .w{font-size:var(--t-zahl2) !important}
/* Preise in Listen */
html body .s5-einheit__preis b,html body .s5-einheit__preis b.frei,html body .s6-posten__name span{font-family:var(--mono) !important;font-weight:500 !important;font-size:var(--t-preis) !important}
/* Knoepfe: alle 13 px, 600 */
html body .s5-btn,html body .s5-oeffnen,html body .btn,html body .s6-t,html body .s6-leiste__kauf a,html body .s5-reel__laden{font-size:var(--t-knopf) !important;font-weight:600 !important}
/* Mono-Mikro mindestens 10 px */
html body .s5-kat span,html body .s5-einheit__nr .neu,html body .s5-einheit__nr .bald{font-size:var(--t-mono-s) !important}
html body .s6-patch__q b,html body .s6-patch__z b{font-size:var(--t-mono-l) !important}
/* Text: nur 20 / 16 / 14 / 12 */
html body .s6-fakten li,html body .s6-zeile2 span,html body .s6-deck__text span,html body .s6-posten p,html body .s6-zeile span,html body .s6-patch__z span,html body .s6-zahl small{font-size:var(--t-klein) !important}
html body .s6-inhalt a span{font-size:var(--t-text) !important}
html body .s6-inhalt a span{font-family:var(--sans) !important}

/* ---------------------------------------------------------------- 20.10.2026 (webfix c) · Rack-Knoepfe auf sehr schmalen Handys
   "OPEN PHONOLITH" war bei 360 px breiter als seine Karte (bis 389 px). Nur dort: Knopfschrift kleiner, Laufweite enger.
   Bei <=340 px reicht die Spalte selbst fuer 3 px pro Zeichen nicht -> Bildspalte 118 -> 84 px, Knopf 10 px. */
@media (max-width:389px){
  html body .s5-einheit .s5-oeffnen{font-size:11px !important;letter-spacing:.06em !important}
}
@media (max-width:340px){
  html body .s5-einheit{grid-template-columns:84px minmax(0,1fr) !important}
  html body .s5-einheit .s5-oeffnen{font-size:10px !important;letter-spacing:.04em !important;padding:0 8px !important}
}

/* ---------------------------------------------------------------- 20.10.2026 (webfix d) · keine Seite breiter als 320/360-px-Handys
   Nur <=389 px, Desktop/Tablet unveraendert.
   - Fuss: der Leuchtschein hinter .s5-fuss__mitte war fest 360 px breit -> bei 320 px 20 px Ueberhang auf JEDER Seite.
     Hier auf Spaltenbreite; die Mail-Adresse darf zur Not umbrechen.
   - pricing: .pz-zahlen zweispaltig passte nicht ("Every machine", "licence") -> einspaltig.
   - Rack: Kartentitel (DREAMS 124 statt 104 px, PHONOLITH/OSCILLATE DJ/CUE ebenso) -> Breite 125% -> 100%.
   - Rack: Standzeile ("V3.3.0 · COMING SOON") wurde abgeschnitten -> darf zweizeilig werden. */
@media (max-width:389px){
  html body .s5-fuss__mitte::before{left:0;width:100%;margin-left:0}
  html body .s5-fuss__mail{max-width:100%;overflow-wrap:anywhere;word-break:break-all}
  html body .pz-zahlen{grid-template-columns:minmax(0,1fr) !important}
  html body .s5-einheit .s5-einheit__text h3{font-stretch:100% !important;letter-spacing:-.015em !important}
  html body .s5-einheit .s5-stand{display:block !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.5}
  html body .s5-einheit .s5-stand i{display:inline-block;margin-right:6px;vertical-align:1px}
}
/* 20.10.2026 (webfix e): auch bei 390-600 px wurde "V1.0.0 · UPDATED 19 DAYS AGO" abgeschnitten -> darf zweizeilig werden */
@media (max-width:600px){
  html body .s5-einheit .s5-stand{display:block !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.5}
  html body .s5-einheit .s5-stand i{display:inline-block;margin-right:6px;vertical-align:1px}
}

/* ===== v57 · Produkt-Menue (13.10.2026) ===== */
.s5-nav>.s7-pm{display:flex;align-items:stretch;position:static}
.s7-pm>a{position:relative}
.s7-pm .s7-pm__pfeil{position:absolute;right:7px;top:50%;width:5px;height:5px;margin-top:-6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.55;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.s7-pm.auf>a{color:var(--fg);background:rgba(143,216,255,.06)}
.s7-pm.auf>a .s5-pegel i{background:var(--blue)}
.s7-pm.auf .s7-pm__pfeil{transform:translateY(3px) rotate(225deg);opacity:1;color:var(--blue)}
.s7-pm .s7-pm__panel{position:absolute;left:-1px;right:-1px;top:100%;padding-top:10px;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .28s ease,transform .38s cubic-bezier(.2,.7,.2,1),visibility 0s linear .38s;pointer-events:none;z-index:60}
.s7-pm.auf .s7-pm__panel{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease,transform .38s cubic-bezier(.2,.7,.2,1),visibility 0s;pointer-events:auto}
.s7-pm .s7-pm__innen{position:relative;background:#090C0F;border:1px solid var(--line);box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 60px rgba(143,216,255,.07);padding:22px 22px 16px;overflow:hidden}
.s7-pm .s7-pm__innen::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.0;transform:scaleX(.2);transition:opacity .5s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.s7-pm.auf .s7-pm__innen::before{opacity:.8;transform:scaleX(1)}
.s7-pm .s7-pm__bez{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding:0 2px 10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.s7-pm .s7-pm__bez b{font-weight:400;color:var(--dim)}
.s7-pm .s7-pm__reihe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.s7-pm .s7-pm__k,.s7-pm .s7-pm__z,.s7-pm .s7-pm__bundle{opacity:0;transform:translateY(6px);transition:opacity .35s ease calc(var(--i)*35ms),transform .45s cubic-bezier(.2,.7,.2,1) calc(var(--i)*35ms),border-color .3s ease,background .3s ease}
.s7-pm.auf .s7-pm__k,.s7-pm.auf .s7-pm__z,.s7-pm.auf .s7-pm__bundle{opacity:1;transform:none}
.s7-pm .s7-pm__k{position:relative;display:flex;flex-direction:column;gap:5px;padding:8px 8px 12px;border:1px solid var(--line);background:rgba(17,26,32,.35);color:var(--fg);text-transform:none;letter-spacing:0;font-family:inherit}
.s5-nav .s7-pm__panel a{font-family:inherit;letter-spacing:normal;text-transform:none}
.s5-nav .s7-pm__k,.s5-nav .s7-pm__z,.s5-nav .s7-pm__bundle,.s5-nav .s7-pm__alle{min-height:0;justify-content:flex-start;border-left-color:var(--line);border-right-color:var(--line)}
.s7-pm .s7-pm__schirm{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#06080A;border:1px solid rgba(255,255,255,.04)}
.s7-pm .s7-pm__schirm img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.8);transition:filter .45s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.s7-pm .s7-pm__scan{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,rgba(143,216,255,.16),transparent);opacity:0;pointer-events:none}
.s7-pm .s7-pm__kopfz{display:flex;align-items:baseline;gap:8px;margin-top:4px;padding:0 2px}
.s7-pm .s7-pm__kopfz b{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:.02em;color:var(--fg)}
.s7-pm .s7-pm__preis{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.s7-pm .s7-pm__bald{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber,#F5B36B);border:1px solid currentColor;padding:1px 5px}
.s7-pm .s7-pm__kat{padding:0 2px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.s7-pm .s7-pm__unter{padding:0 2px;font-size:13px;line-height:1.35;color:var(--dim)}
.s7-pm .s7-pm__vu{position:absolute;right:10px;top:14px;display:flex;gap:2px;align-items:flex-end;height:14px;opacity:0;transition:opacity .3s ease}
.s7-pm .s7-pm__vu i{width:3px;height:100%;background:var(--green);transform-origin:bottom;transform:scaleY(.2);box-shadow:0 0 5px rgba(95,227,168,.6)}
.s7-pm .s7-pm__k:hover,.s7-pm .s7-pm__k:focus-visible{border-color:var(--blue);background:rgba(143,216,255,.05)}
.s7-pm .s7-pm__k:hover .s7-pm__schirm img,.s7-pm .s7-pm__k:focus-visible .s7-pm__schirm img{filter:none;transform:scale(1.035)}
.s7-pm .s7-pm__k:hover .s7-pm__scan{opacity:1;animation:s7-scan 1.6s linear infinite}
.s7-pm .s7-pm__k:hover .s7-pm__vu{opacity:1}
.s7-pm .s7-pm__k:hover .s7-pm__vu i{animation:s7-vu .9s ease-in-out infinite alternate}
.s7-pm .s7-pm__k:hover .s7-pm__vu i:nth-child(2){animation-delay:-.3s}.s7-pm__k:hover .s7-pm__vu i:nth-child(3){animation-delay:-.6s}
.s7-pm .s7-pm__k:hover .s7-pm__vu i:nth-child(4){animation-delay:-.15s}.s7-pm__k:hover .s7-pm__vu i:nth-child(5){animation-delay:-.45s}
.s7-pm .s7-pm__k[aria-current]{border-color:rgba(95,227,168,.5)}
.s7-pm .s7-pm__k[aria-current]::after{content:"You are here";position:absolute;left:14px;top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#08090A;background:var(--green);padding:2px 6px}
.s7-pm .s7-pm__rack--b{margin-top:16px}
.s7-pm .s7-pm__zeilen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr);gap:10px}
.s7-pm .s7-pm__z{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;padding:8px 12px 8px 8px;border:1px solid var(--line);background:rgba(17,26,32,.35);color:var(--fg);text-transform:none;letter-spacing:0;font-family:inherit}
.s7-pm .s7-pm__mini{flex:0 0 64px;height:40px;overflow:hidden;background:#06080A}
.s7-pm .s7-pm__mini img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.8);transition:filter .4s ease}
.s7-pm .s7-pm__ztext{display:flex;flex-direction:column;gap:2px;min-width:0}
.s7-pm .s7-pm__ztext b{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.02em}
.s7-pm .s7-pm__ztext span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s7-pm .s7-pm__z:hover,.s7-pm .s7-pm__z:focus-visible{border-color:var(--blue);background:rgba(143,216,255,.05)}
.s7-pm .s7-pm__z:hover .s7-pm__mini img{filter:none}
.s7-pm .s7-pm__z[aria-current]{border-color:rgba(95,227,168,.5)}
.s7-pm .s7-pm__bundle{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 40px 10px 14px;border:1px solid rgba(143,216,255,.35);background:linear-gradient(120deg,rgba(143,216,255,.10),rgba(95,227,168,.05));color:var(--fg);text-transform:none;letter-spacing:0;font-family:inherit}
.s7-pm .s7-pm__bundle small{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.s7-pm .s7-pm__bundle b{font-family:var(--disp);font-size:16px;font-weight:700}
.s7-pm .s7-pm__bundle span{font-size:12px;color:var(--dim)}
.s7-pm .s7-pm__bundle svg{position:absolute;right:14px;top:50%;margin-top:-8px;color:var(--blue);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.s7-pm .s7-pm__bundle:hover{border-color:var(--blue)}
.s7-pm .s7-pm__bundle:hover svg{transform:translateX(4px)}
.s7-pm .s7-pm__alle{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;padding:0 2px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.s5-nav .s7-pm__panel .s7-pm__alle{flex-direction:row;justify-content:flex-end;padding:0 2px;border:0;background:none;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.s7-pm .s7-pm__alle:hover{color:var(--blue)}
.s7-pm .s7-pm__alle svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.s7-pm .s7-pm__alle:hover svg{transform:translateX(4px)}
@keyframes s7-scan{from{transform:translateY(0)}to{transform:translateY(430%)}}
@keyframes s7-vu{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@media (max-width:1180px){.s7-pm .s7-pm__unter{display:none}.s7-pm .s7-pm__zeilen{grid-template-columns:repeat(3,minmax(0,1fr))}.s7-pm .s7-pm__bundle{grid-column:1/-1}}
@media (max-width:980px){.s7-pm .s7-pm__reihe{grid-template-columns:repeat(3,minmax(0,1fr))}.s7-pm .s7-pm__pfeil{display:none}}
@media (max-width:760px){
  .s5-nav>.s7-pm{flex-direction:column;align-items:stretch}
  .s7-pm .s7-pm__panel{position:static;visibility:visible;opacity:1;transform:none;padding:0 0 6px;pointer-events:auto;transition:none}
  .s7-pm .s7-pm__innen{padding:6px 0 4px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .s7-pm .s7-pm__innen::before,.s7-pm .s7-pm__bez,.s7-pm .s7-pm__unter,.s7-pm .s7-pm__vu,.s7-pm .s7-pm__scan,.s7-pm .s7-pm__alle,.s7-pm .s7-pm__kat{display:none}
  .s7-pm .s7-pm__reihe,.s7-pm .s7-pm__zeilen{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .s7-pm .s7-pm__rack--b{margin-top:6px}
  .s7-pm .s7-pm__k,.s7-pm .s7-pm__z,.s7-pm .s7-pm__bundle{opacity:1;transform:none;transition:none}
  .s7-pm .s7-pm__k{flex-direction:row;align-items:center;gap:10px;padding:6px}
  .s7-pm .s7-pm__schirm{flex:0 0 52px;height:34px;aspect-ratio:auto}
  .s7-pm .s7-pm__kopfz{margin:0;flex:1;min-width:0}
  .s7-pm .s7-pm__kopfz b{font-size:14px}
  .s7-pm .s7-pm__k[aria-current]::after{display:none}
  .s7-pm .s7-pm__mini{flex-basis:52px;height:34px}
  .s7-pm .s7-pm__z{padding:6px}
  .s7-pm .s7-pm__ztext span{display:none}
  .s7-pm .s7-pm__bundle{grid-column:1/-1;padding:10px 40px 10px 12px}
  .s7-pm .s7-pm__bundle span{display:none}
  .s7-pm .s7-pm__bald{display:none}
  .s5-kopf.offen .s5-nav{background:#0B0E11;max-height:calc(100vh - 90px);overflow-y:auto}
}
@media (prefers-reduced-motion:reduce){.s7-pm .s7-pm__panel,.s7-pm .s7-pm__k,.s7-pm .s7-pm__z,.s7-pm .s7-pm__bundle{transition:none}.s7-pm .s7-pm__k:hover .s7-pm__scan,.s7-pm .s7-pm__k:hover .s7-pm__vu i{animation:none}}

/* ===== v57 · Film gross (13.10.2026) ===== */
.s7-filmknopf{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border:1px solid var(--line);color:var(--fg);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:border-color .3s ease,background .3s ease}
.s7-filmknopf i{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--fg);color:#08090A;transition:background .3s ease}
.s7-filmknopf:hover{border-color:var(--blue);background:rgba(143,216,255,.05)}
.s7-filmknopf:hover i{background:var(--blue)}
.s6-kaufzeile{flex-wrap:wrap}
.s7-kino{padding-top:72px;padding-bottom:24px}
.s7-kino__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}
.s7-kino__kopf h2{margin:0}
.s7-kino__hinweis{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.s7-kino__hinweis i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(95,227,168,.8);animation:s7-puls 2.4s ease-in-out infinite}
.s7-kino__bild{position:relative;aspect-ratio:16/9;background:#050607;border:1px solid var(--line);box-shadow:0 50px 100px rgba(0,0,0,.55),0 0 80px rgba(143,216,255,.06);overflow:hidden;cursor:pointer}
.s7-kino__bild video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050607}
.s7-kino__bild::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,9,10,0) 40%,rgba(8,9,10,.55) 100%);pointer-events:none;transition:opacity .5s ease}
.s7-kino__ecken i{position:absolute;width:18px;height:18px;border-color:var(--blue);border-style:solid;border-width:0;z-index:2;opacity:.8;pointer-events:none}
.s7-kino__ecken i:nth-child(1){left:12px;top:12px;border-left-width:1px;border-top-width:1px}
.s7-kino__ecken i:nth-child(2){right:12px;top:12px;border-right-width:1px;border-top-width:1px}
.s7-kino__ecken i:nth-child(3){left:12px;bottom:12px;border-left-width:1px;border-bottom-width:1px}
.s7-kino__ecken i:nth-child(4){right:12px;bottom:12px;border-right-width:1px;border-bottom-width:1px}
.s7-kino__tag{position:absolute;left:38px;top:22px;z-index:2;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);opacity:.85;pointer-events:none}
.s7-kino__tag i{width:7px;height:7px;border-radius:50%;background:#FF5D5D;box-shadow:0 0 8px rgba(255,93,93,.8);animation:s7-puls 1.6s ease-in-out infinite}
.s7-kino__play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:18px;padding:12px 26px 12px 12px;background:rgba(8,9,10,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(143,216,255,.45);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:background .3s ease,border-color .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.s7-kino__rund{position:relative;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--fg);color:#08090A;padding-left:5px;transition:background .3s ease}
.s7-kino__rund::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(143,216,255,.6);animation:s7-ring 2.4s cubic-bezier(.2,.7,.2,1) infinite}
.s7-kino__ptext{display:flex;flex-direction:column;gap:4px}
.s7-kino__ptext b{font-size:20px;white-space:nowrap;font-weight:700;letter-spacing:.01em}
.s7-kino__ptext small{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.s7-kino__bild:hover .s7-kino__play{background:rgba(8,9,10,.78);border-color:var(--blue);transform:translate(-50%,-50%) scale(1.03)}
.s7-kino__bild:hover .s7-kino__rund{background:var(--blue)}
.s7-kino__bild.laeuft{cursor:default}
.s7-kino__bild.laeuft .s7-kino__play,.s7-kino__bild.laeuft .s7-kino__tag,.s7-kino__bild.laeuft .s7-kino__ecken,.s7-kino__bild.laeuft::after{opacity:0;pointer-events:none}
.s7-kino__bild.laeuft .s7-kino__play{transform:translate(-50%,-50%) scale(.9)}
.s7-kino__play,.s7-kino__tag,.s7-kino__ecken{transition:opacity .4s ease,background .3s ease,border-color .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
@keyframes s7-puls{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes s7-ring{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media (max-width:760px){
  .s7-kino{padding-top:48px}
  .s7-kino__kopf{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px}
  .s7-kino__play{gap:12px;padding:8px 16px 8px 8px}
  .s7-kino__rund{width:52px;height:52px}
  .s7-kino__rund svg{width:16px;height:19px}
  .s7-kino__ptext b{font-size:15px}
  .s7-kino__tag{left:30px;top:18px;font-size:9px}
  .s7-filmknopf{height:44px}
}
@media (prefers-reduced-motion:reduce){.s7-kino__rund::before,.s7-kino__tag i,.s7-kino__hinweis i{animation:none}}

/* v93 */
@media (min-width:1181px){.s5-buchsenfeld{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1100px){.s5-nav a{padding:0 10px;letter-spacing:.14em}}