/* ============================================================
   Tjep's SEO-agent — animatie
   Stylesheet-deel voor de OpenContent template.
   - Los bestand: geef het dezelfde naam als de template en zet het in
     dezelfde map (template.cshtml + template.css). Dan laadt DNN het als
     stylesheet en komt Razor er niet aan.
   - Plak deze CSS NIET in de cshtml: de at-regels (import, container,
     keyframes) laten Razor struikelen.
   - Laad je Spectral + Hanken Grotesk al site-breed? Haal de import weg.
   - Accentkleur wijzigen: --se-a en --se-tint op .se-stage.
   - Alles schaalt mee met de containerbreedte (--u = 1/1080 van de breedte).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,500;0,600;1,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* --- basis ------------------------------------------------- */
.se-anim{width:100%;container-type:inline-size}
.se-anim *{box-sizing:border-box}
.se-anim .se-stage{
  --u:0.0925926cqw;
  --se-a:#28A745;
  --se-tint:rgb(234,246,236);
  --se-ink:#15120E;
  --se-ink60:#6E6A64;
  --se-ink40:#8A857D;
  --se-faint:#B4AFA6;
  --se-border:#ECE9E3;
  --se-track:#F0EDE7;
  --se-warn:#B4571A;
  --se-warntint:rgb(253,244,236);
  --se-serif:'Spectral',Georgia,serif;
  position:relative;width:100%;background:transparent;overflow:hidden;
  padding:0;
  font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--se-ink)}
.se-anim .se-board{display:flex;flex-direction:column}

/* --- kop --------------------------------------------------- */
.se-anim .se-eyebrow{display:flex;align-items:center;gap:calc(10*var(--u));margin-bottom:calc(11*var(--u))}
.se-anim .se-dot{width:calc(9*var(--u));height:calc(9*var(--u));border-radius:calc(3*var(--u));background:var(--se-a)}
.se-anim .se-brand{font-size:calc(13*var(--u));font-weight:800;letter-spacing:.2em;color:var(--se-a);text-transform:uppercase;white-space:nowrap}
.se-anim .se-agent{font-size:calc(13*var(--u));font-weight:700;letter-spacing:.2em;color:var(--se-faint);text-transform:uppercase;white-space:nowrap}
.se-anim .se-title{font-family:var(--se-serif);font-size:calc(44*var(--u));font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0}
.se-anim .se-sub{font-size:calc(18.5*var(--u));line-height:1.45;color:var(--se-ink60);margin:calc(11*var(--u)) 0 0;max-width:calc(880*var(--u))}

/* --- sectiekop --------------------------------------------- */
.se-anim .se-kicker{display:flex;align-items:center;gap:calc(9*var(--u));margin-top:calc(24*var(--u))}
.se-anim .se-kicker-label{font-size:calc(13.5*var(--u));font-weight:800;letter-spacing:.14em;color:var(--se-a)}
.se-anim .se-rule{flex:1;height:1px;background:#E4E1DB}

/* --- url-invoer -------------------------------------------- */
.se-anim .se-src{display:flex;align-items:center;gap:calc(9*var(--u));margin-top:calc(14*var(--u));flex-wrap:wrap}
.se-anim .se-input{display:flex;align-items:center;gap:calc(9*var(--u));background:#fff;border:1px solid var(--se-border);border-radius:calc(10*var(--u));padding:calc(10*var(--u)) calc(14*var(--u));box-shadow:0 calc(5*var(--u)) calc(14*var(--u)) rgba(20,18,14,.05);min-width:calc(300*var(--u))}
.se-anim .se-input svg{width:calc(14*var(--u));height:calc(14*var(--u));flex-shrink:0;color:var(--se-a)}
.se-anim .se-url{font-size:calc(14.5*var(--u));font-weight:600}
.se-anim .se-url em{font-style:normal;color:var(--se-ink40);font-weight:500}
.se-anim .se-caret{width:1.5px;height:calc(16*var(--u));background:var(--se-a);margin-left:calc(-4*var(--u))}
.se-anim .se-btn{display:flex;align-items:center;gap:calc(7*var(--u));background:var(--se-a);color:#fff;border-radius:calc(10*var(--u));padding:calc(11*var(--u)) calc(16*var(--u));font-size:calc(13.5*var(--u));font-weight:700}
.se-anim .se-btn svg{width:calc(13*var(--u));height:calc(13*var(--u));flex-shrink:0}
.se-anim .se-hint{font-family:var(--se-serif);font-style:italic;font-size:calc(14.5*var(--u));color:var(--se-ink40);flex:1;min-width:calc(200*var(--u))}

/* --- zoekwoord-chips --------------------------------------- */
.se-anim .se-chips{display:flex;align-items:center;gap:calc(8*var(--u));margin-top:calc(12*var(--u));flex-wrap:wrap}
.se-anim .se-chip{display:flex;align-items:center;gap:calc(6*var(--u));border:1px solid #CDE7D6;background:var(--se-tint);color:#1B6E30;border-radius:999px;padding:calc(7*var(--u)) calc(13*var(--u));font-size:calc(13*var(--u));font-weight:600;white-space:nowrap}
.se-anim .se-chip svg{width:calc(11*var(--u));height:calc(11*var(--u));flex-shrink:0}
.se-anim .se-chip--ghost{border-style:dashed;border-color:#DCD8D1;background:transparent;color:var(--se-ink40);font-weight:700}

/* --- panelen ----------------------------------------------- */
.se-anim .se-panel{margin-top:calc(15*var(--u));background:#fff;border:1px solid var(--se-border);border-radius:calc(18*var(--u));padding:calc(20*var(--u)) calc(24*var(--u));box-shadow:0 calc(10*var(--u)) calc(26*var(--u)) rgba(20,18,14,.05)}
.se-anim .se-panel-head{display:flex;align-items:center;gap:calc(12*var(--u));flex-wrap:wrap}
.se-anim .se-panel-label{font-size:calc(12*var(--u));font-weight:800;letter-spacing:.12em;color:var(--se-ink40);text-transform:uppercase}
.se-anim .se-panel-note{margin-left:auto;font-size:calc(12.5*var(--u));font-weight:600;color:var(--se-a);white-space:nowrap}

/* --- zoekwoordtabel ---------------------------------------- */
.se-anim .se-tbl{margin-top:calc(13*var(--u))}
.se-anim .se-tr{display:grid;grid-template-columns:1fr calc(180*var(--u));align-items:center;gap:calc(10*var(--u));padding:calc(10*var(--u)) calc(11*var(--u));border-radius:calc(9*var(--u))}
.se-anim .se-th{font-size:calc(11.5*var(--u));font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--se-faint);padding-bottom:calc(4*var(--u))}
.se-anim .se-tr+.se-tr{border-top:1px solid var(--se-border);border-top-left-radius:0;border-top-right-radius:0}
.se-anim .se-kw{font-size:calc(14*var(--u));font-weight:600}
.se-anim .se-num{font-size:calc(13.5*var(--u));font-weight:600;color:var(--se-ink60)}
.se-anim .se-pos{display:flex;align-items:center;gap:calc(7*var(--u))}
.se-anim .se-posnum{font-size:calc(13.5*var(--u));font-weight:800}
.se-anim .se-trend{display:flex;align-items:center;gap:calc(3*var(--u));font-size:calc(12*var(--u));font-weight:700;color:var(--se-a)}
.se-anim .se-trend svg{width:calc(10*var(--u));height:calc(10*var(--u));flex-shrink:0}
.se-anim .se-trend--down{color:var(--se-ink40)}
.se-anim .se-pages{display:flex;align-items:center;gap:calc(6*var(--u));font-size:calc(12.5*var(--u));font-weight:600;color:var(--se-ink60)}
.se-anim .se-pages svg{width:calc(12*var(--u));height:calc(12*var(--u));flex-shrink:0;color:var(--se-faint)}
.se-anim .se-tr--flag{background:var(--se-warntint)}
.se-anim .se-tr--flag .se-pages{color:var(--se-warn);font-weight:800}
.se-anim .se-tr--flag .se-pages svg{color:var(--se-warn)}
.se-anim .se-warnpill{display:inline-flex;align-items:center;gap:calc(5*var(--u));margin-left:calc(8*var(--u));border:1px solid rgba(180,87,26,.3);color:var(--se-warn);border-radius:999px;padding:calc(3*var(--u)) calc(9*var(--u));font-size:calc(11*var(--u));font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}

.se-anim .se-flag{display:flex;align-items:center;gap:calc(7*var(--u));margin-top:calc(14*var(--u));padding-top:calc(13*var(--u));border-top:1px solid var(--se-border);font-size:calc(14*var(--u));color:var(--se-ink60)}
.se-anim .se-flag svg{width:calc(14*var(--u));height:calc(14*var(--u));flex-shrink:0;color:var(--se-a)}
.se-anim .se-flag strong{color:var(--se-ink);font-weight:700}

/* --- tussenzin --------------------------------------------- */
.se-anim .se-conv{display:flex;align-items:center;justify-content:center;gap:calc(8*var(--u));padding:calc(7*var(--u)) 0}
.se-anim .se-conv svg{width:calc(13*var(--u));height:calc(13*var(--u));flex-shrink:0;color:var(--se-a)}
.se-anim .se-conv-label{font-family:var(--se-serif);font-style:italic;font-size:calc(15*var(--u));color:var(--se-ink40)}

/* --- werkplan ---------------------------------------------- */
.se-anim .se-tasks{display:flex;flex-direction:column;margin-top:calc(13*var(--u))}
.se-anim .se-task{display:grid;grid-template-columns:calc(24*var(--u)) 1fr calc(104*var(--u)) calc(214*var(--u));align-items:center;gap:calc(12*var(--u));padding:calc(12*var(--u)) 0}
.se-anim .se-task+.se-task{border-top:1px solid var(--se-border)}
.se-anim .se-tbox{width:calc(20*var(--u));height:calc(20*var(--u));border-radius:calc(6*var(--u));border:1.5px solid #D6D2CA;display:flex;align-items:center;justify-content:center;color:transparent}
.se-anim .se-tbox svg{width:calc(11*var(--u));height:calc(11*var(--u));flex-shrink:0}
.se-anim .se-tbox--on{background:var(--se-a);border-color:var(--se-a);color:#fff}
.se-anim .se-ttext{font-size:calc(14.5*var(--u));font-weight:600;line-height:1.3}
.se-anim .se-tpath{font-size:calc(12.5*var(--u));font-weight:600;color:var(--se-ink40);margin-top:calc(2*var(--u))}
.se-anim .se-prio{justify-self:start;white-space:nowrap;border-radius:999px;padding:calc(4*var(--u)) calc(11*var(--u));font-size:calc(11.5*var(--u));font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.se-anim .se-prio--hi{background:var(--se-a);color:#fff}
.se-anim .se-prio--mid{background:var(--se-tint);color:#1B6E30}
.se-anim .se-prio--lo{background:var(--se-track);color:var(--se-ink40)}
.se-anim .se-owner{display:flex;align-items:center;gap:calc(9*var(--u));border:1px solid var(--se-border);border-radius:calc(10*var(--u));padding:calc(7*var(--u)) calc(11*var(--u))}
.se-anim .se-av{width:calc(26*var(--u));height:calc(26*var(--u));border-radius:50%;background:var(--se-a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(11*var(--u));font-weight:800;letter-spacing:.02em;flex-shrink:0}
.se-anim .se-otext{display:flex;flex-direction:column;gap:calc(1*var(--u));min-width:0}
.se-anim .se-oname{font-size:calc(13*var(--u));font-weight:700;line-height:1.2;white-space:nowrap}
.se-anim .se-orole{font-size:calc(11.5*var(--u));font-weight:600;color:var(--se-ink40);line-height:1.2;white-space:nowrap}
.se-anim .se-ocaret{margin-left:auto;width:calc(11*var(--u));height:calc(11*var(--u));flex-shrink:0;color:var(--se-faint)}
.se-anim .se-owner--open{border-style:dashed;border-color:#CDE7D6;background:var(--se-tint)}
.se-anim .se-owner--open .se-av{background:transparent;border:1.5px dashed #9CCFAC;color:var(--se-a)}
.se-anim .se-owner--open .se-av svg{width:calc(12*var(--u));height:calc(12*var(--u))}
.se-anim .se-owner--open .se-oname{color:var(--se-a)}
.se-anim .se-owner--open .se-ocaret{color:var(--se-a)}

/* --- kleine kaarten ---------------------------------------- */
.se-anim .se-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(15*var(--u));margin-top:calc(14*var(--u))}
.se-anim .se-card{background:#fff;border:1px solid var(--se-border);border-radius:calc(14*var(--u));padding:calc(15*var(--u));box-shadow:0 calc(8*var(--u)) calc(20*var(--u)) rgba(20,18,14,.05)}
.se-anim .se-cicon{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:calc(10*var(--u));background:var(--se-a);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:calc(9*var(--u))}
.se-anim .se-cicon svg{width:calc(18*var(--u));height:calc(18*var(--u));flex-shrink:0}
.se-anim .se-ctitle{font-family:var(--se-serif);font-size:calc(16.5*var(--u));font-weight:600;line-height:1.15}
.se-anim .se-cdesc{font-size:calc(12.5*var(--u));line-height:1.4;color:var(--se-ink40);margin-top:calc(3*var(--u))}

/* --- animatie (12s, speelt één keer af bij laden) ----------- */
.se-anim .se-board,
.se-anim .se-eyebrow,.se-anim .se-title,.se-anim .se-sub,
.se-anim .se-kicker,.se-anim .se-input,.se-anim .se-btn,.se-anim .se-hint,
.se-anim .se-chip,.se-anim .se-panel,.se-anim .se-tr,.se-anim .se-flag,
.se-anim .se-conv,.se-anim .se-task,.se-anim .se-owner,.se-anim .se-card{
  animation-duration:12s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.215,.61,.355,1)}
.se-anim .se-chip,.se-anim .se-owner{animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.se-anim .se-caret{animation:se-blink 1s steps(1,end) infinite}

.se-anim .se-board{animation-name:sea-board}
.se-anim .se-eyebrow{animation-name:sea-eyebrow}
.se-anim .se-title{animation-name:sea-title}
.se-anim .se-sub{animation-name:sea-sub}
.se-anim .se-kicker--one{animation-name:sea-k1}
.se-anim .se-kicker--two{animation-name:sea-k2}
.se-anim .se-kicker--three{animation-name:sea-k3}
.se-anim .se-input{animation-name:sea-input}
.se-anim .se-btn{animation-name:sea-btn}
.se-anim .se-hint{animation-name:sea-hint}
.se-anim .se-chip--1{animation-name:sea-c0}
.se-anim .se-chip--2{animation-name:sea-c1}
.se-anim .se-chip--3{animation-name:sea-c2}
.se-anim .se-chip--4{animation-name:sea-c3}
.se-anim .se-chip--5{animation-name:sea-c4}
.se-anim .se-panel--kw{animation-name:sea-panel}
.se-anim .se-panel--plan{animation-name:sea-plan}
.se-anim .se-tr--0{animation-name:sea-r0}
.se-anim .se-tr--1{animation-name:sea-r1}
.se-anim .se-tr--2{animation-name:sea-r2}
.se-anim .se-tr--3{animation-name:sea-r3}
.se-anim .se-tr--4{animation-name:sea-r4}
.se-anim .se-flag{animation-name:sea-flag}
.se-anim .se-conv{animation-name:sea-conv}
.se-anim .se-task--0{animation-name:sea-t0}
.se-anim .se-task--1{animation-name:sea-t1}
.se-anim .se-task--2{animation-name:sea-t2}
.se-anim .se-task--3{animation-name:sea-t3}
.se-anim .se-owner--0{animation-name:sea-w0}
.se-anim .se-owner--1{animation-name:sea-w1}
.se-anim .se-owner--2{animation-name:sea-w2}
.se-anim .se-owner--3{animation-name:sea-w3}
.se-anim .se-card--1{animation-name:sea-p0}
.se-anim .se-card--2{animation-name:sea-p1}
.se-anim .se-card--3{animation-name:sea-p2}

@keyframes se-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes sea-board{0%{opacity:0}2.917%,100%{opacity:1}}
@keyframes sea-eyebrow{0%,1.667%{opacity:0;transform:translateY(calc(10*var(--u)))}5.833%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-title{0%,4.167%{opacity:0;transform:translateY(calc(16*var(--u)))}9.167%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-sub{0%,9.167%{opacity:0;transform:translateY(calc(12*var(--u)))}14.167%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-k1{0%,15%{opacity:0;transform:translateY(calc(8*var(--u)))}19.167%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-input{0%,18.333%{opacity:0;transform:translateY(calc(14*var(--u)))}21.667%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-btn{0%,20.417%{opacity:0;transform:translateY(calc(12*var(--u)))}23.333%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-hint{0%,21.667%{opacity:0}24.583%,100%{opacity:1}}
@keyframes sea-c0{0%,23.333%{opacity:0;transform:scale(.7)}26.25%,100%{opacity:1;transform:scale(1)}}
@keyframes sea-c1{0%,24.583%{opacity:0;transform:scale(.7)}27.5%,100%{opacity:1;transform:scale(1)}}
@keyframes sea-c2{0%,25.833%{opacity:0;transform:scale(.7)}28.75%,100%{opacity:1;transform:scale(1)}}
@keyframes sea-c3{0%,27.083%{opacity:0;transform:scale(.7)}30%,100%{opacity:1;transform:scale(1)}}
@keyframes sea-c4{0%,28.333%{opacity:0;transform:scale(.7)}31.25%,100%{opacity:1;transform:scale(1)}}
@keyframes sea-panel{0%,30.833%{opacity:0;transform:translateY(calc(18*var(--u)))}35%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-r0{0%,34.167%{opacity:0}36.25%,100%{opacity:1}}
@keyframes sea-r1{0%,35.417%{opacity:0;transform:translateY(calc(8*var(--u)))}38.333%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-r2{0%,36.667%{opacity:0;transform:translateY(calc(8*var(--u)))}39.583%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-r3{0%,37.917%{opacity:0;transform:translateY(calc(8*var(--u)))}40.833%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-r4{0%,39.167%{opacity:0;transform:translateY(calc(8*var(--u)))}42.083%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-flag{0%,42.5%{opacity:0;transform:translateY(calc(8*var(--u)))}45.833%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-conv{0%,46.667%{opacity:0;transform:translateY(calc(10*var(--u)))}50%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-k2{0%,49.167%{opacity:0;transform:translateY(calc(8*var(--u)))}52.5%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-plan{0%,52.083%{opacity:0;transform:translateY(calc(18*var(--u)))}56.25%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-t0{0%,55.417%{opacity:0;transform:translateY(calc(10*var(--u)))}58.333%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-t1{0%,56.667%{opacity:0;transform:translateY(calc(10*var(--u)))}59.583%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-t2{0%,57.917%{opacity:0;transform:translateY(calc(10*var(--u)))}60.833%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-t3{0%,59.167%{opacity:0;transform:translateY(calc(10*var(--u)))}62.083%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-w0{0%,60%{opacity:0;transform:scale(.8)}62.917%,100%{opacity:1;transform:scale(1)}}
@keyframes sea-w1{0%,61.667%{opacity:0;transform:scale(.8)}64.583%,100%{opacity:1;transform:scale(1)}}
@keyframes sea-w2{0%,63.333%{opacity:0;transform:scale(.8)}66.25%,100%{opacity:1;transform:scale(1)}}
@keyframes sea-w3{0%,65.833%{opacity:0;transform:scale(.8)}68.75%,100%{opacity:1;transform:scale(1)}}
@keyframes sea-k3{0%,71.667%{opacity:0;transform:translateY(calc(8*var(--u)))}75.833%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-p0{0%,75%{opacity:0;transform:translateY(calc(18*var(--u)))}79.167%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-p1{0%,76.5%{opacity:0;transform:translateY(calc(18*var(--u)))}80.667%,100%{opacity:1;transform:translateY(0)}}
@keyframes sea-p2{0%,78%{opacity:0;transform:translateY(calc(18*var(--u)))}82.167%,100%{opacity:1;transform:translateY(0)}}

/* --- smal (mobiel / smalle kolom) --------------------------- */
@container (max-width: 620px){
  .se-anim .se-stage{padding:0}
  .se-anim .se-title{font-size:26px;line-height:1.2}
  .se-anim .se-sub{font-size:15px;max-width:none}
  .se-anim .se-brand,.se-anim .se-agent,.se-anim .se-kicker-label{font-size:11px}
  .se-anim .se-dot{width:8px;height:8px;border-radius:3px}
  .se-anim .se-src{gap:8px}
  .se-anim .se-input{min-width:0;flex:1 1 100%;padding:9px 12px;border-radius:9px;gap:8px}
  .se-anim .se-input svg{width:13px;height:13px}
  .se-anim .se-url{font-size:13px}
  .se-anim .se-caret{height:14px}
  .se-anim .se-btn{padding:10px 14px;font-size:12.5px;border-radius:9px}
  .se-anim .se-btn svg{width:12px;height:12px}
  .se-anim .se-hint{font-size:13px}
  .se-anim .se-chip{font-size:12px;padding:6px 11px}
  .se-anim .se-chip svg{width:10px;height:10px}
  .se-anim .se-panel{padding:14px;border-radius:12px;margin-top:12px}
  .se-anim .se-panel-label{font-size:11px}
  .se-anim .se-panel-note{margin-left:0;font-size:11.5px}
  .se-anim .se-tr{grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0}
  .se-anim .se-tr--flag{padding:10px 8px}
  .se-anim .se-th{display:none}
  .se-anim .se-kw{font-size:13.5px;grid-column:1}
  .se-anim .se-pages{grid-column:2;justify-content:flex-end;font-size:12px}
  .se-anim .se-warnpill{margin-left:0;font-size:10px}
  .se-anim .se-flag{font-size:12.5px;gap:6px}
  .se-anim .se-flag svg{width:13px;height:13px}
  .se-anim .se-conv-label{font-size:13px}
  .se-anim .se-conv svg{width:12px;height:12px}
  .se-anim .se-task{grid-template-columns:20px 1fr;gap:6px 10px;padding:12px 0}
  .se-anim .se-tbox{width:18px;height:18px;border-radius:5px}
  .se-anim .se-tbox svg{width:10px;height:10px}
  .se-anim .se-ttext{font-size:13.5px}
  .se-anim .se-tpath{font-size:12px}
  .se-anim .se-prio{grid-column:2;font-size:10.5px;padding:3px 9px}
  .se-anim .se-owner{grid-column:2;padding:6px 10px;border-radius:9px}
  .se-anim .se-av{width:24px;height:24px;font-size:10.5px}
  .se-anim .se-oname{font-size:12.5px}
  .se-anim .se-hint{min-width:0;flex:1 1 100%}
  .se-anim .se-orole{font-size:11px}
  .se-anim .se-ocaret{width:10px;height:10px}
  .se-anim .se-grid{grid-template-columns:1fr;gap:10px}
  .se-anim .se-card{padding:14px;border-radius:12px}
  .se-anim .se-cicon{width:32px;height:32px;border-radius:9px;margin-bottom:8px}
  .se-anim .se-cicon svg{width:17px;height:17px}
  .se-anim .se-ctitle{font-size:16px}
  .se-anim .se-cdesc{font-size:13px}
}

/* --- bewegingsvoorkeur -------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .se-anim *{animation:none !important;opacity:1 !important;transform:none !important}
}