.main-container { 
     display: flex; 
     max-width: 1160px; 
     margin: 0 auto; 
     padding: 10px; 
     justify-content: space-between; 
     align-items: flex-start; 
     box-sizing: border-box;
     gap: 20px;
 }
 
 .content-area { flex: 1; max-width: 740px; box-sizing: border-box; }
 
 .sidebar-left, .sidebar-right { 
     width: 160px; 
     display: flex; 
     flex-direction: column; 
     align-items: center; 
     justify-content: flex-start;
     text-align: center;
     flex-shrink: 0;
 }
 
 .sidebar-left div, .sidebar-right div, 
 .sidebar-left table, .sidebar-right table,
 #addleft, #addright, .sidebar-right td {
     margin: 0 auto !important;
     text-align: center !important;
 }
 
 .sidebar-right table:first-of-type { margin-bottom: 10px !important; }
 
 h1 { color: #FFFFFF; font-size: 20px; text-align: center; margin-bottom: 15px; }
 
 .intro-box { 
     background-color: #F3ECD7; 
     border: 1px solid #ccc; 
     padding: 15px; 
     border-radius: 5px; 
     margin-bottom: 20px; 
     text-align: left !important; 
 }
 .intro-box, .intro-box strong, .intro-box div { color: #333333 !important; font-size: 13px; line-height: 1.5; }
 
 /* Het Kaartenraster */
 .cards-grid { 
     display: grid; 
     grid-template-columns: repeat(5, 1fr); 
     gap: 12px; 
     background-color: #F3ECD7; 
     padding: 15px; 
     border: 1px solid #ccc; 
     border-radius: 5px; 
     box-sizing: border-box;
 }
 
 .grid-full-width { grid-column: 1 / -1; text-align: center; padding: 5px 0; color: #333; }
 .grid-full-width div, .grid-full-width table { margin: 0 auto !important; }
 
 /* Modern Kaart-item (zonder radiobuttons) */
 .card-item { 
     text-align: center; 
     background: #fff; 
     padding: 10px; 
     border: 2px solid #fff;
     border-radius: 6px; 
     box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
     display: flex; 
     flex-direction: column; 
     justify-content: center; 
     align-items: center;
     box-sizing: border-box;
     cursor: pointer;
     transition: all 0.2s ease;
 }
 .card-item:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); border-color: #ccc; }
 .card-item img { display: block; margin: 0 auto 6px auto; border-radius: 3px; }
 .thumbtitle { font-size: 11px; font-weight: bold; color: #333 !important; line-height: 1.3; }
 
 /* Geselecteerde kaart-glow */
 .card-item.selected {
     border-color: #4A90E2 !important;
     background-color: #F4F8FF !important;
     box-shadow: 0 4px 10px rgba(74,144,226,0.3) !important;
 }
 
 /* Geoptimaliseerde In-page Popup (Modal) */
 .media-modal {
     display: none; 
     position: fixed; 
     z-index: 99999; 
     left: 0; top: 0; 
     width: 100%; height: 100%; 
     background-color: rgba(0,0,0,0.85); 
     justify-content: center; 
     align-items: center;
     backdrop-filter: blur(3px); 
 }
 .modal-content-box {
     position: relative; 
     background-color: #111; 
     border: 2px solid #F3ECD7;
     border-radius: 8px; 
     padding: 15px; 
     text-align: center; 
     box-sizing: border-box;
     box-shadow: 0 10px 30px rgba(0,0,0,0.5);
 }
 .modal-close-btn {
     position: absolute; 
     top: -40px; 
     right: 0; 
     color: #fff;
     font-size: 32px; 
     font-weight: bold; 
     cursor: pointer;
     transition: color 0.2s;
 }
 .modal-close-btn:hover { color: #ffcc00; }

 @media (max-width: 768px) {
     .modal-close-btn {
         top: 5px;
         right: 10px;
         background: rgba(0,0,0,0.5);
         width: 32px;
         height: 32px;
         line-height: 30px;
         border-radius: 50%;
         z-index: 10;
     }
 }