/* SBM-Landing V5 in Umbraco – „Funktionen im Detail“ (#galerie) mit aufklappbaren Gruppen (Owner 23.10.2026: Alternative 12
   „12'yi alalım“). Aufbau wie das V5-Original (Liste links | Text + Bühne rechts); gegen das Gedränge ist nur die Gruppe der
   gewählten Funktion offen, die anderen Gruppen zeigen Name + Anzahl + Pfeil. Ab 900 px; darunter bleibt der V5-Streifen.
   Verhalten: galerie-gruppen.js. Geladen von Views/SBM2.cshtml (nicht mit ?gv=… zum Variantenvergleich).
   Die V5-Vorlage (SBM-Marketing/…/sbm-premium-v5) ist unverändert – diese Datei überschreibt sie nur in Umbraco. */
@media (min-width:900px){
  body.sbm-v5-page #galerie .gal{display:grid;grid-template-columns:clamp(260px,22vw,290px) minmax(0,1fr);gap:clamp(28px,3.5vw,48px);align-items:start;
    --gal-h:auto;--gv-sh:clamp(220px,calc(100svh - 525px),540px);margin-top:clamp(24px,4vh,40px);contain:none}
  body.sbm-v5-page #galerie .gal__nav{display:flex;flex-direction:column;gap:2px;height:auto;min-height:0}
  body.sbm-v5-page #galerie .gal__tab{flex:none;height:44px;min-height:0;max-height:none;padding:0 12px;font-size:15px;line-height:1.25;gap:11px}
  body.sbm-v5-page #galerie .gal__tab .ui-ico{width:30px;height:30px}
  body.sbm-v5-page #galerie .gal__tab .ui-ico .ic{width:15px;height:15px}
  body.sbm-v5-page #galerie .gal__panels{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;height:auto;row-gap:0}
  body.sbm-v5-page #galerie .gal__panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;column-gap:0;align-content:start;align-items:start;min-width:0}
  body.sbm-v5-page #galerie .gal__copy{grid-column:1;grid-row:1;align-self:start}
  body.sbm-v5-page #galerie .gal__copy .h3{font-size:clamp(21px,1.75vw,26px);text-wrap:balance}
  body.sbm-v5-page #galerie .gal__txt{font-size:16.5px}
  body.sbm-v5-page #galerie .gal__panel .gal-scene{grid-column:1;grid-row:2;justify-self:stretch;align-self:start;width:100%;max-width:none;height:var(--gv-sh);max-height:none;aspect-ratio:auto;margin:18px 0 0}
  body.sbm-v5-page #galerie .gal__end{display:none}
  body.sbm-v5-page #galerie .gal__cta{margin-top:clamp(28px,5vh,48px)}

  /* Gruppen als aufklappbare Zeilen */
  body.sbm-v5-page #galerie .gal__grp{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px;border-radius:var(--r-md);cursor:pointer;font:600 14.5px/1.2 var(--font);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;box-shadow:inset 0 -1px 0 var(--line);transition:background-color .2s,color .2s}
  body.sbm-v5-page #galerie .gal__grp:first-child{padding-top:0}
  body.sbm-v5-page #galerie .gal__grp::after{display:none}
  body.sbm-v5-page #galerie .gal__grp:hover{background:var(--bg-soft)}
  body.sbm-v5-page #galerie .gal__grp:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
  body.sbm-v5-page #galerie .gal-cnt{order:2;flex:none;min-width:22px;height:20px;margin-left:auto;padding:0 6px;border-radius:999px;background:var(--bg-soft);box-shadow:inset 0 0 0 1px var(--line);font:600 11.5px/20px var(--font-ui);text-align:center;color:var(--mut)}
  body.sbm-v5-page #galerie .gal-chev{order:3;flex:none;width:8px;height:8px;margin:0 2px 3px 2px;border-right:1.7px solid var(--mut);border-bottom:1.7px solid var(--mut);transform:rotate(45deg);transition:transform .25s var(--ease)}
  body.sbm-v5-page #galerie .gal__grp.is-on{color:var(--blue);box-shadow:none}
  body.sbm-v5-page #galerie .gal__grp.is-on .gal-cnt{background:var(--blue-50);box-shadow:inset 0 0 0 1px var(--blue-100);color:var(--blue)}
  body.sbm-v5-page #galerie .gal__grp.is-on .gal-chev{transform:rotate(-135deg);margin-bottom:-3px;border-color:var(--blue)}
  body.sbm-v5-page #galerie .gal__tab.gal-zu{display:none}
  body.sbm-v5-page #galerie .gal__tab:not(.gal-zu){animation:gal-grp-in .3s var(--ease) both}
  body.sbm-v5-page #galerie .gal__tab:not(.gal-zu) + .gal__grp{margin-top:6px}
  /* Dashboard: einzelne Funktion ohne Gruppentitel, immer sichtbar, oben */
  body.sbm-v5-page #galerie .gal__grp.gal-solo{display:none}
  body.sbm-v5-page #galerie .gal__tab.gal-solo-tab{margin-bottom:8px;animation:none}
  @keyframes gal-grp-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
@media (min-width:900px) and (prefers-reduced-motion:reduce){
  body.sbm-v5-page #galerie .gal__tab:not(.gal-zu){animation:none}
}

/* Kurze Bildschirme (Laptop 1366 × 768, 1280 × 720): 25 Funktionen in 6 Gruppen – Zeilen kompakter, damit die längste offene
   Gruppe (5 Funktionen) neben Text + Film passt */
@media (min-width:900px) and (max-height:820px){
  body.sbm-v5-page #galerie .gal__nav{gap:0}
  body.sbm-v5-page #galerie .gal__tab{height:35px;font-size:14px}
  body.sbm-v5-page #galerie .gal__tab .ui-ico{width:26px;height:26px}
  body.sbm-v5-page #galerie .gal__grp{height:37px;font-size:14px}
  body.sbm-v5-page #galerie .gal__tab.gal-solo-tab{margin-bottom:4px}
  body.sbm-v5-page #galerie .gal__tab:not(.gal-zu) + .gal__grp{margin-top:3px}
  body.sbm-v5-page #galerie .gal__copy .h3{font-size:clamp(19px,1.6vw,23px)}
  body.sbm-v5-page #galerie .gal__txt{font-size:15.5px}
  body.sbm-v5-page #galerie .gal__panel .gal-scene{margin-top:12px}
}