/* AquariumKeuze.nl - Main Stylesheet */
/* Speelse oceaan-thema huisstijl */

/* ============================================
   BASE STYLES & RESET
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background: linear-gradient(to bottom right, #eff6ff, #cffafe, #ccfbf1);
    min-height: 100vh;
    color: #1f2937;
    line-height: 1.6;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 900;
    line-height: 1.2;
}

h1 { font-size: 3.75rem; margin-bottom: 1.5rem; }
h2 { font-size: 3rem; margin-bottom: 1.5rem; }
h3 { font-size: 2rem; margin-bottom: 1rem; }
p { font-size: 1.125rem; margin-bottom: 1rem; }

/* ============================================
   HEADER & NAVIGATION (STICKY)
   ============================================ */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 1.25rem 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

header.scrolled {
    padding: 0.75rem 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo:hover {
    transform: none !important;
}

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

.logo picture:hover {
    transform: none !important;
}

.logo-img {
    height: 100px;
    width: auto;
    max-width: 100%;
    display: block;
}

.logo-img:hover {
    transform: none !important;
}

header.scrolled .logo-img {
    height: 80px;
}

/* ============================================
   MEGA MENU NAVIGATION
   ============================================ */
nav.desktop-nav {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

nav.desktop-nav > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #374151;
    font-size: 0.95rem;
}

nav.desktop-nav > a:hover { background: #f3f4f6; }

nav.desktop-nav > a.active {
    background: linear-gradient(to right, #06b6d4, #2563eb);
    color: white;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

nav.desktop-nav svg { width: 1.25rem; height: 1.25rem; }

/* Menu Items with Dropdown */
.menu-item { position: relative; }

.menu-item > a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #374151;
    font-size: 0.95rem;
    cursor: pointer;
}

.menu-item > a:hover { background: #f3f4f6; }

.menu-item > a svg.arrow {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.3s ease;
}

.menu-item:hover > a svg.arrow { transform: rotate(180deg); }

/* Mega Menu Dropdown */
.mega-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 1.5rem;
    padding: 1.75rem;
    display: none;
    gap: 1.5rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    min-width: 580px;
    z-index: 1000;
}

.mega-menu::before {
    content: '';
    position: absolute;
    top: -0.75rem;
    left: 0;
    right: 0;
    height: 0.75rem;
    background: transparent;
}

.menu-item:hover .mega-menu { display: flex; }

/* Mega Menu Columns */
.mega-column { flex: 1; min-width: 150px; }

.mega-column h4 {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0891b2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0f2fe;
}

.mega-column a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    margin: 0.125rem 0;
    border-radius: 0.5rem;
    color: #374151;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.mega-column a:hover {
    background: linear-gradient(135deg, #ecfeff, #e0f2fe);
    color: #0891b2;
    transform: translateX(3px);
}

.mega-column a .emoji { font-size: 1.125rem; }

.mega-menu.wide { min-width: 700px; }

/* Featured Box in Mega Menu */
.mega-featured {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    border-radius: 1rem;
    padding: 1.25rem;
    color: white;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.mega-featured h4 {
    color: white;
    border-bottom-color: rgba(255,255,255,0.3);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.mega-featured p {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-bottom: 1rem;
    line-height: 1.5;
    flex-grow: 1;
}

.mega-featured .featured-btn {
    display: inline-block;
    background: white;
    color: #0891b2;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease;
}

.mega-featured .featured-btn:hover { transform: scale(1.05); background: white; }

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: #06b6d4;
    color: white;
    border: none;
    padding: 0.75rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-menu-btn:hover { background: #0891b2; }
.mobile-menu-btn svg { width: 1.5rem; height: 1.5rem; }

/* Mobile Navigation */
nav.mobile-nav {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    background: white;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100%;
    right: 1.5rem;
    margin-top: 0.5rem;
    min-width: 200px;
    z-index: 1000;
}

nav.mobile-nav.active { display: flex; }

nav.mobile-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #f3f4f6;
    color: #374151;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

nav.mobile-nav a:hover,
nav.mobile-nav a.active {
    background: linear-gradient(to right, #06b6d4, #2563eb);
    color: white;
}

nav.mobile-nav svg { width: 1.25rem; height: 1.25rem; }

.mobile-submenu-header {
    font-size: 0.75rem;
    font-weight: 800;
    color: #0891b2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1rem 0.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

.mobile-submenu-header:first-child {
    margin-top: 0;
    border-top: none;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
main {
    padding-top: 6rem;
    min-height: 100vh;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom right, #60a5fa, #22d3ee, #14b8a6);
    padding: 8rem 0 6rem;
    margin-top: -6rem;
    padding-top: 14rem;
}

.hero-bg { position: absolute; inset: 0; opacity: 0.1; }

.hero-bg-circle {
    position: absolute;
    background: white;
    border-radius: 50%;
    filter: blur(60px);
}

.hero-bg-circle-1 {
    top: 2.5rem; left: 2.5rem;
    width: 16rem; height: 16rem;
    animation: pulse 3s ease-in-out infinite;
}

.hero-bg-circle-2 {
    bottom: 2.5rem; right: 2.5rem;
    width: 24rem; height: 24rem;
    animation: pulse 3s ease-in-out infinite 1s;
}

@keyframes pulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.hero-emoji { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; }

.hero-emoji span {
    font-size: 4rem;
    animation: bounce 2s ease-in-out infinite;
}

.hero-emoji span:nth-child(2) { animation-delay: 0.2s; }
.hero-emoji span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.hero h1 {
    font-size: 4.5rem;
    color: white;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 48rem;
    margin: 0 auto 3rem;
    font-weight: 500;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    color: #0891b2;
    padding: 1.25rem 3rem;
    border-radius: 9999px;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.hero-cta:hover { background: #ecfeff; transform: scale(1.05); }
.hero-cta svg { width: 1.5rem; height: 1.5rem; }

.hero-bubbles {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    padding-bottom: 2rem;
    opacity: 0.4;
}

.bubble {
    width: 1rem; height: 1rem;
    background: white;
    border-radius: 50%;
    animation: bubble-float 2s ease-in-out infinite;
}

.bubble:nth-child(2) { animation-delay: 0.2s; }
.bubble:nth-child(3) { animation-delay: 0.4s; }
.bubble:nth-child(4) { animation-delay: 0.6s; }
.bubble:nth-child(5) { animation-delay: 0.8s; }
.bubble:nth-child(6) { animation-delay: 1s; }
.bubble:nth-child(7) { animation-delay: 1.2s; }
.bubble:nth-child(8) { animation-delay: 1.4s; }

@keyframes bubble-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* ============================================
   INTRO & CONTENT SECTIONS
   ============================================ */
.intro-section {
    padding: 5rem 0;
    background: linear-gradient(to bottom, #f9fafb, #ffffff);
}

.intro-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.intro-box {
    background: white;
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 2px solid #e5e7eb;
    position: relative;
    overflow: hidden;
}

.intro-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, #06b6d4, #3b82f6, #8b5cf6);
}

.intro-box h2 {
    font-size: 2.5rem;
    color: #1f2937;
    margin-bottom: 1.5rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}

.intro-lead {
    font-size: 1.25rem;
    color: #374151;
    margin-bottom: 2rem;
    line-height: 1.8;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.intro-text {
    font-size: 1.125rem;
    color: #4b5563;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.intro-box strong { color: #0891b2; font-weight: 800; }

.intro-footer {
    text-align: center;
    padding-top: 2rem;
    border-top: 2px solid #f3f4f6;
    margin-top: 2rem;
}

.intro-footer p { font-size: 1.125rem; color: #4b5563; margin: 0; }

.section { padding: 5rem 0; }

.section-header { text-align: center; margin-bottom: 4rem; }

.section-header h2 {
    font-size: 3rem;
    color: #1f2937;
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.25rem;
    color: #6b7280;
    max-width: 48rem;
    margin: 0 auto;
}

/* ============================================
   CATEGORY & FEATURE CARDS
   ============================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.category-card {
    position: relative;
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 4px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.category-card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.category-card .emoji { font-size: 4.5rem; margin-bottom: 1rem; display: block; }
.category-card:hover .emoji { animation: bounce 1s ease-in-out; }
.category-card h3 { font-size: 1.5rem; color: #1f2937; margin-bottom: 0.5rem; }

.category-card p {
    color: #0891b2;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
}

.category-card svg { width: 1.25rem; height: 1.25rem; }

/* Category Colors */
.category-zoetwater { border-color: #4ECDC4; }
.category-zoutwater { border-color: #FF6B6B; }
.category-plantenbak { border-color: #95E1D3; }
.category-nano { border-color: #F38181; }
.category-design { border-color: #AA96DA; }
.category-kinderen { border-color: #FCBAD3; }

/* Feature Section */
.feature-section {
    background: linear-gradient(to bottom right, #fb923c, #ec4899);
    padding: 5rem 0;
}

.feature-section h2 {
    color: white;
    text-align: center;
    margin-bottom: 4rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.feature-card:hover { transform: scale(1.05); }
.feature-card .emoji { font-size: 4rem; margin-bottom: 1rem; display: block; }
.feature-card h3 { font-size: 1.5rem; color: #1f2937; margin-bottom: 0.5rem; }
.feature-card p { color: #6b7280; font-weight: 500; margin: 0; }

/* CTA Section */
.cta-section { text-align: center; padding: 5rem 0; }
.cta-section h2 { font-size: 3rem; color: #1f2937; margin-bottom: 1.5rem; }
.cta-section p { font-size: 1.25rem; color: #6b7280; margin-bottom: 2.5rem; }

.cta-button {
    display: inline-block;
    background: linear-gradient(to right, #06b6d4, #2563eb);
    color: white;
    padding: 1.25rem 3rem;
    border-radius: 9999px;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3);
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(6, 182, 212, 0.4);
}

/* ============================================
   FOOTER
   ============================================ */
.main-footer {
    background: #111827;
    color: white;
    padding: 3rem 0;
}

.footer-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.footer-affiliate-box {
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 25px 30px;
    margin-bottom: 40px;
    border: 1px solid rgba(255,255,255,0.1);
}

.footer-affiliate-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-affiliate-icon { font-size: 2rem; }

.footer-affiliate-text { flex: 1; min-width: 280px; }

.footer-affiliate-text h3 {
    color: #38bdf8;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.footer-affiliate-text p {
    color: #94a3b8;
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

.footer-grid {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.footer-column h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 0.5rem; }
.footer-column ul li a { color: #9ca3af; text-decoration: none; transition: color 0.3s ease; }
.footer-column ul li a:hover { color: #22d3ee; }

.footer-partners {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #334155;
    text-align: center;
}

.footer-partners h3 {
    color: #38bdf8;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.footer-partners .partners-desc {
    color: #94a3b8;
    font-size: 0.9rem;
    max-width: 600px;
    margin: 0 auto 1rem;
    line-height: 1.6;
}

.footer-partners .partners-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    color: #64748b;
    font-size: 0.95rem;
}

.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 2rem;
    text-align: center;
    margin-top: 2rem;
}

.footer-bottom p { color: #9ca3af; font-size: 0.875rem; margin: 0; }

/* ============================================
   COOKIE BANNER
   ============================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
    padding: 1.5rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    z-index: 9999;
    display: none;
}

.cookie-banner.show {
    display: block;
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cookie-text { flex: 1; min-width: 280px; }
.cookie-text h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: #38bdf8; }
.cookie-text p { font-size: 0.95rem; color: #94a3b8; margin: 0; line-height: 1.6; }
.cookie-text a { color: #38bdf8; text-decoration: underline; }

.cookie-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

.cookie-btn {
    padding: 0.875rem 1.75rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.cookie-accept {
    background: linear-gradient(135deg, #06b6d4, #2563eb);
    color: white;
}

.cookie-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6,182,212,0.4);
}

.cookie-necessary {
    background: transparent;
    color: #94a3b8;
    border: 2px solid #475569;
}

.cookie-necessary:hover {
    border-color: #94a3b8;
    color: white;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    
    .intro-section { padding: 3rem 0; }
    .intro-box { padding: 2rem 1.5rem; border-radius: 1.5rem; }
    .intro-box h2 { font-size: 1.75rem; }
    .intro-lead { font-size: 1.125rem; }
    .intro-text { font-size: 1rem; }
    .intro-footer p { font-size: 1rem; }
    
    .desktop-nav { display: none !important; }
    .mobile-menu-btn { display: block; }
    .mega-menu { display: none !important; }
    
    .hero h1 { font-size: 2.5rem; }
    .hero p { font-size: 1.125rem; }
    .hero-emoji span { font-size: 3rem; }
    
    .category-grid,
    .feature-grid { grid-template-columns: 1fr; }
    .footer-grid { flex-direction: column; align-items: center; gap: 2rem; }
    
    .cookie-content { flex-direction: column; text-align: center; }
    .cookie-buttons { width: 100%; justify-content: center; }
    .cookie-btn { flex: 1; min-width: 140px; }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; }
    .section { padding: 3rem 0; }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

/* ============================================
   LANDING PAGE STYLES
   ============================================ */

/* Landing Hero - Base */
.landing-hero {
    padding: 10rem 0 4rem;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.landing-hero::before {
    position: absolute;
    font-size: 15rem;
    opacity: 0.1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.landing-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: 900;
    position: relative;
    z-index: 1;
}

.landing-hero .subtitle {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.landing-hero .count {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

/* Landing Hero Colors */
.landing-hero.cyan { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.landing-hero.cyan::before { content: '🔄'; }

.landing-hero.blue { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); }
.landing-hero.blue::before { content: '🐠'; }

.landing-hero.purple { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
.landing-hero.purple::before { content: '🐡'; }

.landing-hero.orange { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
.landing-hero.orange::before { content: '🦐'; }

.landing-hero.green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.landing-hero.green::before { content: '🌿'; }

.landing-hero.violet { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }
.landing-hero.violet::before { content: '✨'; }

.landing-hero.pink { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); }
.landing-hero.pink::before { content: '🎨'; }

/* CTA Buttons */
.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.cta-btn {
    display: inline-block;
    background: white;
    color: #0891b2;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.cta-btn-secondary {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 2px solid white;
}

.cta-btn-secondary:hover {
    background: rgba(255,255,255,0.3);
}

/* Content Section */
.content-section {
    padding: 5rem 0;
    background: linear-gradient(to bottom, #f0fdfa, #ffffff);
}

.content-section.cyan-bg { background: linear-gradient(to bottom, #ecfeff, #ffffff); }
.content-section.blue-bg { background: linear-gradient(to bottom, #eff6ff, #ffffff); }
.content-section.orange-bg { background: linear-gradient(to bottom, #fffbeb, #ffffff); }
.content-section.green-bg { background: linear-gradient(to bottom, #ecfdf5, #ffffff); }
.content-section.purple-bg { background: linear-gradient(to bottom, #f5f3ff, #ffffff); }
.content-section.pink-bg { background: linear-gradient(to bottom, #fdf2f8, #ffffff); }

.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Intro Box Landing */
.intro-box-landing {
    background: white;
    padding: 3rem;
    border-radius: 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    margin-bottom: 4rem;
    border-top: 6px solid #06b6d4;
}

.intro-box-landing.cyan { border-top-color: #06b6d4; }
.intro-box-landing.blue { border-top-color: #3b82f6; }
.intro-box-landing.orange { border-top-color: #f59e0b; }
.intro-box-landing.green { border-top-color: #10b981; }
.intro-box-landing.purple { border-top-color: #8b5cf6; }
.intro-box-landing.pink { border-top-color: #ec4899; }

.intro-box-landing h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #1f2937;
}

.intro-box-landing p {
    font-size: 1.125rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* FAQ Section */
.faq-section {
    margin-top: 4rem;
}

.faq-section h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    color: #1f2937;
}

.faq-section .faq-subtitle {
    text-align: center;
    font-size: 1.25rem;
    color: #6b7280;
    margin-bottom: 3rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.faq-item {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #06b6d4;
    transition: all 0.3s;
}

.faq-item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transform: translateX(5px);
}

.faq-item.cyan { border-left-color: #06b6d4; }
.faq-item.blue { border-left-color: #3b82f6; }
.faq-item.orange { border-left-color: #f59e0b; }
.faq-item.green { border-left-color: #10b981; }
.faq-item.purple { border-left-color: #8b5cf6; }
.faq-item.pink { border-left-color: #ec4899; }

.faq-question {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0891b2;
    margin-bottom: 1rem;
}

.faq-item.cyan .faq-question { color: #0891b2; }
.faq-item.blue .faq-question { color: #2563eb; }
.faq-item.orange .faq-question { color: #d97706; }
.faq-item.green .faq-question { color: #059669; }
.faq-item.purple .faq-question { color: #7c3aed; }
.faq-item.pink .faq-question { color: #db2777; }

.faq-answer {
    font-size: 1.125rem;
    color: #4b5563;
    line-height: 1.8;
}

.faq-answer ul,
.faq-answer ol {
    margin: 1rem 0 1rem 2rem;
}

.faq-answer li {
    margin-bottom: 0.5rem;
}

.faq-answer strong {
    color: #0891b2;
    font-weight: 700;
}

/* Info Boxes */
.highlight-box {
    background: linear-gradient(135deg, #ecfeff, #cffafe);
    padding: 1.5rem;
    border-radius: 1rem;
    margin: 1rem 0;
    border-left: 4px solid #06b6d4;
}

.highlight-box.cyan { background: linear-gradient(135deg, #ecfeff, #cffafe); border-left-color: #06b6d4; }
.highlight-box.blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-left-color: #3b82f6; }
.highlight-box.orange { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-left-color: #f59e0b; }
.highlight-box.green { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-left-color: #10b981; }
.highlight-box.purple { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-left-color: #8b5cf6; }
.highlight-box.pink { background: linear-gradient(135deg, #fdf2f8, #fce7f3); border-left-color: #ec4899; }

.warning-box {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 1.5rem;
    border-radius: 1rem;
    margin: 1rem 0;
    border-left: 4px solid #f59e0b;
}

.danger-box {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    padding: 1.5rem;
    border-radius: 1rem;
    margin: 1rem 0;
    border-left: 4px solid #dc2626;
}

/* Comparison Table */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
}

.comparison-table th,
.comparison-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.comparison-table th {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    font-weight: 700;
}

.comparison-table tr:hover {
    background: #f0fdfa;
}

/* CTA Box */
.cta-box {
    text-align: center;
    margin-top: 4rem;
    padding: 3rem;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border-radius: 2rem;
    color: white;
}

.cta-box h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.cta-box p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

/* Page Hero (for info pages) */
.page-hero {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    padding: 10rem 0 3rem;
    text-align: center;
    color: white;
}

.page-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-content {
    padding: 4rem 0;
    background: #f8fafc;
}

.page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.content-box {
    background: white;
    border-radius: 1.5rem;
    padding: 3rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.content-box h2 {
    font-size: 1.75rem;
    color: #1f2937;
    margin: 2rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e5e7eb;
}

.content-box h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.content-box p {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.content-box ul {
    margin: 1rem 0 1rem 2rem;
    color: #4b5563;
}

.content-box li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.content-box a {
    color: #0891b2;
}

.update-date {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

/* 404 Error Page */
.error-section {
    padding: 10rem 0 6rem;
    text-align: center;
    background: linear-gradient(to bottom, #f8fafc, #ffffff);
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.error-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.error-emoji {
    font-size: 8rem;
    margin-bottom: 2rem;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.error-section h1 {
    font-size: 3rem;
    color: #1f2937;
    margin-bottom: 1rem;
}

.error-section p {
    font-size: 1.25rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.error-btn {
    display: inline-block;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.3s;
}

.error-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(6,182,212,0.3);
}

.quick-links {
    margin-top: 3rem;
}

.quick-links h3 {
    font-size: 1.25rem;
    color: #374151;
    margin-bottom: 1rem;
}

.quick-links a {
    display: inline-block;
    color: #0891b2;
    text-decoration: none;
    margin: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f1f5f9;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.3s;
}

.quick-links a:hover {
    background: #e0f2fe;
}

/* ============================================
   LANDING PAGE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .landing-hero h1 { font-size: 2.5rem; }
    .landing-hero .subtitle { font-size: 1.25rem; }
    .intro-box-landing h2,
    .faq-section h2 { font-size: 2rem; }
    .faq-question { font-size: 1.25rem; }
    .intro-box-landing,
    .faq-item,
    .content-box { padding: 1.5rem; }
    .cta-buttons { flex-direction: column; }
    .comparison-table { font-size: 0.8rem; }
    .comparison-table th,
    .comparison-table td { padding: 0.5rem; }
    .page-hero h1 { font-size: 2rem; }
    .error-emoji { font-size: 5rem; }
    .error-section h1 { font-size: 2rem; }
}

/* ============================================
   BLOG STYLES
   ============================================ */

/* Category Filter */
.category-filter {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    justify-content: center;
}

.category-tag {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #e5e7eb;
    background: white;
    color: #4b5563;
}

.category-tag:hover,
.category-tag.active {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: white;
    border-color: transparent;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.blog-card-image {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.blog-card-content {
    padding: 1.5rem;
}

.blog-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.blog-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: #1f2937;
}

.blog-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ONDERDELEN SECTIE & PLACEHOLDER BLOKKEN
   ============================================ */

/* Onderdelen Sectie */
.onderdelen-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #0891b2;
}

.onderdelen-section h3 {
    font-size: 1.75rem;
    color: #0891b2;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.onderdelen-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.onderdelen-section p:last-of-type {
    margin-bottom: 1.5rem;
}

/* Placeholder Box voor toekomstige affiliate content */
.placeholder-box {
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border: 2px dashed #0891b2;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    margin-top: 1.5rem;
}

.placeholder-box .placeholder-label {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0891b2;
    margin-bottom: 0.5rem;
}

.placeholder-box .placeholder-text {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-style: italic;
}

/* Responsive voor onderdelen sectie */
@media (max-width: 768px) {
    .onderdelen-section {
        padding: 1.5rem;
    }
    
    .onderdelen-section h3 {
        font-size: 1.5rem;
    }
    
    .placeholder-box {
        padding: 1.5rem;
    }
}

/* Onderdelen Overzicht Grid */
.onderdelen-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e0f2fe;
}

.onderdelen-overzicht h4 {
    font-size: 1.25rem;
    color: #0891b2;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.onderdelen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.onderdeel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.onderdeel-card:hover {
    border-color: #0891b2;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.15);
}

.onderdeel-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.onderdeel-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.onderdeel-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.onderdelen-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.onderdelen-footer a {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
}

.onderdelen-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor onderdelen grid */
@media (max-width: 768px) {
    .onderdelen-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .onderdeel-card {
        padding: 1rem 0.75rem;
    }
    
    .onderdeel-icon {
        font-size: 1.75rem;
    }
    
    .onderdeel-naam {
        font-size: 0.85rem;
    }
    
    .onderdeel-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .onderdelen-grid {
        grid-template-columns: 1fr;
    }
}

/* Algen Sectie */
.algen-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #059669;
}

.algen-section h3 {
    font-size: 1.75rem;
    color: #059669;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.algen-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.algen-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.algen-section a {
    color: #059669;
    font-weight: 600;
    text-decoration: none;
}

.algen-section a:hover {
    text-decoration: underline;
}

/* Responsive voor algen sectie */
@media (max-width: 768px) {
    .algen-section {
        padding: 1.5rem;
    }
    
    .algen-section h3 {
        font-size: 1.5rem;
    }
}

/* Algen Overzicht Grid */
.algen-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #d1fae5;
}

.algen-overzicht h4 {
    font-size: 1.25rem;
    color: #059669;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.algen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.algen-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.algen-card:hover {
    border-color: #059669;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.15);
}

.algen-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.algen-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.algen-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.algen-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.algen-footer a {
    color: #059669;
    font-weight: 600;
    text-decoration: none;
}

.algen-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor algen grid */
@media (max-width: 768px) {
    .algen-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .algen-card {
        padding: 1rem 0.75rem;
    }
    
    .algen-icon {
        font-size: 1.75rem;
    }
    
    .algen-naam {
        font-size: 0.85rem;
    }
    
    .algen-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .algen-grid {
        grid-template-columns: 1fr;
    }
}


/* Planten en Koralen Sectie */
.planten-koralen-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #10b981;
}

.planten-koralen-section h3 {
    font-size: 1.75rem;
    color: #10b981;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.planten-koralen-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.planten-koralen-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.planten-koralen-section a {
    color: #10b981;
    font-weight: 600;
    text-decoration: none;
}

.planten-koralen-section a:hover {
    text-decoration: underline;
}

/* Planten en Koralen Overzicht Grid */
.planten-koralen-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #d1fae5;
}

.planten-koralen-overzicht h4 {
    font-size: 1.25rem;
    color: #10b981;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.planten-koralen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.planten-koralen-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.planten-koralen-card:hover {
    border-color: #10b981;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
}

.planten-koralen-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.planten-koralen-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.planten-koralen-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.planten-koralen-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.planten-koralen-footer a {
    color: #10b981;
    font-weight: 600;
    text-decoration: none;
}

.planten-koralen-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor planten-koralen sectie */
@media (max-width: 768px) {
    .planten-koralen-section {
        padding: 1.5rem;
    }
    
    .planten-koralen-section h3 {
        font-size: 1.5rem;
    }
    
    .planten-koralen-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .planten-koralen-card {
        padding: 1rem 0.75rem;
    }
    
    .planten-koralen-icon {
        font-size: 1.75rem;
    }
    
    .planten-koralen-naam {
        font-size: 0.85rem;
    }
    
    .planten-koralen-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .planten-koralen-grid {
        grid-template-columns: 1fr;
    }
}

/* Pompen Sectie */
.pompen-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #0891b2;
}

.pompen-section h3 {
    font-size: 1.75rem;
    color: #0891b2;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.pompen-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.pompen-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.pompen-section a {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
}

.pompen-section a:hover {
    text-decoration: underline;
}

/* Pompen Overzicht Grid */
.pompen-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e0f2fe;
}

.pompen-overzicht h4 {
    font-size: 1.25rem;
    color: #0891b2;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.pompen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.pompen-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.pompen-card:hover {
    border-color: #0891b2;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.15);
}

.pompen-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.pompen-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.pompen-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.pompen-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.pompen-footer a {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
}

.pompen-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor pompen sectie */
@media (max-width: 768px) {
    .pompen-section {
        padding: 1.5rem;
    }
    
    .pompen-section h3 {
        font-size: 1.5rem;
    }
    
    .pompen-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pompen-card {
        padding: 1rem 0.75rem;
    }
    
    .pompen-icon {
        font-size: 1.75rem;
    }
    
    .pompen-naam {
        font-size: 0.85rem;
    }
    
    .pompen-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .pompen-grid {
        grid-template-columns: 1fr;
    }
}

/* Aquaria Sectie */
.aquaria-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #06b6d4;
}

.aquaria-section h3 {
    font-size: 1.75rem;
    color: #06b6d4;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.aquaria-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.aquaria-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.aquaria-section a {
    color: #06b6d4;
    font-weight: 600;
    text-decoration: none;
}

.aquaria-section a:hover {
    text-decoration: underline;
}

/* Responsive voor aquaria sectie */
@media (max-width: 768px) {
    .aquaria-section {
        padding: 1.5rem;
    }
    
    .aquaria-section h3 {
        font-size: 1.5rem;
    }
}

/* Aquaria Overzicht Grid */
.aquaria-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #cffafe;
}

.aquaria-overzicht h4 {
    font-size: 1.25rem;
    color: #06b6d4;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.aquaria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.aquaria-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.aquaria-card:hover {
    border-color: #06b6d4;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.15);
}

.aquaria-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.aquaria-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.aquaria-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.aquaria-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.aquaria-footer a {
    color: #06b6d4;
    font-weight: 600;
    text-decoration: none;
}

.aquaria-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor aquaria grid */
@media (max-width: 768px) {
    .aquaria-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .aquaria-card {
        padding: 1rem 0.75rem;
    }
    
    .aquaria-icon {
        font-size: 1.75rem;
    }
    
    .aquaria-naam {
        font-size: 0.85rem;
    }
    
    .aquaria-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .aquaria-grid {
        grid-template-columns: 1fr;
    }
}

/* Filters Sectie */
.filters-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #0891b2;
}

.filters-section h3 {
    font-size: 1.75rem;
    color: #0891b2;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.filters-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.filters-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.filters-section a {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
}

.filters-section a:hover {
    text-decoration: underline;
}

/* Filters Overzicht Grid */
.filters-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e0f2fe;
}

.filters-overzicht h4 {
    font-size: 1.25rem;
    color: #0891b2;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.filters-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.filters-card:hover {
    border-color: #0891b2;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.15);
}

.filters-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.filters-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.filters-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.filters-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.filters-footer a {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
}

.filters-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor filters sectie */
@media (max-width: 768px) {
    .filters-section {
        padding: 1.5rem;
    }
    
    .filters-section h3 {
        font-size: 1.5rem;
    }
    
    .filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filters-card {
        padding: 1rem 0.75rem;
    }
    
    .filters-icon {
        font-size: 1.75rem;
    }
    
    .filters-naam {
        font-size: 0.85rem;
    }
    
    .filters-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .filters-grid {
        grid-template-columns: 1fr;
    }
}

/* Bodembedekking Sectie */
.bodem-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #f59e0b;
}

.bodem-section h3 {
    font-size: 1.75rem;
    color: #f59e0b;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.bodem-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.bodem-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.bodem-section a {
    color: #f59e0b;
    font-weight: 600;
    text-decoration: none;
}

.bodem-section a:hover {
    text-decoration: underline;
}

/* Bodembedekking Overzicht Grid */
.bodem-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #fef3c7;
}

.bodem-overzicht h4 {
    font-size: 1.25rem;
    color: #f59e0b;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.bodem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.bodem-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.bodem-card:hover {
    border-color: #f59e0b;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.15);
}

.bodem-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.bodem-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.bodem-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.bodem-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.bodem-footer a {
    color: #f59e0b;
    font-weight: 600;
    text-decoration: none;
}

.bodem-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor bodem sectie */
@media (max-width: 768px) {
    .bodem-section {
        padding: 1.5rem;
    }
    
    .bodem-section h3 {
        font-size: 1.5rem;
    }
    
    .bodem-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bodem-card {
        padding: 1rem 0.75rem;
    }
    
    .bodem-icon {
        font-size: 1.75rem;
    }
    
    .bodem-naam {
        font-size: 0.85rem;
    }
    
    .bodem-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .bodem-grid {
        grid-template-columns: 1fr;
    }
}

/* Decoratie Sectie */
.decoratie-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #0891b2;
}

.decoratie-section h3 {
    font-size: 1.75rem;
    color: #0891b2;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.decoratie-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.decoratie-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.decoratie-section a {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
}

.decoratie-section a:hover {
    text-decoration: underline;
}

/* Decoratie Overzicht Grid */
.decoratie-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e0f7fa;
}

.decoratie-overzicht h4 {
    font-size: 1.25rem;
    color: #0891b2;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.decoratie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.decoratie-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.decoratie-card:hover {
    border-color: #0891b2;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.15);
}

.decoratie-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.decoratie-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.decoratie-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.decoratie-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.decoratie-footer a {
    color: #0891b2;
    font-weight: 600;
    text-decoration: none;
}

.decoratie-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor decoratie sectie */
@media (max-width: 768px) {
    .decoratie-section {
        padding: 1.5rem;
    }
    
    .decoratie-section h3 {
        font-size: 1.5rem;
    }
    
    .decoratie-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .decoratie-card {
        padding: 1rem 0.75rem;
    }
    
    .decoratie-icon {
        font-size: 1.75rem;
    }
    
    .decoratie-naam {
        font-size: 0.85rem;
    }
    
    .decoratie-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .decoratie-grid {
        grid-template-columns: 1fr;
    }
}

/* Osmose Sectie */
.osmose-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #0284c7;
}

.osmose-section h3 {
    font-size: 1.75rem;
    color: #0284c7;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.osmose-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.osmose-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.osmose-section a {
    color: #0284c7;
    font-weight: 600;
    text-decoration: none;
}

.osmose-section a:hover {
    text-decoration: underline;
}

/* Osmose Overzicht Grid */
.osmose-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e0f2fe;
}

.osmose-overzicht h4 {
    font-size: 1.25rem;
    color: #0284c7;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.osmose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.osmose-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.osmose-card:hover {
    border-color: #0284c7;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.15);
}

.osmose-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.osmose-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.osmose-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.osmose-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.osmose-footer a {
    color: #0284c7;
    font-weight: 600;
    text-decoration: none;
}

.osmose-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor osmose sectie */
@media (max-width: 768px) {
    .osmose-section {
        padding: 1.5rem;
    }
    
    .osmose-section h3 {
        font-size: 1.5rem;
    }
    
    .osmose-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .osmose-card {
        padding: 1rem 0.75rem;
    }
    
    .osmose-icon {
        font-size: 1.75rem;
    }
    
    .osmose-naam {
        font-size: 0.85rem;
    }
    
    .osmose-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .osmose-grid {
        grid-template-columns: 1fr;
    }
}

/* Terrarium Sectie */
.terrarium-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #84cc16;
}

.terrarium-section h3 {
    font-size: 1.75rem;
    color: #84cc16;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.terrarium-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.terrarium-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.terrarium-section a {
    color: #65a30d;
    font-weight: 600;
    text-decoration: none;
}

.terrarium-section a:hover {
    text-decoration: underline;
}

/* Terrarium Overzicht Grid */
.terrarium-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #ecfccb;
}

.terrarium-overzicht h4 {
    font-size: 1.25rem;
    color: #84cc16;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.terrarium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.terrarium-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.terrarium-card:hover {
    border-color: #84cc16;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(132, 204, 22, 0.15);
}

.terrarium-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.terrarium-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.terrarium-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.terrarium-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.terrarium-footer a {
    color: #65a30d;
    font-weight: 600;
    text-decoration: none;
}

.terrarium-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor terrarium sectie */
@media (max-width: 768px) {
    .terrarium-section {
        padding: 1.5rem;
    }
    
    .terrarium-section h3 {
        font-size: 1.5rem;
    }
    
    .terrarium-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .terrarium-card {
        padding: 1rem 0.75rem;
    }
    
    .terrarium-icon {
        font-size: 1.75rem;
    }
    
    .terrarium-naam {
        font-size: 0.85rem;
    }
    
    .terrarium-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .terrarium-grid {
        grid-template-columns: 1fr;
    }
}

/* Verlichting Sectie */
.verlichting-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #eab308;
}

.verlichting-section h3 {
    font-size: 1.75rem;
    color: #eab308;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.verlichting-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.verlichting-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.verlichting-section a {
    color: #ca8a04;
    font-weight: 600;
    text-decoration: none;
}

.verlichting-section a:hover {
    text-decoration: underline;
}

/* Verlichting Overzicht Grid */
.verlichting-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #fef9c3;
}

.verlichting-overzicht h4 {
    font-size: 1.25rem;
    color: #eab308;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.verlichting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.verlichting-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.verlichting-card:hover {
    border-color: #eab308;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(234, 179, 8, 0.15);
}

.verlichting-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.verlichting-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.verlichting-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.verlichting-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.verlichting-footer a {
    color: #ca8a04;
    font-weight: 600;
    text-decoration: none;
}

.verlichting-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor verlichting sectie */
@media (max-width: 768px) {
    .verlichting-section {
        padding: 1.5rem;
    }
    
    .verlichting-section h3 {
        font-size: 1.5rem;
    }
    
    .verlichting-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .verlichting-card {
        padding: 1rem 0.75rem;
    }
    
    .verlichting-icon {
        font-size: 1.75rem;
    }
    
    .verlichting-naam {
        font-size: 0.85rem;
    }
    
    .verlichting-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .verlichting-grid {
        grid-template-columns: 1fr;
    }
}

/* Verwarming Sectie */
.verwarming-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #ef4444;
}

.verwarming-section h3 {
    font-size: 1.75rem;
    color: #ef4444;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.verwarming-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.verwarming-section p:last-of-type {
    margin-bottom: 1.5rem;
}

.verwarming-section a {
    color: #dc2626;
    font-weight: 600;
    text-decoration: none;
}

.verwarming-section a:hover {
    text-decoration: underline;
}

/* Verwarming Overzicht Grid */
.verwarming-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #fecaca;
}

.verwarming-overzicht h4 {
    font-size: 1.25rem;
    color: #ef4444;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.verwarming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.verwarming-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.verwarming-card:hover {
    border-color: #ef4444;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.15);
}

.verwarming-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.verwarming-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.verwarming-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.verwarming-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.verwarming-footer a {
    color: #dc2626;
    font-weight: 600;
    text-decoration: none;
}

.verwarming-footer a:hover {
    text-decoration: underline;
}

/* Responsive voor verwarming sectie */
@media (max-width: 768px) {
    .verwarming-section {
        padding: 1.5rem;
    }
    
    .verwarming-section h3 {
        font-size: 1.5rem;
    }
    
    .verwarming-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .verwarming-card {
        padding: 1rem 0.75rem;
    }
    
    .verwarming-icon {
        font-size: 1.75rem;
    }
    
    .verwarming-naam {
        font-size: 0.85rem;
    }
    
    .verwarming-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .verwarming-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   VISVOER SECTIE (Blue theme)
   ============================================ */
.visvoer-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #2563eb;
}

.visvoer-section h3 {
    font-size: 1.75rem;
    color: #2563eb;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.visvoer-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.visvoer-section a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.visvoer-section a:hover {
    text-decoration: underline;
}

.visvoer-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #dbeafe;
}

.visvoer-overzicht h4 {
    font-size: 1.25rem;
    color: #2563eb;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.visvoer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.visvoer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.visvoer-card:hover {
    border-color: #2563eb;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
}

.visvoer-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.visvoer-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.visvoer-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.visvoer-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.visvoer-footer a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.visvoer-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .visvoer-section { padding: 1.5rem; }
    .visvoer-section h3 { font-size: 1.5rem; }
    .visvoer-grid { grid-template-columns: repeat(2, 1fr); }
    .visvoer-card { padding: 1rem 0.75rem; }
    .visvoer-icon { font-size: 1.75rem; }
    .visvoer-naam { font-size: 0.85rem; }
    .visvoer-desc { font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .visvoer-grid { grid-template-columns: 1fr; }
}

/* ============================================
   GARNALENVOER SECTIE (Coral/pink theme)
   ============================================ */
.garnalenvoer-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #f43f5e;
}

.garnalenvoer-section h3 {
    font-size: 1.75rem;
    color: #f43f5e;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.garnalenvoer-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.garnalenvoer-section a {
    color: #e11d48;
    font-weight: 600;
    text-decoration: none;
}

.garnalenvoer-section a:hover {
    text-decoration: underline;
}

.garnalenvoer-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #fecdd3;
}

.garnalenvoer-overzicht h4 {
    font-size: 1.25rem;
    color: #f43f5e;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.garnalenvoer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.garnalenvoer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #fff1f2 0%, #fecdd3 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.garnalenvoer-card:hover {
    border-color: #f43f5e;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(244, 63, 94, 0.15);
}

.garnalenvoer-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.garnalenvoer-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.garnalenvoer-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.garnalenvoer-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.garnalenvoer-footer a {
    color: #e11d48;
    font-weight: 600;
    text-decoration: none;
}

.garnalenvoer-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .garnalenvoer-section { padding: 1.5rem; }
    .garnalenvoer-section h3 { font-size: 1.5rem; }
    .garnalenvoer-grid { grid-template-columns: repeat(2, 1fr); }
    .garnalenvoer-card { padding: 1rem 0.75rem; }
    .garnalenvoer-icon { font-size: 1.75rem; }
    .garnalenvoer-naam { font-size: 0.85rem; }
    .garnalenvoer-desc { font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .garnalenvoer-grid { grid-template-columns: 1fr; }
}

/* ============================================
   KORAALVOEDING SECTIE (Ocean/turquoise theme)
   ============================================ */
.koraalvoeding-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #0891b2;
}

.koraalvoeding-section h3 {
    font-size: 1.75rem;
    color: #0891b2;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.koraalvoeding-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.koraalvoeding-section a {
    color: #0e7490;
    font-weight: 600;
    text-decoration: none;
}

.koraalvoeding-section a:hover {
    text-decoration: underline;
}

.koraalvoeding-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #a5f3fc;
}

.koraalvoeding-overzicht h4 {
    font-size: 1.25rem;
    color: #0891b2;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.koraalvoeding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.koraalvoeding-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.koraalvoeding-card:hover {
    border-color: #0891b2;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.15);
}

.koraalvoeding-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.koraalvoeding-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.koraalvoeding-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.koraalvoeding-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.koraalvoeding-footer a {
    color: #0e7490;
    font-weight: 600;
    text-decoration: none;
}

.koraalvoeding-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .koraalvoeding-section { padding: 1.5rem; }
    .koraalvoeding-section h3 { font-size: 1.5rem; }
    .koraalvoeding-grid { grid-template-columns: repeat(2, 1fr); }
    .koraalvoeding-card { padding: 1rem 0.75rem; }
    .koraalvoeding-icon { font-size: 1.75rem; }
    .koraalvoeding-naam { font-size: 0.85rem; }
    .koraalvoeding-desc { font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .koraalvoeding-grid { grid-template-columns: 1fr; }
}

/* ============================================
   KUNSTPLANTEN SECTIE (Purple theme)
   ============================================ */
.kunstplanten-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #9333ea;
}

.kunstplanten-section h3 {
    font-size: 1.75rem;
    color: #9333ea;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.kunstplanten-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.kunstplanten-section a {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: none;
}

.kunstplanten-section a:hover {
    text-decoration: underline;
}

.kunstplanten-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e9d5ff;
}

.kunstplanten-overzicht h4 {
    font-size: 1.25rem;
    color: #9333ea;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.kunstplanten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.kunstplanten-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.kunstplanten-card:hover {
    border-color: #9333ea;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(147, 51, 234, 0.15);
}

.kunstplanten-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.kunstplanten-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.kunstplanten-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.kunstplanten-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.kunstplanten-footer a {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: none;
}

.kunstplanten-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .kunstplanten-section { padding: 1.5rem; }
    .kunstplanten-section h3 { font-size: 1.5rem; }
    .kunstplanten-grid { grid-template-columns: repeat(2, 1fr); }
    .kunstplanten-card { padding: 1rem 0.75rem; }
    .kunstplanten-icon { font-size: 1.75rem; }
    .kunstplanten-naam { font-size: 0.85rem; }
    .kunstplanten-desc { font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .kunstplanten-grid { grid-template-columns: 1fr; }
}

/* ============================================
   WATERTESTEN SECTIE (Indigo theme)
   ============================================ */
.watertesten-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #6366f1;
}

.watertesten-section h3 {
    font-size: 1.75rem;
    color: #6366f1;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.watertesten-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.watertesten-section a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
}

.watertesten-section a:hover {
    text-decoration: underline;
}

.watertesten-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #c7d2fe;
}

.watertesten-overzicht h4 {
    font-size: 1.25rem;
    color: #6366f1;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.watertesten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.watertesten-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #eef2ff 0%, #c7d2fe 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.watertesten-card:hover {
    border-color: #6366f1;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15);
}

.watertesten-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.watertesten-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.watertesten-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.watertesten-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.watertesten-footer a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
}

.watertesten-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .watertesten-section { padding: 1.5rem; }
    .watertesten-section h3 { font-size: 1.5rem; }
    .watertesten-grid { grid-template-columns: repeat(2, 1fr); }
    .watertesten-card { padding: 1rem 0.75rem; }
    .watertesten-icon { font-size: 1.75rem; }
    .watertesten-naam { font-size: 0.85rem; }
    .watertesten-desc { font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .watertesten-grid { grid-template-columns: 1fr; }
}

/* ============================================
   CO2 SECTIE (Green theme)
   ============================================ */
.co2-section {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-left: 5px solid #10b981;
}

.co2-section h3 {
    font-size: 1.75rem;
    color: #10b981;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.co2-section p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.co2-section a {
    color: #059669;
    font-weight: 600;
    text-decoration: none;
}

.co2-section a:hover {
    text-decoration: underline;
}

.co2-overzicht {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #d1fae5;
}

.co2-overzicht h4 {
    font-size: 1.25rem;
    color: #10b981;
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.co2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.co2-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.co2-card:hover {
    border-color: #10b981;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
}

.co2-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.co2-naam {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.co2-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

.co2-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}

.co2-footer a {
    color: #059669;
    font-weight: 600;
    text-decoration: none;
}

.co2-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .co2-section { padding: 1.5rem; }
    .co2-section h3 { font-size: 1.5rem; }
    .co2-grid { grid-template-columns: repeat(2, 1fr); }
    .co2-card { padding: 1rem 0.75rem; }
    .co2-icon { font-size: 1.75rem; }
    .co2-naam { font-size: 0.85rem; }
    .co2-desc { font-size: 0.75rem; }
}

@media (max-width: 400px) {
    .co2-grid { grid-template-columns: 1fr; }
}