Subpagina-hero met "In het kort" Nieuw

<!-- Subpagina-hero met "In het kort" · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="sik">
  <div class="sik__main">
    <ol class="sik__crumb" aria-label="Kruimelpad"><li><a href="#">Home</a></li><li><a href="#">Arbeidsrecht</a></li><li aria-current="page">Ontslag op staande voet</li></ol>
    <p class="sik__title">Ontslag op staande voet gekregen?</p>
    <p class="sik__lead">Een ontslag op staande voet is de zwaarste maatregel die een werkgever kan nemen. U verliest direct uw loon en vaak uw recht op WW. Er gelden strenge regels, en de termijn om in actie te komen is kort.</p>
    <div class="sik__cta"><a href="#" class="sik__btn">Gratis eerste gesprek, 30 minuten</a><a href="tel:+31701234567" class="sik__tel">070 123 4567</a></div>
  </div>
  <div class="sik__box" role="complementary" aria-labelledby="sik-h">
    <p class="sik__boxh" id="sik-h">In het kort</p>
    <dl class="sik__facts">
      <div><dt>Termijn</dt><dd>U heeft <b>2 maanden</b> om de kantonrechter te vragen het ontslag te vernietigen.</dd></div>
      <div><dt>Bewijs</dt><dd>De werkgever moet de dringende reden aantonen, niet u.</dd></div>
      <div><dt>Direct</dt><dd>Het ontslag moet onverwijld zijn gegeven, met opgave van de reden.</dd></div>
      <div><dt>Gevolg</dt><dd>Is het onterecht, dan kunt u loon of een billijke vergoeding eisen.</dd></div>
    </dl>
    <p class="sik__check">Gecontroleerd door mr. L. Ploeg · 1 oktober 2026</p>
  </div>
</div>
</div>

/* Subpagina-hero met "In het kort" · NedDev · eigen werk. */
.sik{position:relative;width:100%;align-self:flex-start;flex:none;min-height:440px;background:#f8f5ef;color:#2a1418;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;display:grid;grid-template-columns:1.25fr 1fr;gap:56px;padding:40px 44px 48px;align-items:center}
.sik *{box-sizing:border-box}
.sik__crumb{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 30px;padding:0;font-size:13px;color:#7a5d62}
.sik__crumb li+li::before{content:'›';margin-right:6px}
.sik__crumb a{color:#5a1a24}
.sik__crumb [aria-current]{color:#2a1418}
.sik__title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,4.4vw,54px);line-height:1.04;letter-spacing:-.01em;margin:0 0 18px;color:#5a1a24}
.sik__lead{font-size:16px;line-height:1.65;color:#4a3236;margin:0 0 28px;max-width:54ch}
.sik__cta{display:flex;flex-wrap:wrap;gap:12px}
.sik__btn{background:#5a1a24;color:#fff;font-weight:600;font-size:15px;padding:13px 20px;border-radius:2px;text-decoration:none;transition:background .2s ease}
.sik__btn:hover{background:#7a2633}
.sik__tel{border:1px solid #5a1a24;color:#5a1a24;font-weight:600;font-size:15px;padding:12px 20px;border-radius:2px;text-decoration:none;font-variant-numeric:tabular-nums}
.sik__tel:hover{background:#efe6d8}
.sik__box{background:#fff;border:1px solid #e3d8c6;border-top:4px solid #b08d57;padding:26px 28px}
.sik__boxh{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a6a35;margin:0 0 14px}
.sik__facts{margin:0}
.sik__facts>div{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:12px 0;border-top:1px solid #efe7da}
.sik__facts>div:first-child{border-top:0;padding-top:0}
.sik__facts dt{font-weight:700;font-size:13px;color:#5a1a24;padding-top:2px}
.sik__facts dd{margin:0;font-size:15px;line-height:1.5}
.sik__check{margin:14px 0 0;font-size:12px;color:#7a5d62}
@media(max-width:820px){.sik{grid-template-columns:1fr;gap:28px;padding:24px 18px 32px}.sik__box{padding:20px}.sik__facts>div{grid-template-columns:64px 1fr}}

// Subpagina-hero met "In het kort" · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.sik');if(!w)return;
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));