/* WG Bausteine: Widget „beispiele“. Kundenprojekte im Geräterahmen, abwechselnd links und rechts.
   Alle Selektoren beginnen mit #beispiele. Setzt den Kern voraus (.v3-device, .v3-grid, .v3-glow, .v3-glassdot, wgfx-*). */
#beispiele{overflow-x:clip}
#beispiele .bsp-head{position:relative;z-index:1}

/* ---------- Liste und Raster ---------- */
#beispiele .bsp-list{display:flex;flex-direction:column;gap:clamp(72px,9vw,136px);margin:clamp(52px,6vw,88px) 0 0;padding:0;list-style:none}
#beispiele .bsp-item{margin:0;padding:0;list-style:none}
#beispiele .bsp-case{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center;max-width:680px;margin:0 auto}
#beispiele .bsp-media{order:-1;min-width:0}
#beispiele .bsp-copy{min-width:0}
@media (min-width:960px){
  #beispiele .bsp-case{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(48px,6.4vw,104px);max-width:none}
  #beispiele .bsp-media{order:0;grid-column:1;grid-row:1}
  #beispiele .bsp-copy{grid-column:2;grid-row:1;max-width:460px}
  #beispiele .bsp-item--rechts .bsp-case{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  #beispiele .bsp-item--rechts .bsp-media{grid-column:2}
  #beispiele .bsp-item--rechts .bsp-copy{grid-column:1;justify-self:end}
}

/* ---------- Text ---------- */
#beispiele .bsp-label{display:flex;align-items:center;gap:9px;margin:0 0 16px;font:500 11px/1.3 "WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#beispiele .bsp-label::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(194,242,28,.22),0 0 10px var(--glow)}
#beispiele .bsp-name{margin:0;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
#beispiele .bsp-text{margin:16px 0 0;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:17px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}

/* Ergebnis-Punkte mit Lime-Häkchen */
#beispiele .bsp-points{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
#beispiele .bsp-points li{display:flex;align-items:flex-start;gap:12px;margin:0;padding:13px 0;border-bottom:1px solid var(--line);font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
#beispiele .bsp-check{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:-1px;border-radius:50%;background:linear-gradient(140deg,#E6FB8E 0%,var(--lime) 70%);color:var(--lime-ink);box-shadow:0 0 0 1px rgba(20,23,12,.06),0 4px 12px rgba(120,160,0,.22)}
#beispiele .bsp-check .v3-ico{width:13px;height:13px;stroke-width:2.4}

/* Link zur Kundenwebseite (wie der Zweitlink im Hero) */
#beispiele .bsp-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:9px 0;border-bottom:1px solid var(--line-2);font:500 16px/1.2 "WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;color:var(--ink);text-decoration:none;transition:border-color .3s var(--ease),gap .3s var(--ease)}
#beispiele .bsp-link:hover{color:var(--ink);border-color:var(--ink);gap:11px}
#beispiele .bsp-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
#beispiele .bsp-link-ico{width:15px;height:15px}

/* ---------- Rahmen ---------- */
/* Tiefe beim Scrollen: --p kommt von .wgfx-scrub (0 beim Eintritt unten, 1 ab der Bildschirmmitte, im Editor und bei
   reduzierter Bewegung immer 1). Untereinander (unter 960 px) wächst der Rahmen von seiner Unterkante aus auf volle Größe,
   damit er nie über den Text darunter rutscht. Nebeneinander gleitet er von unten an seinen Platz. */
#beispiele .bsp-stage{position:relative;transform-origin:50% 100%;transform:scale(calc(.95 + .05 * var(--p,1)))}
@media (min-width:960px){#beispiele .bsp-stage{transform:translate3d(0,calc((1 - var(--p,1)) * 56px),0)}}
#beispiele .bsp-device{width:100%}
/* Handy: schmal und mittig in seiner Spalte, mit angedeuteter Kamerainsel */
#beispiele .bsp-item--handy .bsp-device{width:min(100%,280px);margin:0 auto}
#beispiele .bsp-item--handy .v3-device-screen::before{content:"";position:absolute;left:50%;top:10px;z-index:3;width:30%;height:20px;border-radius:999px;background:#0B0C0B;transform:translateX(-50%);pointer-events:none}
#beispiele .bsp-lock{width:10px;height:10px;margin:-2px 6px 0 0;opacity:.6}
#beispiele .bsp-bar-end{flex:none;width:36px}
#beispiele .bsp-video{display:block;width:100%;height:100%;object-fit:cover;background:#0B0C0B}
/* Abspielknopf über dem Vorschaubild (setzt beispiele.js ein; ohne Skript bleiben die normalen Videosteuerungen) */
#beispiele .bsp-screen--video.is-ready::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(55% 55% at 50% 50%,rgba(11,12,11,.28),rgba(11,12,11,0) 72%);pointer-events:none;transition:opacity .4s var(--ease)}
#beispiele .bsp-screen--video.is-playing::after{opacity:0}
#beispiele .bsp-play{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;padding:0;border:0;border-radius:50%;background:linear-gradient(96deg,#D8F75C -20%,#C2F21C 55%,#D8F75C 125%);color:var(--lime-ink);cursor:pointer;box-shadow:0 0 0 8px rgba(194,242,28,.2),0 16px 40px rgba(11,12,11,.35),0 0 44px var(--glow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
#beispiele .bsp-play:hover{transform:scale(1.05);box-shadow:0 0 0 10px rgba(194,242,28,.24),0 18px 44px rgba(11,12,11,.38),0 0 54px rgba(194,242,28,.6)}
#beispiele .bsp-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
#beispiele .bsp-play[hidden]{display:none}
#beispiele .bsp-play .v3-ico{width:26px;height:26px;margin-left:4px;fill:currentColor}

/* ---------- Logo-Karte (ohne Bild): heller Grund, Raster, Leuchten, Logo auf Milchglas ---------- */
#beispiele .bsp-logo{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;isolation:isolate;container-type:inline-size;background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,rgba(255,255,255,0) 62%),linear-gradient(180deg,#FBFBF8 0%,var(--bg) 100%)}
#beispiele .bsp-logo-grid{position:absolute;inset:0;z-index:0;background-size:40px 40px}
#beispiele .bsp-logo-glow{left:24%;top:28%;width:52%;height:58%;z-index:0;opacity:.72}
#beispiele .bsp-plate{position:relative;z-index:1;display:grid;place-items:center;padding:6cqw 7.5cqw;border-radius:clamp(14px,3cqw,22px);background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(20,20,20,.08)}
#beispiele .bsp-logo-img{display:block;width:calc(var(--lw,200) / 6.2 * 1cqw);max-width:none;height:auto;filter:brightness(0);opacity:.8}
#beispiele .bsp-wordmark{display:block;max-width:60cqw;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(16px,4.4cqw,30px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-align:center;text-wrap:balance}
#beispiele .bsp-logo-dot{right:-3.4cqw;top:-3.4cqw;width:8cqw}
/* Handy: schmaler Bildschirm im Hochformat, Logo relativ größer */
#beispiele .bsp-item--handy .bsp-logo-img{width:calc(var(--lw,200) / 3.8 * 1cqw)}
#beispiele .bsp-item--handy .bsp-plate{padding:9cqw 10cqw}
#beispiele .bsp-item--handy .bsp-logo-dot{right:-5cqw;top:-5cqw;width:13cqw}
#beispiele .bsp-item--handy .bsp-wordmark{max-width:76cqw;font-size:7cqw}

/* ---------- Einblenden: Rahmen zuerst, Text kurz danach ---------- */
.js #beispiele .bsp-copy.wgfx-in{transition-delay:.12s}

/* ---------- Tablet und Handy ---------- */
@media (max-width:720px){
  #beispiele .bsp-list{gap:64px;margin-top:44px}
  #beispiele .bsp-case{gap:24px}
  #beispiele .bsp-name{font-size:26px}
  #beispiele .bsp-text{font-size:16px;line-height:1.6}
  #beispiele .bsp-link{margin-top:20px}
  #beispiele .bsp-device:not(.v3-device--phone){border-radius:16px}
  #beispiele .bsp-device .v3-device-bar{height:28px;padding:0 11px;gap:8px}
  #beispiele .bsp-device .v3-device-dots{gap:5px}
  #beispiele .bsp-device .v3-device-dots i{width:6px;height:6px}
  #beispiele .bsp-device .v3-device-url{padding:3px 10px;font-size:10px}
  #beispiele .bsp-bar-end{width:28px}
  #beispiele .bsp-logo-grid{background-size:28px 28px}
  #beispiele .bsp-item--handy .bsp-device{width:min(100%,250px)}
  #beispiele .bsp-play{width:60px;height:60px;margin:-30px 0 0 -30px}
  #beispiele .bsp-play .v3-ico{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  #beispiele .bsp-stage{transform:none}
  #beispiele .bsp-link,#beispiele .bsp-play,#beispiele .bsp-screen--video::after{transition:none}
}