/*
Theme Name: Prepaid Simkaart Vergelijker
Theme URI: https://prepaidsimkaartvergelijken.nl
Author: prepaidsimkaartvergelijken.nl
Description: Eigen thema voor de prepaid-simkaartvergelijker. Vergelijkt prepaid bundels van Nederlandse aanbieders op minuten, sms, data en prijs, met een ingebouwde blog. Bij het eerste activeren maakt dit thema automatisch alle vaste pagina's en blogberichten aan.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: prepaidsimkaartvergelijken
*/

/* ===================================================================
   Onderstaande CSS is (op enkele SPA-only regels na) hetzelfde
   ontwerp als de Claude-artifactversie van de site. Kleurtokens staan
   bovenaan in :root en de dark-mode block eronder.
   =================================================================== */

  :root{
    --ink:#0c2438;
    --ink-soft:#4a5b6d;
    --ink-faint:#7c8a99;
    --ground:#f2f5f9;
    --surface:#ffffff;
    --surface-2:#eaeff5;
    --line:#dbe2ea;
    --accent:#0072cf;
    --accent-strong:#005fb0;
    --accent-ink:#ffffff;
    --accent-soft:#e2f0fc;
    --good:#0b8f4e;
    --good-soft:#e0f5e8;
    --warn:#c97a00;
    --warn-soft:#fbedd6;
    --bad:#c53434;
    --bad-soft:#fbe4e4;
    --shadow: 0 1px 2px rgba(12,36,56,.06), 0 8px 24px -12px rgba(12,36,56,.18);
    --radius-s:8px;
    --radius-m:14px;
    --radius-l:22px;
    --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#eaf1f8;
      --ink-soft:#aebccb;
      --ink-faint:#7f8fa0;
      --ground:#0b1520;
      --surface:#111f2e;
      --surface-2:#17293b;
      --line:#25384c;
      --accent:#5aa9ef;
      --accent-strong:#7dbdf4;
      --accent-ink:#052032;
      --accent-soft:#132c40;
      --good:#3fcb82;
      --good-soft:#0f2d1e;
      --warn:#f0b24a;
      --warn-soft:#332309;
      --bad:#f27272;
      --bad-soft:#3a1414;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --ink:#eaf1f8;
    --ink-soft:#aebccb;
    --ink-faint:#7f8fa0;
    --ground:#0b1520;
    --surface:#111f2e;
    --surface-2:#17293b;
    --line:#25384c;
    --accent:#5aa9ef;
    --accent-strong:#7dbdf4;
    --accent-ink:#052032;
    --accent-soft:#132c40;
    --good:#3fcb82;
    --good-soft:#0f2d1e;
    --warn:#f0b24a;
    --warn-soft:#332309;
    --bad:#f27272;
    --bad-soft:#3a1414;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:var(--accent);overflow-wrap:anywhere;}
  h1,h2,h3{font-family:var(--font-display);color:var(--ink);text-wrap:balance;margin:0;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  .tabular{font-variant-numeric:tabular-nums;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  }
  :focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px;}

  /* ---------- header ---------- */
  header.site{
    position:sticky;top:0;z-index:40;
    background:color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .header-row{
    display:flex;align-items:center;gap:14px;
    padding:14px 0;
  }
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;}
  .brand img{width:34px;height:auto;flex-shrink:0;}
  .brand-word{font-family:var(--font-body);font-weight:700;font-size:16.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .brand-word .a{color:var(--ink);}
  .brand-word .b{color:var(--accent);}
  nav.primary{display:flex;align-items:center;gap:2px;margin-left:8px;flex:1;}
  nav.primary a{
    color:var(--ink-soft);text-decoration:none;font-size:14px;font-weight:500;
    padding:9px 9px;border-radius:999px;white-space:nowrap;
  }
  nav.primary a:hover{color:var(--ink);background:var(--surface-2);}
  nav.primary a[aria-current="page"]{color:var(--accent-strong);background:var(--accent-soft);font-weight:600;}
  .header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--font-body);font-weight:600;font-size:14.5px;
    padding:10px 18px;border-radius:999px;border:1px solid transparent;
    cursor:pointer;text-decoration:none;line-height:1;transition:transform .12s ease, box-shadow .12s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--accent);color:var(--accent-ink);}
  .btn-primary:hover{background:var(--accent-strong);}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
  .btn-ghost:hover{background:var(--surface-2);}
  .btn-sm{padding:7px 13px;font-size:13px;}
  .theme-toggle{
    width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink-soft);cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .theme-toggle:hover{color:var(--ink);background:var(--surface-2);}
  .theme-toggle svg{width:18px;height:18px;}
  .menu-toggle{display:none;flex-shrink:0;}
  .menu-toggle svg{width:20px;height:20px;}

  @media (max-width:1180px){
    nav.primary{
      display:none;position:absolute;top:100%;left:0;right:0;
      flex-direction:column;align-items:stretch;gap:2px;
      background:var(--surface);border-bottom:1px solid var(--line);
      padding:10px 24px 16px;box-shadow:var(--shadow);
    }
    nav.primary.open{display:flex;}
    nav.primary a{padding:11px 12px;border-radius:10px;}
    .menu-toggle{
      display:flex;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
      background:var(--surface);align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
    }
    header.site{position:sticky;}
    .header-row{position:relative;}
  }
  @media (max-width:680px){
    .header-actions .btn-primary{display:none;}
  }
  @media (max-width:400px){
    .brand-word{font-size:14px;}
    .menu-toggle{width:34px;height:34px;}
    .menu-toggle svg{width:17px;height:17px;}
  }
  @media (max-width:340px){
    .brand-word{font-size:12.5px;}
    .header-row{gap:12px;}
  }

  /* ---------- generic section rhythm ---------- */
  .psv-page{display:none;}
  .psv-page.active{display:block;}
  section{padding:56px 0;}
  section.tight{padding:36px 0;}
  .eyebrow{
    font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--accent-strong);margin:0 0 10px;
  }
  .section-head{max-width:640px;margin:0 0 34px;}
  .section-head h2{font-size:clamp(24px,3vw,32px);font-weight:600;}
  .section-head p{color:var(--ink-soft);margin:10px 0 0;font-size:16px;}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:52px 0 44px;border-bottom:1px solid var(--line);}
  .hero-chip-field{position:absolute;inset:0;pointer-events:none;opacity:.5;}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;position:relative;}
  .hero h1{font-size:clamp(32px,4.4vw,50px);font-weight:600;line-height:1.06;letter-spacing:-.01em;}
  .hero h1 em{font-style:normal;color:var(--accent-strong);}
  .hero-sub{font-size:18px;color:var(--ink-soft);max-width:46ch;margin:18px 0 26px;}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;}
  .hero-stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap;}
  .hero-stat b{display:block;font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--ink);}
  .hero-stat span{font-size:13px;color:var(--ink-faint);}
  .hero-note{margin-top:22px;font-size:13px;color:var(--ink-faint);}

  .simcard{
    aspect-ratio:1.55/1;border-radius:16px;position:relative;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:16px 18px;box-shadow:var(--shadow);
  }
  .simcard::after{
    content:"";position:absolute;top:0;right:0;width:26px;height:26px;
    background:var(--ground);border-bottom-left-radius:14px;
  }
  .simcard .chip{width:34px;height:24px;border-radius:5px;background:rgba(255,255,255,.55);}
  .simcard .lbl{font-family:var(--font-mono);color:#fff;font-size:12px;letter-spacing:.04em;opacity:.92;}

  .hero-visual{position:relative;}
  .hero-stack{position:relative;height:290px;}
  .hero-stack .simcard{position:absolute;width:230px;}
  .hero-stack .c1{background:linear-gradient(135deg,#0072cf,#0058a3);top:0;right:20px;transform:rotate(-6deg);z-index:3;}
  .hero-stack .c2{background:linear-gradient(135deg,#0b8f4e,#076c3a);top:58px;right:78px;transform:rotate(4deg);z-index:2;}
  .hero-stack .c3{background:linear-gradient(135deg,#c97a00,#a35f00);top:118px;right:6px;transform:rotate(12deg);z-index:1;}

  /* ---------- steps ---------- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px 20px;}
  .step .num{font-family:var(--font-mono);font-size:13px;color:var(--accent-strong);font-weight:600;}
  .step h3{font-size:17px;font-weight:600;margin:10px 0 6px;}
  .step p{margin:0;color:var(--ink-soft);font-size:14.5px;}

  /* ---------- filter bar ---------- */
  .filterbar{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
    padding:22px 24px;box-shadow:var(--shadow);
  }
  .filter-row-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
  .filter-row-providers{margin-top:20px;}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:7px;text-transform:uppercase;letter-spacing:.05em;}
  select, .chipset{
    width:100%;
  }
  select{
    appearance:none;background:var(--ground);border:1px solid var(--line);border-radius:10px;
    padding:10px 34px 10px 12px;font-family:var(--font-body);font-size:14.5px;color:var(--ink);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a5b6d' stroke-width='2'><path d='M5 8l5 5 5-5'/></svg>");
    background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
  }
  .chipset{display:flex;flex-wrap:wrap;gap:6px;}
  .chip-check{
    display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--ground);
    border-radius:999px;padding:6px 11px 6px 8px;font-size:13px;cursor:pointer;user-select:none;color:var(--ink-soft);
  }
  .chip-check input{accent-color:var(--accent);}
  .chip-check .swatch{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
  .filter-reset{font-size:13px;color:var(--ink-faint);background:none;border:none;cursor:pointer;text-decoration:underline;padding:14px 0 0;}

  .demo-note{
    display:flex;gap:10px;align-items:flex-start;margin:22px 0 4px;
    background:var(--warn-soft);border:1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
    color:var(--ink-soft);border-radius:var(--radius-s);padding:12px 14px;font-size:13.5px;
  }
  .demo-note svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--warn);}

  .results-head{display:flex;justify-content:space-between;align-items:baseline;margin:30px 0 16px;gap:12px;flex-wrap:wrap;}
  .results-count{font-size:14px;color:var(--ink-faint);}

  .plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  .plan-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
    padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow);min-width:0;
  }
  .plan-top{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap;row-gap:6px;}
  .badge-av{
    width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:14px;flex-shrink:0;font-family:var(--font-body);
  }
  .plan-names{min-width:0;}
  .plan-provider{font-weight:700;font-size:15px;color:var(--ink);}
  .plan-name{font-size:13px;color:var(--ink-faint);}
  .plan-tags{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
  .tag{font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;letter-spacing:.02em;white-space:nowrap;}
  .tag-good{background:var(--good-soft);color:var(--good);}
  .tag-warn{background:var(--accent-soft);color:var(--accent-strong);}

  .plan-specs{display:flex;gap:18px;padding:12px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);flex-wrap:wrap;row-gap:8px;min-width:0;}
  .spec{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-soft);min-width:0;}
  .spec svg{width:16px;height:16px;color:var(--ink-faint);flex-shrink:0;}
  .spec b{color:var(--ink);font-weight:600;font-family:var(--font-mono);font-size:13px;}

  .plan-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;row-gap:10px;min-width:0;}
  .plan-price{font-family:var(--font-mono);}
  .plan-price .amt{font-size:26px;font-weight:600;color:var(--ink);}
  .plan-price .per{font-size:13px;color:var(--ink-faint);}
  .plan-term{display:block;font-size:12px;color:var(--ink-faint);margin-top:2px;font-family:var(--font-body);}
  .plan-cta{position:relative;}
  .cta-note{
    position:absolute;bottom:calc(100% + 8px);right:0;background:var(--ink);color:var(--ground);
    font-size:12px;padding:7px 10px;border-radius:8px;white-space:nowrap;
    opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s ease, transform .15s ease;
  }
  .cta-note::after{content:"";position:absolute;top:100%;right:16px;border:5px solid transparent;border-top-color:var(--ink);}
  .cta-note.show{opacity:1;transform:translateY(0);}
  .empty-state{
    text-align:center;padding:50px 20px;color:var(--ink-faint);border:1px dashed var(--line);
    border-radius:var(--radius-m);background:var(--surface);
  }

  /* ---------- providers ---------- */
  .provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .provider-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
    padding:20px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:12px;
    font-family:inherit;color:inherit;min-width:0;
  }
  .provider-card:hover{border-color:var(--accent);box-shadow:var(--shadow);}
  .provider-card .badge-av{width:44px;height:44px;font-size:15px;border-radius:12px;}
  .provider-card h3{font-size:16.5px;font-weight:700;font-family:var(--font-body);}
  .provider-card p{margin:0;font-size:13.5px;color:var(--ink-soft);flex:1;}
  .provider-card .link{font-size:13px;font-weight:600;color:var(--accent-strong);display:flex;align-items:center;gap:5px;}

  /* ---------- compare table (uitleg page) ---------- */
  .compare-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);}
  table.compare{width:100%;border-collapse:collapse;min-width:560px;}
  table.compare th, table.compare td{padding:13px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line);}
  table.compare th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:700;background:var(--surface-2);}
  table.compare th:first-child, table.compare td:first-child{color:var(--ink-soft);font-weight:600;width:180px;}
  table.compare tr:last-child td{border-bottom:none;}
  table.compare td.prepaid{color:var(--good);font-weight:600;}
  table.compare td.simonly{color:var(--accent-strong);font-weight:600;}
  .prose{max-width:70ch;}
  .prose p{color:var(--ink-soft);font-size:16px;}
  .prose p + p{margin-top:14px;}
  .prose code{font-family:var(--font-mono);font-size:0.9em;background:var(--surface-2);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere;word-break:break-word;}

  /* ---------- faq ---------- */
  .faq-list{max-width:760px;display:flex;flex-direction:column;gap:10px;}
  .faq-item{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);overflow:hidden;}
  .faq-q{
    width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
    background:none;border:none;text-align:left;padding:17px 20px;cursor:pointer;
    font-family:var(--font-body);font-size:15.5px;font-weight:600;color:var(--ink);
  }
  .faq-q svg{width:18px;height:18px;flex-shrink:0;color:var(--ink-faint);transition:transform .18s ease;}
  .faq-item[open] .faq-q svg{transform:rotate(45deg);}
  .faq-a{padding:0 20px 18px;color:var(--ink-soft);font-size:14.5px;max-width:68ch;}
  .faq-a p{margin:0;}

  /* ---------- about ---------- */
  .about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start;}
  .about-grid > *{min-width:0;}
  .disclosure{background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));border-radius:var(--radius-m);padding:20px 22px;}
  .disclosure h3{font-size:15px;font-weight:700;font-family:var(--font-body);color:var(--accent-strong);margin-bottom:8px;}
  .disclosure p{margin:0;font-size:14px;color:var(--ink-soft);}
  .contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px;margin-top:18px;}
  .contact-card h3{font-size:15px;font-family:var(--font-body);margin-bottom:10px;}
  .contact-card a{font-size:14.5px;font-weight:600;}

  /* ---------- colofon ---------- */
  .colofon{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px;margin-top:18px;}
  .colofon h3{font-size:15px;font-family:var(--font-body);margin-bottom:10px;}
  .colofon-warning{background:var(--warn-soft);border:1px solid color-mix(in srgb, var(--warn) 35%, var(--line));color:var(--ink-soft);border-radius:var(--radius-s);padding:10px 12px;font-size:13px;margin:0 0 14px;}
  .colofon-list{margin:0;display:flex;flex-direction:column;gap:9px;}
  .colofon-list > div{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13.5px;padding-bottom:9px;border-bottom:1px dashed var(--line);}
  .colofon-list > div:last-child{border-bottom:none;padding-bottom:0;}
  .colofon-list dt{font-weight:600;color:var(--ink);min-width:130px;}
  .colofon-list dd{margin:0;color:var(--ink-soft);}
  .colofon-list dd.todo{color:var(--warn);font-style:italic;}
  .colofon-note{font-size:12.5px;color:var(--ink-faint);margin:14px 0 0;}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);background:var(--surface);margin-top:40px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:32px;padding:44px 0 26px;}
  .footer-brand .brand{margin-bottom:10px;}
  .footer-brand p{font-size:13.5px;color:var(--ink-faint);max-width:32ch;}
  .footer-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 14px;font-weight:700;}
  .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
  .footer-col a{color:var(--ink-soft);text-decoration:none;font-size:14px;}
  .footer-col a:hover{color:var(--accent-strong);}
  .footer-bottom{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-faint);}

  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-visual{display:none;}
    .steps{grid-template-columns:1fr;}
    .filter-row-top{grid-template-columns:1fr 1fr;}
    .plan-grid{grid-template-columns:1fr;}
    .provider-grid{grid-template-columns:repeat(2,1fr);}
    .about-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .scenario-grid{grid-template-columns:repeat(2,1fr);}
    .review-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:600px){
    .filter-row-top{grid-template-columns:1fr;}
    .provider-grid{grid-template-columns:1fr;}
    .hero-stats{gap:20px;}
    .footer-grid{grid-template-columns:1fr;}
    section{padding:40px 0;}
    .scenario-grid{grid-template-columns:1fr;}
    .review-grid{grid-template-columns:1fr;}
  }

  /* ---------- breadcrumbs ---------- */
  .breadcrumb{border-bottom:1px solid var(--line);background:var(--surface-2);}
  .breadcrumb.hidden{display:none;}
  .breadcrumb ol{list-style:none;margin:0;padding:10px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-faint);}
  .breadcrumb a{color:var(--ink-faint);text-decoration:none;}
  .breadcrumb a:hover{color:var(--accent-strong);text-decoration:underline;}
  .breadcrumb li[aria-current] span{color:var(--ink-soft);font-weight:600;}
  .breadcrumb .sep{opacity:.6;}

  /* ---------- related links ---------- */
  .related-links{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);}
  .related-links h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 12px;font-weight:700;}
  .related-links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
  .related-links a{
    display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--accent-strong);
    text-decoration:none;background:var(--accent-soft);border-radius:999px;padding:8px 14px;
  }
  .related-links a:hover{background:var(--accent);color:var(--accent-ink);}

  /* ---------- scenario cards (case studies vervanging) ---------- */
  .scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .scenario-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:22px;min-width:0;}
  .scenario-card .tag-scn{display:inline-block;font-size:11px;font-weight:700;color:var(--accent-strong);background:var(--accent-soft);border-radius:999px;padding:4px 10px;margin-bottom:12px;}
  .scenario-card h3{font-size:16px;font-weight:600;margin-bottom:8px;}
  .scenario-card p{margin:0;font-size:14px;color:var(--ink-soft);}
  .scenario-note{font-size:12.5px;color:var(--ink-faint);margin-top:16px;}

  /* ---------- reviews placeholder ---------- */
  .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .review-card{
    background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius-m);
    padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0;
  }
  .review-stars{color:var(--warn);font-size:15px;letter-spacing:2px;}
  .review-card p{margin:0;font-size:13.5px;color:var(--ink-faint);font-style:italic;}
  .review-card .who{font-size:12.5px;color:var(--ink-faint);font-weight:600;font-style:normal;}

  /* ---------- blog ---------- */
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .blog-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
    padding:20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
    min-width:0;transition:box-shadow .15s ease, border-color .15s ease;
  }
  .blog-card:hover{border-color:var(--accent);box-shadow:var(--shadow);}
  .blog-card-cat{font-size:11px;font-weight:700;color:var(--accent-strong);background:var(--accent-soft);border-radius:999px;padding:4px 10px;align-self:flex-start;letter-spacing:.02em;}
  .blog-card h3{font-size:16px;font-weight:600;font-family:var(--font-body);margin:2px 0 0;line-height:1.35;}
  .blog-card p{margin:0;font-size:13.5px;color:var(--ink-soft);flex:1;}
  .blog-card-link{font-size:13px;font-weight:600;color:var(--accent-strong);margin-top:4px;}
  .blog-post-body h3{font-size:19px;font-weight:600;margin:26px 0 10px;font-family:var(--font-display);}
  .blog-post-body p{color:var(--ink-soft);font-size:16px;}
  .blog-post-body p + p{margin-top:14px;}
  .blog-post-body p:first-child{margin-top:0;}
  @media (max-width:920px){ .blog-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .blog-grid{grid-template-columns:1fr;} }

  /* ---------- team placeholder ---------- */
  .team-placeholder{
    display:flex;align-items:center;gap:14px;background:var(--surface);border:1px dashed var(--line);
    border-radius:var(--radius-m);padding:18px 20px;margin-top:18px;flex-wrap:wrap;min-width:0;
  }
  .team-avatar{
    width:52px;height:52px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--ink-faint);flex-shrink:0;
  }
  .team-avatar svg{width:24px;height:24px;}
  .team-placeholder p{margin:0;font-size:13.5px;color:var(--ink-faint);min-width:0;flex:1 1 180px;}

  /* ---------- contact form ---------- */
  .contact-form{display:flex;flex-direction:column;gap:14px;margin-top:14px;}
  .contact-form .f{display:flex;flex-direction:column;gap:6px;}
  .contact-form label{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
  .contact-form input, .contact-form textarea{
    font-family:var(--font-body);font-size:14.5px;color:var(--ink);background:var(--ground);
    border:1px solid var(--line);border-radius:10px;padding:10px 12px;resize:vertical;
  }
  .contact-form textarea{min-height:96px;}
  .contact-form .f.has-error input, .contact-form .f.has-error textarea{border-color:var(--bad);}
  .field-error{font-size:12.5px;color:var(--bad);display:none;}
  .contact-form .f.has-error .field-error{display:block;}
  .form-error-summary{
    display:none;align-items:flex-start;gap:10px;background:var(--bad-soft);
    border:1px solid var(--bad);color:var(--bad);border-radius:var(--radius-s);
    padding:12px 14px;font-size:13.5px;
  }
  .form-error-summary.show{display:flex;}
  .form-error-summary svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;}
  .response-promise{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--good);font-weight:600;margin-top:4px;}
  .response-promise svg{width:16px;height:16px;flex-shrink:0;}
  .dev-note{font-size:12px;color:var(--ink-faint);margin-top:10px;}
  .mailto-fallback{font-size:13.5px;margin-top:14px;color:var(--ink-soft);}

  /* ---------- 404 & bedankt & privacy ---------- */
  .status-page{text-align:center;padding:70px 0;}
  .status-page .code{font-family:var(--font-mono);font-size:14px;color:var(--accent-strong);font-weight:600;letter-spacing:.05em;margin-bottom:14px;}
  .status-page h2{font-size:clamp(26px,4vw,36px);margin-bottom:14px;}
  .status-page p{color:var(--ink-soft);font-size:16px;max-width:52ch;margin:0 auto 26px;}
  .status-page .icon-wrap{width:72px;height:72px;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
  .status-page .icon-wrap svg{width:32px;height:32px;}
  .status-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

  /* ---------- sticky mobile cta ---------- */
  .sticky-cta{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(12,36,56,.25);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .sticky-cta .btn{width:100%;}
  @media (max-width:680px){
    .sticky-cta:not(.hidden){display:block;}
    body{padding-bottom:78px;}
  }

  @media (max-width:920px){
    .scenario-grid{grid-template-columns:1fr;}
    .review-grid{grid-template-columns:1fr;}
  }

  /* ---------- skip link ---------- */
  .skip-link{
    position:fixed;top:-60px;left:12px;z-index:100;background:var(--ink);color:var(--ground);
    padding:10px 16px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;
    transition:top .15s ease;
  }
  .skip-link:focus{top:12px;}

  /* ---------- scroll progress bar ---------- */
  .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--accent);z-index:90;}

  /* ---------- search ---------- */
  .search-toggle{
    width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink-soft);cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .search-toggle:hover{color:var(--ink);background:var(--surface-2);}
  .search-toggle svg{width:18px;height:18px;}
  .search-overlay{
    display:none;position:fixed;inset:0;z-index:80;background:color-mix(in srgb, var(--ink) 45%, transparent);
    padding:10vh 16px 16px;
  }
  .search-overlay.open{display:block;}
  .search-panel{
    max-width:560px;margin:0 auto;background:var(--surface);border-radius:var(--radius-m);
    box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);
  }
  .search-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);}
  .search-input-row svg{width:18px;height:18px;color:var(--ink-faint);flex-shrink:0;}
  .search-input-row input{
    flex:1;min-width:0;border:none;outline:none;background:none;font-family:var(--font-body);
    font-size:15.5px;color:var(--ink);
  }
  .search-close{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:12.5px;flex-shrink:0;padding:4px 8px;}
  .search-results{max-height:50vh;overflow-y:auto;padding:8px;}
  .search-result{
    display:block;width:100%;text-align:left;padding:11px 12px;border-radius:10px;text-decoration:none;
    color:inherit;cursor:pointer;background:none;border:none;font-family:inherit;
  }
  .search-result:hover, .search-result:focus-visible{background:var(--surface-2);}
  .search-result .kind{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-strong);font-weight:700;}
  .search-result .title{font-size:14.5px;font-weight:600;color:var(--ink);margin-top:2px;}
  .search-result .snippet{font-size:13px;color:var(--ink-faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .search-empty{padding:26px 16px;text-align:center;color:var(--ink-faint);font-size:14px;}
  .search-hint{padding:10px 16px;font-size:12px;color:var(--ink-faint);border-top:1px solid var(--line);}

  /* ---------- cookie banner ---------- */
  .cookiebar{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(12,36,56,.25);
    padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .cookiebar.show{display:block;}
  .cookiebar-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  .cookiebar-text{flex:1;min-width:220px;font-size:13.5px;color:var(--ink-soft);}
  .cookiebar-text a{font-weight:600;}
  .cookiebar-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap;}

  /* ---------- floating actions ---------- */
  .floating-actions{
    position:fixed;right:18px;bottom:18px;z-index:45;display:flex;flex-direction:column-reverse;gap:10px;
    transition:bottom .15s ease;
  }
  .fab{
    width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow);border:1px solid var(--line);cursor:pointer;background:var(--surface);color:var(--ink-soft);
    text-decoration:none;transition:opacity .15s ease, transform .15s ease, background .15s ease;flex-shrink:0;
  }
  .fab:hover{color:var(--ink);background:var(--surface-2);}
  .fab svg{width:20px;height:20px;}
  .fab-contact{background:var(--accent);color:var(--accent-ink);border-color:transparent;}
  .fab-contact:hover{background:var(--accent-strong);color:var(--accent-ink);}
  .fab-top{opacity:0;pointer-events:none;transform:translateY(8px);}
  .fab-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
  @media (max-width:680px){
    .floating-actions{bottom:calc(78px + 14px);}
  }
  body.has-cookiebar .sticky-cta{ bottom:var(--cookiebar-h, 0px); }
  body.has-cookiebar .floating-actions{ bottom:calc(18px + var(--cookiebar-h, 0px)); }
  @media (max-width:680px){
    body.has-cookiebar .floating-actions{ bottom:calc(78px + 14px + var(--cookiebar-h, 0px)); }
  }

  /* ---------- copy button ---------- */
  .copy-btn{
    display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--accent-strong);
    font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;padding:2px 4px;vertical-align:middle;
  }
  .copy-btn:hover{color:var(--accent);}
  .copy-btn svg{width:14px;height:14px;}
  .copy-btn.copied{color:var(--good);}

  /* ---------- loading / transitions ---------- */
  .psv-page.active{animation:fadeIn .25s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
  .btn.is-loading{position:relative;color:transparent !important;pointer-events:none;}
  .btn.is-loading::after{
    content:"";position:absolute;width:16px;height:16px;border-radius:50%;
    border:2px solid rgba(255,255,255,.5);border-top-color:#fff;left:50%;top:50%;
    margin:-8px 0 0 -8px;animation:spin .6s linear infinite;
  }
  .btn-ghost.is-loading::after{border-color:color-mix(in srgb, var(--ink) 30%, transparent);border-top-color:var(--ink);}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ---------- last-updated note ---------- */
  .updated-note{font-size:12.5px;color:var(--ink-faint);margin-top:8px;}

  /* ---------- extra hover states ---------- */
  .plan-card{transition:box-shadow .15s ease, border-color .15s ease;}
  .plan-card:hover{border-color:var(--accent);box-shadow:0 2px 10px -2px rgba(12,36,56,.15), var(--shadow);}
  .scenario-card{transition:box-shadow .15s ease, border-color .15s ease;}
  .scenario-card:hover{border-color:var(--accent);box-shadow:var(--shadow);}
  .step{transition:box-shadow .15s ease, border-color .15s ease;}
  .step:hover{border-color:var(--accent);box-shadow:var(--shadow);}
  .chip-check:hover{border-color:var(--accent);color:var(--ink);}

  @media (prefers-reduced-motion: reduce){
    .psv-page.active{animation:none;}
    .btn.is-loading::after{animation:none;}
  }

  @media (max-width:400px){
    .theme-toggle, .search-toggle{width:34px;height:34px;}
    .theme-toggle svg, .search-toggle svg{width:16px;height:16px;}
  }

  /* ---------- print ---------- */
  @media print{
    header.site, .breadcrumb, .sticky-cta, .floating-actions, .cookiebar, .search-overlay,
    .menu-toggle, .theme-toggle, .search-toggle, .btn, .related-links, .skip-link, .scroll-progress,
    .demo-note, .contact-form{ display:none !important; }
    body{padding-bottom:0 !important;background:#fff !important;color:#000 !important;}
    .psv-page{display:none !important;}
    .psv-page.active{display:block !important;}
    a{color:#000 !important;text-decoration:underline;}
    .wrap{max-width:100% !important;padding:0 !important;}
    section{padding:14px 0 !important;}
  }