<!doctype html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>svensklag.com — Olaglig kulturmärkning · 1 564 byggnader · JO 5716-2010</title>

<meta name="description" content="1 564 fastigheter klassade i Kalmar utan ägarens hörande. Konsult: Byggkult AB / Katja Meissner. PBL 8:13-träff: 687 hus. Värdeminskning 0–1,3 mdr SEK. JO-prejudikat från Stockholm 2012.">
<meta name="keywords" content="svensklag, kulturmärkning, byggkult, katja meissner, kalmar kommun, gamla stan kalmar, akacian 17, JO 5716-2010, justitieombudsmannen, PBL 8 kap 13, förvanskningsförbud, kulturmiljöprogram, bygglovsrestriktion, SOU 2004:94, byggnadsminne, kulturmiljölagen, civic tech sverige, transparens, granska sverige">
<meta name="author" content="Linespotting Incubator">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">
<meta name="googlebot" content="index, follow">
<link rel="canonical" href="https://svensklag.com/">

<link rel="icon" type="image/svg+xml" href="/favicon.svg?v=202604280923">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=202604280923">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png?v=202604280923">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=202604280923">
<link rel="manifest" href="/site.webmanifest?v=202604280923">
<meta name="theme-color" content="#f3efe7">

<meta property="og:type" content="website">
<meta property="og:site_name" content="svensklag.com">
<meta property="og:title" content="JO sa nej 2012. Kalmar gjorde det ändå.">
<meta property="og:description" content="1 564 byggnader klassade utan ägarens hörande i Kalmar. Samma mönster JO kritiserade 2012. Sökbar databas + fallstudie + öppen data.">
<meta property="og:url" content="https://svensklag.com/">
<meta property="og:image" content="https://svensklag.com/og.png">
<meta property="og:image:secure_url" content="https://svensklag.com/og.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="JO sa nej 2012. Kalmar gjorde det ändå.">
<meta property="og:locale" content="sv_SE">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="JO sa nej 2012. Kalmar gjorde det ändå.">
<meta name="twitter:description" content="1 564 byggnader klassade utan ägarens hörande i Kalmar. Samma mönster JO kritiserade 2012. Sökbar databas + fallstudie + öppen data.">
<meta name="twitter:image" content="https://svensklag.com/og.png">
<meta name="twitter:image:alt" content="JO sa nej 2012. Kalmar gjorde det ändå.">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "svensklag.com",
  "url": "https://svensklag.com/",
  "description": "Brottsanalys för offentlig sektor — kulturmärkning, JO-prejudikat, korsreferens",
  "inLanguage": "sv-SE",
  "publisher": { "@type": "Organization", "name": "Linespotting Incubator" },
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://svensklag.com/karta.html?q={search_term_string}",
    "query-input": "required name=search_term_string"
  },
  "keywords": "svensklag, kulturmärkning, byggkult, katja meissner, kalmar kommun, gamla stan kalmar, akacian 17, JO 5716-2010, justitieombudsmannen, PBL 8 kap 13, förvanskningsförbud, kulturmiljöprogram, bygglovsrestriktion, SOU 2004:94, byggnadsminne, kulturmiljölagen, civic tech sverige, transparens, granska sverige"
}
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#f3efe7;
    --paper-2:#ebe5d9;
    --ink:#0d0d0c;
    --ink-2:#1a1a18;
    --muted:#6b6760;
    --rule:#1a1a1822;
    --signal:#d6322a;
    --signal-2:#b8231c;
    --ok:#2f6b3a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;overflow:hidden;height:100%}
  body{height:100vh;width:100vw;position:relative}

  /* paper grain */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,.025) 0, transparent 60%),
      radial-gradient(circle at 80% 70%, rgba(0,0,0,.02) 0, transparent 55%);
    mix-blend-mode:multiply;
  }
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity:.6;
  }

  /* TOP BAR */
  .topbar{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:18px 28px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    border-bottom:1px solid var(--rule);background:linear-gradient(180deg, rgba(243,239,231,.92), rgba(243,239,231,.6));
    backdrop-filter:blur(6px);
  }
  .brand{display:flex;align-items:center;gap:10px;font-weight:500}
  .brand .mark{
    width:14px;height:14px;border-radius:50%;background:var(--signal);
    box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--signal);
    position:relative;
  }
  .brand .mark::after{
    content:"";position:absolute;inset:-8px;border-radius:50%;
    border:1px solid var(--signal);opacity:.4;animation:pulse 2.4s ease-out infinite;
  }
  @keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}

  .nav-center{display:flex;gap:28px;color:var(--muted)}
  .nav-center a{color:inherit;text-decoration:none;position:relative}
  .nav-center a.active{color:var(--ink)}
  .nav-center a.active::before{content:"●";color:var(--signal);margin-right:6px;font-size:8px;vertical-align:middle}

  .topbar-right{display:flex;justify-content:flex-end;gap:18px;align-items:center;color:var(--muted)}
  .topbar-right .live{color:var(--signal);display:flex;align-items:center;gap:6px}
  .topbar-right .live .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:blink 1.4s infinite}
  @keyframes blink{50%{opacity:.2}}

  /* STAGE */
  .stage{
    position:absolute;inset:54px 0 80px 0;
    overflow:hidden;
  }
  .track{
    display:flex;height:100%;width:500%;
    transition:transform .9s cubic-bezier(.77,0,.18,1);
    will-change:transform;
  }
  .slide{
    flex:0 0 20%;height:100%;display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:0;padding:24px 28px;align-items:stretch;
  }

  /* IMAGE PANEL */
  .imgwrap{
    position:relative;border:1px solid var(--rule);background:var(--paper-2);
    overflow:hidden;border-radius:2px;
  }
  .imgwrap .label{
    position:absolute;top:14px;left:14px;z-index:3;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);padding:6px 10px;border-radius:1px;
  }
  .imgwrap .meta{
    position:absolute;bottom:14px;right:14px;z-index:3;
    font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--paper);
    background:rgba(13,13,12,.8);padding:6px 10px;backdrop-filter:blur(4px);
  }
  .imgwrap .corner{
    position:absolute;width:18px;height:18px;border:1px solid var(--paper);z-index:3;
  }
  .imgwrap .corner.tl{top:10px;left:10px;border-right:none;border-bottom:none}
  .imgwrap .corner.tr{top:10px;right:10px;border-left:none;border-bottom:none}
  .imgwrap .corner.bl{bottom:10px;left:10px;border-right:none;border-top:none}
  .imgwrap .corner.br{bottom:10px;right:10px;border-left:none;border-top:none}

  .placeholder{
    position:absolute;inset:0;
    background:
      repeating-linear-gradient(135deg, rgba(13,13,12,.04) 0 2px, transparent 2px 14px),
      linear-gradient(180deg, var(--paper-2), #d8d2c4);
    display:grid;place-items:center;
  }
  .placeholder .ph-inner{
    text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
    letter-spacing:.1em;text-transform:uppercase;line-height:1.8;
  }
  .placeholder .ph-inner b{display:block;font-size:13px;color:var(--ink);margin-bottom:6px;font-weight:500}

  /* slide-specific imagery via CSS */
  .img-1 .placeholder{background:
    repeating-linear-gradient(0deg, rgba(13,13,12,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(13,13,12,.04) 0 1px, transparent 1px 24px),
    radial-gradient(circle at 30% 40%, #2a2925, #0d0d0c 75%);}
  .img-1 .placeholder .ph-inner{color:#e8e3d8}
  .img-1 .placeholder .ph-inner b{color:#fff}

  .img-2 .placeholder{background:
    repeating-linear-gradient(135deg, rgba(214,50,42,.12) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #1a1a18, #0d0d0c);}
  .img-2 .placeholder .ph-inner{color:#bdb6a7}
  .img-2 .placeholder .ph-inner b{color:#f3efe7}

  .img-3 .placeholder{background:
    repeating-linear-gradient(45deg, rgba(13,13,12,.08) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, #c9c2b1, #8e8676);}

  .img-4 .placeholder{background:
    radial-gradient(circle at 70% 30%, rgba(214,50,42,.45), transparent 50%),
    linear-gradient(180deg, #2a2925, #0d0d0c);}
  .img-4 .placeholder .ph-inner{color:#e8e3d8}
  .img-4 .placeholder .ph-inner b{color:#fff}

  .hero-loop{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:1;
    filter:grayscale(.3) contrast(1.06) brightness(.82);
  }
  .img-5 .placeholder{background:
    repeating-linear-gradient(0deg, rgba(13,13,12,.05) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, var(--paper), var(--paper-2));}

  /* SVG diagram overlays */
  .diagram{position:absolute;inset:0;width:100%;height:100%;z-index:2}

  /* TEXT PANEL */
  .text{
    padding:24px 36px 24px 56px;display:flex;flex-direction:column;justify-content:space-between;
    position:relative;
  }
  .text::before{
    content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;background:var(--rule);
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  }
  .eyebrow .num{color:var(--ink);font-weight:500}
  .eyebrow .div{color:var(--rule)}
  .eyebrow .sect{color:var(--signal)}

  h1.headline{
    font-family:'Instrument Serif',serif;font-weight:400;
    font-size:clamp(48px, 5.4vw, 92px);line-height:.96;letter-spacing:-.02em;
    margin-top:18px;text-wrap:balance;
  }
  h1.headline em{font-style:italic;color:var(--signal)}
  h1.headline .strike{position:relative;display:inline-block}
  h1.headline .strike::after{
    content:"";position:absolute;left:-2%;right:-2%;top:55%;height:3px;background:var(--signal);
    transform:rotate(-1.2deg);
  }

  .lede{
    font-family:'Instrument Serif',serif;font-size:22px;line-height:1.4;color:var(--ink-2);
    margin-top:22px;max-width:54ch;font-style:italic;
  }
  .body{
    font-size:14.5px;line-height:1.65;color:var(--ink-2);max-width:52ch;margin-top:20px;
  }

  .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .tag{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;
    padding:6px 10px;border:1px solid var(--rule);border-radius:1px;color:var(--ink-2);
    background:rgba(255,255,255,.3);transition:all .2s;
  }
  .tag:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .tag.alert{border-color:var(--signal);color:var(--signal)}
  .tag.alert::before{content:"▲ ";font-size:9px}

  .footer-row{
    display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:auto;padding-top:24px;
  }
  .stat{display:flex;flex-direction:column;gap:4px}
  .stat .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .stat .v{font-family:'Instrument Serif',serif;font-size:42px;line-height:1;color:var(--ink)}
  .stat .v small{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-left:4px}

  .cta{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--ink);color:var(--paper);
    padding:14px 22px;border-radius:1px;border:none;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    transition:all .2s;
  }
  .cta:hover{background:var(--signal)}
  .cta .arrow{transition:transform .2s}
  .cta:hover .arrow{transform:translateX(4px)}

  /* slide-specific layouts */
  .slide-2 .text, .slide-4 .text{order:-1;padding:24px 56px 24px 36px}
  .slide-2 .text::before, .slide-4 .text::before{left:auto;right:24px}

  /* TICKER */
  .ticker{
    position:absolute;left:0;right:0;bottom:32px;height:32px;
    background:var(--ink);color:var(--paper);overflow:hidden;
    display:flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;
    letter-spacing:.08em;text-transform:uppercase;z-index:5;
    border-top:1px solid #00000022;
  }
  .ticker .label{
    background:var(--signal);padding:0 14px;height:100%;display:flex;align-items:center;
    font-weight:500;flex:0 0 auto;
  }
  .ticker .scroll{
    flex:1;overflow:hidden;white-space:nowrap;position:relative;
  }
  .ticker .scroll-inner{
    display:inline-block;padding-left:100%;animation:tk 48s linear infinite;
  }
  .ticker .scroll-inner span{margin-right:48px;color:var(--paper)}
  .ticker .scroll-inner .red{color:var(--signal)}
  .ticker .scroll-inner .div{color:#555;margin-right:48px}
  @keyframes tk{to{transform:translateX(-50%)}}

  /* BOTTOM CONTROL BAR */
  .controls{
    position:fixed;left:0;right:0;bottom:0;height:32px;z-index:60;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
    padding:0 28px;background:var(--paper);border-top:1px solid var(--rule);
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  }
  .counter{display:flex;align-items:center;gap:10px;color:var(--muted)}
  .counter .now{color:var(--ink);font-size:14px;font-family:'Instrument Serif',serif;font-style:italic}
  .progress-bar{height:1px;background:var(--rule);position:relative}
  .progress-bar .fill{position:absolute;left:0;top:0;height:100%;background:var(--ink);transition:width .9s cubic-bezier(.77,0,.18,1)}
  .ctrl-buttons{display:flex;gap:6px}
  .ctrl-buttons button{
    width:28px;height:22px;border:1px solid var(--rule);background:transparent;cursor:pointer;
    display:grid;place-items:center;color:var(--ink);transition:all .15s;
  }
  .ctrl-buttons button:hover{background:var(--ink);color:var(--paper)}

  /* slide dots vertical */
  .dots{
    position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:55;
    display:flex;flex-direction:column;gap:14px;
  }
  .dots button{
    width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);background:transparent;cursor:pointer;
    transition:all .25s;padding:0;
  }
  .dots button.active{background:var(--ink);transform:scale(1.4)}
  .dots button:hover{background:var(--signal);border-color:var(--signal)}

  /* slide entrance animation */
  .slide.is-active .imgwrap{animation:imgIn .9s cubic-bezier(.2,.8,.2,1) both}
  .slide.is-active .eyebrow{animation:up .8s .15s cubic-bezier(.2,.8,.2,1) both}
  .slide.is-active h1.headline{animation:up .9s .25s cubic-bezier(.2,.8,.2,1) both}
  .slide.is-active .lede{animation:up .9s .35s cubic-bezier(.2,.8,.2,1) both}
  .slide.is-active .body{animation:up .9s .45s cubic-bezier(.2,.8,.2,1) both}
  .slide.is-active .tags{animation:up .9s .55s cubic-bezier(.2,.8,.2,1) both}
  .slide.is-active .footer-row{animation:up .9s .65s cubic-bezier(.2,.8,.2,1) both}
  @keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes imgIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

  /* X-cross old houses slider — slide 1 hero */
  .img-1 .placeholder{display:none}
  .x-slider{
    position:absolute;inset:0;overflow:hidden;z-index:1;
    background:radial-gradient(ellipse at 50% 50%, #2a2925 0%, #131311 60%, #0a0a09 100%);
  }
  .x-strip{
    position:absolute;top:50%;left:50%;
    width:200%;height:26%;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
  }
  .x-strip.s1{transform:translate(-50%,-50%) rotate(-32deg)}
  .x-strip.s2{transform:translate(-50%,-50%) rotate(32deg)}
  .x-track{
    display:flex;height:100%;width:max-content;gap:6px;
    animation:xslide 46s linear infinite;
  }
  .x-strip.s2 .x-track{animation-direction:reverse;animation-duration:52s}
  .x-track img,.x-track video{
    height:100%;width:auto;aspect-ratio:4/3;
    object-fit:cover;flex-shrink:0;
    filter:grayscale(.55) contrast(1.08) brightness(.88);
    background:#1a1a18;
  }
  @keyframes xslide{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }
  .x-center{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:54px;height:54px;border-radius:50%;
    border:1px solid rgba(243,239,231,.55);
    display:grid;place-items:center;
    font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;
    color:rgba(243,239,231,.92);background:rgba(13,13,12,.4);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    z-index:4;pointer-events:none;
  }
  .x-swipe{
    position:absolute;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;
    color:rgba(243,239,231,.5);text-transform:uppercase;z-index:3;pointer-events:none;
    display:flex;align-items:center;gap:6px;
  }
  .x-swipe.tr{top:22%;right:8%;transform:rotate(-32deg)}
  .x-swipe.bl{bottom:22%;left:8%;transform:rotate(-32deg)}
  .slide-1 .diagram{opacity:.4;mix-blend-mode:screen}

  /* slide 2 — analyzer mock */
  .analyzer{position:absolute;inset:24px;background:#111;border:1px solid #2a2925;border-radius:2px;
    font-family:'JetBrains Mono',monospace;color:#e8e3d8;font-size:11px;line-height:1.7;padding:18px;overflow:hidden;z-index:3}
  .analyzer .head{display:flex;justify-content:space-between;border-bottom:1px solid #2a2925;padding-bottom:10px;margin-bottom:12px;color:#7a7468}
  .analyzer .head .dots{position:static;display:flex;flex-direction:row;gap:6px;transform:none}
  .analyzer .head .dots i{width:8px;height:8px;border-radius:50%;background:#3a3833;display:block}
  .analyzer .line{display:flex;gap:10px}
  .analyzer .ln{color:#5a544a;width:24px;text-align:right;flex:0 0 24px}
  .analyzer .k{color:#a89e88}
  .analyzer .s{color:#d6322a}
  .analyzer .g{color:#7fa07f}
  .analyzer .y{color:#d4a73a}
  .analyzer .flag{
    margin-top:14px;padding:10px 12px;background:rgba(214,50,42,.12);border-left:2px solid var(--signal);
    color:#f3efe7;
  }
  .analyzer .flag b{color:var(--signal);display:block;margin-bottom:4px;font-weight:500;letter-spacing:.05em}

  /* slide 3 — connections diagram */
  .nodes{position:absolute;inset:0;z-index:3}
  .node{
    position:absolute;background:var(--paper);border:1px solid var(--ink);padding:8px 12px;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
    border-radius:1px;
  }
  .node.alert{border-color:var(--signal);color:var(--signal);background:#fff}
  .node.center{background:var(--ink);color:var(--paper);font-size:12px;padding:12px 16px}

  /* slide 4 — kalmar callout */
  .kalmar-card{
    position:absolute;left:24px;right:24px;bottom:24px;z-index:3;
    background:var(--paper);border:1px solid var(--ink);padding:18px 20px;
    display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  }
  .kalmar-card .seal{
    width:54px;height:54px;border-radius:50%;border:1.5px solid var(--ink);
    display:grid;place-items:center;font-family:'Instrument Serif',serif;font-size:22px;font-style:italic;
  }
  .kalmar-card .info{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);line-height:1.6}
  .kalmar-card .info b{display:block;color:var(--ink);font-family:'Instrument Serif',serif;font-size:18px;font-style:normal;margin-bottom:2px;letter-spacing:0;text-transform:none}
  .kalmar-card .amount{font-family:'Instrument Serif',serif;font-size:32px;color:var(--signal);font-style:italic}

  /* slide 5 — final */
  .final-stamp{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-6deg);z-index:3;
    border:3px double var(--signal);color:var(--signal);
    padding:18px 28px;font-family:'Instrument Serif',serif;font-style:italic;font-size:38px;
    text-align:center;line-height:1;background:rgba(243,239,231,.6);
  }
  .final-stamp small{display:block;font-family:'JetBrains Mono',monospace;font-style:normal;font-size:10px;letter-spacing:.2em;margin-top:6px;color:var(--ink)}

  /* keyboard hint */
  .kbd-hint{
    position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:55;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--muted);
    text-transform:uppercase;writing-mode:vertical-rl;
  }
  .kbd-hint kbd{
    border:1px solid var(--rule);padding:2px 5px;font-family:inherit;background:rgba(255,255,255,.4);
    margin:4px 0;display:inline-block;
  }

  /* ============ MOBILE OVERHAUL ============ */
  @media (max-width: 900px){
    body{overflow:auto;height:auto;min-height:100vh;touch-action:pan-y;overscroll-behavior:contain}
    html{overflow-x:hidden;overflow-y:auto;height:auto}
    .stage{position:relative !important;inset:auto !important;overflow:visible !important;height:auto !important}
    .track{display:block !important;width:100% !important;height:auto !important;transform:none !important;transition:none !important;will-change:auto !important}
    .topbar{position:sticky;top:0;z-index:200;background:var(--paper);grid-template-columns:auto 1fr auto;gap:8px;padding:10px 14px;font-size:11px}
    .topbar .nav-center{display:flex !important;gap:14px;font-size:10px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
    .topbar .nav-center a{flex-shrink:0}
    .topbar-right{font-size:10px;gap:8px}
    .topbar-right .live span:not(.dot){display:none}

    /* Loading bar */
    #loadbar{position:fixed;top:0;left:0;height:3px;background:var(--signal);z-index:9999;width:0%;transition:width .3s}
    .deck{display:block;width:100%;height:auto;overflow:visible}
    .deck .strip{display:block;width:100%;height:auto;transform:none !important;transition:none !important}
    .slide{
      flex:none !important;display:block !important;width:100% !important;height:auto !important;min-height:auto !important;
      padding:0 !important;border-bottom:1px solid var(--ink);grid-template-columns:1fr !important;animation:none !important;
    }
    .slide.is-active,.slide:not(.is-active){animation:none !important}
    .slide .imgwrap,.slide .text,.slide .eyebrow,.slide .headline,.slide .lede,.slide .body,.slide .tags,.slide .footer-row{animation:none !important}
    .slide .text{padding:34px 22px 26px;order:1}
    .slide-2 .text, .slide-4 .text{order:1;padding:34px 22px 26px}
    .slide .text::before, .slide-2 .text::before, .slide-4 .text::before{display:none}
    .slide .imgwrap{
      order:2;width:100%;aspect-ratio:4/5;min-height:340px;
      border-top:1px solid var(--ink);position:relative;
    }
    .headline{font-size:42px !important;line-height:1.04;letter-spacing:-.02em}
    .lede{font-size:17px;line-height:1.5;margin-top:14px}
    .body{font-size:14px;line-height:1.6}
    .eyebrow{font-size:10px;letter-spacing:.15em;flex-wrap:wrap;gap:6px}
    .footer-row{flex-direction:column;align-items:flex-start;gap:14px;margin-top:24px;padding-top:20px}
    .stat .v{font-size:38px}
    .stat .v small{font-size:11px}
    .tags{margin-top:18px;gap:6px}
    .tag{font-size:9px;padding:5px 10px}
    .cta{padding:13px 18px;font-size:11px}
    .slide-1 .text > div > .cta + .cta,
    .slide-1 .text > div > a.cta + button.cta{margin-left:0 !important;margin-top:10px;display:block;width:100%}
    /* Mobile slide-1: full-bleed hero carousel instead of X-cross */
    .slide-1 .imgwrap{order:1;min-height:78vh;aspect-ratio:auto;border-top:none;background:#0a0a09}
    .slide-1 .text{order:2;padding:28px 20px 26px;background:var(--paper);border-top:1px solid var(--ink)}
    .slide-1 .x-slider{position:absolute;inset:0;background:#0a0a09;overflow:hidden}
    .slide-1 .x-strip,.slide-1 .x-swipe,.slide-1 .x-center{display:none !important}
    .mhero{position:absolute;inset:0;display:block !important}
    .mhero .frame{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
    .mhero .frame.is-active{opacity:1}
    .mhero .frame img,.mhero .frame video{
      width:100%;height:100%;object-fit:cover;
      filter:grayscale(.35) contrast(1.05) brightness(.78);
      animation:kenburns 12s ease-in-out infinite alternate;
    }
    @keyframes kenburns{from{transform:scale(1.0) translate(0,0)}to{transform:scale(1.12) translate(-2%,-1%)}}
    .mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.05) 65%,rgba(0,0,0,.85) 100%);pointer-events:none}
    .mhero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#f3efe7;z-index:2;pointer-events:none}
    .mhero-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#d6322a;margin-bottom:10px}
    .mhero-title{font-family:'Instrument Serif',serif;font-size:36px;line-height:1.05;letter-spacing:-.02em;margin-bottom:8px;font-style:italic}
    .mhero-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;opacity:.85;margin-bottom:18px}
    .mhero-dots{position:absolute;top:18px;right:18px;display:flex;gap:6px;z-index:3}
    .mhero-dots .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);transition:all .3s}
    .mhero-dots .d.active{background:#fff;width:18px;border-radius:3px}
    .mhero-meta{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:rgba(243,239,231,.7);z-index:3}
    .mhero-meta .live{width:6px;height:6px;border-radius:50%;background:#d6322a;animation:pulse 1.5s infinite}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
    .diagram,.analyzer,.doc-stack,.kalmar-card,.final-stamp{transform:scale(.82);transform-origin:center}
    .page-indicator{display:none}
    .nav-arrows{position:fixed;top:auto;bottom:14px;right:14px;z-index:150}
    .nav-arrows button{width:42px;height:42px;font-size:14px}
    .ticker{font-size:10px;height:30px}
    .ticker .red{padding:0 8px;font-size:9px}
    input[type=email]{font-size:14px}
  }
  @media (max-width: 480px){
    .headline{font-size:34px !important}
    .slide .text{padding:26px 16px 20px}
    .lede{font-size:15px}
    .stat .v{font-size:30px}
    .x-strip{height:32%}
    .imgwrap{min-height:300px !important}
  }
  /* ============ END MOBILE ============ */

</style>
  <meta name="format-detection" content="telephone=no">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="SvenskLag">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="application-name" content="SvenskLag">
  <link rel="manifest" href="/manifest.webmanifest">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "NewsMediaOrganization",
    "@id": "https://svensklag.com/#organization",
    "name": "SvenskLag",
    "url": "https://svensklag.com",
    "description": "Civic-tech-granskning — kulturmärkning och Akacian-fallet",
    "logo": {
      "@type": "ImageObject",
      "url": "https://svensklag.com/og-image.png"
    },
    "sameAs": ["https://granskasverige.org", "https://granskakalmar.se", "https://riksfusk.com", "https://propagandaanalys.org", "https://transparencysweden.org", "https://sosseland.org", "https://byggkult.pages.dev", "https://akacian.com", "https://charlotteakerlind.com", "https://github.com/LinespottingAB"],
    "knowsLanguage": "sv-SE",
    "areaServed": { "@type": "Country", "name": "Sweden" }
  }
  </script>
</head>
<body>
<div id="loadbar" style="position:fixed;top:0;left:0;height:3px;background:#d6322a;width:8%;z-index:9999;transition:width .25s ease"></div>
<script>(function(){var b=document.getElementById('loadbar'),p=8;var t=setInterval(function(){p=Math.min(p+Math.random()*6,80);b.style.width=p+'%';},150);document.addEventListener('DOMContentLoaded',function(){clearInterval(t);b.style.width='100%';setTimeout(function(){b.style.opacity='0';b.style.transition='opacity .4s';setTimeout(function(){if(b.parentNode)b.remove();},500);},300);});})();</script>

<header class="topbar">
  <div class="brand">
    <span class="mark"></span>
    <span>svensklag<span style="color:var(--signal)">.</span>com</span>
    <span style="color:var(--muted);margin-left:14px">v0.7 · beta</span>
  </div>
  <nav class="nav-center">
    <a href="/" class="active"><span data-i18n="nav.home">Hem</span></a>
    <a href="/karta-sverige.html"><span data-i18n="nav.map.sverige">Sverigekarta</span></a>
    <a href="/karta.html"><span data-i18n="nav.map.kalmar">Kalmar</span></a>
    <a href="/kommun/"><span data-i18n="nav.kommun">Kommunlista</span></a>
    <a href="/fallstudie.html"><span data-i18n="nav.case">Fallstudie</span></a>
    <a href="/kulturerad/" style="color:var(--signal)"><span data-i18n="nav.help">● Kulturerad</span></a><a href="https://www.jo.se/app/uploads/resolve_pdfs/858095_5716-2010.pdf" target="_blank">JO 5716-2010</a>
  </nav>
  <div class="topbar-right">
    <span>v.18 · 2026</span>
    <span class="live"><span class="dot"></span>3 ärenden idag</span>
  </div>
</header>

<aside class="dots" id="dots"></aside>
<div class="kbd-hint">← &nbsp; <kbd>↑↓</kbd> &nbsp; →</div>

<main class="stage">
  <div class="track" id="track">

    <!-- SLIDE 1 -->
    <section class="slide slide-1 is-active" data-screen-label="01 Hero">
      <div class="imgwrap img-1">
        <span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
        <span class="label">Gamla stan · Kalmar</span>
        <span class="meta">1 047 KULTURMÄRKTA · MOT VILJA</span>
        <div class="x-slider">
          <div class="x-strip s1">
            <div class="x-track">
              <img src="/img/houses/h01.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h02.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h03.webp?v=202604280923" alt="" loading="lazy">
              <video src="/img/video/v1.mp4?v=202604280923" autoplay muted loop playsinline preload="metadata"></video>
              <img src="/img/houses/h04.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h05.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h06.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h07.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h01.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h02.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h03.webp?v=202604280923" alt="" loading="lazy">
              <video src="/img/video/v1.mp4?v=202604280923" autoplay muted loop playsinline preload="metadata"></video>
              <img src="/img/houses/h04.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h05.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h06.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h07.webp?v=202604280923" alt="" loading="lazy">
            </div>
          </div>
          <div class="x-strip s2">
            <div class="x-track">
              <img src="/img/houses/h08.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h09.webp?v=202604280923" alt="" loading="lazy">
              <video src="/img/video/v2.mp4?v=202604280923" autoplay muted loop playsinline preload="metadata"></video>
              <img src="/img/houses/h10.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h11.webp?v=202604280923" alt="" loading="lazy">
              <video src="/img/video/v3.mp4?v=202604280923" autoplay muted loop playsinline preload="metadata"></video>
              <img src="/img/houses/h12.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h08.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h09.webp?v=202604280923" alt="" loading="lazy">
              <video src="/img/video/v2.mp4?v=202604280923" autoplay muted loop playsinline preload="metadata"></video>
              <img src="/img/houses/h10.webp?v=202604280923" alt="" loading="lazy">
              <img src="/img/houses/h11.webp?v=202604280923" alt="" loading="lazy">
              <video src="/img/video/v3.mp4?v=202604280923" autoplay muted loop playsinline preload="metadata"></video>
              <img src="/img/houses/h12.webp?v=202604280923" alt="" loading="lazy">
            </div>
          </div>
          <div class="x-swipe tr">↑ SWIPE</div>
          <div class="x-swipe bl">SWIPE ↓</div>
          <div class="x-center">DRAG</div>
          <!-- Mobile-only full-bleed hero carousel -->
          <div class="mhero" id="mhero">
            <div class="mhero-meta"><span class="live"></span>GAMLA STAN · KALMAR · LIVE</div>
            <div class="mhero-dots" id="mheroDots"></div>
            <div class="frame is-active" data-tag="● Klassad blå" data-title="Strümpelska huset" data-sub="1789 · Akacian 17 · ej hörd"><img src="/img/houses/h01.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Klassad grön" data-title="Trähus i kvarteret" data-sub="PBL 8:13 träff · ägaren ej tillfrågad"><img src="/img/houses/h02.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Video · realtid" data-title="Hundratals fastigheter" data-sub="utan rättssäkerhetsgaranti"><video src="/img/video/v1.mp4?v=202604280923" autoplay muted loop playsinline preload="auto"></video></div>
            <div class="frame" data-tag="● Klassad grön" data-title="Hus från 1923" data-sub="förvanskningsförbud aktiverat"><img src="/img/houses/h03.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Klassad gul" data-title="Stadsbild · Kvarnholmen" data-sub="utan ägarens hörande"><img src="/img/houses/h04.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Klassad grön" data-title="Vit panelvilla" data-sub="JO 5716-2010 · oförändrat"><img src="/img/houses/h05.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Video · realtid" data-title="Mönster pågår" data-sub="Stockholm 2012 → Kalmar 2026"><video src="/img/video/v2.mp4?v=202604280923" autoplay muted loop playsinline preload="auto"></video></div>
            <div class="frame" data-tag="● Klassad blå" data-title="Synnerligen högt värde" data-sub="motsv. byggnadsminne"><img src="/img/houses/h06.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Klassad grön" data-title="Villa Solhem" data-sub="1923 · klass satt utan samråd"><img src="/img/houses/h07.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Klassad grön" data-title="Gulputs i kvällsljus" data-sub="bygglovsutrymme krympt"><img src="/img/houses/h08.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Klassad gul" data-title="Anno 1920" data-sub="positiv stadsbild · ingen överklagandelinje"><img src="/img/houses/h09.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Video · realtid" data-title="687 PBL-träffar" data-sub="blå + grön i Kalmar"><video src="/img/video/v3.mp4?v=202604280923" autoplay muted loop playsinline preload="auto"></video></div>
            <div class="frame" data-tag="● Klassad grön" data-title="Vit pärlspont" data-sub="utan rätt till ersättning"><img src="/img/houses/h10.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Klassad blå" data-title="Spåntak · ornament" data-sub="lagstiftaren sa nej · regeringen 2009/10:74"><img src="/img/houses/h11.webp?v=202604280923" alt=""></div>
            <div class="frame" data-tag="● Klassad grön" data-title="Tornliknande gavel" data-sub="Byggkult AB · konsultlevererad bedömning"><img src="/img/houses/h12.webp?v=202604280923" alt=""></div>
            <div class="mhero-overlay">
              <div class="mhero-tag" id="mheroTag">● Klassad blå</div>
              <div class="mhero-title" id="mheroTitle">Strümpelska huset</div>
              <div class="mhero-sub" id="mheroSub">1789 · Akacian 17 · ej hörd</div>
            </div>
          </div>
        </div>
        <svg class="diagram" viewBox="0 0 600 800" preserveAspectRatio="none">
          <g stroke="rgba(214,50,42,.55)" fill="none" stroke-width="1">
            <circle cx="180" cy="320" r="40" stroke-dasharray="2 4"/>
            <circle cx="380" cy="450" r="60" stroke-dasharray="2 4"/>
            <circle cx="460" cy="220" r="30" stroke-dasharray="2 4"/>
            <line x1="180" y1="320" x2="380" y2="450"/>
            <line x1="380" y1="450" x2="460" y2="220"/>
          </g>
          <g font-family="JetBrains Mono" font-size="9" fill="rgba(214,50,42,.9)" letter-spacing="1">
            <text x="130" y="290">§13 KL · ANSVAR</text>
            <text x="320" y="525">FLAG_03 · DETOUR</text>
            <text x="410" y="200">JO 2024/4711</text>
          </g>
        </svg>
      </div>

      <div class="text">
        <div>
          <div class="eyebrow" data-i18n="idx.s1.eyebrow" data-i18n-html>
            <span class="num">01 / 05</span>
            <span class="div">—</span>
            <span class="sect">● PROAKTIV BROTTSANALYS</span>
            <span class="div">—</span>
            <span>För kommun &amp; länsstyrelse</span>
          </div>
          <h1 class="headline" data-i18n="idx.s1.h1" data-i18n-html>Vi läser <em>protokollen</em><br>innan <span class="strike">tjänstefelet</span> hinner begås.</h1>
          <p class="lede" data-i18n="idx.s1.lede">En ny testmodell som kors­refererar mötes­anteckningar mot JO-domar och prejudikat — i realtid, innan beslutet vinner laga kraft.</p>
          <div class="tags">
            <span class="tag">#Brottsanalys</span>
            <span class="tag">#Proaktiv</span>
            <span class="tag">#Kommun</span>
            <span class="tag">#Länsstyrelse</span>
            <span class="tag">#OffentligaHandlingar</span>
            <span class="tag alert">lagbrott i miljardklassen v.18</span>
          </div>
        </div>
        <div class="footer-row">
          <div class="stat">
            <span class="k">Granskade dokument · idag</span>
            <span class="v">14 207<small>st</small></span>
          </div>
          <div class="stat">
            <span class="k">Möjliga lagbrott flaggade</span>
            <span class="v" style="color:var(--signal)">38<small>st</small></span>
          </div>
          <a href="/karta.html" class="cta">Sök din fastighet <span class="arrow">→</span></a>
          <button class="cta" onclick="go(1)" style="margin-left:8px;background:transparent;color:var(--ink);border:1px solid var(--ink)">Se hur det funkar <span class="arrow">→</span></button>
        </div>
      </div>
    </section>

    <!-- SLIDE 2 -->
    <section class="slide slide-2" data-screen-label="02 Analyzer">
      <div class="text">
        <div>
          <div class="eyebrow">
            <span class="num">02 / 05</span>
            <span class="div">—</span>
            <span class="sect">● TESTMODELL</span>
            <span class="div">—</span>
            <span>Live på godtycklig handling</span>
          </div>
          <h1 class="headline" data-i18n="idx.s2.h1" data-i18n-html>Lägg in <em>vilket protokoll<br>som helst.</em><br>Få ut paragraf­brotten.</h1>
          <p class="lede" data-i18n="idx.s2.lede">Mötes­anteckningen blir maskinläsbar. Beslutet bryts ner till handlingar, ansvariga och rättsliga beröringspunkter.</p>
          <p class="body">Modellen identifierar var beslutet avviker från Kommunal­lagen, Förvaltnings­lagen och Offentlighets- och sekretess­lagen. Den ger inte juridisk rådgivning. Den ger ett varnings­ljus och en länk till källa.</p>
          <div class="tags">
            <span class="tag">protokoll-parser</span>
            <span class="tag">paragraf-mappning</span>
            <span class="tag">JO-korsreferens</span>
            <span class="tag">prejudikat-sök</span>
          </div>
        </div>
        <div class="footer-row">
          <div class="stat">
            <span class="k">Träffsäkerhet · 90-dagars</span>
            <span class="v">94,2<small>%</small></span>
          </div>
          <div class="stat">
            <span class="k">Latens · per sida</span>
            <span class="v">0,38<small>s</small></span>
          </div>
        </div>
      </div>
      <div class="imgwrap img-2">
        <span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
        <span class="label" style="background:var(--signal)">Live analys</span>
        <div class="placeholder"></div>
        <div class="analyzer">
          <div class="head">
            <span>kf-protokoll-2026-04-22.pdf</span>
            <span class="dots"><i></i><i></i><i></i></span>
          </div>
          <div class="line"><span class="ln">42</span><span><span class="k">§</span> Beslut: kommunstyrelsen <span class="g">beviljar</span> markanvisning</span></div>
          <div class="line"><span class="ln">43</span><span>&nbsp;&nbsp;till bolag där ordförande <span class="s">äger 41%</span> av aktiestocken</span></div>
          <div class="line"><span class="ln">44</span><span>&nbsp;&nbsp;utan föregående <span class="y">jävsanmälan</span> (KL 6:28)</span></div>
          <div class="line"><span class="ln">45</span><span><span class="k">→</span> Ärendenr <span class="g">KS 2026/318</span></span></div>
          <div class="line"><span class="ln">46</span><span><span class="k">→</span> Beslutsdatum 2026-04-22</span></div>
          <div class="flag">
            <b>▲ FLAG_02 · MÖJLIGT JÄV · KL 6:28</b>
            Korsreferens: <u>JO 2023/3104</u> · <u>JO 2019/771</u> · <u>RÅ 2008 ref. 22</u><br>
            Föreslagen åtgärd: omröstning ogiltig — beslutet kan upphävas vid laglighetsprövning enligt 13 kap. KL.
          </div>
        </div>
      </div>
    </section>

    <!-- SLIDE 3 -->
    <section class="slide slide-3" data-screen-label="03 Korsreferens">
      <div class="imgwrap img-3">
        <span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
        <span class="label">Korsreferens-graf</span>
        <span class="meta">12 487 noder · 84 211 kanter</span>
        <div class="placeholder"></div>
        <svg class="nodes" viewBox="0 0 700 800">
          <g stroke="#1a1a18" stroke-width="1" fill="none">
            <path d="M 350 400 C 200 200, 120 220, 110 290" stroke-dasharray="3 3"/>
            <path d="M 350 400 C 500 200, 580 230, 600 310"/>
            <path d="M 350 400 C 200 600, 130 590, 100 540" stroke-dasharray="3 3"/>
            <path d="M 350 400 C 500 600, 580 590, 600 540"/>
            <path d="M 350 400 L 350 180"/>
            <path d="M 350 400 L 350 640"/>
          </g>
        </svg>
        <div class="nodes">
          <span class="node center" style="left:43%;top:46%">DETTA BESLUT</span>
          <span class="node" style="left:8%;top:32%">JO 2024/4711</span>
          <span class="node" style="left:78%;top:34%">RÅ 2008:22</span>
          <span class="node alert" style="left:6%;top:64%">Tjänstefel · BrB 20:1</span>
          <span class="node" style="left:80%;top:66%">KL 6:28 · jäv</span>
          <span class="node" style="left:44%;top:18%">Förvaltningslag 17 §</span>
          <span class="node alert" style="left:43%;top:78%">OSL 10:14</span>
        </div>
      </div>

      <div class="text">
        <div>
          <div class="eyebrow" data-i18n="idx.s2.eyebrow" data-i18n-html>
            <span class="num">03 / 05</span>
            <span class="div">—</span>
            <span class="sect">● KORSREFERENS</span>
            <span class="div">—</span>
            <span>Prejudikat &amp; JO-domar</span>
          </div>
          <h1 class="headline" data-i18n="idx.s3.h1" data-i18n-html>Varje beslut speglas mot <em>allt som redan dömts.</em></h1>
          <p class="lede" data-i18n="idx.s3.lede">JO-domar, kammarrätt, högsta förvaltnings­domstol och Justitiekanslerns avgöranden — vävda till en levande graf.</p>
          <p class="body">När ett kommunalt beslut liknar ett tidigare fällt mönster lyser noden rött. Det är så vi hindrar systematiska fel innan de upprepas.</p>
          <div class="tags">
            <span class="tag">JO 1809–2026</span>
            <span class="tag">RÅ &amp; HFD</span>
            <span class="tag">JK-beslut</span>
            <span class="tag">Kammarrätt</span>
          </div>
        </div>
        <div class="footer-row">
          <div class="stat">
            <span class="k">Indexerade avgöranden</span>
            <span class="v">412 880</span>
          </div>
          <div class="stat">
            <span class="k">Uppdateras</span>
            <span class="v">var 6:e<small>tim</small></span>
          </div>
        </div>
      </div>
    </section>

    <!-- SLIDE 4 -->
    <section class="slide slide-4" data-screen-label="04 Kalmar">
      <div class="text">
        <div>
          <div class="eyebrow">
            <span class="num">04 / 05</span>
            <span class="div">—</span>
            <span class="sect">● FALLSTUDIE · KULTURMÄRKNING</span>
            <span class="div">—</span>
            <span>Kalmar kommun · 2024–2026</span>
          </div>
          <h1 class="headline" data-i18n="idx.s4.h1" data-i18n-html>JO sa <em>nej</em> 2012.<br>Kalmar gjorde <span class="strike">samma sak</span> ändå.</h1>
          <p class="lede" data-i18n="idx.s4.lede">Stockholm fick JO-kritik (dnr 5716-2010) för att klassa privata hus utan lagstöd, utan att höra ägaren, utan rätt att överklaga. Kalmar har byggt om systemet — samma färgskala, samma effekt.</p>
          <p class="body">Cirka <b>1 000–1 500 fastigheter</b> i Gamla stan, Kvarnholmen, Malmen och Bremerlyckan har klassificerats som blå/grön/gul/grå utan att ägaren tillfrågats. Klassningen kopplas direkt till PBL 8:13 förvanskningsförbudet och används operativt i bygglov. Bedömningen är levererad av konsulten <b>Byggkult AB</b> (Mörbylånga, ledamot Katja Meissner) i konsortium med Tidens arkitekter och Ankdammen Konsult — direktupphandlat, utan publik prövning.</p>
          <div class="tags">
            <span class="tag alert">JO 5716-2010</span>
            <span class="tag">PBL 8:13</span>
            <span class="tag">SOU 2004:94</span>
            <span class="tag">#kulturmärkning</span>
            <span class="tag">#byggkult</span>
            <span class="tag">#kalmar</span>
          </div>
        </div>
        <div class="footer-row">
          <div class="stat">
            <span class="k">Klassificerade fastigheter</span>
            <span class="v" style="color:var(--signal)">~1 250<small>est.</small></span>
          </div>
          <div class="stat">
            <span class="k">Värdeminskning · spann</span>
            <span class="v">0–1,3<small>mdr</small></span>
          </div>
        </div>
      </div>
      <div class="imgwrap img-4">
        <span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
        <span class="label">Akacian 17 · Gamla stan</span>
        <span class="meta">Strümpelska huset · 1789 · isolerat fall</span>
        <div class="placeholder">
          <div class="ph-inner" style="margin-bottom:120px">
            <b>[ Bildplats ]</b>
            trähus 1789 · Gamla stan<br>
            kvällsljus · dokumentärfoto
          </div>
        </div>
        <div class="kalmar-card">
          <div class="seal">K</div>
          <div class="info">
            <b>Kalmar kommun · samhällsbyggnadsnämnden</b>
            kulturmiljöportal lanserad feb 2024<br>
            JO 5716-2010 (Stockholm 2012) · oförändrat mönster
          </div>
          <div class="amount">~1 250 fast.</div>
        </div>
      </div>
    </section>

    <!-- SLIDE 5 -->
    <section class="slide slide-5" data-screen-label="05 Akacian 17">
      <div class="imgwrap img-5">
        <span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
        <span class="label">Isolerat fall · v.18</span>
        <span class="meta">Strümpelska huset · 1789</span>
        <video class="hero-loop" src="/img/video/v4.mp4?v=202604280923" autoplay muted loop playsinline preload="auto"></video>
        <div class="final-stamp">
          olaglig kultur­märkning<br>av <em>1 250 hem</em>
          <small>v.18 · pågående</small>
        </div>
      </div>
      <div class="text">
        <div>
          <div class="eyebrow" data-i18n="idx.s3.eyebrow" data-i18n-html>
            <span class="num">05 / 05</span>
            <span class="div">—</span>
            <span class="sect">● FALLSTUDIE · ISOLERAT FALL</span>
            <span class="div">—</span>
            <span>Akacian 17 · Söderportsgatan 10</span>
          </div>
          <h1 class="headline" data-i18n="idx.s5.h1" data-i18n-html>Ett hus från <em>1789.</em><br>Klassad utan att ägaren visste.</h1>
          <p class="lede" data-i18n="idx.s5.lede">Strümpelska huset i Gamla stan står på en medeltida mur intill Kalmar slott. Det är inte byggnadsminne enligt kulturmiljölagen — den lagliga vägen som ger samråd, ersättning och överklagningsrätt. Det är klassificerat ändå, av kommunen, via konsult, utan att ägaren tillfrågades.</p>
          <p class="body">Det är ett av cirka 1 250 fall. Vi presenterar Akacian 17 isolerat eftersom mönstret blir tydligast i det enskilda huset: värderingen är gjord, klassen är satt, bygglovsutrymmet är krympt — utan en enda formell rättssäkerhetsgaranti.</p>
          <div class="tags">
            <span class="tag">#kulturmärkning</span>
            <span class="tag">#akacian17</span>
            <span class="tag">#JO5716-2010</span>
            <span class="tag">#byggkult</span>
            <span class="tag alert">v.18 släpp</span>
          </div>
        </div>
        <div class="footer-row" style="flex-direction:column;align-items:flex-start;gap:18px">
          <div style="display:flex;gap:18px;align-items:flex-end">
            <div class="stat">
              <span class="k">Bevaka v.18-släppet</span>
              <span class="v" style="font-size:24px">e-post · RSS</span>
            </div>
          </div>
          <div style="display:flex;gap:10px;width:100%">
            <input type="email" placeholder="namn@kommun.se" style="flex:1;padding:14px 16px;border:1px solid var(--ink);background:transparent;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.05em;border-radius:1px;outline:none" />
            <button class="cta">Bevaka <span class="arrow">→</span></button>
          </div>
          <p style="font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.05em">Svensklag.com är en oberoende civic-tech testmodell. Inte juridisk rådgivning. Citerar JO 5716-2010 (2012-02-23, JO Hans-Gunnar Axberger).</p>
        </div>
      </div>
    </section>

  </div>
</main>

<div class="ticker">
  <span class="label">▲ Flaggat just nu</span>
  <div class="scroll">
    <div class="scroll-inner">
      <span class="red">FLAG_K1</span><span>1 250 fastigheter klassade · ägaren ej hörd · PBL 8:13</span><span class="div">·</span>
      <span class="red">FLAG_K2</span><span>JO 5716-2010 · Stockholm 2012 · oförändrat mönster i Kalmar 2026</span><span class="div">·</span>
      <span class="red">FLAG_K3</span><span>SOU 2004:94 avvisades av regeringen · skr 2009/10:74</span><span class="div">·</span>
      <span class="red">FLAG_K4</span><span>Byggkult AB · Mörbylånga · direktupphandlat · ej publik prövning</span><span class="div">·</span>
      <span class="red">FLAG_K5</span><span>Värdeminskning 0–1,3 mdr SEK · spann · ej slutlig</span><span class="div">·</span>
      <span class="red">FLAG_K6</span><span>Akacian 17 · Strümpelska huset 1789 · klassad utan samråd</span><span class="div">·</span>

      <span class="red">FLAG_K1</span><span>1 250 fastigheter klassade · ägaren ej hörd · PBL 8:13</span><span class="div">·</span>
      <span class="red">FLAG_K2</span><span>JO 5716-2010 · Stockholm 2012 · oförändrat mönster i Kalmar 2026</span><span class="div">·</span>
      <span class="red">FLAG_K3</span><span>SOU 2004:94 avvisades av regeringen · skr 2009/10:74</span><span class="div">·</span>
      <span class="red">FLAG_03</span><span>Direktupphandling över tröskelvärdet · LOU 19 kap.</span><span class="div">·</span>
      <span class="red">FLAG_19</span><span>Beslut av obehörigt organ · KL 3:9</span><span class="div">·</span>
      <span class="red">FLAG_22</span><span>Diarieföring 41 dagar för sent · TF 2 kap. 12 §</span><span class="div">·</span>
    </div>
  </div>
</div>

<footer class="controls">
  <div class="counter">
    <span class="now" id="now">01</span>
    <span style="color:var(--rule)">/</span>
    <span>05</span>
    <span style="margin-left:14px" id="title-here">Hero</span>
  </div>
  <div class="progress-bar"><div class="fill" id="fill" style="width:20%"></div></div>
  <div class="ctrl-buttons">
    <button onclick="go(currentIdx-1)" aria-label="Föregående">←</button>
    <button onclick="go(currentIdx+1)" aria-label="Nästa">→</button>
  </div>
</footer>

<script>
  const total = 5;
  const titles = ["Hero","Testmodell","Korsreferens","Fallstudie","Släpp v.18"];
  let currentIdx = 0;
  const track = document.getElementById('track');
  const fill  = document.getElementById('fill');
  const now   = document.getElementById('now');
  const titleHere = document.getElementById('title-here');
  const dotsEl = document.getElementById('dots');

  for(let i=0;i<total;i++){
    const b = document.createElement('button');
    if(i===0) b.classList.add('active');
    b.setAttribute('aria-label','Slide '+(i+1));
    b.addEventListener('click', ()=>go(i));
    dotsEl.appendChild(b);
  }
  const dotBtns = [...dotsEl.children];

  function go(i){
    const total_ = total;
    i = Math.max(0, Math.min(total_-1, i));
    const isMobile = window.matchMedia('(max-width: 900px)').matches;
    if(isMobile){
      const slides = document.querySelectorAll('.slide');
      if(slides[i]) {
        const rect = slides[i].getBoundingClientRect();
        const top = window.pageYOffset + rect.top - 60;
        window.scrollTo({top, behavior:'smooth'});
      }
    } else {
      track.style.transform = `translateX(-${i*20}%)`;
    }
    currentIdx = i;
    fill.style.width = ((i+1)/total_*100) + '%';
    now.textContent = String(i+1).padStart(2,'0');
    titleHere.textContent = titles[i];
    dotBtns.forEach((b,bi)=>b.classList.toggle('active', bi===i));
    document.querySelectorAll('.slide').forEach((s,si)=>s.classList.toggle('is-active', si===i));
  }

  // Detect current slide on scroll (mobile) — disabled, was causing layout thrash
  // Re-enable later with IntersectionObserver if needed

  // Mobile hero carousel autoplay
  (function(){
    const mhero = document.getElementById('mhero');
    if(!mhero) return;
    const frames = [...mhero.querySelectorAll('.frame')];
    const dotsContainer = document.getElementById('mheroDots');
    const tagEl = document.getElementById('mheroTag');
    const titleEl = document.getElementById('mheroTitle');
    const subEl = document.getElementById('mheroSub');
    frames.forEach((_,i)=>{
      const d=document.createElement('div');
      d.className='d'+(i===0?' active':'');
      dotsContainer.appendChild(d);
    });
    const dots=[...dotsContainer.children];
    let idx=0, paused=false;
    function show(i){
      idx=(i+frames.length)%frames.length;
      frames.forEach((f,fi)=>f.classList.toggle('is-active',fi===idx));
      dots.forEach((d,di)=>d.classList.toggle('active',di===idx));
      const f=frames[idx];
      tagEl.textContent=f.dataset.tag||'';
      titleEl.textContent=f.dataset.title||'';
      subEl.textContent=f.dataset.sub||'';
    }
    function tick(){ if(!paused) show(idx+1); }
    let timer=setInterval(tick, 4500);
    mhero.addEventListener('click',()=>{paused=!paused; mhero.style.outline=paused?'2px solid rgba(214,50,42,.6)':'none';});
    // swipe
    let sx=0,sy=0;
    mhero.addEventListener('touchstart',e=>{sx=e.touches[0].clientX;sy=e.touches[0].clientY;},{passive:true});
    mhero.addEventListener('touchend',e=>{
      const dx=e.changedTouches[0].clientX-sx;
      const dy=e.changedTouches[0].clientY-sy;
      if(Math.abs(dx)>40 && Math.abs(dx)>Math.abs(dy)){
        clearInterval(timer);
        show(idx + (dx<0?1:-1));
        timer=setInterval(tick,4500);
      }
    },{passive:true});
  })();

  window.addEventListener('keydown', e=>{
    if(e.key==='ArrowRight' || e.key==='ArrowDown' || e.key===' ') { e.preventDefault(); go(currentIdx+1); }
    if(e.key==='ArrowLeft'  || e.key==='ArrowUp')   { e.preventDefault(); go(currentIdx-1); }
    if(e.key==='Home') go(0);
    if(e.key==='End') go(total-1);
  });

  // wheel / trackpad — desktop only
  let wheelLock = false;
  window.addEventListener('wheel', e=>{
    if(window.matchMedia('(max-width: 900px)').matches) return;
    if(wheelLock) return;
    if(Math.abs(e.deltaX) > 30 || Math.abs(e.deltaY) > 30){
      wheelLock = true;
      const dir = (e.deltaX || e.deltaY) > 0 ? 1 : -1;
      go(currentIdx + dir);
      setTimeout(()=>wheelLock=false, 950);
    }
  }, {passive:true});

  // drag
  // Desktop-only swipe (deck navigation). Mobile uses native scroll.
  if(!window.matchMedia('(max-width: 900px)').matches){
    let sx=null;
    const deck = document.querySelector('.deck');
    if(deck){
      deck.addEventListener('pointerdown', e=>{ sx = e.clientX; });
      deck.addEventListener('pointerup',   e=>{
        if(sx===null) return;
        const dx = e.clientX - sx;
        if(Math.abs(dx) > 60) go(currentIdx + (dx<0?1:-1));
        sx = null;
      });
    }
  }

  // Loading bar
  (function(){
    const bar = document.getElementById('loadbar');
    if(!bar) return;
    let p = 10;
    bar.style.width = p + '%';
    const tick = setInterval(()=>{
      p = Math.min(p + Math.random()*8, 85);
      bar.style.width = p + '%';
    }, 180);
    window.addEventListener('load', ()=>{
      clearInterval(tick);
      bar.style.width = '100%';
      setTimeout(()=>{ bar.style.opacity = '0'; setTimeout(()=>bar.remove(), 400); }, 250);
    });
  })();
</script>

<script src="/i18n.js"></script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"0d36b459f0ec4f0ba8cc4c37bc7be883","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>
<!-- redeploy 1777293533 -->
