/* ============================================================
   WILLEMBAAN.NL - VERFIJND  SJABLOON (16 FEB 2026)
   ============================================================ */

/* 1. BASIS & ACHTERGROND */
body {
    font: 12px Verdana, Geneva, Arial, helvetica, sans-serif;
    line-height: 18px;
    margin: 0;
    padding: 0;
	
	/* de dwingende achterfrond */
    background-image: url("roswitbck.gif") !important;
    background-repeat: repeat !important; 
    background-attachment: fixed !important;
    background-size: 100% 100%;
    background-color: #FFF5EE !important;
}

#container {
    max-width: 600px !important; 
    margin: 0 auto !important;
    background-color: #FFF5E6 !important; 
    min-height: 100vh;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    padding-bottom: 20px;
	/* noodzakelijk om de margin-top echt te laten werken */
}

/* SMARTPHONE INSTELLINGEN */
@media screen and (max-width: 600px) {
    #container {
        width: 100% !important;
        margin: 0 !important; /* Marges weg op de telefoon */
        box-shadow: none !important;
    }
    
    .headname {
        max-width: 70% !important;
        left: 100px !important;
    }

    .zoek-veld-groep {
        flex-direction: column; /* Zoekvakken onder elkaar op smalle schermen */
        gap: 8px !important;
    }
}


/* 2. BANNER - Naamblok gecentreerd */
#header { 
    height: 125px !important; 
    position: relative !important;
    background-color: #fed3a7 !important;
    border-bottom: 2px solid #DD7631 !important;
    overflow: visible !important;
}

.luther-roos {
    position: absolute !important;
    top: 8px !important; 
    left: 5px !important;
    z-index: 10 !important;
}

.headname {
    position: absolute !important;
    /* Verticaal zakken voor gelijke boven/onder ruimte */
    top: 30px !important; 
    left: 120px !important;
    z-index: 20 !important;
    max-width: 75% !important;
    height: auto !important;
}

.banner-lijn-roos {
    position: absolute !important;
    bottom: 30px !important; 
    width: 100% !important;
    border-top: 1px solid #DD7631 !important;
    z-index: 5 !important;
}

/* 3. NAVIGATIE - Verlaagd blok */
.hoofd-navigatie {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    /* Extra ruimte boven het blok voor verbinding met achtergrond */
    margin: 25px 0 !important; 
}

.nav-ellips {
    color: #D2691E !important; 
    text-decoration: none !important;
    font-weight: 900 !important; 
    font-size: 1.1em !important;
    padding: 8px 20px !important;
    border: 1px solid #DD7631 !important;
    border-radius: 50px !important;
    transition: all 0.2s ease;
}

.nav-ellips:hover {
    color: #808080 !important;
    border-color: #808080 !important;
}

/* 4. ZOEKSECTIE - Kleiner en met grotere tussenruimten */
.zoek-sectie-lijn { 
    display: flex !important; 
    justify-content: center !important; 
    margin: 20px 0 !important; 
}

.zoek-veld-groep { 
    display: flex !important; 
    /* Drie maal grotere tussenruimte */
    gap: 15px !important; 
    width: 85% !important; 
}

.zoek-veld-item {
    border: 1px solid #DD7631 !important;
    background-color: transparent !important;
    padding: 4px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
}

/* Typ-veld meer dan de helft kleiner */
.zoek-input { 
    flex: 1.5 !important; 
    color: #D2691E !important;
}

/* Zoek en Wis iets groter dan de helft kleiner */
.zoek-knop { 
    flex: 0.8 !important; 
    color: #D2691E !important;
    cursor: pointer;
}

/* Wis is nu geen knop-uiterlijk meer, kleur gelijk aan placeholder */
.wis-knop { 
    flex: 0.8 !important; 
    color: #a9a9a9 !important; /* Grijstint van Typ Zoekterm */
    cursor: pointer;
    border: 1px solid #DD7631 !important;
}

/* 5. CONTENT AREA */
.vrije-ruimte { 
    min-height: 120px; 
    padding: 0 30px; 
    margin-bottom: 40px;
	 /* Zorgt dat uw bestaande tekstkleur goed uitkomt op de nieuwe tint */
    color: #222 !important; 
    font-family: Verdana, Geneva, Arial, sans-serif !important;
}

/* 6. SCROLLBOX - Pijltje gecorrigeerd */
.scroll-label { 
    text-align: right !important; 
    /* Iets naar links geschoven voor de balk */
    padding-right: 12px !important; 
    margin-bottom: 2px !important; 
}

.scroll-tekst { 
    font-size: 10px; 
    font-weight: bold; 
    color: #DD7631; 
    margin-right: 4px; 
}

.dikke-pijl { color: #DD7631; font-size: 14px; }

.scroll-box { 
    width: 96% !important; 
    margin: 0 auto !important; 
    height: 200px; 
    border: 1px solid #000; 
    overflow-y: scroll; 
    background: #fff; 
}

/* 4. SMARTPHONE OPTIMALISATIE (Onderaan uw bestand plakken) */
@media screen and (max-width: 600px) {
    #container {
        width: 100% !important;
        /* Op de smartphone vervalt de daling en de zij-marges */
        margin: 0 !important; 
        box-shadow: none !important;
    }
}