:root{
      --margin: 2.5vmin;          /* ruimte rondom het scherm */
      --radius: 28px;
      --shadow: 0 18px 40px rgba(0,0,0,.35);
      --pad: 5vmin;              /* padding binnenin */
    }

    html, body {
      height: 100%;
      margin: 0;
      background: #05060a;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      overflow: hidden;
    }

    /* Responsive stage met marge rondom */
    .stage-wrap{
      height: 100%;
      padding: var(--margin);
      box-sizing: border-box;
      display: grid;
      place-items: stretch;
    }
    .stage{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      background: radial-gradient(1200px 900px at 30% 25%, #1b2a6b 0%, #0b0f26 45%, #060714 100%);
    }

    /* Subtiele bewegende achtergrond “bubbles” */
    .bg{
      position:absolute; inset:0;
      opacity: .9;
      filter: saturate(1.1);
    }
    .bubble{
      position:absolute;
      border-radius:999px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0));
      mix-blend-mode: screen;
      animation: float 10s linear infinite;
    }
    @keyframes float{
      0%   { transform: translateY(30px) translateX(0px) scale(1); opacity:.45; }
      50%  { transform: translateY(-40px) translateX(18px) scale(1.08); opacity:.65; }
      100% { transform: translateY(30px) translateX(0px) scale(1); opacity:.45; }
    }

    /* Slide container */
    .slide{
      position:absolute; inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: var(--pad);
    }

    /* Panel (kaart) */
    .panel{
      width: 100%;
      height: 100%;
      display:flex;
      flex-direction:column;
      justify-content:center;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
      position: relative;
      overflow:hidden;
    }

    .panel::before{
      content:"";
      position:absolute; left:-20%; top:-40%;
      width: 140%; height: 70%;
      background: radial-gradient(closest-side, rgba(255,255,255,.20), rgba(255,255,255,0));
      transform: rotate(-8deg);
      pointer-events:none;
    }

    .content{
      position:relative;
      padding: clamp(26px, 3.6vmin, 54px);
      display:flex;
      flex-direction:column;
      gap: clamp(12px, 1.8vmin, 18px);
      height:100%;
      justify-content:center;
    }

.title {
    font-size: clamp(42px, 5.4vw, 48px);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .98);
    text-shadow: 0 10px 30px rgba(0, 0, 0, .45);
	margin: 5px 0 0 7%;
}
    .subtitle{
      font-size: clamp(22px, 2.7vw, 34px);
      color: rgba(255,255,255,.88);
      line-height: 1.25;
      font-weight: 650;
      text-shadow: 0 8px 22px rgba(0,0,0,.35);
	  margin: 5px 0 0 11%;
    }

	.meta {
    margin-top: 10px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    color: rgba(255, 255, 255, .85);
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 600;
    margin-left: 10%;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.16);
  margin-left: 7%;
}

	.meta {
    margin-top: 10px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    color: rgba(255, 255, 255, .85);
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 600;
    margin-left: 10%;
}
.pill {
    display: inline-flex
;
    align-items: center;
    gap: 10px;
    padding: 5px 22px;
    border-radius: 999px;
    background: rgb(0 0 0 / 28%);
    border: 1px solid rgba(255, 255, 255, .16);
    margin: 25px 0 0 10%;
}

    /* ✅ Afbeelding: nooit uitrekken */
    .hero-img{
      margin-top: 10px;
      display:grid;
      place-items:center;
    }
    .hero-img img{
      display:block;
      max-width: 100%;
      max-height: 48vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(0,0,0,.35);
    }

    /* Belangrijke data base (tabel styling) */
    .dates{
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 18px;
      overflow: hidden;
    }
    .dates table{
      width:100%;
      border-collapse: collapse;
      font-size: clamp(14px, 1.6vw, 20px);
      color: rgba(255,255,255,.92);
    }
.dates td {
    padding: 10px 14px;
    vertical-align: top;
    border: unset;
}
    .dates tr:first-child td{ border-top: none; }
    .dates td:first-child{
      width: 36%;
      font-weight: 900;
      color: rgba(255,255,255,.96);
      white-space: nowrap;
    }
    .dates td:last-child{
      font-weight: 650;
      color: rgba(255,255,255,.88);
    }

    /* ✅ Scrol-variant voor Belangrijke data */
    .dates-scroll{
      margin-top: 14px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 18px;
      overflow: hidden;
      max-height: 52vh; /* vensterhoogte */
    }
.dates-inner{
  /* Zorg dat de 2 tabellen echt onder elkaar staan */
  display: flex;
  flex-direction: column;

  /* Chrome-proof animatie (geen transform baseline) */
  animation-name: datesScroll;
  animation-duration: var(--datesDur, 60s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  will-change: transform;
  backface-visibility: hidden;
}

@keyframes datesScroll{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); } /* helft omhoog: 1x table doorlopen */
}

@media (prefers-reduced-motion: reduce){
  .dates-inner{ animation-duration: 120s !important; }
}


    /* Marquee / lichtkrant */
    .marquee-wrap{
      position:absolute; left:0; right:0; bottom:0;
      height: clamp(80px, 12vh, 120px);
      background: rgba(0,0,0,.35);
      border-top: 1px solid rgba(255,255,255,.12);
      display:flex;
      align-items:center;
      overflow:hidden;
    }
    .marquee{
      display:inline-flex;
      gap: 44px;
      padding-left: 100%;
   /*   white-space: nowrap; */
      font-size: clamp(28px, 4.2vw, 54px);
	  font-size: clamp(28px, 4.2vw, 44px);
      font-weight: 900;
      letter-spacing: .5px;
      color: rgba(255,255,255,.95);
      text-shadow: 0 10px 25px rgba(0,0,0,.55);
      animation: marquee 74s linear infinite; /* langzamer */
    }
    @keyframes marquee{
      0%   { transform: translateX(0); }
      100% { transform: translateX(-200%); }
    }

    /* Effect classes */
    .fx-fadeIn { animation: fadeIn 1.7s ease both; }
    .fx-zoomIn { animation: zoomIn 2.1s cubic-bezier(.2,.9,.2,1) both; }
    .fx-zoomOut{ animation: zoomOut 1.8s cubic-bezier(.2,.9,.2,1) both; }
    .fx-slideL { animation: slideL 1.8s cubic-bezier(.2,.9,.2,1) both; }
    .fx-slideU { animation: slideU 2.2s cubic-bezier(.2,.9,.2,1) both; }
    .fx-pop    { animation: pop 2.4s cubic-bezier(.16,1,.3,1) both; }

    @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
    @keyframes zoomIn{ from{opacity:0; transform:scale(.86)} to{opacity:1; transform:scale(1)} }
    @keyframes zoomOut{ from{opacity:0; transform:scale(1.12)} to{opacity:1; transform:scale(1)} }
    @keyframes slideL{ from{opacity:0; transform:translateX(70px)} to{opacity:1; transform:translateX(0)} }
    @keyframes slideU{ from{opacity:0; transform:translateY(60px)} to{opacity:1; transform:translateY(0)} }
    @keyframes pop{ 0%{opacity:0; transform:scale(.7)} 60%{opacity:1; transform:scale(1.04)} 100%{opacity:1; transform:scale(1)} }

    /* Themes */
    .theme-summer { background: radial-gradient(1200px 900px at 35% 25%, #ff8a00 0%, #7a1cff 45%, #061124 100%); }
    .theme-welcome{ background: radial-gradient(1200px 900px at 30% 25%, #00c6ff 0%, #0072ff 40%, #061124 100%); }
    .theme-weekend{ background: radial-gradient(1200px 900px at 30% 25%, #00e3ae 0%, #005c97 45%, #061124 100%); }
    .theme-info   { background: radial-gradient(1200px 900px at 30% 25%, #ffd166 0%, #ef476f 42%, #061124 100%); }
	.theme-music   { background: radial-gradient(1200px 900px at 30% 25%, #ffd166 0%, #333 42%, #999 100%); }
    .theme-demo   { background: radial-gradient(1200px 900px at 30% 25%, #b8f2e6 0%, #1f7a8c 45%, #061124 100%); }
    .theme-dates  { background: radial-gradient(1200px 900px at 30% 25%, #c7f9cc 0%, #22577a 45%, #061124 100%); }
	.theme-night{  background: radial-gradient(1200px 900px at 30% 25%, #1b1f3b 0%, #0b1026 45%, #040611 100%);}
.theme-learning{  background: radial-gradient(1200px 900px at 30% 25%, #9bf6ff 0%, #4361ee 45%, #061124 100%);}
.theme-exam{  background: radial-gradient(1200px 900px at 30% 25%, #ffd6a5 0%, #ff595e 42%, #061124 100%);}
.theme-calm{  background: radial-gradient(1200px 900px at 30% 25%, #d8f3dc 0%, #40916c 45%, #061124 100%);}
.theme-celebrate{  background: radial-gradient(1200px 900px at 30% 25%, #ffd166 0%, #ef476f 42%, #061124 100%);}
/* Vitesse: zwart/geel */
.theme-vitesse{  background:
    radial-gradient(1200px 900px at 25% 20%, rgb(49 49 49 / 68%) 0%, rgba(255, 221, 0, .25) 35%, rgba(0,0,0,0) 55%),
    radial-gradient(1200px 900px at 70% 30%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.92) 100%),
    linear-gradient(135deg, #0b0b0b 0%, #111111 45%, #050505 100%);
}



    /* Badges */
    .corner{
      position:absolute;
      top: 18px; right: 18px;
      display:flex;
      gap:10px;
      align-items:center;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.9);
      font-weight: 800;
      font-size: 18px;
      letter-spacing: .2px;
    }
    .corner i{ opacity:.9; }

    .clock{
      position:absolute;
      top: 18px; left: 18px;
      display:flex;
      gap:10px;
      align-items:center;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.9);
      font-weight: 800;
      font-size: 18px;
      letter-spacing: .2px;
    }

    /* Logo rechtsonder */
    .logo{
      position:absolute;
      right: 22px;
      bottom: 22px;
      width: 120px;
      height: auto;
      opacity: .95;
      filter: drop-shadow(0 12px 26px rgba(0,0,0,.35));
    }

    /* Pauze overlay */
    .pause-screen{
      position:absolute; inset:0;
      display:grid;
      place-items:center;
      background: rgba(0,0,0,.55);
      animation: fadeIn .35s ease both;
    }
    .pause-dot{
      width: 18px; height: 18px; border-radius: 999px;
      background: rgba(255,255,255,.75);
      box-shadow: 0 0 0 10px rgba(255,255,255,.10);
      animation: pulse 1.2s ease-in-out infinite;
    }
    @keyframes pulse{
      0%,100% { transform: scale(1); opacity: .75; }
      50%     { transform: scale(1.25); opacity: 1; }
    }
	
/* 🎵 Audio / waveform theme (geen externe afbeelding nodig) */
.theme-audio{
  /* donker + kleurrijke glow + waveform SVG overlay */
  background:
    radial-gradient(1100px 800px at 20% 25%, rgba(255, 210, 0, .20) 0%, rgba(255, 210, 0, 0) 55%),
    radial-gradient(1100px 800px at 80% 30%, rgba(0, 200, 255, .22) 0%, rgba(0, 200, 255, 0) 55%),
    linear-gradient(135deg, #05060a 0%, #0b1026 45%, #02030f 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23ffd200' stop-opacity='.35'/%3E%3Cstop offset='.5' stop-color='%23ffffff' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%2300c8ff' stop-opacity='.30'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='none'/%3E%3Cg opacity='.9'%3E%3Cpath d='M0 470 C120 420 200 520 320 470 C440 420 520 520 640 470 C760 420 840 520 960 470 C1080 420 1160 520 1280 470 C1400 420 1480 520 1600 470' fill='none' stroke='url(%23g)' stroke-width='10'/%3E%3Cpath d='M0 520 C120 470 200 570 320 520 C440 470 520 570 640 520 C760 470 840 570 960 520 C1080 470 1160 570 1280 520 C1400 470 1480 570 1600 520' fill='none' stroke='url(%23g)' stroke-width='6' opacity='.75'/%3E%3Cpath d='M0 420 C120 370 200 470 320 420 C440 370 520 470 640 420 C760 370 840 470 960 420 C1080 370 1160 470 1280 420 C1400 370 1480 470 1600 420' fill='none' stroke='url(%23g)' stroke-width='6' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}