/*
Theme Name: Amara Software
Theme URI: https://amarasoftware.com
Author: Amara Software
Description: Free web animation tools, right in your browser. Custom theme, no page builder.
Version: 1.0.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: amara
*/

/* ========== Fonts (self-hosted Manrope variable) ========== */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/manrope-greek.woff2') format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/manrope-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

/* ========== Tokens ========== */
:root{
  --ink:#0f172a; --ink-2:#334155; --muted:#475569; --muted-2:#64748b; --faint:#64748b;
  --line:rgba(15,23,42,.08); --line-2:rgba(15,23,42,.14);
  --bg:#ffffff; --bg-2:#f8fafc; --panel:rgba(255,255,255,.62); --panel-solid:#fff;
  --violet:#6d28d9; --violet-2:#7c3aed; --violet-soft:rgba(109,40,217,.08); --violet-soft-2:rgba(109,40,217,.14);
  --cyan:#06b6d4; --pink:#ec4899; --amber:#f59e0b; --green:#10b981; --red:#dc2626;
  --grad:linear-gradient(135deg,#7c3aed,#6d28d9); --grad-tri:linear-gradient(135deg,#06b6d4,#6d28d9 65%,#ec4899);
  --r-s:10px; --r:12px; --r-l:16px; --r-xl:24px; --pill:999px;
  --sh-1:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.14);
  --sh-2:0 2px 4px rgba(15,23,42,.05),0 16px 40px -16px rgba(15,23,42,.22);
  --sh-btn:0 1px 2px rgba(15,23,42,.2),0 10px 24px -10px rgba(109,40,217,.55);
  --sh-btn-h:0 2px 4px rgba(15,23,42,.2),0 16px 32px -12px rgba(109,40,217,.65);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease:ease;
  --t-fast:160ms; --t:220ms; --t-slow:420ms;
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --container:1280px; --gutter:clamp(16px,4vw,80px);
  --focus:0 0 0 3px #fff,0 0 0 6px rgba(109,40,217,.55);
}

/* ========== Base ========== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11"}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
::selection{background:rgba(109,40,217,.18);color:var(--ink)}
:focus{outline:none}
:focus-visible{box-shadow:var(--focus);border-radius:var(--r-s)}
.skip{position:absolute;left:16px;top:-48px;z-index:100;padding:10px 14px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:600;transition:top var(--t-fast) var(--ease-out)}
.skip:focus{top:16px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.icon{flex:none}
/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.18) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(15,23,42,.18);border-radius:999px;border:3px solid #fff}
*::-webkit-scrollbar-track{background:transparent}

/* ========== Type ========== */
.display{font-weight:600;letter-spacing:-.03em;line-height:1.08;font-size:clamp(34px,5.2vw,56px);text-wrap:balance}
.h2{font-weight:600;letter-spacing:-.025em;line-height:1.15;font-size:clamp(26px,3.2vw,36px);text-wrap:balance}
.h3{font-weight:600;letter-spacing:-.015em;line-height:1.25;font-size:clamp(18px,2vw,22px)}
.deck{font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--ink-2);max-width:720px;text-wrap:pretty}
.small{font-size:13.5px;color:var(--muted-2)}
.prose{max-width:70ch;min-width:0;font-size:17px;line-height:1.65}
.prose h1{font-weight:600;letter-spacing:-.03em;line-height:1.1;font-size:clamp(30px,4vw,44px);margin-bottom:.6em}
.prose h2{font-weight:600;letter-spacing:-.02em;font-size:clamp(22px,2.6vw,28px);margin:2em 0 .6em}
.prose h3{font-weight:600;font-size:19px;margin:1.6em 0 .5em}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose ul{list-style:disc;padding-left:1.3em}.prose ol{list-style:decimal;padding-left:1.3em}
.prose li{margin:.35em 0}
.prose a{color:var(--violet);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;transition:color var(--t-fast) var(--ease)}
.prose a:hover{color:var(--violet-2)}
.prose strong{font-weight:600}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--bg-2);padding:.1em .4em;border-radius:6px}
.prose img{border-radius:var(--r-l);height:auto}
.prose .wp-caption,.prose figure{width:auto!important;max-width:100%;margin:1.6em 0}
.prose .wp-caption img{width:100%;height:auto}
.prose .wp-caption-text,.prose figcaption{font-size:13.5px;color:var(--muted-2);margin-top:8px;line-height:1.45}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:0 0 1.2em}
.prose th,.prose td{text-align:left;padding:.6em .5em;border-bottom:1px solid var(--line)}
.prose th{font-weight:600;color:var(--muted)}
.prose tbody th{color:var(--ink)}

/* ========== Buttons, chips, pills ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r);font-weight:600;font-size:15px;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t) var(--ease-out),background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),filter var(--t-fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--grad);color:#fff;box-shadow:var(--sh-btn)}
@media (hover:hover) and (pointer:fine){.btn--primary:hover{transform:translateY(-1px);box-shadow:var(--sh-btn-h);filter:brightness(1.06)}.btn--primary:hover:active{transform:scale(.97)}}
.btn--ghost{border:1px solid var(--line-2);background:rgba(255,255,255,.55);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{background:#fff;border-color:rgba(15,23,42,.24)}}
.btn--soft{background:var(--violet-soft);color:var(--violet)}
@media (hover:hover) and (pointer:fine){.btn--soft:hover{background:var(--violet-soft-2)}}
.btn--sm{height:38px;padding:0 16px;font-size:14px;border-radius:var(--r-s)}
.btn--lg{height:52px;padding:0 26px;font-size:16px;border-radius:14px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.btn .icon{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.01em;padding:6px 12px;border-radius:var(--pill);background:rgba(255,255,255,.72);border:1px solid var(--line);color:var(--muted);backdrop-filter:blur(8px)}
.chip .icon{width:14px;height:14px;color:var(--violet)}
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--violet);background:rgba(255,255,255,.9);border:1px solid rgba(109,40,217,.22);padding:2px 8px;border-radius:var(--pill);white-space:nowrap}
.tag--muted{color:var(--muted);background:rgba(15,23,42,.05)}

/* ========== Bloom ========== */
.bloom{position:absolute;left:0;right:0;top:0;height:min(820px,100vh);overflow:hidden;pointer-events:none;z-index:0}
.bloom i{position:absolute;border-radius:50%;filter:blur(96px);opacity:.5;will-change:transform}
.bloom .b1{left:20%;top:-120px;width:640px;height:560px;background:var(--violet);animation:drift1 18s var(--ease-in-out) infinite alternate}
.bloom .b2{left:50%;top:-40px;width:600px;height:540px;background:var(--cyan);animation:drift2 22s var(--ease-in-out) infinite alternate}
.bloom .b3{left:38%;top:160px;width:520px;height:420px;background:var(--pink);opacity:.34;animation:drift3 26s var(--ease-in-out) infinite alternate}
.bloom::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 45%,#fff 100%)}
@keyframes drift1{to{transform:translate(60px,30px) scale(1.06)}}
@keyframes drift2{to{transform:translate(-70px,20px) scale(1.04)}}
@keyframes drift3{to{transform:translate(30px,-40px)}}
@media (max-width:768px){.bloom i{filter:blur(70px)}.bloom .b1{left:-10%;width:380px;height:320px}.bloom .b2{left:40%;width:360px;height:300px}.bloom .b3{left:20%;width:300px;height:240px}}
@media (prefers-reduced-motion:reduce){.bloom i{animation:none}}
.is-tool .bloom i,.page-head~.bloom i{opacity:.3}.is-tool .bloom .b3{opacity:.2}

/* ========== Header ========== */
.site-header{position:sticky;top:0;z-index:50;height:64px;background:rgba(255,255,255,.72);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 8px 24px -20px rgba(15,23,42,.25)}
.site-header .container{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em;border-radius:var(--r-s)}
.brand__mark{width:28px;height:28px;border-radius:8px;background:var(--grad-tri);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);position:relative;overflow:hidden;flex:none}
.brand__mark::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%)}
.menu{margin:0 auto;display:flex;gap:4px}
.menu a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:var(--r-s);font-size:14px;font-weight:500;color:var(--muted);position:relative;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){.menu a:hover{color:var(--ink);background:rgba(15,23,42,.05)}}
.menu a[aria-current=page]{color:var(--ink)}
.lang{display:inline-flex;align-items:center;height:32px;padding:2px;border:1px solid var(--line);border-radius:var(--pill);background:rgba(255,255,255,.6)}
.lang__item{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--pill);font-size:12.5px;font-weight:600;color:var(--muted);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.lang__item.is-current{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.lang__item:not(.is-current):hover{background:rgba(15,23,42,.06);color:var(--ink)}}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-s);color:var(--ink)}
@media (max-width:900px){
  .menu{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;gap:2px;padding:10px var(--gutter) 16px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 20px 40px -20px rgba(15,23,42,.25)}
  .menu.is-open{display:flex}
  .menu a{height:44px;font-size:16px}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .site-header .btn{display:none}
  .lang{margin-left:0}
}

/* ========== Hero ========== */
.hero{position:relative;z-index:1;text-align:center;padding:clamp(28px,5vw,48px) 0 0}
.hero .chips{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hero .display{width:min(820px,100%);margin:22px auto 0}
.hero .deck{margin:16px auto 0}
.hero .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}

/* Drop zone */
.drop{position:relative;z-index:1;width:min(760px,100%);margin:26px auto 0;border-radius:var(--r-l);background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;align-items:center;gap:16px;padding:14px 20px;cursor:pointer;text-align:left;
  transition:box-shadow var(--t) var(--ease-out),transform var(--t) var(--ease-out),border-color var(--t) var(--ease),background-color var(--t) var(--ease)}
.drop::before{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(109,40,217,.35);border-radius:10px;pointer-events:none;transition:border-color var(--t) var(--ease),inset var(--t) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.drop:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}.drop:hover::before{border-color:rgba(109,40,217,.6)}}
.drop.is-over{background:rgba(255,255,255,.92);border-color:rgba(109,40,217,.5);box-shadow:0 0 0 4px var(--violet-soft),var(--sh-2)}
.drop.is-over::before{border-color:var(--violet);inset:6px}
.drop__ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(6,182,212,.12));display:grid;place-items:center;color:var(--violet);flex:none;transition:transform var(--t) var(--ease-out)}
.drop.is-over .drop__ico{transform:scale(1.08)}
.drop strong{display:block;font-weight:600;font-size:17px}
.drop span{display:block;font-size:13.5px;color:var(--muted-2);margin-top:3px}
.drop .btn{margin-left:auto}
.drop .btn--soft{color:var(--violet);font-size:14px}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
@media (max-width:640px){.drop{flex-wrap:wrap;padding:14px}.drop .btn{margin-left:0;width:100%}}

/* ========== Bento ========== */
.bento{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.card{position:relative;min-width:0;display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-l);background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);box-shadow:var(--sh-1);min-height:92px;
  transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out),border-color var(--t) var(--ease)}
@media (hover:hover) and (pointer:fine){.card[href]:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:rgba(109,40,217,.18)}}
.card[href]:active{transform:translateY(0) scale(.995)}
.card--wide{grid-column:span 2;background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(6,182,212,.08)),var(--panel)}
.card--info{background:rgba(15,23,42,.03)}
.card__ic{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#7c3aed,#06b6d4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.card--info .card__ic{background:linear-gradient(135deg,#0f172a,#475569)}
.card__ic .icon{width:20px;height:20px}
.card h3{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.card__head h3{min-width:0}
.card p{font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:4px}
.card .tag{position:static;flex:none;margin:-1px -6px 0 0}
.card__body{min-width:0;flex:1}
/* live demos */
.demo{margin-top:12px;height:54px;border-radius:10px;background:#fff;border:1px solid var(--line);overflow:hidden;position:relative}
.card--wide .demo{height:76px}
.demo *{animation-play-state:paused}
.card--wide .demo *,.card.is-live .demo *{animation-play-state:running}
@media (hover:hover) and (pointer:fine){.card:hover .demo *{animation-play-state:running}}
.card:focus-visible .demo *{animation-play-state:running}
.demo--gif{display:flex;gap:4px;padding:8px}
.demo--gif i{flex:1;border-radius:6px;background:#eef;background-size:cover;background-position:center;opacity:.35;animation:gifFlick 1.6s steps(1) infinite}
.demo--gif i:nth-child(1){background-image:url(assets/img/demo/gif-1.webp)}.demo--gif i:nth-child(2){animation-delay:.4s;background-image:url(assets/img/demo/gif-2.webp)}.demo--gif i:nth-child(3){animation-delay:.8s;background-image:url(assets/img/demo/gif-3.webp)}.demo--gif i:nth-child(4){animation-delay:1.2s;background-image:url(assets/img/demo/gif-4.webp)}
@keyframes gifFlick{0%,24%{opacity:1}25%,100%{opacity:.25}}
.demo--slides i{position:absolute;inset:6px;border-radius:6px;background-size:cover;background-position:center;opacity:0;animation:slideFade 4.5s var(--ease-in-out) infinite}
.demo--slides i:nth-child(1){background-image:url(assets/img/demo/slide-coast.webp);animation-name:slideFadeFirst}.demo--slides i:nth-child(2){background-image:url(assets/img/demo/slide-city.webp);animation-delay:1.5s}.demo--slides i:nth-child(3){background-image:url(assets/img/demo/slide-mountain.webp);animation-delay:3s}
@keyframes slideFade{0%{opacity:0;transform:scale(1.04)}10%,30%{opacity:1;transform:scale(1)}42%,100%{opacity:0}}
@keyframes slideFadeFirst{0%,30%{opacity:1;transform:scale(1)}42%,88%{opacity:0}100%{opacity:1}}
.demo--banner{display:flex;align-items:center;padding:0 12px;background:linear-gradient(90deg,#f5f3ff,#ecfeff)}
.demo--banner b{font-size:13px;font-weight:700;color:var(--violet);white-space:nowrap;animation:bannerIn 3s var(--ease-out) infinite}
.demo--banner em{margin-left:auto;font-style:normal;font-size:10px;font-weight:700;color:#fff;background:var(--grad);padding:4px 8px;border-radius:6px;animation:popIn 3s var(--ease-out) infinite}
@keyframes bannerIn{0%,70%{transform:none;opacity:1}84%{transform:translateX(14px);opacity:0}85%{transform:translateX(-24px);opacity:0}100%{transform:none;opacity:1}}
@keyframes popIn{0%,70%{transform:scale(1);opacity:1}84%,88%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.demo--ticker{display:flex;align-items:center;background:#0f172a;color:#fff}
.demo--ticker b{flex:none;position:relative;z-index:1;font-size:10px;font-weight:700;letter-spacing:.06em;background:var(--red);padding:0 8px;height:100%;display:flex;align-items:center}
.demo--ticker i{flex:1;min-width:0;overflow:hidden;height:100%;display:flex;align-items:center;font-style:normal}
.demo--ticker span{white-space:nowrap;font-size:12px;font-weight:600;padding:0 0 0 12px;animation:tick 14s linear infinite}
.demo--ticker span::after{content:attr(data-text);padding-left:48px}
@keyframes tick{0%,18%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.demo--photo{background:url(assets/img/demo/kenburns.webp) center/120% no-repeat;animation:kb 6s var(--ease-in-out) infinite alternate}
@keyframes kb{from{background-position:0 0;background-size:120% 120%}to{background-position:100% 100%;background-size:160% 160%}}
.demo--menu{display:flex;align-items:center;gap:14px;padding:0 14px;font-size:12px;font-weight:600;color:var(--muted)}
.demo--menu i{font-style:normal;position:relative;padding:4px 0}
.demo--menu i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--violet);transform:scaleX(0);transform-origin:left;animation:ul 3.6s var(--ease-out) infinite}
.demo--menu i:nth-child(1)::after{animation-name:ulFirst}.demo--menu i:nth-child(2)::after{animation-delay:1.2s}.demo--menu i:nth-child(3)::after{animation-delay:2.4s}
@keyframes ul{0%{transform:scaleX(0)}12%,28%{transform:scaleX(1)}40%,100%{transform:scaleX(0);transform-origin:right}}
@keyframes ulFirst{0%,28%{transform:scaleX(1)}40%,90%{transform:scaleX(0);transform-origin:right}100%{transform:scaleX(1)}}
.demo--swf{display:grid;place-items:center;background:#0f172a}
.demo--swf i{width:26px;height:26px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;animation:pulse 1.6s var(--ease-in-out) infinite}
.demo--swf .icon{width:14px;height:14px}
@keyframes pulse{50%{transform:scale(1.12);box-shadow:0 0 0 8px rgba(124,58,237,.2)}}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.card--wide{grid-column:span 2}}
@media (max-width:560px){.bento{grid-template-columns:minmax(0,1fr)}.card--wide{grid-column:span 1}.card__body{flex:1 1 0;min-width:0}.demo{width:100%}}
/* Phase-3-Demos: CSS Loader, Text-Animation, Panorama */
.demo--loader{display:flex;align-items:center;justify-content:space-around;padding:0 18px}
.demo--loader .r{width:24px;height:24px;border-radius:50%;border:3px solid var(--violet-soft-2,#ddd6fe);border-top-color:var(--violet);animation:dSpin .9s linear infinite}
.demo--loader .d{display:flex;gap:5px}.demo--loader .d b{width:7px;height:7px;border-radius:50%;background:var(--violet);animation:dDot 1.1s var(--ease-in-out) infinite}
.demo--loader .d b:nth-child(2){animation-delay:.15s}.demo--loader .d b:nth-child(3){animation-delay:.3s}
.demo--loader .p{position:relative;width:64px;height:5px;border-radius:5px;background:#ede9fe;overflow:hidden}
.demo--loader .p::after{content:"";position:absolute;inset:0;width:40%;border-radius:5px;background:var(--grad);animation:dBar 1.4s var(--ease-in-out) infinite}
@keyframes dSpin{to{transform:rotate(1turn)}}
@keyframes dDot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-6px);opacity:1}}
@keyframes dBar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.demo--text{display:flex;align-items:center;justify-content:center;gap:1px;font-weight:800;font-size:22px;letter-spacing:-.01em;background:linear-gradient(135deg,#f5f3ff,#fdf2f8)}
.demo--text b{display:inline-block;color:var(--violet);animation:dWave 1.6s var(--ease-in-out) infinite;animation-delay:calc(var(--i) * 90ms)}
@keyframes dWave{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}
.demo--pano i{position:absolute;inset:0;background:url(assets/img/demo/pano-strip.webp) 0 0/337.5px 54px repeat-x;animation:dPano 20s linear infinite}
@keyframes dPano{to{background-position:-337.5px 0}}
/* Phase-4-Demos: Gruß-GIF, GIF-Konverter, Countdown-GIF */
.demo--greet i{position:absolute;inset:6px;border-radius:6px;background-size:cover;background-position:center;opacity:0;animation:slideFade 4.5s var(--ease-in-out) infinite}
.demo--greet i:nth-child(1){animation-name:slideFadeFirst}.demo--greet i:nth-child(2){animation-delay:1.5s}.demo--greet i:nth-child(3){animation-delay:3s}
.demo--conv{display:flex;align-items:center;gap:10px;padding:0 12px}
.demo--conv .f{flex:none;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);padding:4px 9px;border-radius:var(--pill);white-space:nowrap}
.demo--conv .f.t{color:var(--violet);background:var(--violet-soft);border-color:transparent}
.demo--conv .bar{flex:1;min-width:24px;height:6px;border-radius:6px;background:rgba(15,23,42,.08);overflow:hidden}
.demo--conv .bar i{display:block;height:100%;border-radius:6px;background:var(--grad);transform-origin:left;animation:dShrink 3.2s steps(4,jump-none) infinite}
@keyframes dShrink{0%{transform:scaleX(1)}100%{transform:scaleX(.31)}}
.demo--count{display:flex;align-items:center;justify-content:center;gap:4px;font-variant-numeric:tabular-nums}
.demo--count .tl{position:relative;display:grid;place-items:center;width:24px;height:34px;border-radius:6px;background:var(--ink);color:#fff;font-size:18px;font-weight:700;line-height:1;overflow:hidden}
.demo--count .tl::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.18)}
.demo--count i{font-style:normal;font-weight:700;color:var(--muted-2);padding:0 2px}
.demo--count .tl--s{place-items:start center}
.demo--count .tl--s span{display:flex;flex-direction:column;animation:dTick 10s steps(10,end) infinite}
.demo--count .tl--s s{text-decoration:none;display:grid;place-items:center;height:34px}
.demo--count .tl--s::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:rgba(255,255,255,.14);transform-origin:bottom;transform:scaleY(0);animation:dFlip 1s var(--ease-out) infinite;z-index:1}
@keyframes dTick{to{transform:translateY(-340px)}}
@keyframes dFlip{0%{transform:scaleY(1)}35%,100%{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.demo *,.demo *::before{animation:none!important}}

/* ========== Sections ========== */
.section{padding:clamp(56px,8vw,96px) 0 0}
.section__head{max-width:720px;margin-bottom:clamp(24px,3vw,36px)}
.section__head .deck{margin-top:12px}
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.format{padding:24px;border-radius:var(--r-xl);border:1px solid var(--line);background:var(--bg-2);display:flex;flex-direction:column;gap:12px}
.format .h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.format__badge{font-size:11px;font-weight:700;letter-spacing:.06em;color:#fff;padding:4px 8px;border-radius:6px;vertical-align:middle}
.format--gif .format__badge{background:linear-gradient(135deg,#f59e0b,#ec4899)}.format--video .format__badge{background:linear-gradient(135deg,#06b6d4,#6d28d9)}.format--html .format__badge{background:linear-gradient(135deg,#10b981,#06b6d4)}
.format p{color:var(--muted);font-size:15px}
.format__tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.format__tools a{font-size:12.5px;font-weight:600;color:var(--violet);background:var(--violet-soft);padding:4px 10px;border-radius:var(--pill);transition:background-color var(--t-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){.format__tools a:hover{background:var(--violet-soft-2)}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
.step{padding:24px;border-radius:var(--r-xl);background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-1)}
.step__n{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:700;margin-bottom:14px}
.step p{color:var(--muted);font-size:15px;margin-top:6px}
.privacy{margin-top:clamp(56px,8vw,96px);border-radius:var(--r-xl);padding:clamp(28px,4vw,48px);background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(6,182,212,.08)),#fff;border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.privacy__ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:var(--sh-btn)}
.privacy__ic .icon{width:28px;height:28px}
.privacy p{color:var(--muted);margin-top:8px;max-width:720px}
.history{margin-top:clamp(56px,8vw,96px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.history .prose p{color:var(--muted)}
.timeline{position:relative;padding-left:24px;display:grid;gap:18px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,#06b6d4,#6d28d9,#ec4899)}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-22px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--violet)}
.timeline b{display:block;font-weight:600}
.timeline span{display:block;font-size:14px;color:var(--muted-2)}
@media (max-width:900px){.formats,.steps{grid-template-columns:1fr}.history{grid-template-columns:1fr}.privacy{grid-template-columns:1fr}}

/* ========== Footer ========== */
.site-footer{margin-top:clamp(64px,10vw,120px);border-top:1px solid var(--line);background:var(--bg-2);padding:48px 0 32px;font-size:14px;color:var(--muted)}
.site-footer .cols{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px}
@media (max-width:1024px){.site-footer .cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.site-footer h4,.site-footer .cols h2{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.site-footer li{margin:7px 0}
.site-footer a{transition:color var(--t-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){.site-footer a:hover{color:var(--violet)}}
.site-footer .bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:var(--muted-2)}
@media (max-width:768px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.site-footer .cols{grid-template-columns:1fr}}

/* ========== Reveal (one authored entrance) ========== */
.reveal{opacity:1;transform:none}
.js .reveal{transform:translateY(10px);filter:blur(3px);transition:filter var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.js .reveal.is-in{transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.js .reveal{transform:none;filter:none;transition:none}}

/* ========== Page (prose pages) ========== */
.page-head{position:relative;z-index:1;padding:clamp(32px,5vw,56px) 0 0}
.page-body{position:relative;z-index:1;padding-top:clamp(24px,3vw,36px)}

/* ========== Tool pages ========== */
.tool-head{position:relative;z-index:1;padding:clamp(20px,3vw,32px) 0 0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px}
.tool-head .h1{font-weight:600;letter-spacing:-.03em;line-height:1.08;font-size:clamp(30px,4vw,44px)}
.tool-head .deck{margin-top:8px;max-width:640px}
.tool-head .chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
@media (max-width:640px){.tool-head .chips{margin-left:0;justify-content:flex-start}}
.tool{position:relative;z-index:1;margin-top:clamp(20px,3vw,28px);display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
.tool__panel{background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:20px;display:grid;gap:18px;position:sticky;top:80px;max-height:calc(100vh - 96px);overflow:auto}
.tool__stage{background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-1);min-height:480px;display:flex;flex-direction:column;overflow:hidden}
.stage{flex:1;display:grid;place-items:center;background:
  linear-gradient(45deg,rgba(15,23,42,.045) 25%,transparent 25%,transparent 75%,rgba(15,23,42,.045) 75%),
  linear-gradient(45deg,rgba(15,23,42,.045) 25%,transparent 25%,transparent 75%,rgba(15,23,42,.045) 75%);
  background-size:20px 20px;background-position:0 0,10px 10px;background-color:#f8fafc;padding:20px;min-height:380px}
.stage canvas,.stage img,.stage video,.stage iframe{max-width:100%;max-height:70vh;border-radius:8px;box-shadow:0 10px 30px -14px rgba(15,23,42,.35);background:#fff}
.stage__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:#fff;font-size:13.5px;color:var(--muted)}
.stage__bar .grow{flex:1}
.tool__drop{min-height:380px;display:grid;place-items:center;text-align:center;padding:32px;position:relative;cursor:pointer;transition:background-color var(--t) var(--ease)}
.tool__drop::before{content:"";position:absolute;inset:14px;border:1.5px dashed rgba(109,40,217,.35);border-radius:var(--r-l);pointer-events:none;transition:border-color var(--t) var(--ease),inset var(--t) var(--ease-out)}
.tool__drop.is-over{background:var(--violet-soft)}.tool__drop.is-over::before{border-color:var(--violet);inset:10px}
.tool__drop input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.tool__drop .drop__ico{width:64px;height:64px;border-radius:18px;margin:0 auto 16px}
.tool__drop .drop__ico .icon{width:30px;height:30px}
.tool__drop strong{display:block;font-size:20px;font-weight:600}
.tool__drop p{color:var(--muted-2);font-size:14.5px;margin-top:6px}
.tool__drop .btn{margin-top:18px}
.tool__drop small{display:block;margin-top:14px;font-size:12.5px;color:var(--faint)}
@media (max-width:1024px){.tool{grid-template-columns:1fr}.tool__panel{position:static;max-height:none}.tool__panel:not(.is-ready){min-height:70vh}.tool__stage{order:-1;min-height:320px}}

/* Form controls */
.field{display:grid;gap:6px}
.field__label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;color:var(--ink-2)}
.field__label output,.field__label span{font-weight:500;color:var(--muted-2);font-variant-numeric:tabular-nums}
.field__hint{font-size:12.5px;color:var(--muted-2)}
.input,.select,.textarea{width:100%;height:40px;padding:0 12px;border-radius:var(--r-s);border:1px solid var(--line-2);background:#fff;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:1.45}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft-2)}
.select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--violet) var(--p,50%),rgba(15,23,42,.12) var(--p,50%))}
.range::-moz-range-track{height:4px;border-radius:2px;background:rgba(15,23,42,.12)}
.range::-moz-range-progress{height:4px;border-radius:2px;background:var(--violet)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:#fff;border:2px solid var(--violet);box-shadow:0 1px 3px rgba(15,23,42,.2);transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease)}
.range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--violet);box-shadow:0 1px 3px rgba(15,23,42,.2)}
.range:active::-webkit-slider-thumb,.range:focus-visible::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 5px var(--violet-soft-2)}
.range:focus-visible{box-shadow:none}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:3px;border-radius:var(--r-s);background:rgba(15,23,42,.05)}
.seg label{position:relative;display:grid;place-items:center;height:32px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.seg input{position:absolute;inset:0;opacity:0;cursor:pointer}
.seg input:checked+span{color:var(--ink)}
.seg label:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.12)}
.seg label:has(input:focus-visible){box-shadow:var(--focus)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:28px;height:28px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2);cursor:pointer;transition:transform var(--t-fast) var(--ease-out)}
.swatch.is-on{box-shadow:0 0 0 2px var(--violet)}
@media (hover:hover){.swatch:hover{transform:scale(1.1)}}
.color{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-s);background:#fff}
.color input[type=color]{width:26px;height:26px;border:0;padding:0;background:none;border-radius:6px;overflow:hidden;cursor:pointer}
.color input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
/* Haarlinie um jedes Farbfeld, damit Weiß auf Weiß sichtbar bleibt */
input[type=color]::-webkit-color-swatch{box-shadow:inset 0 0 0 1px var(--line-2)}
input[type=color]::-moz-color-swatch{box-shadow:inset 0 0 0 1px var(--line-2);border:0;border-radius:6px}
.color span{font-family:var(--mono);font-size:13px;color:var(--muted)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.toggle i{position:relative;width:38px;height:22px;border-radius:999px;background:rgba(15,23,42,.18);transition:background-color var(--t-fast) var(--ease);flex:none}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.3);transition:transform var(--t-fast) var(--ease-out)}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle input:checked+i{background:var(--violet)}.toggle input:checked+i::after{transform:translateX(16px)}
.toggle input:focus-visible+i{box-shadow:var(--focus)}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.preset{display:grid;gap:6px;padding:8px;border-radius:var(--r-s);border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;font-size:12px;font-weight:600;color:var(--muted);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-out)}
.preset i{display:block;height:34px;border-radius:6px;background:var(--bg-2)}
.preset.is-on{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet-soft-2);color:var(--ink)}
@media (hover:hover){.preset:hover{transform:translateY(-1px)}}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.thumb{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);cursor:grab}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-drag{opacity:.4}
.thumb button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:6px;background:rgba(15,23,42,.7);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity var(--t-fast) var(--ease)}
.thumb:hover button,.thumb button:focus-visible{opacity:1}
.thumb button .icon{width:12px;height:12px}
.progress{height:6px;border-radius:3px;background:rgba(15,23,42,.08);overflow:hidden}
.progress i{display:block;height:100%;width:var(--p,0%);background:var(--grad);transition:width var(--t-fast) linear}
.progress.is-indeterminate i{width:40%;animation:indet 1.1s var(--ease-in-out) infinite}
@keyframes indet{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.result{display:grid;gap:12px;padding:16px;border-radius:var(--r-l);background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(6,182,212,.08));border:1px solid rgba(16,185,129,.25)}
.result b{display:flex;align-items:center;gap:8px;font-weight:600}
.result b .icon{color:var(--green)}
.result .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.result .small{margin-left:auto}
.alert{padding:12px 14px;border-radius:var(--r);font-size:13.5px;line-height:1.45}
.alert--error{background:rgba(220,38,38,.07);color:#991b1b;border:1px solid rgba(220,38,38,.2)}
.alert--info{background:var(--violet-soft);color:#4c1d95}
.code{position:relative;border-radius:var(--r);background:#0f172a;color:#e2e8f0;font-family:var(--mono);font-size:12.5px;line-height:1.55;padding:14px 16px;max-height:280px;overflow:auto;white-space:pre;tab-size:2}
.code+.btn,.code-actions{margin-top:8px}
.toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,0);padding:10px 16px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:14px;font-weight:600;box-shadow:var(--sh-2);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out)}
.toast[hidden]{display:block;opacity:0;transform:translate(-50%,10px);pointer-events:none}
.panel__group{display:grid;gap:12px}
.panel__group+.panel__group{padding-top:16px;border-top:1px solid var(--line)}
.panel__title{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.tool-guide{position:relative;z-index:1;margin-top:clamp(48px,7vw,80px);display:grid;grid-template-columns:minmax(0,70ch) 1fr;gap:clamp(24px,5vw,64px)}
.tool-guide__aside{display:grid;gap:12px;align-content:start;position:sticky;top:88px}
.tool-guide__aside .card{padding:16px}
.faq details{border-top:1px solid var(--line);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;font-weight:400;color:var(--violet);transition:transform var(--t-fast) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin-top:8px;font-size:15px}
@media (max-width:900px){.tool-guide{grid-template-columns:minmax(0,1fr)}.tool-guide__aside{position:static}.prose table{display:block;overflow-x:auto;white-space:nowrap}.prose td,.prose th{white-space:normal;min-width:120px}}

/* ========== 404 ========== */
.nf{position:relative;z-index:1;text-align:center;padding:clamp(56px,10vw,120px) 0}
.nf .display{margin:0 auto 12px}
.nf .actions{display:flex;justify-content:center;gap:12px;margin-top:24px}

/* ========== Galerie (Download-Katalog) ========== */
.gal-head{padding-bottom:0}
.gal-head .deck{margin-top:12px}
.gal-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--pill);font-size:14px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.72);border:1px solid var(--line);backdrop-filter:blur(8px);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.pill small{font-size:12.5px;font-weight:500;color:var(--muted)}
.pill.is-on{background:var(--ink);border-color:var(--ink);color:#fff}.pill.is-on small{color:rgba(255,255,255,.78)}
@media (hover:hover) and (pointer:fine){.pill:not(.is-on):hover{background:#fff;color:var(--ink);border-color:var(--line-2)}}
.gal-rows{position:relative;z-index:1;margin-top:32px}
.gal-section+.gal-section{margin-top:48px}
.gal-section__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px}
.gal-section__head a.h2,.gal-section__head h2 a{transition:color var(--t-fast) var(--ease)}
@media (hover:hover){.gal-section__head h2 a:hover{color:var(--violet)}}
.gal-row{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:48px;align-items:center;padding:24px 0;border-top:1px solid var(--line)}
.gal-tile{position:relative;width:100%;border-radius:var(--r-l);overflow:hidden;background:linear-gradient(135deg,#ede9fe,#cffafe);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),var(--sh-1)}
.gal-video{display:block;width:100%;height:100%;object-fit:cover}
.gal-dur{position:absolute;right:12px;top:12px;padding:3px 8px;border-radius:var(--pill);font-size:11px;font-weight:700;letter-spacing:.04em;color:#fff;background:rgba(15,23,42,.55);backdrop-filter:blur(8px)}
.gal-info p{margin-top:12px;max-width:560px;color:var(--muted)}
.gal-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.gal-meta .chip .icon{width:14px;height:14px;color:var(--violet)}
.gal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.gal-info .gal-licence{margin-top:16px;font-size:13.5px;color:var(--muted-2)}
.gal-guide{margin-top:clamp(56px,8vw,96px)}
@media (max-width:860px){.gal-row{grid-template-columns:minmax(0,1fr);gap:20px}.gal-section__head{flex-wrap:wrap}}

.gal-teaser__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:none;flex-wrap:wrap}
.gal-teaser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gal-teaser__item{position:relative;display:block;border-radius:var(--r-l);overflow:hidden;aspect-ratio:1;box-shadow:var(--sh-1);transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out)}
.gal-teaser__item img{width:100%;height:100%;object-fit:cover}
.gal-teaser__item span{position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:var(--pill);font-size:12.5px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.85);backdrop-filter:blur(8px)}
@media (hover:hover) and (pointer:fine){.gal-teaser__item:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}}
@media (max-width:760px){.gal-teaser{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gal-teaser__item{background:#fff}.gal-teaser__item.is-wide img{object-fit:contain}

.prose pre{margin:0 0 1.2em;padding:14px 16px;border-radius:var(--r);background:#0f172a;color:#e2e8f0;font-family:var(--mono);font-size:13px;line-height:1.6;overflow:auto;white-space:pre;tab-size:2}
.prose pre code{background:none;padding:0;color:inherit;font-size:inherit}

/* Galerie: Fix-Runde (Review) */
.gal-meta{align-items:center}
.gal-meta .tag{color:var(--violet);background:var(--violet-soft);border:0;padding:3px 8px}
.chip--mp4,.chip--gif{font-variant-numeric:tabular-nums}
.chip--mp4::before,.chip--gif::before{content:"";width:8px;height:8px;border-radius:2px;flex:none}
.chip--mp4::before{background:linear-gradient(135deg,#06b6d4,#6d28d9)}
.chip--gif::before{background:linear-gradient(135deg,#f59e0b,#ec4899)}
.gal-tile{transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.gal-row:hover .gal-tile{transform:translateY(-2px);box-shadow:var(--sh-2)}}
.gal-toggle{width:44px;padding:0;flex:none}
.gal-toggle .icon{width:18px;height:18px}
.gal-toggle .i-pause{display:none}
.gal-toggle[aria-pressed=true] .i-play{display:none}.gal-toggle[aria-pressed=true] .i-pause{display:block}
@media (max-width:520px){.gal-actions{gap:8px}.gal-actions .btn--primary{flex:1}.gal-actions .btn--ghost:not(.gal-toggle):not(.gal-link){flex:1 1 calc(100% - 52px)}}
@media (max-width:560px){.gal-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px;scroll-padding-inline:16px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 32px),transparent)}.gal-filters::-webkit-scrollbar{display:none}.gal-filters .pill{flex:none}}

/* ========== Ratgeber-Bereiche (Flash-Hub, Tutorials) ========== */
.crumbs{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:16px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line)}
.crumbs a{color:var(--muted);text-decoration:none;border-radius:6px}
.crumbs a:hover{color:var(--ink)}
.guide-head .deck{margin-top:12px;max-width:640px}
.guide-cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(24px,3vw,32px)}
.guide-cards--odd a.card:first-of-type{grid-column:span 2;background:linear-gradient(135deg,rgba(109,40,217,.08),rgba(6,182,212,.08)),var(--panel)}
@media (max-width:640px){.guide-cards{grid-template-columns:minmax(0,1fr)}.guide-cards--odd a.card:first-of-type{grid-column:span 1}}
.guide-cards .card{align-items:center;padding-right:52px}
.guide-cards .card h3{padding-right:0}
.card__go{position:absolute;right:18px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--muted);transition:transform 200ms var(--ease-out),color 200ms var(--ease-out)}
.card__go .icon{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){.guide-cards .card:hover .card__go{transform:translateX(3px);color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.card__go{transition:none}}
.aside__h{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:8px 0 -2px}
.aside__h:first-child{margin-top:0}
.tool-guide__aside .card--link{align-items:center;padding:12px 16px;min-height:0}
.tool-guide__aside .card--link h3{padding-right:0;font-size:14.5px}
.tool-guide__aside .card--link .card__ic{width:30px;height:30px;border-radius:9px}
.tool-guide__aside .card--link .card__ic .icon{width:17px;height:17px}
.guide-body{margin-top:clamp(36px,5vw,56px)}

/* panorama-viewer */
.pano{position:relative;flex:1;min-height:clamp(320px,52vw,560px);background:#0f172a;overflow:hidden;isolation:isolate}
.pano__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none;-webkit-user-select:none;user-select:none}
.pano__canvas.is-grabbing{cursor:grabbing}
.pano__canvas:focus-visible{box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),inset 0 0 0 6px rgba(124,58,237,.75);border-radius:0}
.pano__hint{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:var(--pill);background:rgba(15,23,42,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:13px;font-weight:600;pointer-events:none;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out)}
.pano__hint .icon{width:16px;height:16px}
.pano__hint.is-off{opacity:0;transform:translateY(-4px)}
.pano__ctrls{position:absolute;right:12px;bottom:12px;display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(15,23,42,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 24px -12px rgba(0,0,0,.5)}
.pano__btn{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:#fff;transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.pano__btn .icon{width:18px;height:18px}
.pano__btn:active{transform:scale(.94)}
.pano__btn[aria-pressed=true]{background:var(--grad)}
.pano__btn:focus-visible{box-shadow:0 0 0 2px #fff;border-radius:10px}
@media (hover:hover) and (pointer:fine){.pano__btn:not([aria-pressed=true]):hover{background:rgba(255,255,255,.14)}}
.pano:fullscreen{min-height:0;width:100%;height:100%}
.pano:-webkit-full-screen{min-height:0;width:100%;height:100%}
.pano.is-max{position:fixed;inset:0;z-index:1000;min-height:0}
html.pano-lock,html.pano-lock body{overflow:hidden}
.tool__stage.is-over .pano::after{content:"";position:absolute;inset:10px;border:2px dashed rgba(255,255,255,.8);border-radius:var(--r-l);background:rgba(109,40,217,.25);pointer-events:none}
.pano-pick{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);border:1.5px dashed rgba(109,40,217,.35);background:var(--violet-soft);cursor:pointer;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.pano-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.pano-pick:has(input:focus-visible){box-shadow:var(--focus)}
@media (hover:hover) and (pointer:fine){.pano-pick:hover{border-color:var(--violet);background:var(--violet-soft-2)}}
.pano-pick__ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:var(--sh-btn)}
.pano-pick__txt{display:grid;gap:2px;min-width:0}
.pano-pick__txt b{font-size:14px;font-weight:600;color:var(--ink)}
.pano-pick__txt small{font-size:12.5px;line-height:1.4;color:var(--muted)}
.pano-privacy{color:var(--muted-2)}
.pano-readout{font-variant-numeric:tabular-nums;color:var(--muted)}
.pano-row{display:flex;flex-wrap:wrap;gap:8px}
.pano-subtitle{margin-top:6px}
.pano-result__media{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:8px;background:#0f172a}
@media (prefers-reduced-motion:reduce){.pano__hint,.pano__btn,.pano-pick{transition:none}}
@media (max-width:640px){.pano{min-height:min(72vh,440px)}.pano__btn{width:44px;height:44px}}

/* css-loader */
.stage.cl-host{place-items:stretch;padding:16px}
.cl-stage{width:100%;display:grid;gap:14px;align-content:start;container-type:inline-size}
.cl-view{position:relative;display:grid;place-items:center;height:clamp(200px,26vw,280px);border-radius:var(--r-l);border:1px solid var(--line);overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:background-color var(--t) var(--ease)}
.cl-fit{display:grid;place-items:center;transform-origin:center}
.cl-view[data-bg=dark],.cl-grid[data-bg=dark] .cl-tile__demo{background:#0f172a}
.cl-view[data-bg=checker],.cl-grid[data-bg=checker] .cl-tile__demo{background:linear-gradient(45deg,#e2e8f0 25%,transparent 25%,transparent 75%,#e2e8f0 75%),linear-gradient(45deg,#e2e8f0 25%,transparent 25%,transparent 75%,#e2e8f0 75%) #fff;background-size:16px 16px;background-position:0 0,8px 8px}
.cl-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cl-tile{display:grid;padding:0;border-radius:var(--r);border:1px solid var(--line);background:#fff;overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease-out)}
.cl-tile__demo{display:grid;place-items:center;height:76px;background:#fff;overflow:hidden;pointer-events:none}
.cl-tile__scale{display:grid;place-items:center}
.cl-tile__name{padding:7px 10px;font-size:12px;font-weight:600;color:var(--muted);border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:760px){.cl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:460px){.cl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.cl-tile__demo{height:64px}.cl-tile__scale{transform:scale(.8)}.cl-tile__name{padding:6px 8px;font-size:11.5px;line-height:1.25;white-space:normal;hyphens:auto;-webkit-hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:calc(2.5em + 12px)}}
.cl-tile[aria-checked=true]{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet-soft-2)}
.cl-tile[aria-checked=true] .cl-tile__name{color:var(--ink)}
.cl-tile:focus-visible{box-shadow:var(--focus)}
@media (hover:hover) and (pointer:fine){.cl-tile:hover{transform:translateY(-1px);border-color:var(--line-2)}.cl-tile[aria-checked=true]:hover{border-color:var(--violet)}}
.cl-stage.is-paused *,.cl-stage.is-paused *::before,.cl-stage.is-paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.cl-tile__demo *,.cl-tile__demo *::before,.cl-tile__demo *::after{animation-play-state:paused!important}.cl-tile,.cl-view{transition:none}}
@media (max-width:520px){.stage.cl-host{padding:12px}}

/* text-animation */
.tfx-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tfx-row>*:has(+[style*="none"]),.tfx-row>*:only-child{grid-column:1/-1}
.stage canvas.tfx-canvas.is-clear,.stage img.tfx-canvas.is-clear{background:transparent;box-shadow:none;outline:1px dashed rgba(109,40,217,.4);outline-offset:0}
.tfx-effects .presets{grid-template-columns:repeat(3,minmax(0,1fr))}
.tfx-effects .preset{min-width:0;align-content:start}
.tfx-effects .preset span{line-height:1.25}
.tfx-effects>.field__label,.tfx-formats>.field__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tfx-effects .preset i{font-style:normal;height:46px;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.tfx-effects .preset i b{display:inline-block;font-size:20px;line-height:1;font-weight:inherit;letter-spacing:-.01em}
.tfx-effects .preset[data-fx=marker] i b{background:linear-gradient(var(--acc),var(--acc)) 0 88%/100% .42em no-repeat;padding:0 .08em}
.tfx-effects .preset[data-fx=neon] i b{text-shadow:0 0 .12em var(--acc),0 0 .4em var(--acc)}
.tfx-effects .preset[data-fx=shine] i b{background:linear-gradient(90deg,currentColor,var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.tfx-effects .preset[data-fx=glitch] i b{text-shadow:-.06em 0 var(--acc),.06em 0 #22d3ee}
.tfx-effects .preset[data-fx=typewriter] i b::after{content:"";display:inline-block;width:.07em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:var(--acc)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .tfx-effects .preset:hover i b{animation:tfx-tile .7s cubic-bezier(.22,1,.36,1)}
  .tfx-effects .preset[data-fx=drop]:hover i b{animation-name:tfx-tile-drop;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
  .tfx-effects .preset[data-fx=pop]:hover i b{animation-name:tfx-tile-pop;animation-timing-function:cubic-bezier(.34,1.8,.64,1)}
  .tfx-effects .preset[data-fx=blur]:hover i b{animation-name:tfx-tile-blur}
  .tfx-effects .preset[data-fx=flip]:hover i b{animation-name:tfx-tile-flip}
  .tfx-effects .preset[data-fx=wave]:hover i b,.tfx-effects .preset[data-fx=bounce]:hover i b{animation:tfx-tile-wave .6s ease-in-out 2}
  .tfx-effects .preset[data-fx=neon]:hover i b,.tfx-effects .preset[data-fx=glitch]:hover i b{animation:tfx-tile-flick .6s steps(1,end)}
  .tfx-effects .preset[data-fx=typewriter]:hover i b::after{animation:tfx-tile-flick 1s steps(1,end) infinite}
  .tfx-effects .preset[data-fx=marker]:hover i b{animation:tfx-tile-mark .7s cubic-bezier(.65,0,.35,1)}
  .tfx-effects .preset[data-fx=shine]:hover i b{animation:tfx-tile-blur .7s cubic-bezier(.22,1,.36,1) reverse}
}
@keyframes tfx-tile{from{opacity:0;transform:translateY(.4em)}}
@keyframes tfx-tile-drop{from{opacity:0;transform:translateY(-.8em)}}
@keyframes tfx-tile-pop{from{opacity:0;transform:scale(.3)}}
@keyframes tfx-tile-blur{from{opacity:0;filter:blur(4px)}}
@keyframes tfx-tile-flip{from{opacity:0;transform:perspective(5em) rotateX(-100deg)}}
@keyframes tfx-tile-wave{50%{transform:translateY(-.2em)}}
@keyframes tfx-tile-flick{0%{opacity:1}20%{opacity:.2}35%{opacity:1}55%{opacity:.4}70%{opacity:1}}
@keyframes tfx-tile-mark{from{background-size:0 .42em}}
.tfx-formats .presets{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.tfx-formats .preset{justify-items:center;text-align:center}
.tfx-formats .preset i{border-radius:4px;background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(6,182,212,.22));box-shadow:inset 0 0 0 1px rgba(109,40,217,.25)}
.tfx-formats .preset span{font-variant-numeric:tabular-nums;white-space:pre-line;line-height:1.3}
.tfx-formats .preset span::first-line{color:var(--ink-2)}
.tfx-code{display:grid;gap:10px;min-width:0}
.tfx-actions{display:flex;flex-wrap:wrap;gap:8px}
.tfx-rm{color:var(--muted-2);flex-basis:100%;order:3}
@media (max-width:420px){.tfx-effects .presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){.tool[data-tool="text-animation"] .tool__stage{min-height:0}.tool[data-tool="text-animation"] .stage{min-height:260px}}
.tool[data-tool="panorama-viewer"] .stage__bar .btn{flex:none}
@media (max-width:640px){.tool[data-tool="panorama-viewer"] .stage__bar .grow{flex-basis:100%}.tool[data-tool="panorama-viewer"] .stage__bar .btn{flex:1 1 0;min-width:0;padding:0 10px}.tool[data-tool="panorama-viewer"] .stage__bar .btn span{overflow:hidden;text-overflow:ellipsis}}
.tool[data-tool="panorama-viewer"] .tool__panel .btn{white-space:normal;height:auto;min-height:44px;padding-block:8px;text-align:center;line-height:1.25}
.tool[data-tool="panorama-viewer"] .tool__panel .btn--sm{min-height:38px}
@media (max-width:480px){.tool[data-tool="panorama-viewer"] .stage__bar .btn{flex:1 1 100%}}

.site-footer{position:relative;z-index:1}

/* ========== Blog (Übersicht + Beitrag) ========== */
.blog-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:clamp(24px,3vw,32px)}
.post-card{grid-column:span 2}
.post-card.is-r3-half{grid-column:span 3}
.post-card.is-r3-wide{grid-column:span 6}
@media (min-width:901px){.post-card.is-r3-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:stretch}.post-card.is-r3-wide .post-card__img{aspect-ratio:auto;min-height:100%}.post-card.is-r3-wide .post-card__body{align-self:center;padding:24px 28px}}
.post-card{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-l);background:var(--panel-solid);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden;color:var(--ink);text-decoration:none;transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.post-card__img{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#ede9fe,#cffafe);overflow:hidden}
.post-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.post-card__body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.post-card__meta{font-size:12.5px;color:var(--muted)}
.post-card__title{font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.post-card__excerpt{font-size:14px;line-height:1.5;color:var(--muted)}
.post-card--lead{grid-column:span 6;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
.post-card--lead .post-card__img{aspect-ratio:auto;min-height:100%}
.post-card--lead .post-card__body{align-self:center}
.post-card--lead .post-card__body{padding:24px 28px}
.post-card--lead .post-card__title{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
@media (hover:hover) and (pointer:fine){.post-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}}
@media (prefers-reduced-motion:reduce){.post-card{transition:none}}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.post-card,.post-card.is-r3-half,.post-card.is-r3-wide{grid-column:span 1}.post-card--lead,.post-card.is-r2-wide{grid-column:span 2}}
@media (max-width:640px){.blog-grid{grid-template-columns:minmax(0,1fr)}.post-card--lead,.post-card.is-r2-wide{grid-column:span 1}.post-card--lead{display:flex}.post-card--lead .post-card__img{aspect-ratio:16/9}}
.blog-pager{position:relative;z-index:1;display:flex;gap:8px;justify-content:center;margin-top:32px}
.blog-pager .page-numbers{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-size:14px}
.blog-pager .current{background:var(--ink);color:#fff;border-color:var(--ink)}
.post-meta{margin-top:12px;font-size:14px;color:var(--muted)}
.post-hero{position:relative;z-index:1;margin-top:clamp(20px,3vw,28px)}
.post-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--sh-1);display:block}
.gal-link{width:44px;padding:0;flex:none}

/* countdown-gif */
.cdg-stage{display:grid;gap:16px;justify-items:center;width:100%}
.stage canvas.cdg-canvas,.stage img.cdg-canvas{height:auto;max-width:100%;max-height:none;background:transparent}
.stage .cdg-video{max-height:62vh;width:auto}
.cdg-first{display:flex;align-items:center;gap:12px;max-width:520px;margin:0;padding:10px 12px;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.stage .cdg-first__img{flex:none;width:120px;height:auto;max-height:none;border-radius:4px;box-shadow:none}
.cdg-first figcaption{display:grid;gap:2px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.cdg-first figcaption b{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.cdg-rm{color:var(--muted-2);flex-basis:100%;order:3}
.cdg-modes{display:grid;gap:8px}
.cdg-mode{position:relative;display:block;cursor:pointer}
.cdg-mode input{position:absolute;opacity:0;width:1px;height:1px}
.cdg-mode>span{display:grid;gap:2px;padding:10px 12px 10px 38px;border-radius:var(--r);border:1px solid var(--line-2);background:#fff;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.cdg-mode>span::before{content:"";position:absolute;left:13px;top:13px;width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);background:#fff;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.cdg-mode b{font-size:14px;font-weight:600;color:var(--ink)}
.cdg-mode small{font-size:12.5px;color:var(--muted)}
.cdg-mode input:checked+span{border-color:var(--violet);background:var(--violet-soft);box-shadow:0 0 0 1px var(--violet)}
.cdg-mode input:checked+span::before{border-color:var(--violet);box-shadow:inset 0 0 0 3px #fff;background:var(--violet)}
.cdg-mode input:focus-visible+span{box-shadow:var(--focus)}
@media (hover:hover) and (pointer:fine){.cdg-mode:hover>span{border-color:rgba(109,40,217,.45)}}
.cdg-note{font-size:13px}
.cdg-honest summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:6px}
.cdg-honest summary::-webkit-details-marker{display:none}
.cdg-honest summary::before{content:"+";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--violet-soft);color:var(--violet);font-weight:700;transition:transform var(--t-fast) var(--ease-out)}
.cdg-honest[open] summary::before{transform:rotate(45deg)}
.cdg-honest p{margin-top:8px;color:var(--muted);line-height:1.5}
.cdg-honest summary:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.cdg-ref{padding:8px 10px;border-radius:var(--r-s);background:var(--bg-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.cdg-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cdg-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cdg-row3 .color span{display:none}
.cdg-toggles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.cdg-labels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cdg-lab .field__label label{font-size:12px;font-weight:600}
.cdg-lab .input{padding:0 8px}
.cdg-styles>.field__label,.cdg-sizes>.field__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cdg-styles .presets{grid-template-columns:repeat(2,minmax(0,1fr))}
.cdg-styles .preset i{height:auto;aspect-ratio:3/1;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.cdg-styles .preset canvas{display:block;width:100%;height:100%}
.cdg-sizes .presets{grid-template-columns:repeat(4,minmax(0,1fr))}
.cdg-sizes .preset{justify-items:center;text-align:center;font-variant-numeric:tabular-nums}
.cdg-sizes .preset i{border-radius:3px;background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(6,182,212,.22));box-shadow:inset 0 0 0 1px rgba(109,40,217,.25)}
.cdg-est{padding:8px 10px;border-radius:var(--r-s);background:var(--bg-2);color:var(--ink-2);line-height:1.45}
.cdg-est:empty{display:none}
.cdg-est.is-warn,.cdg-warn{background:rgba(245,158,11,.1);color:#92400e}
.cdg-warn{padding:8px 10px;border-radius:var(--r-s)}
.cdg-alt{display:grid;gap:4px}
.cdg-alt b{color:var(--ink-2)}
.cdg-snippet{display:grid;gap:6px;min-width:0}
.cdg-snippet .code{white-space:pre-wrap;word-break:break-all;max-height:160px}
.cdg-files summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2)}
.cdg-files ul{margin:8px 0 0;padding-left:18px;font-family:var(--mono);font-size:12px;color:var(--muted);max-height:160px;overflow:auto}
@media (max-width:420px){.cdg-labels{grid-template-columns:repeat(2,minmax(0,1fr))}.cdg-sizes .presets{grid-template-columns:repeat(2,minmax(0,1fr))}.cdg-first{flex-direction:column;align-items:flex-start}}
@media (max-width:1024px){.tool[data-tool="countdown-gif"] .tool__stage{min-height:320px}.tool[data-tool="countdown-gif"] .stage{min-height:0}}

/* swf-recorder */
.swf-stage{background:#0f172a}
/* Solange ein SWF läuft, ruht der Bloom: Seine Blur-Animation kostet sonst so viel, dass Ruffle (liest pro Frame clientWidth) und die Aufnahme Bilder verlieren */
body:has(.swf-player) .bloom i{animation-play-state:paused}
.swf-recopts{border:0;margin:0;padding:0;min-width:0;display:grid;gap:14px}
.swf-recopts[disabled]{opacity:.6}
.swf-recrow{display:flex;flex-wrap:wrap;gap:8px}
.swf-recrow .btn{flex:1}
/* Stopp-Zustand in Tinte (One Action Colour Rule): Rot lebt nur im 9-px-Pulspunkt */
.swf-recbtn.is-recording{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(15,23,42,.18)}
@media (hover:hover) and (pointer:fine){.swf-recbtn.is-recording:hover{box-shadow:0 6px 16px -8px rgba(15,23,42,.45);filter:none}}
.swf-rec-ind{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.swf-rec-ind[hidden]{display:none}
.swf-rec-ind i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:swfRec 1.2s var(--ease-in-out,ease-in-out) infinite}
.swf-rec-ind.is-still i{animation:none}
.swf-rec-ind .swf-rec-time{color:var(--ink)}
@keyframes swfRec{50%{opacity:.25}}
.swf-result-media{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:8px;background:#0f172a}
.swf-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px;margin:0}
.swf-meta dt{color:var(--muted-2)}
.swf-meta dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.swf-batch-wrap{flex:1;background:#f8fafc;padding:16px;max-height:72vh;overflow:auto;min-height:380px}
.swf-batch-wrap.is-over{background:var(--violet-soft)}
.swf-batch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;align-content:start}
.swf-card{width:100%;height:100%;display:grid;gap:10px;align-content:start;text-align:left;padding:10px 10px 14px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer;transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){.swf-card:hover{border-color:rgba(109,40,217,.35);box-shadow:var(--sh-1);transform:translateY(-1px)}}
.swf-card:focus-visible{box-shadow:var(--focus);border-radius:var(--r-l)}
.swf-card.is-bad{opacity:.7}
.swf-card__thumb{display:grid;place-items:center;aspect-ratio:4/3;border-radius:10px;background:#0f172a;overflow:hidden}
.swf-card__thumb img{width:100%;height:100%;object-fit:contain;box-shadow:none;border-radius:0;max-height:none;background:transparent}
.swf-card__ph{font-size:12px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.75)}
.swf-card__name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.swf-card .swf-meta{font-size:12.5px;padding:0 4px}
.swf-add{position:relative;overflow:hidden;cursor:pointer}
.swf-add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.swf-add:focus-within{box-shadow:var(--focus)}
@media (max-width:1024px){.swf-batch-wrap{max-height:none}}
@media (max-width:480px){.swf-batch{grid-template-columns:minmax(0,1fr)}.swf-batch-wrap{padding:12px}}
@media (prefers-reduced-motion:reduce){.swf-rec-ind i{animation:none}.swf-card{transition:none}.swf-card:hover{transform:none}}

/* gif-converter */
.gc-src{color:var(--muted-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gc-fits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.gc-fit{position:relative;display:flex;align-items:center;min-height:38px;padding:0 12px;border-radius:var(--r-s);border:1px solid var(--line-2);background:#fff;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.gc-fit input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.gc-fit:has(input:checked){border-color:var(--violet);color:var(--ink);box-shadow:0 0 0 2px var(--violet-soft-2)}
.gc-fit:has(input:focus-visible){box-shadow:var(--focus)}
@media (hover:hover) and (pointer:fine){.gc-fit:hover{border-color:rgba(15,23,42,.24);color:var(--ink)}.gc-fit:has(input:checked):hover{border-color:var(--violet)}}
.gc-note{font-size:12.5px;line-height:1.5;color:var(--muted)}
.gc-note .tag{position:static;margin-right:4px;vertical-align:1px}
.gc-first{display:flex;gap:12px;align-items:flex-start}
.gc-first__img{flex:none;width:96px;height:auto;max-height:96px;object-fit:contain;border-radius:8px;border:1px solid var(--line);background:#fff}
.gc-first .small{color:var(--muted);font-size:12.5px;line-height:1.45}
.gc-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gc-actions .btn--primary{flex:1}
.gc-log{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gc-log li{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:8px;background:rgba(15,23,42,.035)}
.gc-log li b{font-weight:600;color:var(--ink-2);white-space:nowrap}
.gc-log li.is-ok{background:rgba(16,185,129,.1)}.gc-log li.is-ok b{color:#047857}
.gc-compare{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.gc-compare>div{display:grid;gap:1px}
.gc-compare b{font-size:17px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.gc-compare .small{font-size:12px;color:var(--muted)}
.gc-compare__arrow{color:var(--muted-2);font-size:18px}
.gc-compare__pct{margin-left:auto;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:var(--pill);background:rgba(15,23,42,.06);color:var(--muted)}
.gc-compare__pct.is-down{background:rgba(16,185,129,.12);color:#047857}
.gc-fitok{color:#047857;font-weight:600}
.gc-out{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;justify-content:center;width:100%}
.gc-fig{display:grid;gap:8px;justify-items:center;margin:0;min-width:0;max-width:100%}
.gc-fig figcaption{color:var(--muted-2);text-align:center;max-width:32ch}
.gc-fig--outlook{max-width:min(240px,100%)}
.gc-fig--outlook canvas{width:100%;height:auto;max-height:240px;object-fit:contain}
.gc-fig canvas,.gc-fig img,.gc-fig video{max-width:100%;max-height:60vh;border-radius:8px;box-shadow:0 10px 30px -14px rgba(15,23,42,.35);background:#fff}
@media (max-width:640px){.gc-fits{grid-template-columns:repeat(2,minmax(0,1fr))}.gc-out{gap:14px}.gc-fig--outlook{max-width:160px}}
@media (prefers-reduced-motion:reduce){.gc-fit{transition:none}}

/* greeting-gif */
.gg-tiles{display:grid;gap:8px}
.gg-occ{grid-template-columns:repeat(4,minmax(0,1fr))}
.gg-scenes{grid-template-columns:repeat(2,minmax(0,1fr))}
.gg-tile{min-width:0;padding:5px;gap:5px;align-content:start;text-align:center;grid-template-columns:minmax(0,1fr)}
.gg-tile i.gg-tile__img{width:100%;min-width:0;height:auto;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--bg-2);box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.gg-tile canvas,.gg-tile img{display:block;width:100%;height:100%;object-fit:cover}
.gg-tile span{min-width:0;font-size:11px;line-height:1.25;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.gg-tile:focus-visible{box-shadow:var(--focus)}
.gg-tile.is-on:focus-visible{box-shadow:0 0 0 2px var(--violet-soft-2),var(--focus)}
.gg-scene-group[hidden]{display:none}
.gg-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.gg-hint{color:var(--muted-2);margin-top:-4px}
.gg-est{font-variant-numeric:tabular-nums;color:var(--muted);min-height:1.45em}
.gg-est.is-warn{color:var(--ink-2);font-weight:600}
.gg-gifopts{display:grid;gap:10px}
.gg-gifopts[hidden]{display:none}
.gg-rm{color:var(--muted-2);flex-basis:100%;order:3}
.gg-result .row{align-items:center}
.stage .gg-canvas{width:auto;height:auto;max-width:100%;max-height:min(70vh,640px);object-fit:contain}
.stage .gg-canvas--square{width:min(100%,560px)}
.stage .gg-canvas--wide{width:min(100%,760px)}
.stage .gg-canvas--story{height:min(70vh,640px);max-height:none}
@media (max-width:1024px){.stage .gg-canvas--story{height:min(62vh,560px)}}
@media (max-width:420px){.gg-occ{grid-template-columns:repeat(3,minmax(0,1fr))}.gg-row{grid-template-columns:minmax(0,1fr)}}
@media (hover:hover) and (pointer:fine){.gg-tile:hover{border-color:rgba(109,40,217,.25)}}
@media (prefers-reduced-motion:reduce){.gg-tile{transition:none}}

/* brand-kit + a11y export */
.bk{display:block}
.bk-head{display:flex;align-items:center;gap:10px;min-height:28px;cursor:pointer;list-style:none;border-radius:6px}
.bk-head::-webkit-details-marker{display:none}
.bk-head .panel__title{flex:1;min-width:0}
.bk-head::after{content:"";width:8px;height:8px;margin:0 4px 0 2px;border-right:1.75px solid var(--muted-2);border-bottom:1.75px solid var(--muted-2);transform:translateY(-2px) rotate(45deg);transition:transform var(--t-fast) var(--ease-out)}
.bk[open]>.bk-head::after{transform:translateY(2px) rotate(-135deg)}
.bk-head:focus-visible{outline:none;box-shadow:var(--focus)}
@media (hover:hover) and (pointer:fine){.bk-head:hover .panel__title{color:var(--ink-2)}}
.bk-body{display:grid;gap:12px;margin-top:12px}
.bk-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:28px}
.bk-summary[hidden],.bk-actions .btn[hidden]{display:none}
.bk-sws{display:inline-flex}
.bk-sw{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-2)}
.bk-sw+.bk-sw{margin-left:-6px}
.bk-actions,.bk-logo-row,.ax-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bk-logo{display:block;height:34px;max-width:96px;object-fit:contain;border-radius:6px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.bk-logo--sm{height:24px;max-width:64px;margin-left:auto}
.bk-fields{display:grid;gap:12px;margin-top:12px}
.bk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bk-edit summary,.ax-more summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:6px;width:max-content;max-width:100%}
.bk-edit summary::-webkit-details-marker,.ax-more summary::-webkit-details-marker{display:none}
.bk-edit summary::before,.ax-more summary::before{content:"+";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--violet-soft);color:var(--violet);font-weight:700;transition:transform var(--t-fast) var(--ease-out)}
.bk-edit[open] summary::before,.ax-more[open] summary::before{transform:rotate(45deg)}
.bk-edit summary:focus-visible,.ax-more summary:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
.bk-note,.bk-privacy,.ax-hint{color:var(--muted-2)}
.bk-status:empty{display:none}
.bk-status,.bk-warn,.ax-flash{color:var(--ink-2)}
.bk-warn[hidden]{display:none}
.ax{display:grid;gap:10px;padding-top:12px;border-top:1px solid rgba(16,185,129,.25)}
.ax .textarea{min-height:72px}
.ax-more p{margin:8px 0}
.ax-code{white-space:pre-wrap;word-break:break-word}
.ax-flash{padding:10px 12px;border-radius:var(--r);background:var(--violet-soft)}
@media (max-width:420px){.bk-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.bk-edit summary::before,.ax-more summary::before,.bk-head::after{transition:none}}
.tool-presets{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.tool-presets__label{font-size:13px;font-weight:600;color:var(--muted);margin-right:2px}
@media (max-width:560px){.tool-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px}.tool-presets::-webkit-scrollbar{display:none}.tool-presets .pill,.tool-presets__label{flex:none}}