/* WG Bausteine: Widget bausteine. Unverändert aus startseite-2026/v3/parts/bausteine.html übernommen. */
/* ===== Sektion: Bausteine (id bausteine) ===== */
#bausteine .bs-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:64px 0 0;padding:0;list-style:none}
@media (min-width:720px){#bausteine .bs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1200px){#bausteine .bs-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
#bausteine .bs-card{display:flex;flex-direction:column;min-width:0;height:100%;padding:22px 22px 24px;box-sizing:border-box}
#bausteine .bs-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#bausteine .bs-title{margin:0;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800;font-size:22px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
#bausteine .bs-tile{position:relative;display:grid;place-items:center;aspect-ratio:1/.86;margin:18px 0 22px;border-radius:var(--radius-s);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(246,246,242,.7) 100%);overflow:hidden;isolation:isolate}
#bausteine .bs-tile .v3-grid{position:absolute;inset:0;z-index:0}
#bausteine .bs-tile .v3-glow{left:18%;top:22%;width:64%;height:60%;opacity:.75;z-index:0}
#bausteine .bs-art{position:relative;z-index:1;display:block;width:min(164px,70%)}
#bausteine .bs-emblem{position:relative;display:block;width:100%;height:auto;overflow:visible}
#bausteine .bs-art .v3-glassdot{left:calc(var(--x) / 160 * 100%);top:calc(var(--y) / 160 * 100%);width:calc(var(--s) / 160 * 100%);transition:opacity .6s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--c,0) * 120ms + 900ms)}
#bausteine.bs-js .bs-card:not(.is-drawn) .v3-glassdot{opacity:0;transform:translateY(-14px) scale(.86)}
#bausteine .bs-text{margin:0 0 18px;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:16px;line-height:1.55;color:var(--ink-2)}
#bausteine .bs-proof{display:flex;gap:10px;margin:auto 0 16px;padding-top:16px;border-top:1px solid var(--line);font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:14px;line-height:1.5;color:var(--muted)}
#bausteine .bs-proof::before{content:"";flex:none;width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(194,242,28,.22),0 0 10px var(--glow)}
#bausteine .bs-proof a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:text-decoration-color .25s var(--ease)}
#bausteine .bs-proof a:hover{text-decoration-color:var(--ink)}
#bausteine .bs-proof strong{font-weight:500;color:var(--ink)}
#bausteine .bs-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-weight:500;font-size:15px;line-height:1.4;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .25s var(--ease)}
#bausteine .bs-link:hover{text-decoration-color:var(--ink)}
#bausteine .bs-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
#bausteine .bs-arrow{flex:none}
/* Linien-Embleme: einmal nachzeichnen, danach ruhig */
#bausteine .bs-emblem .bs-l{stroke-dasharray:1 1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease),stroke-opacity .01s linear;transition-delay:calc(var(--c,0) * 120ms + var(--d,0) * 75ms + 120ms)}
#bausteine .bs-emblem .bs-a{transform-box:fill-box;transform-origin:center;transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--c,0) * 120ms + var(--d,0) * 75ms + 520ms)}
#bausteine .bs-emblem .bs-dot{filter:drop-shadow(0 0 5px rgba(194,242,28,.9))}
#bausteine.bs-js .bs-card:not(.is-drawn) .bs-l{stroke-dashoffset:1;stroke-opacity:0}
#bausteine.bs-js .bs-card:not(.is-drawn) .bs-a{opacity:0;transform:scale(.6)}
@media (min-width:720px) and (max-width:1199px){#bausteine .bs-tile{aspect-ratio:16/10}#bausteine .bs-art{width:min(164px,46%)}}
@media (max-width:719px){#bausteine .bs-grid{margin-top:44px}#bausteine .bs-card{padding:20px 18px 22px}#bausteine .bs-tile{aspect-ratio:16/10;margin:16px 0 20px}#bausteine .bs-art{width:min(150px,52%)}}
@media (prefers-reduced-motion:reduce){#bausteine .bs-emblem .bs-l,#bausteine .bs-emblem .bs-a,#bausteine .bs-art .v3-glassdot{transition:none}}
/* Genau drei Karten (etwa „Weitere Bausteine“ auf Leistungsseiten): drei Spalten statt vier, damit rechts keine Lücke bleibt.
   Mit zwei, vier oder mehr Karten greift keine dieser Regeln. Ab 960 px stehen die drei Karten nebeneinander,
   zwischen 720 und 959 px steht die dritte Karte mittig unter den ersten beiden. */
@media (min-width:960px){#bausteine .bs-grid:has(>.bs-item:first-child:nth-last-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:720px) and (max-width:959px){#bausteine .bs-item:nth-child(3):last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 10px)}}
/* Browser ohne :has: dieselbe Mitte über die Karten selbst. Ab 1200 px rücken die drei Karten im Viererraster um eine halbe
   Spalte samt halber Lücke nach rechts, von 960 bis 1199 px steht die dritte Karte wie auf dem Tablet mittig. */
@supports not selector(:has(*)){
  @media (min-width:960px) and (max-width:1199px){#bausteine .bs-item:nth-child(3):last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 10px)}}
  @media (min-width:1200px){#bausteine .bs-item:first-child:nth-last-child(3),#bausteine .bs-item:first-child:nth-last-child(3)~.bs-item{margin-left:calc(50% + 9px);margin-right:calc(-50% - 9px)}}
}