/* TEMPLATES GALLERI */
#templates { background: var(--dark-blue); }
.tpl-cat { margin-top:60px; }
.tpl-cat:first-of-type { margin-top:28px; }
.tpl-cat-head { display:flex; align-items:baseline; gap:14px; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid rgba(250,250,250,.12); }
.tpl-cat-name { font-size:clamp(22px,2.4vw,30px); font-weight:800; color:var(--cold-sand); }
.tpl-cat-count { font-size:13px; font-weight:300; color:var(--mint); }
.tpl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.tpl-card { display:flex; flex-direction:column; background:rgba(250,250,250,.04); border:1px solid rgba(250,250,250,.1); border-radius:0 20px 0 20px; overflow:hidden; }
.tpl-illu { background:rgba(250,250,250,.02); border-bottom:1px solid rgba(250,250,250,.08); }
.tpl-illu svg { width:100%; height:auto; display:block; }
.tpl-body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.tpl-name { font-size:17px; font-weight:800; color:var(--cold-sand); margin:0 0 8px; }
.tpl-desc { font-size:13px; font-weight:300; line-height:1.55; color:var(--cold-sand); opacity:.78; margin:0 0 16px; flex:1; }
.tpl-meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.tpl-tag { font-size:11px; padding:4px 10px; border-radius:0 7px 0 7px; line-height:1.3; }
.tpl-tag.ch { color:var(--cold-sand); background:rgba(250,250,250,.08); font-weight:300; }
.tpl-tag.pur { color:var(--mint); border:1px solid var(--mint); font-weight:800; }
@media (max-width:900px){ .tpl-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .tpl-grid { grid-template-columns:1fr; } }
@keyframes fuPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes fuFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes fuSlide { 0%,100%{transform:translateX(-12px)} 50%{transform:translateX(12px)} }
@keyframes fuBlink { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes fuPop { 0%,12%{opacity:0;transform:scale(.55)} 32%,78%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.55)} }
@keyframes fuType { 0%{transform:scaleX(0)} 55%,100%{transform:scaleX(1)} }
@keyframes fuSpin { to { transform:rotate(360deg) } }
.fu-pulse{ animation:fuPulse 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.fu-float{ animation:fuFloat 3s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.fu-slide{ animation:fuSlide 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.fu-blink{ animation:fuBlink 2.2s ease-in-out infinite; }
.fu-pop { animation:fuPop 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.fu-type { animation:fuType 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.fu-spin { animation:fuSpin 12s linear infinite; transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion: reduce){ .tpl-illu * { animation:none !important; } }
/* Templates-hero: tumlende mint Zeit-form + haardt hero-farveskift ved hvert nedslag (ingen fade) */
.subhero.bauhaus.hero-light{ background: var(--cold-sand); color: var(--dark-blue); }
.subhero.bauhaus.hero-light h1, .subhero.bauhaus.hero-light .eyebrow, .subhero.bauhaus.hero-light .lead{ color: var(--dark-blue); }
.tpl-box{ position:absolute; left:0; bottom:0; width:10vw; height:10vw; background:var(--mint); border-radius:0 24% 0 24%; transform-origin:0 0; z-index:1; pointer-events:none; }
@media (max-width:760px){ .tpl-box{ width:16vw; height:16vw; } }