:root {
      --bg: #07111f;
      --bg-soft: #0f172a;
      --card: rgba(255, 255, 255, 0.075);
      --card-strong: rgba(255, 255, 255, 0.12);
      --line: rgba(255, 255, 255, 0.16);
      --text: #f8fafc;
      --muted: #a8b3c7;
      --muted-2: #d6ddea;
      --accent: #f59e0b;
      --accent-2: #22c55e;
      --accent-3: #38bdf8;
      --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
      --radius-xl: 32px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --max: 1180px;
      --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font);
      color: var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(56, 189, 248, 0.26), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(245, 158, 11, 0.22), transparent 25%),
        radial-gradient(circle at 50% 90%, rgba(34, 197, 94, 0.16), transparent 30%),
        linear-gradient(135deg, #050a13 0%, var(--bg) 42%, #101827 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 75%);
      z-index: -2;
    }

    body::after {
      content: "";
      position: fixed;
      width: 460px;
      height: 460px;
      right: -190px;
      top: 150px;
      border-radius: 50%;
      background: rgba(56, 189, 248, .13);
      filter: blur(70px);
      pointer-events: none;
      z-index: -1;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .wrap {
      width: min(var(--max), calc(100% - 36px));
      margin-inline: auto;
    }

    .nav {
      position: sticky;
      top: 14px;
      z-index: 20;
      margin: 14px auto 0;
      width: min(var(--max), calc(100% - 28px));
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(7, 17, 31, 0.72);
      backdrop-filter: blur(22px);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 72px;
      padding: 0 18px 0 20px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      letter-spacing: -.04em;
    }

    .brand-logo-wrap {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .26);
      overflow: hidden;
      flex: 0 0 auto;
    }

    .brand-logo {
      width: 92%;
      height: 92%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 8px 18px rgba(34, 197, 94, .18));
    }

    .brand-text {
      display: grid;
      gap: 2px;
      line-height: 1;
    }

    .brand-text strong {
      font-size: 1.08rem;
      font-weight: 900;
    }

    .brand-text small {
      color: var(--muted);
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--muted-2);
      font-size: .95rem;
    }

    .nav-links a {
      padding: 10px 13px;
      border-radius: 999px;
      transition: background .2s ease, color .2s ease;
    }

    .nav-links a:hover {
      background: rgba(255, 255, 255, .09);
      color: #fff;
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      border-radius: 999px;
      background: #fff;
      color: #07111f;
      font-weight: 800;
      box-shadow: 0 14px 28px rgba(255,255,255,.12);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 38px rgba(255,255,255,.18);
    }

    .hero {
      position: relative;
      padding: 112px 0 70px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, .78fr);
      gap: 44px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      padding: 9px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.07);
      color: var(--muted-2);
      font-weight: 750;
      font-size: .9rem;
      backdrop-filter: blur(18px);
    }

    .pulse {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--accent-2);
      box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
      animation: pulse 1.8s infinite;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
      70% { box-shadow: 0 0 0 11px rgba(34, 197, 94, 0); }
      100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    }

    h1 {
      margin: 0;
      max-width: 780px;
      font-size: clamp(3.2rem, 8vw, 7rem);
      line-height: .88;
      letter-spacing: -.075em;
      font-weight: 950;
    }

    .gradient-text {
      display: inline-block;
      background: linear-gradient(90deg, #fff 0%, #f8d07a 42%, #7dd3fc 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-lead {
      max-width: 650px;
      margin: 28px 0 0;
      color: var(--muted-2);
      font-size: clamp(1.08rem, 2vw, 1.35rem);
      line-height: 1.65;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 850;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
      cursor: pointer;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent), #facc15);
      color: #111827;
      box-shadow: 0 20px 42px rgba(245, 158, 11, .26);
    }

    .btn-secondary {
      background: rgba(255,255,255,.08);
      border-color: var(--line);
      color: #fff;
      backdrop-filter: blur(18px);
    }

    .btn:hover {
      transform: translateY(-3px);
    }

    .hero-card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.065));
      box-shadow: var(--shadow);
      backdrop-filter: blur(22px);
    }

    .hero-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      background:
        radial-gradient(circle at 22% 16%, rgba(245, 158, 11, .28), transparent 27%),
        radial-gradient(circle at 82% 12%, rgba(56, 189, 248, .24), transparent 24%);
      pointer-events: none;
    }

    .map-card {
      position: relative;
      padding: 22px;
    }

    .mini-map {
      position: relative;
      min-height: 380px;
      border-radius: 26px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
        #111827;
    }

    .street {
      position: absolute;
      height: 18px;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }

    .s1 { width: 88%; left: 6%; top: 38%; transform: rotate(-16deg); }
    .s2 { width: 72%; left: 20%; top: 59%; transform: rotate(17deg); }
    .s3 { width: 64%; left: 7%; top: 72%; transform: rotate(-5deg); }
    .s4 { width: 55%; left: 36%; top: 25%; transform: rotate(34deg); }
    .s5 { width: 50%; left: -4%; top: 21%; transform: rotate(50deg); }

    .pin {
      position: absolute;
      display: grid;
      place-items: center;
      width: 54px;
      height: 54px;
      border-radius: 20px;
      background: rgba(255,255,255,.9);
      color: #0f172a;
      font-weight: 950;
      box-shadow: 0 20px 42px rgba(0,0,0,.28);
    }

    .pin-main {
      left: 48%;
      top: 40%;
      transform: translate(-50%, -50%);
      background: linear-gradient(135deg, #f59e0b, #facc15);
    }

    .pin-small {
      width: 38px;
      height: 38px;
      border-radius: 15px;
      font-size: .82rem;
      opacity: .9;
    }

    .p1 { left: 18%; top: 62%; }
    .p2 { left: 72%; top: 26%; }
    .p3 { left: 76%; top: 68%; }

    .card-bottom {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      display: grid;
      gap: 10px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 22px;
      background: rgba(7, 17, 31, .66);
      backdrop-filter: blur(18px);
    }

    .card-bottom strong {
      font-size: 1.05rem;
    }

    .card-bottom span {
      color: var(--muted);
      line-height: 1.45;
      font-size: .95rem;
    }

    .logo-glow {
      position: absolute;
      inset: 32px 32px auto 32px;
      min-height: 210px;
      display: grid;
      place-items: center;
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,.16);
      background:
        radial-gradient(circle at 50% 28%, rgba(255,255,255,.14), rgba(255,255,255,.03) 50%),
        linear-gradient(135deg, rgba(6,14,26,.95), rgba(15,23,42,.82));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 42px rgba(0,0,0,.24);
      overflow: hidden;
    }

    .logo-glow::before {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(52, 211, 153, .17);
      filter: blur(28px);
      top: 28px;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .hero-logo {
      position: relative;
      z-index: 1;
      width: min(78%, 270px);
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 18px 40px rgba(45, 212, 191, .22));
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 34px;
      max-width: 660px;
    }

    .stat {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.065);
      backdrop-filter: blur(16px);
    }

    .stat strong {
      display: block;
      margin-bottom: 6px;
      font-size: 1.55rem;
      letter-spacing: -.04em;
    }

    .stat span {
      color: var(--muted);
      font-size: .92rem;
      line-height: 1.4;
    }

    section {
      padding: 64px 0;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 24px;
    }

    .section-kicker {
      margin: 0 0 10px;
      color: var(--accent);
      font-size: .85rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 900;
    }

    h2 {
      margin: 0;
      max-width: 760px;
      font-size: clamp(2.1rem, 4.2vw, 4.05rem);
      line-height: .98;
      letter-spacing: -.06em;
    }

    .section-copy {
      max-width: 420px;
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .feature {
      position: relative;
      overflow: hidden;
      min-height: 240px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.065);
      backdrop-filter: blur(18px);
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }

    .feature:hover {
      transform: translateY(-6px);
      background: rgba(255,255,255,.105);
      border-color: rgba(255,255,255,.25);
    }

    .feature::after {
      content: "";
      position: absolute;
      width: 160px;
      height: 160px;
      right: -70px;
      top: -70px;
      border-radius: 50%;
      background: rgba(245, 158, 11, .16);
      filter: blur(8px);
    }

    .feature:nth-child(2)::after { background: rgba(56, 189, 248, .16); }
    .feature:nth-child(3)::after { background: rgba(34, 197, 94, .14); }
    .feature:nth-child(4)::after { background: rgba(216, 180, 254, .14); }

    .feature-icon {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      margin-bottom: 48px;
      border-radius: 18px;
      background: rgba(255,255,255,.12);
      font-size: 1.35rem;
    }

    .feature h3 {
      position: relative;
      z-index: 1;
      margin: 0 0 10px;
      font-size: 1.18rem;
      letter-spacing: -.03em;
    }

    .feature p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
      font-size: .96rem;
    }

    .timeline {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      counter-reset: step;
    }

    .step {
      counter-increment: step;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
      backdrop-filter: blur(18px);
    }

    .step::before {
      content: "0" counter(step);
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      margin-bottom: 34px;
      border-radius: 15px;
      background: rgba(255,255,255,.11);
      color: var(--accent);
      font-weight: 950;
    }

    .step h3 {
      margin: 0 0 10px;
      font-size: 1.35rem;
      letter-spacing: -.035em;
    }

    .step p {
      margin: 0;
      color: var(--muted);
      line-height: 1.62;
    }

    .spotlight {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 16px;
      align-items: stretch;
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.07);
      box-shadow: var(--shadow);
      backdrop-filter: blur(20px);
      overflow: hidden;
    }

    .panel-pad {
      padding: clamp(24px, 4vw, 42px);
    }

    .panel h2 {
      font-size: clamp(2rem, 4vw, 3.4rem);
    }

    .panel p {
      color: var(--muted-2);
      line-height: 1.72;
      font-size: 1.06rem;
    }

    .launch-list {
      display: grid;
      gap: 12px;
      margin-top: 26px;
    }

    .launch-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 15px 16px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 18px;
      background: rgba(255,255,255,.055);
      color: var(--muted-2);
    }

    .launch-item strong {
      color: #fff;
    }

    .tag {
      flex: 0 0 auto;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(34, 197, 94, .13);
      color: #bbf7d0;
      font-size: .78rem;
      font-weight: 850;
    }

    .visual-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      min-height: 100%;
      padding: 16px;
    }

    .photo-tile {
      position: relative;
      overflow: hidden;
      min-height: 210px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.13);
      background:
        linear-gradient(135deg, rgba(245,158,11,.24), rgba(56,189,248,.10)),
        rgba(255,255,255,.065);
    }

    .photo-tile:nth-child(2) {
      transform: translateY(32px);
      background:
        linear-gradient(135deg, rgba(34,197,94,.22), rgba(56,189,248,.11)),
        rgba(255,255,255,.065);
    }

    .photo-tile:nth-child(3) {
      background:
        linear-gradient(135deg, rgba(216,180,254,.20), rgba(245,158,11,.11)),
        rgba(255,255,255,.065);
    }

    .photo-tile:nth-child(4) {
      transform: translateY(32px);
      background:
        linear-gradient(135deg, rgba(56,189,248,.22), rgba(34,197,94,.12)),
        rgba(255,255,255,.065);
    }

    .photo-tile::before {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 20px;
      border: 1px dashed rgba(255,255,255,.28);
    }

    .photo-tile span {
      position: absolute;
      left: 22px;
      bottom: 22px;
      right: 22px;
      font-weight: 900;
      letter-spacing: -.04em;
      font-size: 1.3rem;
    }

    .signup {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(245,158,11,.22), rgba(56,189,248,.11) 45%, rgba(34,197,94,.14)),
        rgba(255,255,255,.07);
      box-shadow: var(--shadow);
      backdrop-filter: blur(22px);
    }

    .signup::after {
      content: "Arendswijk";
      position: absolute;
      right: -28px;
      bottom: -34px;
      font-size: clamp(4rem, 12vw, 10rem);
      line-height: 1;
      font-weight: 950;
      letter-spacing: -.08em;
      color: rgba(255,255,255,.06);
      pointer-events: none;
    }

    .signup-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr .9fr;
      gap: 28px;
      align-items: center;
      padding: clamp(28px, 5vw, 54px);
    }

    .signup h2 {
      margin-bottom: 16px;
    }

    .signup p {
      max-width: 640px;
      margin: 0;
      color: var(--muted-2);
      line-height: 1.7;
      font-size: 1.06rem;
    }

    .form-card {
      padding: 16px;
      border: 1px solid rgba(255,255,255,.17);
      border-radius: 24px;
      background: rgba(7, 17, 31, .54);
      backdrop-filter: blur(18px);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
    }

    input {
      width: 100%;
      min-height: 56px;
      padding: 0 16px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: #fff;
      outline: none;
      font: inherit;
    }

    input::placeholder {
      color: rgba(214, 221, 234, .68);
    }

    input:focus {
      border-color: rgba(245, 158, 11, .75);
      box-shadow: 0 0 0 4px rgba(245, 158, 11, .13);
    }

    .note {
      margin: 12px 8px 0;
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.5;
    }

    footer {
      padding: 38px 0 46px;
      color: var(--muted);
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      border-top: 1px solid var(--line);
      padding-top: 24px;
      font-size: .94rem;
    }

    .footer-links {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 980px) {
      .hero-grid,
      .spotlight,
      .signup-inner {
        grid-template-columns: 1fr;
      }

      .features {
        grid-template-columns: repeat(2, 1fr);
      }

      .timeline,
      .stats {
        grid-template-columns: 1fr;
      }

      .section-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .photo-tile:nth-child(2),
      .photo-tile:nth-child(4) {
        transform: translateY(0);
      }
    }

    @media (max-width: 720px) {
      .wrap {
        width: min(100% - 24px, var(--max));
      }

      .nav {
        top: 8px;
        width: calc(100% - 16px);
        border-radius: 24px;
      }

      .nav-inner {
        min-height: auto;
        padding: 12px;
        align-items: flex-start;
        flex-direction: column;
      }

      .nav-links {
        width: 100%;
        overflow: auto;
        padding-bottom: 2px;
      }

      .nav-cta {
        width: 100%;
        justify-content: center;
      }

      .hero {
        padding-top: 62px;
      }

      h1 {
        font-size: clamp(3.1rem, 18vw, 5rem);
      }

      .hero-actions .btn {
        width: 100%;
      }

      .features,
      .visual-grid {
        grid-template-columns: 1fr;
      }

      .mini-map {
        min-height: 360px;
      }

      .logo-glow {
        inset: 16px 16px auto 16px;
        min-height: 190px;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .form-row .btn {
        width: 100%;
      }

      .footer-inner {
        flex-direction: column;
      }
    }


/* Homepage v2 */
.home-hero {
  padding-bottom: 42px;
}

.home-panel .card-bottom strong {
  color: #fff;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.quick-card {
  position: relative;
  overflow: hidden;
  min-height: 156px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.065);
  backdrop-filter: blur(18px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.quick-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -74px;
  top: -74px;
  border-radius: 50%;
  background: rgba(45, 212, 191, .15);
  filter: blur(8px);
}

.quick-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.105);
  border-color: rgba(255,255,255,.26);
}

.quick-card span,
.quick-card strong,
.quick-card small {
  position: relative;
  z-index: 1;
  display: block;
}

.quick-card span {
  font-size: 1.8rem;
  margin-bottom: 22px;
}

.quick-card strong {
  font-size: 1.25rem;
  letter-spacing: -.035em;
  margin-bottom: 6px;
}

.quick-card small {
  color: var(--muted);
  line-height: 1.4;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.news-card {
  min-height: 280px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045));
  backdrop-filter: blur(18px);
}

.news-meta {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 34px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(45, 212, 191, .13);
  color: #99f6e4;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.news-card h3 {
  margin: 0 0 10px;
  font-size: 1.42rem;
  letter-spacing: -.04em;
}

.news-card p {
  margin: 0 0 22px;
  color: var(--muted);
  line-height: 1.65;
}

.news-card a {
  color: #fff;
  font-weight: 850;
}

.agenda-list {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.agenda-item {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
}

.agenda-item time {
  display: grid;
  place-items: center;
  min-height: 58px;
  border-radius: 15px;
  background: rgba(255,255,255,.11);
  color: #99f6e4;
  font-size: .82rem;
  font-weight: 950;
}

.agenda-item strong,
.agenda-item span {
  display: block;
}

.agenda-item strong {
  margin-bottom: 4px;
  color: #fff;
}

.agenda-item span {
  color: var(--muted);
  line-height: 1.45;
  font-size: .94rem;
}

.compact-actions {
  margin-top: 26px;
}

.visual-grid-links a {
  display: block;
}

.idea-contact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(45,212,191,.18), rgba(56,189,248,.10) 45%, rgba(255,255,255,.06));
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.idea-contact h2 {
  margin-bottom: 16px;
}

.idea-contact p {
  max-width: 720px;
  margin: 0;
  color: var(--muted-2);
  line-height: 1.72;
  font-size: 1.06rem;
}

.idea-actions {
  display: grid;
  gap: 12px;
  min-width: 190px;
}

@media (max-width: 980px) {
  .quick-grid,
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .idea-contact {
    grid-template-columns: 1fr;
  }

  .idea-actions {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .quick-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .agenda-item {
    grid-template-columns: 1fr;
  }

  .agenda-item time {
    width: fit-content;
    min-height: auto;
    padding: 8px 12px;
  }

  .idea-actions .btn {
    width: 100%;
  }
}

.form-stack{display:grid;gap:12px}.alert{padding:14px 16px;border:1px solid rgba(52,211,153,.28);border-radius:18px;background:rgba(52,211,153,.10);color:#d1fae5}.code-hint{overflow:auto;padding:16px;border-radius:16px;background:rgba(0,0,0,.28);color:#d6ddea;border:1px solid rgba(255,255,255,.16)}textarea{min-height:140px;padding-top:14px;resize:vertical}.nav-links a.active{background:rgba(255,255,255,.09);color:#fff}.meta{color:var(--muted);line-height:1.5}

/* ================================================================
   ARENDWIJK FASE 6 — FLEXIBELE HOMEPAGE + SEIZOENSTHEMA'S
   ================================================================ */

:root {
  --season-a: rgba(56, 189, 248, .24);
  --season-b: rgba(245, 158, 11, .20);
  --season-c: rgba(34, 197, 94, .14);
}

body[class*="site-theme-"] {
  background:
    radial-gradient(circle at 14% 10%, var(--season-a), transparent 29%),
    radial-gradient(circle at 86% 17%, var(--season-b), transparent 27%),
    radial-gradient(circle at 50% 92%, var(--season-c), transparent 32%),
    linear-gradient(135deg, #050a13 0%, var(--bg) 44%, #101827 100%);
}

body.site-theme-default {
  --accent: #f59e0b;
  --accent-2: #22c55e;
  --accent-3: #38bdf8;
  --season-a: rgba(56, 189, 248, .24);
  --season-b: rgba(245, 158, 11, .20);
  --season-c: rgba(34, 197, 94, .14);
}

body.site-theme-lente {
  --accent: #f472b6;
  --accent-2: #22c55e;
  --accent-3: #7dd3fc;
  --season-a: rgba(244, 114, 182, .22);
  --season-b: rgba(34, 197, 94, .20);
  --season-c: rgba(125, 211, 252, .15);
}

body.site-theme-zomer {
  --accent: #facc15;
  --accent-2: #14b8a6;
  --accent-3: #38bdf8;
  --season-a: rgba(250, 204, 21, .24);
  --season-b: rgba(20, 184, 166, .20);
  --season-c: rgba(56, 189, 248, .17);
}

body.site-theme-herfst {
  --accent: #f97316;
  --accent-2: #a3e635;
  --accent-3: #fbbf24;
  --season-a: rgba(249, 115, 22, .25);
  --season-b: rgba(251, 191, 36, .19);
  --season-c: rgba(163, 230, 53, .12);
}

body.site-theme-winter {
  --accent: #bae6fd;
  --accent-2: #60a5fa;
  --accent-3: #e2e8f0;
  --season-a: rgba(96, 165, 250, .25);
  --season-b: rgba(226, 232, 240, .14);
  --season-c: rgba(186, 230, 253, .14);
}

body.site-theme-kerst {
  --accent: #f87171;
  --accent-2: #22c55e;
  --accent-3: #facc15;
  --season-a: rgba(248, 113, 113, .22);
  --season-b: rgba(34, 197, 94, .20);
  --season-c: rgba(250, 204, 21, .13);
}

body.site-theme-halloween {
  --accent: #fb923c;
  --accent-2: #a855f7;
  --accent-3: #facc15;
  --season-a: rgba(251, 146, 60, .25);
  --season-b: rgba(168, 85, 247, .20);
  --season-c: rgba(250, 204, 21, .10);
}

body.site-theme-valentijn {
  --accent: #fb7185;
  --accent-2: #f472b6;
  --accent-3: #c084fc;
  --season-a: rgba(251, 113, 133, .25);
  --season-b: rgba(244, 114, 182, .19);
  --season-c: rgba(192, 132, 252, .14);
}

body.site-theme-oktoberfest {
  --accent: #facc15;
  --accent-2: #60a5fa;
  --accent-3: #f8fafc;
  --season-a: rgba(96, 165, 250, .25);
  --season-b: rgba(250, 204, 21, .20);
  --season-c: rgba(255, 255, 255, .09);
}

body.site-theme-buurtfeest {
  --accent: #f59e0b;
  --accent-2: #2dd4bf;
  --accent-3: #f472b6;
  --season-a: rgba(45, 212, 191, .24);
  --season-b: rgba(244, 114, 182, .19);
  --season-c: rgba(245, 158, 11, .14);
}

/* Ontbrekende generieke componenten uit de eerste versie */
.grid-3,
.content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card,
.content-card,
.album-card {
  position: relative;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045));
  box-shadow: 0 18px 55px rgba(0,0,0,.16);
  backdrop-filter: blur(18px);
}

.card h3,
.content-card h3,
.album-card h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.card p,
.content-card p,
.album-card p {
  color: var(--muted);
  line-height: 1.62;
}

.date-pill {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .13);
  color: #d1fae5;
  font-size: .78rem;
  font-weight: 900;
}

select,
textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
  font: inherit;
}

select option {
  color: #111827;
  background: #fff;
}

select:focus,
textarea:focus {
  border-color: rgba(245, 158, 11, .75);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .13);
}

/* Aankondiging */
.home-announcement {
  padding: 18px 0 0;
}

.home-announcement-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(255,255,255,.055));
  box-shadow: 0 16px 45px rgba(0,0,0,.20);
}

.home-announcement-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: rgba(255,255,255,.10);
  font-size: 1.15rem;
}

.home-announcement-copy strong,
.home-announcement-copy span {
  display: block;
}

.home-announcement-copy span {
  margin-top: 3px;
  color: var(--muted-2);
  line-height: 1.45;
}

/* Nieuwe homepage hero — logo en tekst kunnen niet meer overlappen */
.flex-home-hero {
  padding: 82px 0 54px;
}

.flex-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.home-title {
  max-width: 820px;
  font-size: clamp(3.25rem, 7.4vw, 6.65rem);
  line-height: .94;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.home-title-line {
  display: block;
}

.home-brand-card {
  position: relative;
  display: grid;
  gap: 16px;
  min-height: 440px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: var(--shadow);
}

.home-brand-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 18%, rgba(245,158,11,.24), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(56,189,248,.22), transparent 26%);
  pointer-events: none;
}

.home-brand-visual,
.home-brand-copy {
  position: relative;
  z-index: 1;
}

.home-brand-visual {
  display: grid;
  place-items: center;
  min-height: 285px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 25px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.13), transparent 46%),
    rgba(4, 12, 23, .56);
}

.home-brand-logo {
  display: block;
  width: min(62%, 200px);
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(45,212,191,.20));
}

.home-brand-copy {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: rgba(7,17,31,.72);
}

.home-brand-copy strong,
.home-brand-copy span {
  display: block;
}

.home-brand-copy strong {
  margin-bottom: 7px;
  font-size: 1.08rem;
}

.home-brand-copy span {
  color: var(--muted);
  line-height: 1.5;
}

.home-section {
  padding: 54px 0;
}

.section-shell {
  border-radius: var(--radius-xl);
}

.quick-card-icon {
  font-size: 1.75rem;
  margin-bottom: 20px;
}

.empty-state {
  padding: 25px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted);
  background: rgba(255,255,255,.035);
}

/* Uitgelicht evenement */
.featured-event {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(56,189,248,.08)), rgba(255,255,255,.055);
  box-shadow: var(--shadow);
}

.featured-event-date {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 28px;
  border-right: 1px solid var(--line);
  text-align: center;
}

.featured-event-date strong,
.featured-event-date span {
  display: block;
}

.featured-event-date strong {
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.featured-event-date span {
  margin-top: 12px;
  color: var(--muted-2);
  font-weight: 800;
}

.featured-event-copy {
  align-self: center;
  padding: clamp(28px, 5vw, 52px);
}

.featured-event-copy h2 {
  margin-bottom: 18px;
}

.featured-event-copy p {
  color: var(--muted-2);
  line-height: 1.7;
  font-size: 1.06rem;
}

/* Fotoblokken op de homepage */
.home-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-photo-card {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  min-width: 0;
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(245,158,11,.20), rgba(56,189,248,.11)), rgba(255,255,255,.055);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  transform: translateZ(0);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* =========================================================
   SUBTIELE BEHEERLINK IN HEADER EN FOOTER
   ========================================================= */

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-key-link {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: rgba(214,221,234,.66);
  opacity: .58;
  line-height: 1;
  box-shadow: none;
  transition: opacity .2s ease, color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.admin-key-link svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-key-link:hover {
  opacity: 1;
  color: #fbbf24;
  border-color: rgba(251,191,36,.48);
  background: rgba(251,191,36,.09);
  transform: translateY(-2px);
}

.admin-key-link:focus-visible {
  opacity: 1;
  color: #fbbf24;
  outline: 3px solid rgba(251,191,36,.55);
  outline-offset: 3px;
}

.admin-key-link--footer {
  width: 34px;
  height: 34px;
  margin-top: 12px;
  opacity: .36;
}

.admin-key-link--footer svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 720px) {
  .nav-actions {
    width: 100%;
  }

  .nav-actions .nav-cta {
    flex: 1 1 auto;
    width: auto;
  }

  .admin-key-link--header {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-key-link {
    transition: none;
  }
}

.home-photo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 26px 58px rgba(0,0,0,.30);
}

.home-photo-card:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 4px;
}

.home-photo-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 18px;
  border: 1px dashed rgba(255,255,255,.24);
  border-radius: 18px;
  pointer-events: none;
}

.home-photo-card.has-cover::before {
  inset: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(4,12,23,.02) 20%, rgba(4,12,23,.35) 56%, rgba(4,12,23,.94) 100%);
}

.home-photo-card-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.001);
  transition: transform .45s ease, filter .3s ease;
}

.home-photo-card.has-cover:hover .home-photo-card-image {
  transform: scale(1.055);
  filter: saturate(1.06) contrast(1.03);
}

.home-photo-card-copy {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  min-width: 0;
}

.home-photo-card-copy strong,
.home-photo-card-copy span {
  display: block;
}

.home-photo-card-copy strong {
  font-size: 1.35rem;
  letter-spacing: -.04em;
  line-height: 1.12;
  text-shadow: 0 2px 16px rgba(0,0,0,.75);
}

.home-photo-card-copy span {
  margin-top: 6px;
  color: var(--muted-2);
  line-height: 1.45;
}

.home-photo-card.has-cover .home-photo-card-copy span {
  color: rgba(255,255,255,.82);
  text-shadow: 0 2px 12px rgba(0,0,0,.78);
}

@media (prefers-reduced-motion: reduce) {
  .home-photo-card,
  .home-photo-card-image {
    transition: none;
  }
}

/* Nieuwe veilige pagina-hero — voorkomt tekst over tekst */
.page-hero {
  padding: 78px 0 40px;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .65fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: end;
}

.page-title {
  max-width: 850px;
  font-size: clamp(3rem, 7vw, 6.2rem);
  line-height: .98;
  letter-spacing: -.07em;
  text-wrap: balance;
}

.page-hero-copy {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.055);
}

.page-hero-copy p {
  margin: 0;
  color: var(--muted-2);
  line-height: 1.65;
}

/* Fotopagina */
.gallery-page section {
  padding-top: 32px;
}

.gallery-category {
  margin-bottom: 48px;
}

.gallery-category-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .58fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 20px;
}

.gallery-category-head h2 {
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1;
}

.gallery-category-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.album-card {
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.album-card::after {
  content: "";
  position: absolute;
  right: -55px;
  top: -55px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(245,158,11,.16);
}

.album-card > * {
  position: relative;
  z-index: 1;
}

.album-card .tag {
  width: fit-content;
  margin-top: auto;
}

.album-count {
  margin: 8px 0 20px;
  color: var(--muted);
  font-size: .9rem;
}

/* Admin homepage editor */
.home-admin-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-admin-theme-option {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.055);
}

.home-admin-theme-option input {
  width: auto;
  min-height: auto;
  margin-right: 8px;
}

.home-admin-section-card {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}

@media (max-width: 980px) {
  .flex-home-grid,
  .page-hero-grid,
  .featured-event,
  .gallery-category-head {
    grid-template-columns: 1fr;
  }

  .home-brand-card {
    min-height: auto;
  }

  .featured-event-date {
    min-height: 210px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .grid-3,
  .content-grid,
  .gallery-grid,
  .home-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-admin-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .flex-home-hero {
    padding-top: 48px;
  }

  .home-title {
    font-size: clamp(3rem, 16vw, 4.9rem);
    line-height: .96;
  }

  .home-announcement-inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .home-announcement-inner .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .grid-3,
  .content-grid,
  .gallery-grid,
  .home-photo-grid,
  .home-admin-theme-grid {
    grid-template-columns: 1fr;
  }

  .page-title {
    font-size: clamp(2.8rem, 15vw, 4.7rem);
    line-height: 1;
  }

  .home-brand-visual {
    min-height: 220px;
  }

  .home-brand-logo {
    width: min(60%, 180px);
  }
}

/* ================================================================
   ARENDWIJK FASE 7 — SITE-INSTELLINGEN EN PAGINABEHEER
   ================================================================ */
.site-global-notice{padding:14px 0 0}.site-global-notice-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 17%,transparent),rgba(255,255,255,.055));box-shadow:0 14px 40px rgba(0,0,0,.18)}.site-global-notice strong,.site-global-notice span{display:block}.site-global-notice span{color:var(--muted-2);line-height:1.45}
.managed-page-section{padding:28px 0 74px}.managed-page-content{max-width:900px;padding:clamp(24px,5vw,52px);border:1px solid var(--line);border-radius:var(--radius-xl);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));box-shadow:0 22px 70px rgba(0,0,0,.18)}.managed-page-content p{margin:0 0 1.35em;color:var(--muted-2);font-size:1.06rem;line-height:1.82}.managed-page-content p:last-child{margin-bottom:0}.managed-page-content.compact{margin-top:20px;padding:18px;border-radius:18px}.managed-page-content.compact p{font-size:.96rem}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.72fr);gap:20px;align-items:start}.contact-detail-list{display:grid;gap:10px}.contact-detail-list>a,.contact-detail-list>div{display:block;padding:16px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.045)}.contact-detail-list strong,.contact-detail-list span{display:block}.contact-detail-list span{margin-top:5px;color:var(--muted-2);line-height:1.5}.site-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.footer-phase7{display:grid;grid-template-columns:minmax(240px,1fr) minmax(280px,1.1fr) auto;gap:28px;align-items:start}.footer-brand-line{display:flex;align-items:center;gap:12px}.footer-brand-line strong,.footer-brand-line span{display:block}.footer-brand-line span{margin-top:3px;color:var(--muted);font-size:.83rem}.footer-site-logo{width:46px;height:46px;padding:4px;object-fit:contain;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.06)}.footer-copy{color:var(--muted);font-size:.88rem}.footer-socials{display:grid;gap:8px}.footer-socials a{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted-2);text-align:center}
.settings-logo-layout{display:grid;grid-template-columns:minmax(220px,.45fr) minmax(0,1fr);gap:24px;align-items:start}.settings-logo-preview{display:grid;place-items:center;min-height:260px;padding:24px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.045)}.settings-logo-preview img{display:block;max-width:190px;max-height:190px;object-fit:contain}.settings-menu-list{display:grid;gap:10px}.settings-menu-row{display:grid;grid-template-columns:100px minmax(160px,1fr) 105px minmax(160px,.8fr);gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}.settings-menu-row label{color:var(--muted-2);font-weight:800}.settings-menu-row label input{width:auto;min-height:auto;margin-right:5px}.settings-menu-row code{overflow:auto;color:var(--muted);white-space:nowrap}.page-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.page-admin-grid .panel{height:100%}
@media(max-width:980px){.contact-layout,.footer-phase7,.settings-logo-layout{grid-template-columns:1fr}.settings-menu-row{grid-template-columns:90px minmax(0,1fr) 90px}.settings-menu-row code{grid-column:1/-1}}
@media(max-width:720px){.site-global-notice-inner{align-items:flex-start;flex-direction:column}.settings-menu-row,.page-admin-grid{grid-template-columns:1fr}.settings-menu-row code{grid-column:auto}.footer-phase7{gap:20px}}

/* ================================================================
   ARENDWIJK FASE 8 — AGENDADETAIL EN INSCHRIJVINGEN
   ================================================================ */
.agenda-list-section,.event-detail-section{padding:28px 0 76px}.agenda-event-grid{display:grid;gap:18px}.agenda-event-card{display:grid;grid-template-columns:150px minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-xl);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,transparent),rgba(255,255,255,.045));box-shadow:0 20px 65px rgba(0,0,0,.17)}.agenda-event-card.is-cancelled{opacity:.72}.agenda-event-date{display:grid;place-items:center;min-height:260px;padding:24px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--accent) 10%,transparent);text-align:center}.agenda-event-date strong,.agenda-event-date span{display:block}.agenda-event-date strong{font-size:clamp(3.2rem,7vw,5.9rem);line-height:.88;letter-spacing:-.08em}.agenda-event-date span{margin-top:12px;color:var(--muted-2);font-weight:900;text-transform:capitalize}.agenda-event-content{align-self:center;padding:clamp(24px,5vw,45px)}.agenda-event-content h2{margin:18px 0 12px;font-size:clamp(2rem,4vw,3.5rem);line-height:1}.agenda-event-content>p{max-width:820px;color:var(--muted-2);line-height:1.68}.agenda-event-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin:20px 0;color:var(--muted);font-size:.94rem}
.event-detail-hero{padding:78px 0 48px}.event-detail-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(310px,.62fr);gap:clamp(28px,6vw,76px);align-items:center}.event-facts-card,.event-registration-panel,.event-description{border:1px solid var(--line);border-radius:var(--radius-xl);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));box-shadow:0 22px 70px rgba(0,0,0,.18)}.event-facts-card{display:grid;gap:2px;padding:16px}.event-facts-card>div{padding:17px;border-radius:17px;background:rgba(255,255,255,.045)}.event-facts-card strong,.event-facts-card span,.event-facts-card a{display:block}.event-facts-card span,.event-facts-card a{margin-top:6px;color:var(--muted-2);line-height:1.5}.event-facts-card a{color:#fff;font-weight:800}.event-detail-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.68fr);gap:22px;align-items:start}.event-description,.event-registration-panel{padding:clamp(22px,4vw,36px)}.event-description .managed-page-content{max-width:none;margin-top:18px;padding:24px;box-shadow:none}.event-registration-panel{position:sticky;top:112px}.registration-capacity{display:grid;gap:3px;margin:16px 0;padding:16px;border:1px solid color-mix(in srgb,var(--accent-2) 30%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--accent-2) 8%,transparent)}.registration-capacity strong{font-size:1.35rem}.registration-capacity span,.registration-capacity small{color:var(--muted-2)}.privacy-check{display:flex;align-items:flex-start;gap:10px;color:var(--muted-2);line-height:1.5}.privacy-check input{width:auto;min-height:auto;margin-top:4px}.registration-cancel-link{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15)}.registration-cancel-link a{color:#fff;text-decoration:underline}.registration-manage-card{max-width:850px}.registration-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}.registration-summary-grid>div{padding:15px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.045)}.registration-summary-grid strong,.registration-summary-grid span{display:block}.registration-summary-grid span{margin-top:5px;color:var(--muted-2)}.registration-admin-card{margin-bottom:16px}.registration-admin-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.65fr);gap:20px;align-items:start}
@media(max-width:980px){.event-detail-hero-grid,.event-detail-layout,.registration-admin-head{grid-template-columns:1fr}.event-registration-panel{position:static}}
@media(max-width:720px){.agenda-event-card{grid-template-columns:1fr}.agenda-event-date{min-height:165px;border-right:0;border-bottom:1px solid var(--line)}.registration-summary-grid{grid-template-columns:1fr}}

/* ================================================================
   ARENDWIJK FASE 9 — E-MAIL EN NIEUWSBRIEF
   ================================================================ */

.footer-newsletter-link {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: #fff !important;
  font-weight: 900;
}

.newsletter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .7fr);
  gap: 20px;
  align-items: start;
}

.newsletter-benefits {
  display: grid;
  gap: 10px;
}

.newsletter-benefits > div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}

.newsletter-benefits strong,
.newsletter-benefits span {
  display: block;
}

.newsletter-benefits span {
  margin-top: 5px;
  color: var(--muted-2);
  line-height: 1.5;
}

.worker-url {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  color: #dbeafe;
  white-space: nowrap;
}

.subscriber-admin-card {
  margin-bottom: 16px;
}

.subscriber-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .62fr);
  gap: 20px;
  align-items: start;
}

.newsletter-code-help code {
  display: inline-flex;
  margin: 4px;
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
}

@media (max-width: 980px) {
  .newsletter-layout,
  .subscriber-admin-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   FOTOALBUM – RESPONSIEVE FOTOGALERIJ
   ========================================================= */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.photo-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.photo-card > a:first-child {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.photo-card > a:first-child img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.25s ease;
}

.photo-card > a:first-child:hover img {
  transform: scale(1.035);
}

.photo-card h3 {
  margin: 0;
  padding: 18px 20px 10px;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-card .admin-actions {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding: 0 20px 20px;
}

.photo-card .admin-actions .tag {
  max-width: 100%;
}

/* Tablet */
@media (max-width: 980px) {
  .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Smartphone */
@media (max-width: 640px) {
  .photo-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .photo-card > a:first-child {
    aspect-ratio: 4 / 3;
  }

.photo-card h3:empty {
  display: none;
}
}

/* ================================================================
   HOMEPAGE HERO MEDIA — carrousel voor logo's, beelden en video's
   FIX v1.1: behoudt de originele compacte hero-box
   ================================================================ */
.home-brand-visual {
  position: relative;
  overflow: hidden;
  /* Originele boxhoogte behouden: voorkomt een extreem hoge kaart. */
  min-height: 285px;
  height: 285px;
  padding: 12px;
}

.home-brand-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
}

.home-brand-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .7s ease, transform 1.15s ease;
  pointer-events: none;
}

.home-brand-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 1;
}

.home-brand-slide img,
.home-brand-slide video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 15px;
  object-position: center;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.24));
}

/* Volledig tonen: ideaal voor logo's en verticale video's. */
.home-brand-slide.fit-contain img,
.home-brand-slide.fit-contain video {
  object-fit: contain;
  padding: 4px;
}

/* Kader vullen: mag bewust een klein deel bijsnijden. */
.home-brand-slide.fit-cover img,
.home-brand-slide.fit-cover video {
  object-fit: cover;
  padding: 0;
}

.home-brand-media-dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transform: translateX(-50%);
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(3,8,15,.44);
  backdrop-filter: blur(8px);
}

.home-brand-media-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  cursor: pointer;
  transition: width .2s ease, background .2s ease, transform .2s ease;
}

.home-brand-media-dot:hover,
.home-brand-media-dot:focus-visible {
  transform: scale(1.18);
  outline: none;
  background: rgba(255,255,255,.82);
}

.home-brand-media-dot.is-active {
  width: 22px;
  background: var(--accent);
}

/* Tablet: kaart blijft compact, ook wanneer de hero onder elkaar komt. */
@media (max-width: 980px) {
  .home-brand-visual {
    min-height: 285px;
    height: 285px;
  }
}

/* Smartphone: zelfde principe als de oorspronkelijke site. */
@media (max-width: 720px) {
  .home-brand-visual {
    min-height: 220px;
    height: 220px;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-brand-slide {
    transition: none;
    transform: none;
  }
}