/* Paket 105 · Stadtquartier – Fallstudien Website & App + Karten auf /projects/. Ergänzt case.css, keine Inline-Skripte. */
.badge.is-beta{color:var(--cobalt-ink);background:var(--cobalt-soft);border-color:color-mix(in srgb,var(--cobalt) 30%,transparent)}
.badge.is-beta:before{opacity:1}

/* Beta-Banner „Bald live.“ – Glas, pulsierender Punkt, Etappenleiste */
.sq-beta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:0 0 26px;padding:14px 18px;max-width:1040px;border-radius:var(--r-lg,18px);
  background:color-mix(in srgb,var(--surface) 64%,transparent);border:1px solid color-mix(in srgb,var(--cobalt) 24%,var(--line));
  -webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:0 1px 0 color-mix(in srgb,#fff 40%,transparent) inset,var(--sh-1)}
.sq-beta-msg{display:flex;gap:12px;align-items:flex-start;flex:1 1 340px;margin:0;color:var(--text-2);line-height:1.55;font-size:.95rem}
.sq-beta-msg b{color:var(--text);font-weight:650}
.sq-dot{position:relative;flex:0 0 10px;width:10px;height:10px;margin-top:.42em;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 3px color-mix(in srgb,var(--cobalt) 18%,transparent)}
.sq-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--cobalt);animation:sq105-pulse 1.9s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes sq105-pulse{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3.2);opacity:0}}
.sq-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:.76rem;font-weight:600;letter-spacing:.01em}
.sq-steps li{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;border:1px dashed var(--line);color:var(--text-3);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.sq-steps li.is-done{border-style:solid;color:var(--cobalt-ink);background:var(--cobalt-soft);border-color:color-mix(in srgb,var(--cobalt) 26%,transparent)}
.sq-steps i{font-style:normal;display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;font-size:.62rem;line-height:1;border:1.5px solid currentColor}
.sq-steps li.is-done i{background:currentColor}
.sq-steps li.is-done i:before{content:"";width:6px;height:3.5px;border:solid var(--surface);border-width:0 0 1.6px 1.6px;transform:translateY(-1px) rotate(-45deg)}
.sq-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Video (Website/Cockpit 16:9) */
.sq-vfig{margin:0;display:grid;gap:10px}
.sq-vid{position:relative;border-radius:var(--r-xl,24px);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);background:#070b14}
.sq-vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#070b14;object-fit:cover}
.sq-vfig figcaption,.sq-cap{font-size:.8rem;line-height:1.5;color:var(--text-3)}

/* Telefon-Rahmen (CSS) */
.sq-phone{position:relative;margin-inline:auto;padding:9px;border-radius:46px;background:linear-gradient(155deg,#2a3346 0%,#0b111d 42%,#05080f 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 1px 0 rgba(255,255,255,.14) inset,0 34px 60px -26px rgba(5,10,24,.55),0 12px 24px -12px rgba(5,10,24,.35)}
.sq-phone>video,.sq-phone>img{display:block;width:100%;height:auto;border-radius:37px;background:#0b111d}
.sq-phone>video{aspect-ratio:9/16;object-fit:cover}

/* App-Hero: Hochformat-Video links, Text rechts */
.sq-apphero{display:grid;gap:clamp(28px,5vw,72px);align-items:center}
.sq-apphero .sq-phone{width:min(100%,calc(70vh * 9 / 16 + 18px),400px)}
@media(min-width:900px){.sq-apphero{grid-template-columns:minmax(280px,400px) minmax(0,1fr)}.sq-apphero .sq-phone{width:100%;max-width:calc(78vh * 9 / 16 + 18px)}}
.sq-apphero .sq-vfig figcaption{text-align:center}

/* Telefon-Streifen: mobil Scroll-Snap, Desktop 3er-Fächer */
.sq-fan{display:flex;gap:16px;margin:0;padding:8px 4px 20px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.sq-fan:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px;border-radius:12px}
.sq-fan>li{flex:0 0 min(70%,250px);scroll-snap-align:center;margin:0}
.sq-fan figure{margin:0;display:grid;gap:12px}
.sq-fan figcaption{text-align:center;font-size:.8rem;line-height:1.45;color:var(--text-3);max-width:28ch;margin-inline:auto}
.sq-fan .sq-phone{padding:7px;border-radius:38px}
.sq-fan .sq-phone>img{border-radius:31px}
@media(min-width:900px){
  .sq-fan{justify-content:center;overflow:visible;gap:0;padding:28px 0 8px}
  .sq-fan>li{flex:0 0 clamp(220px,22vw,280px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .sq-fan>li:nth-child(n+2){margin-left:-34px}
  .sq-fan--3>li:nth-child(1){transform:rotate(-6deg) translateY(26px)}
  .sq-fan--3>li:nth-child(2){position:relative;z-index:2;transform:translateY(-6px)}
  .sq-fan--3>li:nth-child(3){transform:rotate(6deg) translateY(26px)}
  .sq-fan--2>li:nth-child(1){transform:rotate(-4deg) translateY(12px)}
  .sq-fan--2>li:nth-child(2){position:relative;z-index:2;transform:rotate(3deg)}
  .sq-fan--1>li{flex-basis:clamp(240px,24vw,300px)}
  .sq-fan figcaption{opacity:.92}
}

/* Telefon-Screen im Fallstudien-Raster (Website/Cockpit) */
.sq-pshot img{border:7px solid #0b111d!important;border-radius:30px!important;max-width:270px!important;box-shadow:0 22px 40px -22px rgba(5,10,24,.5)!important}

/* Ganze Seiten zum Durchscrollen */
.sq-long-grid{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.sq-long{margin:0;display:grid;gap:10px}
.sq-long-box{height:min(68vh,620px);overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r-lg,18px);border:1px solid var(--line);box-shadow:var(--sh-1);background:var(--surface-2);scrollbar-width:thin}
.sq-long-box:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.sq-long-box img{display:block;width:100%;height:auto}

/* Cockpit-Abschnitt */
.sq-ck-head{display:grid;gap:clamp(20px,3vw,36px);margin-bottom:clamp(36px,5vw,64px)}
@media(min-width:1000px){.sq-ck-head{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}}
.sq-ck-head .lead{color:var(--text-2);margin-top:12px}
.sq-eyebrow{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-ink)}

/* Anonymisierte Variante: abstrakte Vorschau statt Screens */
.sq-ph{position:relative;display:grid;place-items:center;min-height:clamp(220px,34vw,420px);padding:clamp(18px,3vw,36px);border-radius:var(--r-xl,24px);border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--cobalt) 22%,transparent),transparent 60%),linear-gradient(160deg,var(--surface-2),var(--surface-3,var(--surface-2)))}
.sq-ph-win{width:min(100%,640px);border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.sq-ph-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.sq-ph-bar span{width:8px;height:8px;border-radius:50%;background:var(--line)}
.sq-ph-body{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;padding:18px}
.sq-ph-body i{display:block;height:10px;border-radius:6px;background:color-mix(in srgb,var(--text-3) 18%,transparent);margin-bottom:9px}
.sq-ph-body i.w6{width:60%}.sq-ph-body i.w8{width:80%}.sq-ph-body i.h{height:22px;width:90%;background:color-mix(in srgb,var(--cobalt) 26%,transparent)}
.sq-ph-body b{display:block;border-radius:12px;min-height:110px;background:linear-gradient(140deg,color-mix(in srgb,var(--cobalt) 30%,transparent),color-mix(in srgb,var(--cobalt) 8%,transparent))}
.sq-ph-tag{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);white-space:nowrap;font-size:.76rem;font-weight:600;color:var(--text-2);padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sq-ph--phone .sq-ph-win{width:min(64%,230px);border-radius:30px;border:7px solid #0b111d}
.sq-ph--phone .sq-ph-bar{display:none}
.sq-ph--phone .sq-ph-body{grid-template-columns:1fr;padding:16px 14px 26px}
.sq-mods-plain .cs-mod{grid-template-columns:1fr!important}
.sq-mods-plain .cs-mod-text{position:static!important}
.sq-mods-plain{display:grid;gap:clamp(22px,3vw,34px);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

/* Karten auf /projects/ */
.pj88 .thumb .sq-ph{min-height:0;height:100%;border:0;border-radius:0;padding:14px}
.pj88 .thumb .sq-ph-win{width:86%}
.pj88 .thumb .sq-ph-body{padding:12px;gap:10px}.pj88 .thumb .sq-ph-body b{min-height:58px}

/* Ruhe: reduzierte Bewegung (System) und A2-Schalter „Bewegung anhalten“ */
@media(min-width:900px) and (prefers-reduced-motion:no-preference){html:not(.a2-still) .sq-fan>li:nth-child(n):hover{transform:translateY(-10px) rotate(0);z-index:3}}
@media(prefers-reduced-motion:reduce){.sq-dot:after{animation:none;opacity:0}.sq-fan>li{transition:none}}
html.a2-still .sq-dot:after{animation:none;opacity:0}
html.a2-still .sq-fan>li{transition:none}