/* Mijndomein Startersgidsen · webhosting-2.css · gebouwd uit de bron, hier niet bewerken */
@layer base {
  @keyframes pkpop {
    0% {
      opacity: 0;
      transform: translateY(1.2mm) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes pkpu {
    0% {
      box-shadow:
        0 0 0 0.7mm #6a29ae,
        0 0 0 0 rgba(106, 41, 174, 0.55);
    }
    to {
      box-shadow:
        0 0 0 0.7mm #6a29ae,
        0 0 0 6mm transparent;
    }
  }
  .pk,
  .pk-map {
    position: relative;
  }
  .pk {
    margin: 4mm 0 5mm;
  }
  .pk-map {
    line-height: 0;
    border-radius: 3mm;
    overflow: hidden;
    border: 0.35mm solid #d3c8e2;
    background: #fff;
    user-select: none;
  }
  .pk-map img {
    width: 100%;
    height: auto;
    display: block;
  }
  .pk-hs {
    position: absolute;
    border: 0;
    padding: 0;
    background: 0 0;
    border-radius: 1.5mm;
    cursor: pointer;
    transition:
      background 0.12s,
      box-shadow 0.12s,
      opacity 0.15s;
  }
  .pk-hs::after {
    content: "";
    position: absolute;
    right: -0.9mm;
    top: -0.9mm;
    width: 2mm;
    height: 2mm;
    border-radius: 50%;
    background: #1f9d63;
    border: 0.4mm solid #fff;
    box-shadow: 0 0.2mm 0.8mm rgba(0, 0, 0, 0.3);
  }
  .pk-hs.let::after {
    background: #e6a700;
  }
  .pk-hs.af::after {
    background: #6b6475;
  }
  .pk-hs:focus-visible,
  .pk-hs:hover {
    background: rgba(31, 157, 99, 0.16);
    box-shadow: 0 0 0 0.5mm #1f9d63;
    outline: 0;
  }
  .pk-hs.let:focus-visible,
  .pk-hs.let:hover {
    background: rgba(230, 167, 0, 0.18);
    box-shadow: 0 0 0 0.5mm #e6a700;
  }
  .pk-hs.af:focus-visible,
  .pk-hs.af:hover {
    background: rgba(107, 100, 117, 0.16);
    box-shadow: 0 0 0 0.5mm #6b6475;
  }
  .pk-hs.sel {
    background: rgba(31, 157, 99, 0.18);
    box-shadow:
      0 0 0 0.7mm #1f9d63,
      0 0 0 2mm rgba(31, 157, 99, 0.22);
  }
  .pk-hs.let.sel {
    background: rgba(230, 167, 0, 0.2);
    box-shadow:
      0 0 0 0.7mm #e6a700,
      0 0 0 2mm rgba(230, 167, 0, 0.25);
  }
  .pk-hs.af.sel {
    background: rgba(107, 100, 117, 0.18);
    box-shadow:
      0 0 0 0.7mm #6b6475,
      0 0 0 2mm rgba(107, 100, 117, 0.22);
  }
  .pk-hs.dim {
    opacity: 0;
    pointer-events: none;
  }
  .pk-map.filt::after,
  .pk-tip {
    position: absolute;
    pointer-events: none;
  }
  .pk-map.filt::after {
    content: "";
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
  }
  .pk-map.filt .pk-hs {
    z-index: 1;
  }
  .pk-tip {
    z-index: 5;
    background: #1d1726;
    color: #fff;
    font-size: 7.6pt;
    font-weight: 650;
    line-height: 1.3;
    padding: 1.3mm 2.2mm;
    border-radius: 1.5mm;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    margin-top: -2mm;
    opacity: 0;
    transition: opacity 0.1s;
  }
  .pk-tip.on {
    opacity: 1;
  }
  .pk-info {
    position: absolute;
    z-index: 8;
    width: 76mm;
    background: #fff;
    border-radius: 3mm;
    padding: 4.2mm 4.4mm 3.6mm;
    box-shadow:
      0 0.4mm 1.2mm rgba(40, 20, 80, 0.14),
      0 4mm 12mm rgba(40, 20, 80, 0.3);
    display: none;
    line-height: 1.45;
  }
  .pk-info.on {
    display: block;
    animation: pkpop 0.16s ease-out;
  }
  .pk-foot button,
  .pk-x {
    border-radius: 1.5mm;
    color: #4b1b84;
    font-size: 10.2pt;
    line-height: 1;
    cursor: pointer;
  }
  .pk-x {
    position: absolute;
    right: 2.6mm;
    top: 2.6mm;
    width: 6.4mm;
    height: 6.4mm;
    border: 0;
    background: #f4eefb;
  }
  .pk-pill {
    display: inline-flex;
    align-items: center;
    gap: 1.6mm;
    border-radius: 6mm;
    padding: 1.1mm 2.6mm 1.1mm 2mm;
    font-size: 7.6pt;
    font-weight: 700;
    background: #e3f5ec;
    color: #0f5c39;
  }
  .pk-pill.let {
    background: #fff5d1;
    color: #6b5200;
  }
  .pk-pill.af {
    background: #eeecf1;
    color: #3b3547;
  }
  .pk-dot {
    width: 2.2mm;
    height: 2.2mm;
    border-radius: 50%;
    background: #1f9d63;
    display: inline-block;
    flex: none;
  }
  .pk-dot.let {
    background: #e6a700;
  }
  .pk-dot.af {
    background: #6b6475;
  }
  .pk-info h3 {
    font-size: 12pt;
    letter-spacing: -0.02em;
    color: #1d1726;
    margin: 2.2mm 0 0.4mm;
    line-height: 1.2;
  }
  .pk-blk b,
  .pk-foot span,
  .pk-where {
    font-size: 7.6pt;
    color: #7d7689;
  }
  .pk-where {
    margin-bottom: 2mm;
  }
  .pk-want h3,
  .pk-want p,
  .pk-what {
    font-size: 8.6pt;
    color: #1d1726;
    margin: 0 0 2.4mm;
  }
  .pk-blk {
    background: #f8f5fc;
    border-radius: 3mm;
    padding: 2.2mm 2.8mm;
    margin-bottom: 1.8mm;
    font-size: 8.6pt;
    color: #3b3547;
  }
  .pk-blk b {
    display: block;
    font-size: 6.8pt;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.4mm;
  }
  .pk-blk.let {
    background: #fff5d1;
    color: #6b5200;
  }
  .pk-blk.let b {
    color: #8a6d00;
  }
  .pk-blk.af {
    background: #eeecf1;
    color: #3b3547;
  }
  .pk-blk.af b {
    color: #6b6475;
  }
  .pk-foot,
  .pk-leg {
    display: flex;
    align-items: center;
    gap: 1.8mm;
    margin-top: 2.8mm;
  }
  .pk-foot button {
    border: 0.35mm solid #e7daf6;
    background: #fff;
    width: 7mm;
    height: 7mm;
    padding: 0;
  }
  .pk-foot button:hover {
    border-color: #6a29ae;
  }
  .pk-foot span {
    white-space: nowrap;
  }
  .pk-foot a {
    font-size: 7.6pt;
    text-align: right;
    line-height: 1.25;
  }
  .pk-leg {
    flex-wrap: wrap;
    gap: 1.6mm 2mm;
    margin-top: 3mm;
    font-size: 7.6pt;
    color: #3b3547;
  }
  .pk-leg b {
    color: #1d1726;
    margin-right: 1.4mm;
  }
  .pk-leg button,
  .pk-tasks button {
    align-items: center;
    font: inherit;
    font-weight: 650;
    color: #1d1726;
    cursor: pointer;
  }
  .pk-leg button {
    display: inline-flex;
    gap: 1.6mm;
    border: 0.35mm solid #e7daf6;
    background: #fff;
    border-radius: 6mm;
    padding: 1mm 2.8mm 1mm 2.2mm;
  }
  .pk-leg button.on {
    background: #1d1726;
    border-color: #1d1726;
    color: #fff;
  }
  .pk-foot a,
  .pk-leg a,
  .pk-tasks button::after {
    margin-left: auto;
    font-weight: 650;
    color: #6a29ae;
  }
  .pk-want {
    margin-top: 4.4mm;
  }
  .pk-want h3 {
    font-size: 12pt;
    letter-spacing: -0.02em;
    margin: 0 0 0.6mm;
  }
  .pk-want p {
    color: #7d7689;
  }
  .pk-tasks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5mm 2.4mm;
  }
  .pk-tasks button {
    display: flex;
    gap: 2.4mm;
    text-align: left;
    font-size: 8.6pt;
    background: #f9f6fc;
    border: 0.35mm solid #ece2f8;
    border-radius: 3mm;
    padding: 1.7mm 3mm;
    transition:
      border-color 0.12s,
      background 0.12s;
  }
  .pk-tasks button:hover {
    border-color: #6a29ae;
    background: #fff;
  }
  .pk-tasks button::after {
    content: "→";
    font-weight: 700;
  }
  .pk-hs.pulse {
    animation: pkpu 1s 2;
  }
}