<!doctype html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Service niet beschikbaar | politie.nl</title>
    <meta
      name="description"
      content="De website van politie.nl is momenteel niet beschikbaar. Voor spoed bel 112, voor niet-spoed bel 0900-8844."
    />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <style>
      :root {
        --politie-blauw: #004682;
        --politie-grijs: #dfe8f0;
        --tekst-kleur: #333;
        --wit: #fff;
        --link-kleur: #004682;
        --focus-outline: #f9a61a;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      body {
        font-family: Arial, Helvetica, sans-serif;
        background-color: var(--wit);
        color: var(--tekst-kleur);
      }

      p {
        margin-top: 0.5rem;
        font-size: 1.125rem;
        color: var(--politie-blauw);
      }

      a {
        text-decoration: none;
        color: var(--link-kleur);
      }

      a:hover {
        text-decoration: underline !important;
      }

      p a {
        text-decoration: underline;
      }

      p a:hover {
        text-decoration: underline;
      }

      h2 {
        font-size: 1.5rem;
        color: var(--politie-blauw);
      }

      .container {
        max-width: 75rem;
        margin: 0 auto;
        padding: 3rem 1rem;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1rem;
      }

      /* Skip to main content link */
      .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--politie-blauw);
        color: var(--wit);
        padding: 8px;
        z-index: 100;
        transition: top 0.2s ease-in-out;
      }

      .skip-link:focus {
        top: 0;
      }

      /* Focus state for keyboard navigation */
      a:focus-visible,
      .contact-button:focus-visible,
      .contact-card:focus-visible {
        outline: 3px solid var(--focus-outline);
        outline-offset: 2px;
        text-decoration: none;
      }

      /* Header Layout */
      .page-header {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
      }

      .header-contact {
        color: var(--politie-blauw);
        font-size: 0.875rem;
        font-style: normal;
        text-align: left;
      }

      .header-contact span {
        display: block;
        margin-bottom: 0.25rem;
      }

      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .logo img {
        height: auto;
        display: block;
        min-width: 216px;
      }

      @media (min-width: 768px) {
        .page-header {
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: 2rem;
        }
      }

      /* Hero Section */
      .hero,
      .hero-error {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 50vh;
        background-color: var(--politie-blauw);
        background-image: url('./goedemorgen.jpg');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .hero-content,
      .hero-error-content {
        width: 100%;
        max-width: 480px;
        padding: 2.5rem;
        color: var(--wit);
        background: rgba(0, 70, 130, 0.95);
      }

      .hero-error-content {
        border-radius: 8px;
        grid-column: 2 / span 10;
      }

      .hero h1,
      .hero-error-title {
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 1rem;
        max-width: 500px;
        text-align: left;
      }

      .hero p,
      .hero-error-text {
        font-size: 1rem;
        max-width: 500px;
        color: var(--wit);
        text-align: left;
      }

      @media (min-width: 640px) {
        .hero h1,
        .hero-error-title {
          font-size: 2.25rem;
          line-height: 2.75rem;
        }
      }

      @media (min-width: 1024px) {
        .hero-error-content {
          grid-column: 2 / span 5;
        }
      }

      .content-col {
        grid-column: 2 / span 10;
      }

      @media (min-width: 1024px) {
        .content-col {
          grid-column: 3 / span 10;
        }
      }

      .content-col p {
        margin-top: 0.5rem;
      }

      /* Zebra Content Section */
      .zebra-content {
        background-color: var(--politie-grijs);
      }

      .zebra-content .container {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }

      .button-col {
        grid-column: 2 / span 10;
      }

      @media (min-width: 1024px) {
        .button-col {
          grid-column: 7 / span 4;
        }

        .button-col:nth-child(odd) {
          grid-column: 3 / span 4;
        }
      }

      .button-label,
      .online-contact-label {
        font-size: 1.1rem;
        font-weight: bold;
        color: var(--politie-blauw);
        margin-bottom: 1rem;
      }

      .online-contact-label {
        margin-top: 3rem;
      }

      .contact-button {
        display: flex;
        align-items: center;
        background-color: var(--politie-blauw);
        color: var(--wit);
        padding: 1rem;
        border-radius: 4px;
        font-size: 1rem;
        font-weight: bold;
        gap: 0.75rem;
        text-align: left;
        min-width: 220px;
        position: relative;
      }

      .contact-button:hover {
        text-decoration: none;
        background-color: #003366;
      }

      .contact-button:focus-visible::after {
        content: '';
        position: absolute;
        inset: -4px;
        border: 2px solid var(--focus-outline);
        border-radius: 6px;
      }

      .contact-card {
        background-color: var(--wit);
        padding: 1.5rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        text-align: left;
        height: 100%; /* Make cards in a row equal height */
      }

      .contact-card:hover {
        text-decoration: none;
        border-color: var(--politie-blauw);
      }

      .contact-card-header {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
      }

      .contact-card h3 {
        color: var(--politie-blauw);
        font-size: 1.125rem;
      }

      .contact-card p {
        padding-left: 2.5rem; /* 24px icon + 1rem gap */
        line-height: 1.4;
      }

      /* Icons */
      .icon {
        width: 24px;
        height: 24px;
        background-color: var(--wit);
        -webkit-mask-size: cover;
        mask-size: cover;
        flex-shrink: 0; /* Prevent icon from shrinking */
      }

      .contact-card .icon {
        background-color: var(--politie-blauw);
      }

      .icon-phone {
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.07 21 3 13.93 3 5c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.46.57 3.58.13.33.05.71-.24 1.01l-2.2 2.2z"/></svg>')
          no-repeat center;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.07 21 3 13.93 3 5c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.46.57 3.58.13.33.05.71-.24 1.01l-2.2 2.2z"/></svg>')
          no-repeat center;
      }

      .icon-computer {
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 3.38v12.75h18V3.38zm16.5 11.25h-15V4.88h15zM14.62 16.88H9.38l-.57 2.24H7.12v1.5h9.76v-1.5h-1.69z"/><path d="m14.52 10.65 1.31 2.25.98-.56-1.31-2.25 1.72-.38-4.57-3.41.67 5.66z"/></g></svg>')
          no-repeat center;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 3.38v12.75h18V3.38zm16.5 11.25h-15V4.88h15zM14.62 16.88H9.38l-.57 2.24H7.12v1.5h9.76v-1.5h-1.69z"/><path d="m14.52 10.65 1.31 2.25.98-.56-1.31-2.25 1.72-.38-4.57-3.41.67 5.66z"/></g></svg>')
          no-repeat center;
      }

      .icon-external-link {
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3zm5 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2z"/></svg>')
          no-repeat center;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3zm5 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2z"/></svg>')
          no-repeat center;
      }

      /* Post Contact Section */
      .post-contact-section .container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 2rem;
      }

      .social-section {
        grid-column: 2 / span 5;
      }

      .contact-section {
        grid-column: 7 / span 5; /* Adjusted span to align better */
      }

      .social-links {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 3rem;
      }

      @media (min-width: 768px) {
        .social-links {
          justify-content: flex-end;
        }
      }

      .social-links a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        font-weight: bold;
        color: var(--politie-blauw);
        width: 150px;
      }

      .social-links img {
        width: 32px;
        height: 32px;
      }

      .footer-contact-numbers {
        text-align: left;
        font-style: normal;
      }

      .footer-contact-numbers .number-112,
      .footer-contact-numbers .number-0900 {
        display: block;
        text-decoration: none;
        color: var(--politie-blauw);
      }

      .footer-contact-numbers .number-112 {
        font-size: 2.5rem;
        font-weight: bold;
        line-height: 1;
      }

      .footer-contact-numbers .number-0900 {
        font-size: 1.75rem;
        font-weight: bold;
        margin-top: 0.5rem;
      }

      .footer-contact-numbers p {
        font-size: 0.875rem;
        color: var(--politie-blauw);
        margin-top: 0.25rem;
      }

      @media (max-width: 767px) {
        .post-contact-section .container {
          grid-template-columns: 1fr;
          gap: 3rem;
        }

        .social-section,
        .contact-section {
          grid-column: 1 / -1;
        }
      }

      /* Page Footer */
      .page-footer {
        background-color: var(--politie-blauw);
        color: var(--wit);
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        text-align: center;
      }

      .page-footer a {
        color: var(--wit);
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <a href="#main-content" class="skip-link">Ga naar de hoofdinhoud</a>
    <header class="page-header" role="banner">
      <address class="header-contact">
        <span>
          <strong>Bij spoed:</strong>
          <a href="tel:112" aria-label="Bel 112 voor spoed">112</a>
        </span>
        <span>
          <strong>Geen spoed:</strong>
          <a href="tel:0900-8844" aria-label="Bel 0900-8844 voor niet-spoed">
            0900-8844
          </a>
        </span>
      </address>
      <div class="logo">
        <a href="/" aria-label="Terug naar de startpagina">
          <img src="logo.svg" alt="Politie.nl logo" width="216" height="48" />
        </a>
      </div>
    </header>

    <main id="main-content" role="main">
      <section class="hero-error" role="alert" aria-labelledby="error-title">
        <div class="container">
          <div class="hero-error-content">
            <h1 id="error-title" class="hero-error-title">
              Wij ervaren momenteel problemen op politie.nl
            </h1>
            <p class="hero-error-text">
              We zijn druk met de oplossing om snel weer beschikbaar te zijn.
            </p>
          </div>
        </div>
      </section>

      <section role="region" aria-labelledby="contact-title">
        <div class="container">
          <div class="content-col">
            <h2 id="contact-title">Contact</h2>
            <p>
              Heeft u direct politie nodig bel
              <a
                href="tel:112"
                aria-label="Bel 112 voor spoed"
                class="emergency-link"
              >
                112
              </a>
            </p>
            <p>
              Geen spoed, wel politie? Bel dan
              <a
                href="tel:0900-8844"
                aria-label="Bel 0900-8844 voor niet-spoed"
                class="non-emergency-link"
              >
                0900-8844
              </a>
              !
            </p>
          </div>
        </div>
      </section>

      <section
        class="zebra-content"
        role="region"
        aria-labelledby="contact-options-title"
      >
        <div class="container">
          <div class="button-col">
            <h3 id="contact-options-title" class="button-label">Spoed</h3>
            <a
              href="tel:112"
              class="contact-button"
              aria-label="Bel nu 112 voor spoed"
            >
              <i class="icon icon-phone" aria-hidden="true"></i>
              <span>112</span>
            </a>
          </div>
          <div class="button-col">
            <h3 class="button-label">Bel met het meldpunt voor dierenleed</h3>
            <a
              href="tel:144"
              class="contact-button"
              aria-label="Bel nu 144, het meldpunt voor dierenleed"
            >
              <i class="icon icon-phone" aria-hidden="true"></i>
              <span>144</span>
            </a>
          </div>
          <div class="button-col">
            <h3 class="online-contact-label">Online contact</h3>
          </div>
          <div class="button-col"></div>
          <div class="button-col">
            <a
              href="https://www.tolkcontact.nl/tolkcontact-app/wat-kun-je-met-de-app/"
              class="contact-card"
              aria-label="Tolkcontact app: Bel met een gebarentolk naar 112 (opent in nieuw venster)"
              title="Tolkcontact app (opent in nieuw venster)"
              target="_blank"
              rel="noopener noreferrer"
            >
              <div class="contact-card-header">
                <i class="icon icon-external-link" aria-hidden="true"></i>
                <h3>Tolkcontact app</h3>
              </div>
              <p>Bel met een gebarentolk naar 112</p>
            </a>
          </div>
        </div>
      </section>
    </main>

    <footer role="contentinfo">
      <div class="container">
        <div class="social-section">
          <h2 class="sr-only">Sociale media</h2>
          <div class="social-links">
            <a
              href="https://www.facebook.com/politie/"
              aria-label="Volg de politie op Facebook (opent in nieuw venster)"
              title="Volg de politie op Facebook (opent in nieuw venster)"
              target="_blank"
              rel="noopener noreferrer"
              class="social-link"
            >
              <img
                src="./facebook.svg"
                alt="Facebook logo"
                width="32"
                height="32"
              />
              <span>Facebook</span>
            </a>
            <a
              href="https://x.com/Politie"
              aria-label="Volg de politie op X (opent in nieuw venster)"
              title="Volg de politie op X (opent in nieuw venster)"
              target="_blank"
              rel="noopener noreferrer"
            >
              <img src="./x.svg" alt="" width="32" height="32" />
              <span>X</span>
            </a>
            <a
              href="https://www.linkedin.com/company/2857644/"
              aria-label="Volg de politie op LinkedIn (opent in nieuw venster)"
              title="Volg de politie op LinkedIn (opent in nieuw venster)"
              target="_blank"
              rel="noopener noreferrer"
            >
              <img src="./linkedin.svg" alt="" width="32" height="32" />
              <span>LinkedIn</span>
            </a>
            <a
              href="https://www.youtube.com/user/politie"
              aria-label="Bekijk de politie op YouTube (opent in nieuw venster)"
              title="Volg de politie op YouTube (opent in nieuw venster)"
              target="_blank"
              rel="noopener noreferrer"
            >
              <img src="./youtube.svg" alt="" width="32" height="32" />
              <span>YouTube</span>
            </a>
            <a
              href="https://www.instagram.com/politie"
              aria-label="Volg de politie op Instagram (opent in nieuw venster)"
              title="Volg de politie op Instagram (opent in nieuw venster)"
              target="_blank"
              rel="noopener noreferrer"
            >
              <img src="./instagram.svg" alt="" width="32" height="32" />
              <span>Instagram</span>
            </a>
          </div>
        </div>
        <div class="contact-section">
          <address class="footer-contact-numbers">
            <a
              href="tel:112"
              class="number-112"
              aria-label="Bel 112 voor spoed"
            >
              112
            </a>
            <p>Als elke seconde telt</p>
            <a
              href="tel:0900-8844"
              class="number-0900"
              aria-label="Bel 0900-8844 voor niet-spoed"
            >
              0900 - 8844
            </a>
            <p>Geen spoed, wel politie</p>
          </address>
        </div>
      </div>
    </footer>
  </body>
</html>
